1

src/router/index.js

@@ -21,6 +21,12 @@ const routes = [
     meta: { title: '科技资讯' },
     component: () => import('../views/kjzx/index.vue'),
   },
+  {
+    path: '/kjzx/list',
+    name: 'kjzx_list',
+    meta: { title: '科技资讯列表' },
+    component: () => import('../views/kjzx/list.vue'),
+  },
   {
     path: '/kjpx',
     name: 'index',

src/views/index.vue

@@ -20,12 +20,18 @@
                   <div class="shu"></div>
                   <p>最新资讯</p>
                 </el-col>
-                <el-col :span="6" class="more" @click.native="to()">
+                <el-col :span="6" class="more" @click.native="$router.push({ path: '/kjzx/list', query: { site: 'zxzx' } })">
                   <img src="../assets/more.png" />
                 </el-col>
               </el-col>
               <el-col :span="24" class="list">
-                <el-col :span="24" class="listInfo" v-for="(item, index) in zxzx" :key="index">
+                <el-col
+                  :span="24"
+                  class="listInfo"
+                  v-for="(item, index) in zxzx"
+                  :key="index"
+                  @click.native="$router.push({ path: '/kjzx/list', query: { site: 'zxzx', id: item.id } })"
+                >
                   <el-col :span="20">
                     <span class="circle"></span>
                     <span class="text">{{ item.title }}</span>

src/views/kjzx/list.vue

@@ -0,0 +1,188 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24">
+          <top :infoMes="infoMes"></top>
+        </el-col>
+        <el-col :span="24">
+          <menus></menus>
+        </el-col>
+        <el-col :span="24" class="main">
+          <div class="w_1200">
+            <el-col :span="24" class="info">
+              <el-col :span="6" class="left">
+                <el-col :span="24" class="column" 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="right">
+                <span v-if="display == 'list'">
+                  <span v-if="menuIndex == 'mtjj'">
+                    媒体聚焦列表
+                  </span>
+                  <span v-else-if="menuIndex == 'kjdt'">
+                    科教动态列表
+                  </span>
+                  <span v-else-if="menuIndex == 'zcfg'">
+                    政策法规列表
+                  </span>
+                  <span v-else-if="menuIndex == 'tztg'">
+                    通知通告列表
+                  </span>
+                  <span v-else-if="menuIndex == 'tpxw'">
+                    图片新闻列表
+                  </span>
+                  <span v-else-if="menuIndex == 'zxzx'">
+                    最新资讯列表
+                  </span>
+                </span>
+                <span v-else>
+                  <span v-if="menuIndex == 'mtjj'">
+                    媒体聚焦详情
+                  </span>
+                  <span v-else-if="menuIndex == 'kjdt'">
+                    科教动态详情
+                  </span>
+                  <span v-else-if="menuIndex == 'zcfg'">
+                    政策法规详情
+                  </span>
+                  <span v-else-if="menuIndex == 'tztg'">
+                    通知通告详情
+                  </span>
+                  <span v-else-if="menuIndex == 'tpxw'">
+                    图片新闻详情
+                  </span>
+                  <span v-else-if="menuIndex == 'zxzx'">
+                    最新资讯详情
+                  </span>
+                </span>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <foot :infoMes="infoMes"></foot>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import top from '../../components/common/top.vue';
+import menus from '../../components/common/menus.vue';
+import foot from '../../components/common/foot1.vue';
+const { mapActions: siteInfo } = createNamespacedHelpers('siteInfo');
+const { mapActions: column } = createNamespacedHelpers('column');
+const { mapActions: kjzxInfo } = createNamespacedHelpers('kjzxInfo');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'list',
+  props: {},
+  components: {
+    top,
+    menus,
+    foot,
+  },
+  data: function() {
+    return {
+      //头尾信息
+      infoMes: {},
+      // 栏目列表
+      column: [],
+      menuIndex: 'mtjj',
+      menuColor: 'rgb(254, 149, 14)',
+      display: 'list',
+    };
+  },
+  async created() {
+    await this.searchsite();
+    await this.searchcol();
+  },
+  methods: {
+    ...siteInfo({ sitequery: 'query' }),
+    ...column({ columnquery: 'query', columncreate: 'create', columnfetch: 'fetch', columnupdate: 'update', columndelete: 'delete' }),
+    ...kjzxInfo({ kjzxquery: 'query', kjzxcreate: 'create', kjzxfetch: 'fetch', kjzxupdate: 'update', kjzxdelete: 'delete' }),
+    //查询站点信息
+    async searchsite() {
+      let res = await this.sitequery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `infoMes`, res.data[0]);
+      }
+    },
+    // 查询栏目
+    async searchcol() {
+      let res = await this.columnquery();
+      if (this.$checkRes(res)) {
+        // 查找对应栏目
+        let column = res.data.find(i => i.site == this.site);
+        if (column) {
+          if (this.id) {
+            // 查询详情
+            this.display = 'detail';
+            this.searchDetail(this.column.title, this.id);
+          } else {
+            // 查询列表
+            this.display = 'list';
+            this.changeMenu(this.column.title, this.site);
+          }
+        }
+        this.$set(this, `column`, res.data);
+      }
+    },
+    // 选择菜单
+    changeMenu(columnName, site) {
+      this.display = 'list';
+      this.column_name = columnName;
+      this.menuIndex = site;
+      this.menuColor = 'rgb(254, 149, 14)';
+      this.searchInfo({ site });
+    },
+    // 查询列表
+    searchInfo() {
+      console.log('查询列表');
+    },
+    // 查询详情
+    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: 10px 0px;
+  .info {
+    min-height: 500px;
+    background: #fff;
+    .left {
+      border-right: 1px solid red;
+      .column {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border-bottom: 1px solid red;
+      }
+    }
+  }
+}
+</style>