初步完成静态页面

web/package-lock.json

@@ -17,7 +17,8 @@
         "v-viewer": "^1.6.4",
         "vue": "^2.6.11",
         "vue-awesome-swiper": "^4.1.1",
-        "vue-router": "^3.2.0"
+        "vue-router": "^3.2.0",
+        "wangeditor": "^4.7.12"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -1579,7 +1580,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
       "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1587,6 +1587,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.17.2",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.2.tgz",
+      "integrity": "sha512-NcKtr2epxfIrNM4VOmPKO46TvDMCBhgi2CrSHaEarrz+Plk2K5r9QemmOFTGpZaoKnWoGH5MO+CzeRsih/Fcgg==",
+      "dependencies": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
@@ -4816,6 +4828,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/core-js-pure": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.21.1.tgz",
+      "integrity": "sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==",
+      "hasInstallScript": true
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -11444,8 +11462,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -13963,6 +13980,21 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/wangeditor": {
+      "version": "4.7.12",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.12.tgz",
+      "integrity": "sha512-5KOIpQ0+idKvDTkjZOp7RHYXA97FyJ9mjwy+zQUdMUCqZItlEXzvVOYtOlHkJr/HcbwgIz/7f/trGFggZK5X4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/wangeditor/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -16111,11 +16143,19 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
       "integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.17.2",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.2.tgz",
+      "integrity": "sha512-NcKtr2epxfIrNM4VOmPKO46TvDMCBhgi2CrSHaEarrz+Plk2K5r9QemmOFTGpZaoKnWoGH5MO+CzeRsih/Fcgg==",
+      "requires": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
@@ -18862,6 +18902,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.21.1.tgz",
+      "integrity": "sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -24368,8 +24413,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -26491,6 +26535,23 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "wangeditor": {
+      "version": "4.7.12",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.12.tgz",
+      "integrity": "sha512-5KOIpQ0+idKvDTkjZOp7RHYXA97FyJ9mjwy+zQUdMUCqZItlEXzvVOYtOlHkJr/HcbwgIz/7f/trGFggZK5X4g==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

web/package.json

@@ -19,7 +19,8 @@
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "wangeditor": "^4.7.12"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

web/src/assets/css/base.css

@@ -1,27 +1,34 @@
-*{
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
+
 ul li {
   list-style: none;
 }
-.el-input__inner{
+
+.el-input__inner {
   border: 1px solid #C7C7C7;
 }
-.el-input.is-active .el-input__inner, .el-input__inner:focus{
+
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
   border-color: #BE1220;
 }
-.el-icon-search{
+
+.el-icon-search {
   font-weight: 700;
   color: #BE1220;
 }
+
 /* 分页 */
-.el-pagination{
+.el-pagination {
   display: flex;
   align-items: center;
 }
-.el-pager li{
+
+.el-pager li {
   font-weight: 400;
   min-width: 24px;
   width: 28px;
@@ -32,61 +39,154 @@ ul li {
   color: #BE1220;
   background-color: transparent;
 }
-.el-pager li:hover{
+
+.el-pager li:hover {
   background-color: #BE1220;
   border-radius: 50%;
   color: #fff;
 }
-.el-pager li.active{
+
+.el-pager li.active {
   background-color: #BE1220;
   border-radius: 50%;
   color: #fff;
 }
-.el-pager li.active+li{
+
+.el-pager li.active+li {
   /* border: 1px solid #C7C7C7; */
 }
-.el-pagination button:hover{
+
+.el-pagination button:hover {
   color: #BE1220;
 }
-.el-image__preview{
+
+.el-image__preview {
   object-fit: cover;
 }
-.el-image-viewer__img{
+
+.el-image-viewer__img {
   object-fit: cover;
 }
-.el-pagination button:disabled{
+
+.el-pagination button:disabled {
   background-color: transparent;
 }
-.el-pagination .btn-next, .el-pagination .btn-prev{
+
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
   background-color: transparent;
 }
-.el-image-viewer__actions__inner > i {
+
+.el-image-viewer__actions__inner>i {
   display: none;
 }
-.el-image-viewer__actions__inner .el-icon-refresh-left{
+
+.el-image-viewer__actions__inner .el-icon-refresh-left {
   display: block;
 }
-.el-image-viewer__actions__inner .el-icon-refresh-right{
+
+.el-image-viewer__actions__inner .el-icon-refresh-right {
   display: block;
 }
-.el-image-viewer__actions{
+
+.el-image-viewer__actions {
   width: 120px;
 }
-.el-image-viewer__mask{
+
+.el-image-viewer__mask {
   opacity: .7;
 }
-.el-image-viewer__next, .el-image-viewer__prev{
+
+.el-image-viewer__next,
+.el-image-viewer__prev {
   border: 2px solid #fff;
   background-color: transparent;
 }
-.el-image-viewer__close{
+
+.el-image-viewer__close {
   font-size: 30px;
   background-color: transparent;
 }
-.el-image-viewer__actions{
+
+.el-image-viewer__actions {
   border: 2px solid #fff;
   background-color: transparent;
 }
-.el-image-viewer__actions__inner{
+
+.el-image-viewer__actions__inner {
   cursor: pointer;
+}
+
+.w-e-menu {
+  z-index: 2 !important;
+}
+
+.w-e-text-container {
+  z-index: 1 !important;
+}
+
+.w-e-toolbar {
+  z-index: 10 !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(18) {
+  display: none !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(19) {
+  display: none !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(13) {
+  display: none !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(14) {
+  display: none !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(16) {
+  display: none !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(20) {
+  display: none !important;
+}
+
+.w-e-toolbar .w-e-menu:nth-of-type(21) {
+  display: none !important;
+}
+
+.el-select .el-input.is-focus .el-input__inner {
+  border-color: #BE1220;
+}
+
+.el-select .el-input__inner:focus {
+  border-color: #BE1220;
+}
+
+.el-select-dropdown__item.selected {
+  color: #BE1220;
+}
+
+.el-button--primary {
+  background-color: #BE1220;
+  border-color: #BE1220;
+}
+
+.el-button:focus,
+.el-button:hover {
+  color: #BE1220;
+  border-color: #BE1220;
+}
+
+.el-button--primary:focus,
+.el-button--primary:hover {
+  color: #fff;
+  background: #a1232e;
+  border-color: #a1232e;
+}
+
+.el-textarea__inner:focus {
+  border-color: #BE1220;
 }

web/src/router/index.js

@@ -43,6 +43,24 @@ const routes = [
         name: 'tab4',
         meta: { myInd: 4 },
         component: () => import('../views/tab4/index.vue')
+      },
+      {
+        path: 'tab5',
+        name: 'tab5',
+        meta: { myInd: 5 },
+        component: () => import('../views/tab5/index.vue')
+      },
+      {
+        path: 'tab6',
+        name: 'tab6',
+        meta: { myInd: 6 },
+        component: () => import('../views/tab6/index.vue')
+      },
+      {
+        path: 'tab7',
+        name: 'tab7',
+        meta: { myInd: 7 },
+        component: () => import('../views/tab7/index.vue')
       }
     ]
   }

web/src/views/tab2/index.vue

@@ -2,7 +2,7 @@
   <div class="tab2">
     <div class="conten">
       <div class="nullShow" v-if="cut">
-        <i class="el-icon-arrow-left" @click="cut=false"></i>
+        <span class="el-icon-arrow-left" @click="cut = false">返回数字荣誉室</span>
         <img src="../../assets/img/nullShow.png" alt="">
         <p>内容装修中...</p>
       </div>
@@ -64,11 +64,13 @@ export default {
       font-size: 34px;
       color: #B58989;
       /deep/.el-icon-arrow-left{
+        z-index: 999;
+        color: #be1220;
         cursor: pointer;
         position: absolute;
         left: 50px;
         top: 0px;
-        font-size: 50px;
+        font-size: 20px;
       }
     }
     .row {

web/src/views/tab5/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="tab5">
+    <div class="conten" v-show="cut">
+      <div class="row" v-for="i in 20" :key="i" @click="cutInfo">
+        <img src="../../assets/img/demo.png" alt="" />
+        <!-- 右边信息盒子 -->
+        <div class="row_right">
+          <h2>张国荣</h2>
+          <p>训练基地教研室士官教员</p>
+          <div class="pitchOn">
+            <div>查看更多</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 点击出来的详细信息 -->
+    <div class="conten details" v-show="!cut">
+      <div class="det_left">
+        <span class="el-icon-arrow-left" @click="cut = true">返回荣誉榜</span>
+        <img src="../../assets/img/demo.png" alt="" />
+        <h3>张国荣</h3>
+      </div>
+      <div class="det_right">
+        <h1>基本信息</h1>
+        <div class="line">
+          <div></div>
+        </div>
+        <div class="det_row">性别：男</div>
+        <div class="det_row">政治面貌：党员</div>
+        <div class="det_row">任职职位：财政部主任</div>
+        <div class="det_row">任期：2005年10月 - 2009年12月</div>
+        <h1 style="margin-top: 24px;">光辉荣誉</h1>
+        <div class="line">
+          <div></div>
+        </div>
+        <!-- 富文本内容 -->
+        <div class="det_txt">
+          <p v-for="i in 30" :key="i">撒打算</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tab5",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      cut: true,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击显示详情
+    cutInfo() {
+      this.cut = false;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab5 {
+  padding: 100px 125px 20px 200px;
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/img/tab5Bg.png");
+  background-size: 100% 100%;
+  .conten {
+    flex-wrap: wrap;
+    display: flex;
+    padding-right: 75px;
+    width: 100%;
+    .row {
+      display: flex;
+      cursor: pointer;
+      width: 350px;
+      height: 180px;
+      border-radius: 6px;
+      overflow: hidden;
+      background-color: #fbf8f8;
+      margin: 0 35px 35px 0;
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
+      & > img {
+        width: 150px;
+        height: 180px;
+        object-fit: cover;
+      }
+      .row_right {
+        padding: 0 30px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #a17e3a;
+        font-size: 22px;
+        & > p {
+          text-align: center;
+          margin-top: 25px;
+          font-size: 20px;
+        }
+        .pitchOn {
+          margin-top: 25px;
+          position: relative;
+          font-size: 14px;
+          color: #be1220;
+          width: 58px;
+          height: 55px;
+          display: none;
+          background: url("../../assets/img/tab5pitch.png");
+          background-size: 100% 100%;
+          & > div {
+            line-height: 14px;
+            width: 28px;
+            height: 28px;
+            position: absolute;
+            top: 58%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+      &:hover {
+        padding: 5px;
+        background-color: #be1220;
+        & > img {
+          width: 140px;
+          height: 170px;
+        }
+        .row_right {
+          color: #fff;
+          & > P {
+            display: none;
+          }
+          .pitchOn {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  // 详情
+  .details {
+    padding-left: 120px;
+    .det_left {
+      padding-top: 12px;
+      margin-right: 120px;
+      width: 210px;
+      /deep/.el-icon-arrow-left {
+        font-size: 20px;
+        cursor: pointer;
+        color: #be1220;
+        margin-bottom: 30px;
+      }
+      & > img {
+        width: 210px;
+        margin-bottom: 17px;
+      }
+      & > h3 {
+        color: #333333;
+        font-size: 20px;
+        text-align: center;
+      }
+    }
+    .det_right{
+      flex: 1;
+      &>h1{
+        color: #BE1220;
+        font-size: 30px;
+      }
+      .line{
+        position: relative;
+        width: 800px;
+        height: 1px;
+        background-color: #AFAFAF;
+        margin: 16px 0;
+        &>div{
+          position: absolute;
+          left: 0;
+          top: -2px;
+          width: 150px;
+          height: 5px;
+          background-color: #BE1220;
+        }
+      }
+      .det_row{
+        height: 50px;
+        line-height: 50px;
+        font-size: 18px;
+        color: #555555;
+      }
+      .det_txt{
+        padding-right: 20px;
+        width: 820px;
+        height: 350px;
+        overflow-y: auto;
+        color: #555555;
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>

web/src/views/tab6/index.vue

@@ -0,0 +1,59 @@
+<!--  -->
+<template>
+  <div class="tab6">
+    <keep-alive>
+      <component
+        :is="cutCom"
+        @cutComFn="cutComFn"
+        :lookInfo="lookInfo"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./list.vue";
+import Look from "./look.vue";
+export default {
+  name: "tab6",
+  components: { List, Look },
+  data() {
+    // 这里存放数据
+    return {
+      cutCom: "List",
+      lookInfo: {},
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 从List组件点击文章触发
+    cutComFn(item) {
+      // 改变is的值切换动态组件
+      if (item) this.cutCom = "Look";
+      else this.cutCom = "List";
+      this.lookInfo = item;
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab6 {
+  width: 100%;
+  height: 100%;
+}
+</style>

web/src/views/tab6/list.vue

@@ -0,0 +1,426 @@
+<template>
+  <div class="tab6_list">
+    <div class="left">
+      <ul>
+        <li
+          :class="{ active: formData.type === item.type }"
+          v-for="item in listData"
+          :key="item.id"
+          @click="cutTab(item)"
+        >
+          <p v-if="formData.type === item.type">
+            ◆&emsp;{{ item.name }}&emsp;◆
+          </p>
+          <p v-else>{{ item.name }}</p>
+          <span> {{ item.biaoshi }} </span>
+        </li>
+      </ul>
+    </div>
+    <!-- 下部内容 -->
+    <div class="conten">
+      <h1>
+        公告/置顶
+        <div class="con_tit_post" @click="rollBottom">发帖</div>
+      </h1>
+      <div class="con_list">
+        <div class="con_tit">
+          <div class="con_tit_one">标题</div>
+          <div class="con_tit_tow">作者</div>
+          <div class="con_tit_three">回复数</div>
+          <div class="con_tit_four">最后发表</div>
+        </div>
+        <div class="con_tit con_tit2" v-for="i in 5" :key="i" @click="skip(i)">
+          <div class="con_tit_one" title="213">
+            某某某在器械训练中突破自我，我要为他点赞
+          </div>
+          <div class="con_tit_tow" title="213">陈晨</div>
+          <div class="con_tit_three" title="213">232</div>
+          <div class="con_tit_four" title="213">陈晨 2021-07-12</div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <div class="paging">
+        <el-pagination
+          layout="prev,pager,next,jumper"
+          :total="total"
+          :page-size="5"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+      <!-- 底部富文本盒子 -->
+      <div class="rickText">
+        <div class="txtTit">发表新帖</div>
+        <div class="inputR">
+          <el-select
+            v-model="selectType"
+            placeholder="请选择主题分类"
+            style="width: 400px"
+          >
+            <el-option label="点赞箱" value="one"></el-option>
+            <el-option label="战友情" value="tow"></el-option>
+            <el-option label="敢为先" value="three"></el-option>
+          </el-select>
+          <el-input
+            style="margin-left: 20px"
+            type="text"
+            placeholder="标题不能超过30字"
+            v-model="title"
+            maxlength="30"
+            show-word-limit
+          >
+          </el-input>
+          <!-- 上传图片 -->
+          <el-upload
+            accept=".png,.jpg,.jpeg,.gif"
+            title="上传图片"
+            class="upload-demo imgUplod"
+            :action="baseURL + '/web/bbs/upload'"
+            multiple
+            :before-upload="beforethumbUploadImg"
+            :on-success="upload_thumb_successImg"
+          >
+            <i class="w-e-icon-image"></i>
+          </el-upload>
+        </div>
+        <!-- 富文本 -->
+        <div id="div1" style="z-index: 1"></div>
+        <!-- 按钮 -->
+        <div class="txtBtn">
+          <div>
+            <span class="txtBtn_tit">请填写您的姓名</span>
+            <el-input
+              style="width: 300px"
+              type="text"
+              placeholder="请输入姓名"
+              v-model="creatorName"
+              maxlength="8"
+              show-word-limit
+            >
+            </el-input>
+          </div>
+          <el-button type="primary" style="width: 120px" @click="publish"
+            >发 表</el-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import E from "wangeditor";
+import axios from "@/utils/request";
+export default {
+  name: "tab6_list",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 20,
+      listData: [
+        { biaoshi: "/", id: 1, name: "点赞箱", type: "one" },
+        { biaoshi: "/", id: 2, name: "战友情", type: "tow" },
+        { biaoshi: "", id: 3, name: "敢为先", type: "three" },
+      ],
+      formData: {
+        pageNum: 1,
+        pageSize: 5,
+        type: "one",
+      },
+      // 有关富文本
+      selectType: "one",
+      title: "",
+      creatorName: "",
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击上部的发帖滚动到底部
+    rollBottom() {
+      window.scrollTo({ top: 1000, behavior: "smooth" });
+    },
+    // 点击通知父组件切换 动态组件is的值，并且把数据传过去
+    async skip(item) {
+      this.$emit("cutComFn", item);
+    },
+    // 点击发表
+    publish() {},
+    // 切换顶部tab栏
+    cutTab(val) {
+      if (this.formData.type === val.type) return;
+      this.formData.pageNum = 1;
+      this.formData.type = val.type;
+    },
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+    },
+    // 上传图片
+    beforethumbUploadImg(file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5;
+      const typeOk =
+        file.type === "image/png" ||
+        (file.type === "image/jpeg" && !file.name.includes(".jfif")) ||
+        file.type === "image/gif";
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error("图片格式有误！");
+          reject(file);
+        } else if (!sizeOk) {
+          this.$message.error("图片大小超过5M！");
+          reject(file);
+        } else if (file.name.length > 32) {
+          this.$message.error("图片名字不能超过32个字！");
+          reject(file);
+        } else {
+          resolve(file);
+        }
+      });
+    },
+    upload_thumb_successImg(data) {
+      this.$message.success("上传成功");
+      this.editor.txt.append(
+        `<img src="${this.baseURL}${data.data.urlPath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
+      );
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E("#div1");
+    // 配置字体
+    this.editor.config.fontNames = [
+      "黑体",
+      "仿宋",
+      "楷体",
+      "标楷体",
+      "华文仿宋",
+      "华文楷体",
+      "宋体",
+      "微软雅黑",
+      "Arial",
+      "Tahoma",
+      "Verdana",
+      "Times New Roman",
+    ];
+    this.editor.config.showLinkVideo = false;
+    this.editor.create();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {
+    window.scrollTo({ top: 0 });
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab6_list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #3e3e3e;
+  .left {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    background: url("../../assets/img/tab6Tab.png");
+    background-size: 100% 100%;
+    ul {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      li {
+        display: flex;
+        justify-content: center;
+        font-size: 20px;
+        color: #fff;
+        width: 240px;
+        cursor: pointer;
+        &:hover {
+          color: #f2cd83;
+        }
+        & > span {
+          margin-left: 50px;
+          color: #fff !important;
+        }
+        & > p {
+          text-align: center;
+          width: 145px;
+        }
+      }
+      .active {
+        color: #f2cd83;
+      }
+    }
+  }
+  .conten {
+    flex: 1;
+    width: 100%;
+    padding: 20px 300px;
+    background: url("../../assets/img/tabBg.png");
+    background-size: 100% 100%;
+    & > h1 {
+      position: relative;
+      color: #be1220;
+      font-size: 24px;
+      margin-bottom: 35px;
+      .con_tit_post {
+        font-weight: 400;
+        font-size: 22px;
+        text-align: center;
+        line-height: 40px;
+        width: 120px;
+        height: 40px;
+        background-color: #be1220;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        right: 10px;
+        top: 0;
+      }
+    }
+    .con_list {
+      .con_tit {
+        display: flex;
+        font-weight: 700;
+        font-size: 26px;
+        color: #3a3a3a;
+        & > div {
+          padding-right: 20px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .con_tit_one {
+          padding-left: 10px;
+          text-align: left;
+          flex: 1;
+        }
+        .con_tit_tow {
+          width: 150px;
+        }
+        .con_tit_three {
+          width: 150px;
+        }
+        .con_tit_four {
+          text-align: right;
+          padding-right: 50px;
+          width: 300px;
+        }
+      }
+      .con_tit2 {
+        font-weight: 400;
+        & > div {
+          cursor: pointer;
+          height: 70px;
+          line-height: 70px;
+          font-size: 22px;
+          border-bottom: 1px dashed #d5a6a6;
+        }
+        .con_tit_four {
+          padding-right: 10px;
+        }
+      }
+    }
+    .paging {
+      /deep/.el-input__inner {
+        width: 30px;
+        height: 30px !important;
+        background-color: transparent;
+        border-radius: 50%;
+      }
+      margin: 30px 0;
+    }
+    .rickText {
+      width: 100%;
+      background-color: #fcf7f4;
+      padding: 20px;
+      .txtTit {
+        color: #3a3a3a;
+        font-weight: 700;
+        font-size: 20px;
+        margin-bottom: 20px;
+      }
+      .inputR {
+        display: flex;
+        margin-bottom: 20px;
+        position: relative;
+        .imgUplod {
+          /deep/.w-e-icon-image {
+            color: #999;
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+          }
+          /deep/.el-upload-list {
+            display: none !important;
+          }
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          position: absolute;
+          z-index: 9999;
+          top: 61px;
+          right: 0px;
+          width: 40px;
+          height: 40px;
+          &:hover {
+            background-color: #f6f6f6;
+            /deep/.w-e-icon-image {
+              color: black;
+            }
+          }
+        }
+      }
+      .txtBtn {
+        color: #9c9c9c;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px;
+        .txtBtn_tit {
+          margin-right: 15px;
+          position: relative;
+          &::after {
+            content: "*";
+            position: absolute;
+            right: -10px;
+            top: -6px;
+            color: red;
+          }
+        }
+      }
+    }
+  }
+}
+</style>