1

src/router/index.js

@@ -138,6 +138,13 @@ const live = [
         name: 'live_service_list',
         component: () => import('../views/service/list.vue'),
       },
+      // 11-3
+      {
+        path: '/live/service/newslist',
+        meta: { title: '新闻资讯', subSite: true },
+        name: 'live_service_newslist',
+        component: () => import('../views/service/newslist.vue'),
+      },
       {
         path: '/live/liveApply',
         meta: { title: '项目申请', subSite: true },

src/views/service/index.vue

@@ -3,100 +3,148 @@
     <el-row>
       <el-col :span="24" class="main">
         <div class="w_1200">
-          <el-col :span="24" class="one">
-            <el-col :span="12" class="left">
-              <el-col :span="24" class="leftTop">
-                <el-col :span="2" class="image">
-                  <el-image :src="iconImage"></el-image>
-                </el-col>
-                <el-col :span="22" class="txt">
+          <el-col :span="5" class="left comoheight">
+            <el-col :span="24" class="one"> <i class="el-icon-s-unfold"></i>新闻资讯 </el-col>
+            <el-col :span="24" class="two">
+              <p>网上调查</p>
+              <el-image :src="cha"></el-image>
+              <el-form ref="form" :model="form">
+                <el-form-item>
+                  <span slot="label">您是否愿意继续关注本平台 </span>
+                  <el-radio-group v-model="form.resource">
+                    <el-radio label="愿意"></el-radio>
+                    <el-radio label="不愿意"></el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">确认提交</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+          <el-col :span="20" class="right comoheight">
+            <el-col :span="24" class="one comon">
+              <el-col :span="24" class="top">
+                <el-col :span="20" class="topLeft">
+                  <span></span>
                   <span>科技咨讯</span>
-                  <span>C</span>
-                  <span>onsulting</span>
-                  <span>更多</span>
+                </el-col>
+                <el-col :span="4" class="topRight">
+                  <el-link :underline="false" @click="$router.push({ path: '/live/service/newslist', query: { site: 'kjzx' } })">更多</el-link>
                 </el-col>
               </el-col>
-              <el-col :span="24" class="info">
-                <el-col :span="24" v-for="(item, index) in xwzxList" :key="index">
-                  <el-col :span="20">
-                    {{ item.title }}
+              <el-col :span="24" class="list">
+                <el-col :span="24" class="gjlist">
+                  <el-col
+                    :span="24"
+                    class="kjzxList"
+                    v-for="(item, index) in gjkjzxList"
+                    :key="index"
+                    @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'kjzx', id: item.id } })"
+                  >
+                    <el-col :span="19" class="title textOver">
+                      {{ item.title }}
+                    </el-col>
+                    <el-col :span="5" class="date textOver">
+                      {{ item.publish_time }}
+                    </el-col>
                   </el-col>
-                  <el-col :span="4">
-                    {{ item.date }}
+                </el-col>
+                <el-col :span="24" class="kxylist">
+                  <el-col
+                    :span="24"
+                    class="kjzxList"
+                    v-for="(item, index) in kxykjzxList"
+                    :key="index"
+                    @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'kjzx', id: item.id } })"
+                  >
+                    <el-col :span="19" class="title textOver">
+                      {{ item.title }}
+                    </el-col>
+                    <el-col :span="5" class="date textOver">
+                      {{ item.publish_time }}
+                    </el-col>
                   </el-col>
                 </el-col>
               </el-col>
             </el-col>
-            <el-col :span="12" class="right">
-              <el-col :span="24" class="leftTop">
-                <el-col :span="2" class="image">
-                  <el-image :src="iconImage"></el-image>
-                </el-col>
-                <el-col :span="22" class="txt">
+            <el-col :span="24" class="two comon">
+              <el-col :span="24" class="top">
+                <el-col :span="20" class="topLeft">
+                  <span></span>
                   <span>工作动态</span>
-                  <span>D</span>
-                  <span>ynamic</span>
-                  <span>更多</span>
+                </el-col>
+                <el-col :span="4" class="topRight">
+                  <el-link :underline="false" @click="$router.push({ path: '/live/service/newslist', query: { site: 'gzdt' } })">更多</el-link>
                 </el-col>
               </el-col>
-              <el-col :span="24" class="info">
-                <el-col :span="24" v-for="(item, index) in gzdtList" :key="index">
-                  <el-col :span="20">
+              <el-col :span="24" class="list">
+                <el-col
+                  :span="24"
+                  class="gzdtList"
+                  v-for="(item, index) in gzdtList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'gzdt', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
                     {{ item.title }}
                   </el-col>
-                  <el-col :span="4">
-                    {{ item.date }}
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
                   </el-col>
                 </el-col>
               </el-col>
             </el-col>
-          </el-col>
-          <el-col :span="24" class="two">
-            <el-image :src="centerurl"></el-image>
-          </el-col>
-          <el-col :span="24" class="three">
-            <el-col :span="12" class="left">
-              <el-col :span="24" class="leftTop">
-                <el-col :span="2" class="image">
-                  <el-image :src="iconImage"></el-image>
-                </el-col>
-                <el-col :span="22" class="txt">
+            <el-col :span="24" class="three comon">
+              <el-col :span="24" class="top">
+                <el-col :span="20" class="topLeft">
+                  <span></span>
                   <span>通知通告</span>
-                  <span>N</span>
-                  <span>otice</span>
-                  <span>更多</span>
+                </el-col>
+                <el-col :span="4" class="topRight">
+                  <el-link :underline="false" @click="$router.push({ path: '/live/service/newslist', query: { site: 'tztg' } })">更多</el-link>
                 </el-col>
               </el-col>
-              <el-col :span="24" class="info">
-                <el-col :span="24" v-for="(item, index) in tztgList" :key="index">
-                  <el-col :span="20">
+              <el-col :span="24" class="list">
+                <el-col
+                  :span="24"
+                  class="tztgList"
+                  v-for="(item, index) in tztgList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'tztg', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
                     {{ item.title }}
                   </el-col>
-                  <el-col :span="4">
-                    {{ item.date }}
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
                   </el-col>
                 </el-col>
               </el-col>
             </el-col>
-            <el-col :span="12" class="right">
-              <el-col :span="24" class="leftTop">
-                <el-col :span="2" class="image">
-                  <el-image :src="iconImage"></el-image>
-                </el-col>
-                <el-col :span="22" class="txt">
+            <el-col :span="24" class="four comon">
+              <el-col :span="24" class="top">
+                <el-col :span="20" class="topLeft">
+                  <span></span>
                   <span>技术前沿</span>
-                  <span>F</span>
-                  <span>ront</span>
-                  <span>更多</span>
+                </el-col>
+                <el-col :span="4" class="topRight">
+                  <el-link :underline="false" @click="$router.push({ path: '/live/service/newslist', query: { site: 'jsqy' } })">更多</el-link>
                 </el-col>
               </el-col>
-              <el-col :span="24" class="info">
-                <el-col :span="24" v-for="(item, index) in jsqyList" :key="index">
-                  <el-col :span="20">
+              <el-col :span="24" class="list">
+                <el-col
+                  :span="24"
+                  class="jsqyList"
+                  v-for="(item, index) in jsqyList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'jsqy', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
                     {{ item.title }}
                   </el-col>
-                  <el-col :span="4">
-                    {{ item.date }}
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
                   </el-col>
                 </el-col>
               </el-col>
@@ -104,12 +152,16 @@
           </el-col>
         </div>
       </el-col>
+      <el-backtop> </el-backtop>
     </el-row>
   </div>
 </template>
 
 <script>
+const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: journcolumn } = createNamespacedHelpers('journcolumn');
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -119,41 +171,78 @@ export default {
   components: {},
   data: function() {
     return {
-      // 中间图片
-      centerurl: require('@a/dynamic8.png'),
-      iconImage: require('@/assets/live/square_big.png'),
-      // 新闻资讯
-      xwzxList: [
-        {
-          title: '测试标题',
-          date: '2020-10-10',
-        },
-      ],
+      // 网上调查
+      cha: require('@a/cha.png'),
+      form: {},
+      // 科技咨讯
+      // 国家
+      gjkjzxList: [],
+      // 科学院
+      kxykjzxList: [],
       // 工作动态
-      gzdtList: [
-        {
-          title: '测试标题',
-          date: '2020-10-10',
-        },
-      ],
+      gzdtList: [],
       // 通知通告
-      tztgList: [
-        {
-          title: '测试标题',
-          date: '2020-10-10',
-        },
-      ],
+      tztgList: [],
       // 技术前沿
-      jsqyList: [
-        {
-          title: '测试标题',
-          date: '2020-10-10',
-        },
-      ],
+      jsqyList: [],
+      // 栏目
+      column: [],
     };
   },
-  created() {},
-  methods: {},
+  async created() {
+    await this.searchcol();
+    await this.search();
+  },
+  methods: {
+    ...journcolumn({ journcolumnQuery: 'query' }),
+    ...journnews(['query', 'create', 'update', 'delete']),
+    // 查询栏目
+    async searchcol() {
+      let res = await this.journcolumnQuery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `column`, res.data);
+      }
+    },
+    // 查询列表
+    async search() {
+      let one = this.column.find(i => i.site == 'kjzx');
+      if (one) {
+        let res = await this.query({ column_id: one.id });
+        if (this.$checkRes(res)) {
+          let gjkjzxList = res.data.filter(i => i.type == '国家');
+          if (gjkjzxList) this.$set(this, `gjkjzxList`, _.orderBy(gjkjzxList.slice(0, 6), ['publish_time'], ['desc']));
+          let kxykjzxList = res.data.filter(i => i.type == '科学院');
+          if (kxykjzxList) this.$set(this, `kxykjzxList`, _.orderBy(gjkjzxList.slice(0, 6), ['publish_time'], ['desc']));
+        }
+      }
+      let two = this.column.find(i => i.site == 'gzdt');
+      if (two) {
+        let res = await this.query({ limit: 6, column_id: two.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `${two.site}List`, _.orderBy(res.data, ['publish_time'], ['desc']));
+        }
+      }
+      let three = this.column.find(i => i.site == 'tztg');
+      if (three) {
+        let res = await this.query({ limit: 6, column_id: three.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `${three.site}List`, _.orderBy(res.data, ['publish_time'], ['desc']));
+        }
+      }
+      let four = this.column.find(i => i.site == 'jsqy');
+      if (four) {
+        let res = await this.query({ limit: 6, column_id: four.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `${four.site}List`, _.orderBy(res.data, ['publish_time'], ['desc']));
+        }
+      }
+    },
+    // 网上调查提交
+    onSubmit() {
+      let data = this.form;
+      console.log(data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -162,107 +251,181 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
 .main {
   margin: 15px 0;
-  .one {
-    margin: 0 0 10px 0;
-    height: 500px;
-    .left {
-      width: 49%;
-      box-shadow: 0 0 5px #409eff;
-      border-radius: 20px;
-      padding: 15px;
-      margin: 0 20px 0 0;
-      .info {
-        height: 420px;
-        border: 1px solid red;
-        overflow: hidden;
-      }
+  .left {
+    min-height: 1680px;
+    margin: 0 15px 0 0;
+    box-shadow: 0 0 5px #409eff;
+    .one {
+      height: 60px;
+      line-height: 60px;
+      background-color: #409eff;
+      color: #fff;
+      font-size: 25px;
+      font-weight: 600;
+      letter-spacing: 2px;
+      text-align: center;
     }
-    .right {
-      width: 49%;
-      border-radius: 20px;
-      padding: 15px;
-      box-shadow: 0 0 5px #409eff;
-      .info {
-        height: 420px;
-        border: 1px solid red;
-        overflow: hidden;
+    .two {
+      text-align: center;
+      p {
+        width: 100%;
+        height: 59px;
+        line-height: 60px;
+        color: #666;
+        border-bottom: 1px dashed #666;
+        font-size: 25px;
+        text-align: center;
+        font-weight: 600;
+        letter-spacing: 2px;
+      }
+      .el-image {
+        width: 150px;
+        height: 100px;
+        margin: 30px 0;
       }
     }
   }
-  .two {
-    margin: 0 0 10px 0;
-    .el-image {
-      width: 100%;
-      height: 130px;
-      overflow: hidden;
+  .right {
+    width: 935px;
+    min-height: 500px;
+    box-shadow: 0 0 5px #409eff;
+    .one {
+      .kjzxList {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+      .kjzxList:hover {
+        cursor: pointer;
+        .title {
+          color: #409eff;
+        }
+      }
+      .gjlist {
+        border-bottom: 2px solid #000;
+        padding: 0 0 20px 0;
+      }
+      .kxylist {
+        margin: 10px 0 0 0;
+      }
     }
-  }
-  .three {
-    height: 500px;
-    .left {
-      width: 49%;
-      box-shadow: 0 0 5px #409eff;
-      border-radius: 20px;
-      padding: 15px;
-      margin: 0 20px 0 0;
-      .info {
-        height: 420px;
-        border: 1px solid red;
-        overflow: hidden;
+    .two {
+      .gzdtList {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+      .gzdtList:hover {
+        cursor: pointer;
+        .title {
+          color: #409eff;
+        }
       }
     }
-    .right {
-      width: 49%;
-      border-radius: 20px;
-      padding: 15px;
-      box-shadow: 0 0 5px #409eff;
-      .info {
-        height: 420px;
-        border: 1px solid red;
-        overflow: hidden;
+    .three {
+      .tztgList {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+      .tztgList:hover {
+        cursor: pointer;
+        .title {
+          color: #409eff;
+        }
+      }
+    }
+    .four {
+      .jsqyList {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+      .jsqyList:hover {
+        cursor: pointer;
+        .title {
+          color: #409eff;
+        }
       }
     }
   }
 }
-.leftTop {
-  height: 50px;
-  overflow: hidden;
-  .txt {
-    height: 47px;
-    line-height: 47px;
-    border-bottom: 3px solid #044b79;
-    span:first-child {
-      color: #000000;
-      font-size: 24px;
-      font-weight: bold;
-    }
-    span:nth-child(2) {
-      color: #92959a;
-      font-size: 24px;
-      font-weight: bold;
-      margin: 0 0 0 10px;
-    }
-    span:nth-child(3) {
-      color: #92959a;
-      font-size: 18px;
-      font-weight: bold;
-    }
-    span:last-child {
-      float: right;
-      padding: 0 15px;
-      font-size: 16px;
-      font-weight: bold;
-      color: #044b79;
+/deep/.el-form-item__label {
+  width: 100%;
+  text-align: center;
+}
+/deep/.el-radio {
+  width: 36%;
+  text-align: left;
+  padding: 5px 80px;
+}
+// 右侧公共样式
+.comon {
+  padding: 0 20px;
+  margin: 0 0 15px 0;
+  .top {
+    height: 50px;
+    line-height: 50px;
+    border-bottom: 1px dashed #ccc;
+    margin: 0 0 10px 0;
+    .topLeft {
+      span:nth-child(1) {
+        display: inline-block;
+        width: 4px;
+        height: 20px;
+        background: #005293;
+        margin: 0px 10px 0 0;
+        position: relative;
+        top: 3px;
+      }
+      span:nth-child(2) {
+        font-size: 20px;
+        color: #005293;
+        font-weight: bold;
+      }
     }
-    span:last-child:hover {
-      cursor: pointer;
+    .topRight {
+      text-align: right;
+      .el-link {
+        padding: 0 10px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #044b79;
+      }
     }
   }
+  .list {
+    min-height: 270px;
+  }
 }
 </style>

src/views/service/list/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="listTop">
+          <el-col :span="12" class="columnname">
+            <span>|</span> <span>{{ column_name }}</span>
+          </el-col>
+          <el-col :span="12" class="search" style="display:none">
+            <el-input placeholder="请输入名称" v-model="infoName" class="input-with-select">
+              <el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
+            </el-input>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="20" class="name textOver" @click.native="clickDetail(item.id)">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="4" class="date">
+            {{ item.publish_time }}
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {
+    newsList: { type: Array },
+    total: { type: Number },
+    column_name: null,
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1, //默认数据1
+      pageSize: 12, //每页显示数据数量
+      origin: [], //分割数据
+      list: [], //显示数据列表
+      infoName: '',
+    };
+  },
+  created() {},
+  methods: {
+    searchPage(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.searchPage(currentPage);
+    },
+    // 详情
+    clickDetail(id) {
+      this.$emit('clickDetail', { column_name: '科技需求', id: id });
+    },
+    // 查询
+    searchData() {
+      this.$emit('searchData', { name: this.infoName, columnName: '科技需求' });
+    },
+  },
+  watch: {
+    newsList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) {
+          this.$set(this, `origin`, _.chunk(val, this.pageSize));
+          this.searchPage();
+        } else {
+          this.$set(this, `list`, []);
+        }
+      },
+    },
+  },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  min-height: 620px;
+  padding: 0 10px;
+  .list {
+    padding: 12px 0;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .field {
+      font-size: 16px;
+    }
+    .date {
+      text-align: center;
+      font-size: 16px;
+    }
+  }
+  .list:nth-child(7) {
+    border-bottom: 1px solid #ccc;
+  }
+  .list:hover {
+    cursor: pointer;
+    .name {
+      -webkit-transform: translateY(-3px);
+      -ms-transform: translateY(-3px);
+      transform: translateY(-3px);
+      -webkit-box-shadow: 0 0 6px #999;
+      box-shadow: 0 0 6px #999;
+      -webkit-transition: all 0.5s ease-out;
+      transition: all 0.5s ease-out;
+      color: #0085d2;
+    }
+  }
+  .listTop {
+    height: 49px;
+    line-height: 49px;
+    border-bottom: 1px solid #ccc;
+    .columnname {
+      span:first-child {
+        color: #22529a;
+        font-weight: bold;
+        font-size: 25px;
+      }
+      span:last-child {
+        color: #22529a;
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+.page {
+  text-align: center;
+  height: 40px;
+  padding: 5px 0;
+}
+</style>

src/views/service/newsindex.vue

@@ -0,0 +1,344 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-col :span="12" class="left">
+              <el-col :span="24" class="leftTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>科技咨讯</span>
+                  <span>C</span>
+                  <span>onsulting</span>
+                  <span @click="$router.push({ path: '/live/service/newslist', query: { site: 'kjzx' } })">更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="info">
+                <el-col
+                  :span="24"
+                  class="list"
+                  v-for="(item, index) in kjzxList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'kjzx', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-col :span="24" class="leftTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>工作动态</span>
+                  <span>D</span>
+                  <span>ynamic</span>
+                  <span @click="$router.push({ path: '/live/service/newslist', query: { site: 'gzdt' } })">更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="info">
+                <el-col
+                  :span="24"
+                  class="list"
+                  v-for="(item, index) in gzdtList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'gzdt', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-image :src="centerurl"></el-image>
+          </el-col>
+          <el-col :span="24" class="three">
+            <el-col :span="12" class="left">
+              <el-col :span="24" class="leftTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>通知通告</span>
+                  <span>N</span>
+                  <span>otice</span>
+                  <span @click="$router.push({ path: '/live/service/newslist', query: { site: 'tztg' } })">更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="info">
+                <el-col
+                  :span="24"
+                  class="list"
+                  v-for="(item, index) in tztgList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'tztg', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-col :span="24" class="leftTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>技术前沿</span>
+                  <span>F</span>
+                  <span>ront</span>
+                  <span @click="$router.push({ path: '/live/service/newslist', query: { site: 'jsqy' } })">更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="info">
+                <el-col
+                  :span="24"
+                  class="list"
+                  v-for="(item, index) in jsqyList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/service/newslist', query: { site: 'jsqy', id: item.id } })"
+                >
+                  <el-col :span="19" class="title textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="5" class="date textOver">
+                    {{ item.publish_time }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: journcolumn } = createNamespacedHelpers('journcolumn');
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 中间图片
+      centerurl: require('@a/dynamic8.png'),
+      iconImage: require('@/assets/live/square_big.png'),
+      // 科技咨讯
+      kjzxList: [],
+      // 工作动态
+      gzdtList: [],
+      // 通知通告
+      tztgList: [],
+      // 技术前沿
+      jsqyList: [],
+      // 栏目
+      column: [],
+    };
+  },
+  async created() {
+    await this.searchcol();
+    await this.search();
+  },
+  methods: {
+    ...journcolumn({ journcolumnQuery: 'query' }),
+    ...journnews(['query', 'create', 'update', 'delete']),
+    // 查询栏目
+    async searchcol() {
+      let res = await this.journcolumnQuery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `column`, res.data);
+      }
+    },
+    // 查询列表
+    async search() {
+      for (const val of this.column) {
+        let res = await this.query({ limit: 8, column_id: val.id });
+        if (this.$checkRes(res)) {
+          this.$set(this, `${val.site}List`, res.data);
+        }
+        // if (val.site == 'kjzx') {
+        //   let res = await this.query({ limit: 10, column_id: val.id });
+        //   if (this.$checkRes(res)) {
+        //     this.$set(this, `${val.site}List`, res.data);
+        //   }
+        // } else if (val.site == 'gzdt') {
+        //   let res = await this.query({ limit: 10, column_id: val.id });
+        //   if (this.$checkRes(res)) {
+        //     this.$set(this, `${val.site}List`, res.data);
+        //   }
+        // } else if (val.site == 'tztg') {
+        //   let res = await this.query({ limit: 10, column_id: val.id });
+        //   if (this.$checkRes(res)) {
+        //     this.$set(this, `${val.site}List`, res.data);
+        //   }
+        // } else if (val.site == 'jsqy') {
+        //   let res = await this.query({ limit: 10, column_id: val.id });
+        //   if (this.$checkRes(res)) {
+        //     this.$set(this, `${val.site}List`, res.data);
+        //   }
+        // }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.main {
+  margin: 15px 0;
+  .one {
+    margin: 0 0 10px 0;
+    height: 500px;
+    .left {
+      width: 49%;
+      box-shadow: 0 0 5px #409eff;
+      border-radius: 20px;
+      padding: 15px;
+      margin: 0 20px 0 0;
+      // .info {
+      //   height: 420px;
+      //   border: 1px solid red;
+      //   overflow: hidden;
+      // }
+    }
+    .right {
+      width: 49%;
+      border-radius: 20px;
+      padding: 15px;
+      box-shadow: 0 0 5px #409eff;
+      // .info {
+      //   height: 420px;
+      //   border: 1px solid red;
+      //   overflow: hidden;
+      // }
+    }
+  }
+  .two {
+    margin: 0 0 10px 0;
+    .el-image {
+      width: 100%;
+      height: 130px;
+      overflow: hidden;
+    }
+  }
+  .three {
+    height: 500px;
+    .left {
+      width: 49%;
+      box-shadow: 0 0 5px #409eff;
+      border-radius: 20px;
+      padding: 15px;
+      margin: 0 20px 0 0;
+      // .info {
+      //   height: 420px;
+      //   border: 1px solid red;
+      //   overflow: hidden;
+      // }
+    }
+    .right {
+      width: 49%;
+      border-radius: 20px;
+      padding: 15px;
+      box-shadow: 0 0 5px #409eff;
+      // .info {
+      //   height: 420px;
+      //   border: 1px solid red;
+      //   overflow: hidden;
+      // }
+    }
+  }
+}
+.info {
+  height: 420px;
+  // border: 1px solid red;
+  overflow: hidden;
+  padding: 10px 15px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 13px 0;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .date {
+      font-size: 16px;
+      text-align: right;
+    }
+  }
+  .list:hover {
+    cursor: pointer;
+    .title {
+      color: #409eff;
+    }
+  }
+}
+
+.leftTop {
+  height: 50px;
+  overflow: hidden;
+  .txt {
+    height: 47px;
+    line-height: 47px;
+    border-bottom: 3px solid #044b79;
+    span:first-child {
+      color: #000000;
+      font-size: 24px;
+      font-weight: bold;
+    }
+    span:nth-child(2) {
+      color: #92959a;
+      font-size: 24px;
+      font-weight: bold;
+      margin: 0 0 0 10px;
+    }
+    span:nth-child(3) {
+      color: #92959a;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    span:last-child {
+      float: right;
+      padding: 0 15px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #044b79;
+    }
+    span:last-child:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/service/newslist.vue

@@ -0,0 +1,195 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="main">
+          <div class="w_1200">
+            <el-col :span="5" class="menu">
+              <el-image :src="squareImage"></el-image>
+              <span class="menuTitle">Menu</span>
+              <el-col :span="24" class="menuList" v-for="(item, index) in column" :key="index">
+                <p @click="changeMenu(item.title, item.site)" :style="`color:${menuIndex == item.site ? menuColor : ''}`">{{ item.title }}</p>
+              </el-col>
+            </el-col>
+            <el-col :span="18" class="listInfo">
+              <span v-if="display == 'list'">
+                <span v-if="menuIndex == 'kjzx'">
+                  <listindex :newsList="kjzxList" :total="kjzxtotal" :column_name="column_name"></listindex>
+                </span>
+                <span v-else-if="menuIndex == 'gzdt'">
+                  <listindex :newsList="gzdtList" :total="gzdttotal" :column_name="column_name"></listindex>
+                </span>
+                <span v-else-if="menuIndex == 'tztg'">
+                  <listindex :newsList="tztgList" :total="tztgtotal" :column_name="column_name"></listindex>
+                </span>
+                <span v-else-if="menuIndex == 'jsqy'">
+                  <listindex :newsList="jsqyList" :total="jsqytotal" :column_name="column_name"></listindex>
+                </span>
+              </span>
+              <span v-else>
+                <span v-if="menuIndex == 'kjzx'">
+                  科技咨讯详情
+                </span>
+                <span v-else-if="menuIndex == 'gzdt'">
+                  工作动态详情
+                </span>
+                <span v-else-if="menuIndex == 'tztg'">
+                  通知通告详情
+                </span>
+                <span v-else-if="menuIndex == 'jsqy'">
+                  技术前沿详情
+                </span>
+              </span>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import listindex from './list/index.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: journcolumn } = createNamespacedHelpers('journcolumn');
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'list',
+  props: {},
+  components: {
+    listindex,
+  },
+  data: function() {
+    return {
+      // 栏目列表
+      squareImage: require('@/assets/live/square_big.png'),
+      column: [],
+      menuIndex: 'jsqy',
+      menuColor: 'rgb(254, 149, 14)',
+      display: 'list',
+      // 列表
+      kjzxList: [],
+      kjzxtotal: 0,
+      gzdtList: [],
+      gzdttotal: 0,
+      tztgList: [],
+      tztgtotal: 0,
+      jsqyList: [],
+      jsqytotal: 0,
+      column_name: '',
+    };
+  },
+  async created() {
+    await this.searchcol();
+  },
+  methods: {
+    ...journcolumn({ journcolumnQuery: 'query' }),
+    ...journnews(['query', 'create', 'update', 'delete']),
+    // 查询栏目
+    async searchcol() {
+      let res = await this.journcolumnQuery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `column`, res.data);
+        // 查找对应栏目
+        let column = res.data.find(i => i.site == this.site);
+        if (column) {
+          this.changeMenu(column.title, this.site);
+          if (this.id) {
+            // 查询详情
+            this.display = 'detail';
+            this.searchDetail(column.title, this.id);
+          } else {
+            // 查询列表
+            this.display = 'list';
+          }
+        }
+      }
+    },
+    // 选择菜单
+    changeMenu(columnName, site) {
+      this.display = 'list';
+      this.column_name = columnName;
+      this.menuIndex = site;
+      this.menuColor = 'rgb(254, 149, 14)';
+      this.searchInfo({ site });
+    },
+    // 查询列表
+    async searchInfo({ skip = 0, site, ...info } = {}) {
+      let columninfo = this.column.find(i => i.site == site);
+      if (columninfo) {
+        info.column_id = columninfo.id;
+        const res = await this.query({ skip, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `${site}List`, _.orderBy(res.data, ['publish_time'], ['desc']));
+          this.$set(this, `${site}total`, res.total);
+        }
+      }
+    },
+    // 查询详情
+    searchDetail() {
+      console.log('查询详情');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    site() {
+      return this.$route.query.site;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.main {
+  margin: 15px 0;
+  .menu {
+    height: 685px;
+    overflow: hidden;
+    padding: 15px 10px;
+    background: no-repeat 100% 100%;
+    background-image: url('~@/assets/live/menu_back.jpg');
+    box-sizing: border-box;
+    box-shadow: 0 0 10px #bbbaba;
+    .menuTitle {
+      font-size: 24px;
+      color: #92959a;
+      font-weight: bold;
+      position: relative;
+      top: -10px;
+      left: 10px;
+    }
+    .menuList {
+      height: 60px;
+      line-height: 60px;
+      border-bottom: 1px solid #2d64b3;
+      p {
+        font-weight: bold;
+        font-size: 18px;
+        color: #044b79;
+      }
+    }
+    .menuList:hover {
+      cursor: pointer;
+    }
+  }
+  .listInfo {
+    float: right;
+    width: 78%;
+    height: 685px;
+    overflow: hidden;
+    box-shadow: 0 0 10px #2d64b3;
+    padding: 10px;
+  }
+}
+</style>