初步完成静态

houtai/src/router/index.js

@@ -7,7 +7,17 @@ const routes = [
   {
     path: '/message',
     name: 'message',
-    component: () => import('../views/message')
+    component: () => import('../views/message/index.vue')
+  },
+  {
+    path: '/forum',
+    name: 'forum',
+    component: () => import('../views/forum/index.vue')
+  },
+  {
+    path: '/forum_look',
+    name: 'forum_look',
+    component: () => import('../views/forum/look.vue')
   },
   {
     path: '/',
@@ -169,7 +179,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   // 如果是去登录页，不需要验证，直接下一步
-  if (to.name === 'login' || to.name === 'message') next()
+  if (to.name === 'login' || to.name === 'message' || to.name === 'forum' || to.name === 'forum_look') next()
   // 否则要有token值才能下一步，不然就返回登录页
   else {
     const token = localStorage.getItem('CQLJXU_token')

houtai/src/views/forum/index.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="forum">
+    <div class="title">
+      <span>中国人民解放军陆军勤务学院论坛</span>
+      <ul>
+        <li
+          :class="{ active: item.id === tabInd }"
+          v-for="item in tab"
+          :key="item.id"
+          @click="cutTab(item.id)"
+        >
+          {{ item.name }}
+        </li>
+      </ul>
+    </div>
+    <div class="conten">
+      <div class="topImg">
+        <!-- <img src="../../assets/img/banner.png" alt="" /> -->
+      </div>
+      <div class="row rowFi">
+        <div class="row_one">最 新</div>
+        <div class="row_tow">作 者</div>
+        <div class="row_three">回复/查看</div>
+        <div class="row_four">发帖时间</div>
+      </div>
+      <div class="nullTit" v-if="0">暂无数据</div>
+      <div class="row" v-for="i in 5" :key="i" @click="skip">
+        <div class="row_one" :title="123456">
+          准确把握世界军事发展新趋势
+          与时俱进大力推进军事创新准确把握世界军事发展新趋势
+          与时俱进大力推进军事创新准确把握世界军事发展新趋势
+          与时俱进大力推进军事创新
+        </div>
+        <div class="row_tow">小猫爱吃鱼</div>
+        <div class="row_three">24/87</div>
+        <div class="row_four">2022.1.7 15:08:27</div>
+      </div>
+    </div>
+    <!-- 底部 -->
+    <div class="bottom">
+      <!-- 分页 -->
+      <div class="paging">
+        <el-pagination
+          layout="prev, pager, next,jumper"
+          :total="50"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+        >
+        </el-pagination>
+      </div>
+      <div class="rickText">
+        <div class="inputR">
+          <el-select v-model="name1" placeholder="请选择主题分类" style="width:400px">
+            <el-option label="数字史馆" value="1"></el-option>
+            <el-option label="美丽校园" value="2"></el-option>
+            <el-option label="信息典藏" value="3"></el-option>
+          </el-select>
+          <el-input
+            style="margin: 0 20px;"
+            type="text"
+            placeholder="帖子标题字数不能超过30个字。"
+            v-model="text"
+            maxlength="30"
+            show-word-limit
+          >
+          </el-input>
+          <el-input
+            style="width:400px"
+            type="text"
+            placeholder="请输入姓名"
+            v-model="name2"
+            maxlength="5"
+            show-word-limit
+          >
+          </el-input>
+        </div>
+        <!-- 富文本 -->
+        <div id="div1" style="z-index: 1"></div>
+        <!-- 按钮 -->
+        <div class="txtBtn">
+          <el-button type="primary" style="width:120px">发 表</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+import E from 'wangeditor'
+export default {
+  name: 'forum',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      tabInd: 1,
+      tab: [
+        { id: 1, name: '数字史馆' },
+        { id: 2, name: '美丽校园' },
+        { id: 3, name: '信息典藏' }
+      ],
+      formData: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      name1: '1',
+      text: '',
+      name2: ''
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击文章跳转
+    skip () {
+      this.$router.push('forum_look')
+    },
+    cutTab (id) {
+      this.tabInd = id
+    },
+    // 分页器方法
+    currentChange (val) {
+      console.log('当前页改变了', val)
+      // this.formData.pageNum = val;
+      // this.getList(this.formData);
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E('#div1')
+    // 配置字体
+    this.editor.config.fontNames = [
+      '黑体',
+      '仿宋',
+      '楷体',
+      '标楷体',
+      '华文仿宋',
+      '华文楷体',
+      '宋体',
+      '微软雅黑',
+      'Arial',
+      'Tahoma',
+      'Verdana',
+      'Times New Roman'
+    ]
+    this.editor.config.uploadImgShowBase64 = true // 图片地址
+    this.editor.config.showLinkVideo = false
+    this.editor.create()
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+/* 分页 */
+/deep/.el-pagination {
+  display: flex;
+  align-items: center;
+}
+/deep/.el-pager li {
+  color: #b9412e;
+  font-weight: 400;
+  min-width: 24px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin: 0 8px;
+  border: 1px solid #b9412e;
+  background-color: transparent;
+  border-radius: 50%;
+}
+/deep/.el-pager li:hover {
+  color: #b9412e;
+}
+/deep/.el-pager li.active {
+  width: 30px;
+  height: 30px;
+  background-color: #b9412e;
+  border-radius: 50%;
+  color: #fff;
+}
+/deep/.el-pager li.active + li {
+  border: 1px solid #c7c7c7;
+}
+/deep/.el-pagination button:hover {
+  color: #b9412e;
+}
+/deep/.el-pagination .btn-next {
+  background-color: transparent;
+  color: #b9412e;
+}
+/deep/.el-pagination .btn-prev {
+  background-color: transparent;
+  color: #b9412e;
+}
+/deep/.el-pager li.active + li {
+  border: 1px solid #b9412e;
+}
+/deep/.el-pagination button:disabled {
+  color: #fff9ec;
+  background-color: transparent;
+}
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #b9412e;
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #fff9ec;
+}
+.forum {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1200px;
+  height: 100vh;
+  min-height: 800px;
+  overflow-y: auto;
+  .title {
+    position: relative;
+    color: #f3eabd;
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background-color: #bd1b1b;
+    & > span {
+      font-weight: 700;
+      padding-left: 40px;
+      font-size: 26px;
+      margin-right: 100px;
+    }
+    & > ul {
+      height: 60px;
+      display: flex;
+      & > li {
+        margin-right: 30px;
+        cursor: pointer;
+        letter-spacing: 2px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 150px;
+        font-size: 22px;
+        text-align: center;
+      }
+      .active {
+        border-bottom: 5px solid #f3eabd;
+      }
+    }
+    // &::after {
+    //   content: "";
+    //   position: absolute;
+    //   width: 100%;
+    //   height: 1px;
+    //   bottom: -1px;
+    //   left: 0;
+    //   display: block;
+    //   background-color: #bd1b1b;
+    // }
+  }
+  .topImg {
+    margin-top: -10px;
+    width: 1200px;
+    height: 225px;
+    background: url("../../assets/img/banner.png");
+    background-size: 100% 100%;
+    // & > img {
+    //   width: 100%;
+    //   height: 100%;
+    // }
+  }
+  .conten {
+    color: #5f5f5f;
+    background-color: #fff9ec;
+    .row {
+      cursor: pointer;
+      margin: 0 24px;
+      border-bottom: 1px solid #ccc;
+      font-size: 16px;
+      display: flex;
+      & > div {
+        height: 60px;
+        line-height: 60px;
+        margin: 0 40px;
+      }
+      .row_one {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-left: 0;
+        flex: 1;
+      }
+      .row_tow {
+        width: 120px;
+      }
+      .row_three {
+        width: 100px;
+      }
+      .row_four {
+        margin-right: 0;
+        width: 150px;
+      }
+    }
+    .rowFi {
+      font-weight: 600;
+      border-bottom: none;
+      font-size: 22px;
+    }
+    .nullTit{
+      font-size: 30px;
+      color: #b9412e;
+      text-align: center;
+    }
+  }
+  .bottom {
+    padding: 0 20px 20px 20px;
+    background-color: #fff9ec;
+    .paging {
+      /deep/.el-input__inner {
+        color: #b9412e;
+        width: 30px;
+        height: 30px !important;
+        background-color: transparent;
+        border-color: #b9412e;
+        border-radius: 50%;
+      }
+      /deep/.el-pagination__jump {
+        color: #b9412e;
+      }
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .rickText {
+      width: 100%;
+      background-color: #fffcf6;
+      padding: 20px;
+      .inputR{
+        display: flex;
+        margin-bottom: 20px;
+      }
+      .txtBtn{
+        margin-top: 20px;
+      }
+    }
+  }
+}
+</style>

houtai/src/views/message/index.vue

@@ -60,7 +60,7 @@
 // 例如：import 《组件名称》 from '《组件路径》';
 
 export default {
-  // import引入的组件需要注入到对象中才能使用
+  name: 'message',
   components: {},
   data () {
     // 这里存放数据

web/src/views/tab3/index.vue

@@ -416,6 +416,12 @@ export default {
       left: 50%;
       bottom: 0;
       transform: translateX(-50%);
+      /deep/.el-input__inner {
+        width: 30px;
+        height: 30px !important;
+        background-color: transparent;
+        border-radius: 50%;
+      }
     }
     .listTxt {
       font-size: 18px;

web/src/views/tab4/tab4-2.vue

@@ -274,6 +274,12 @@ export default {
     left: 50%;
     bottom: 20px;
     transform: translateX(-50%);
+    /deep/.el-input__inner {
+      width: 30px;
+      height: 30px !important;
+      background-color: transparent;
+      border-radius: 50%;
+    }
   }
   .imgBigShow {
     padding: 3px 5px;

web/src/views/tab4/tab4-4.vue

@@ -246,6 +246,12 @@ export default {
     left: 50%;
     bottom: 20px;
     transform: translateX(-50%);
+    /deep/.el-input__inner {
+      width: 30px;
+      height: 30px !important;
+      background-color: transparent;
+      border-radius: 50%;
+    }
   }
   .details {
     background-color: #fff;