更新

src/layout/news/infoList.vue

@@ -9,7 +9,13 @@
             <span @click="$router.push({ path: '/news/listDetail', query: { col_name: '科技资讯' } })">MORE</span>
           </el-col>
           <el-col :span="24" class="list">
-            <el-col :span="24" class="oneList" v-for="(item, index) in oneList" :key="index">
+            <el-col
+              :span="24"
+              class="oneList"
+              @click.native="$router.push({ path: '/news/listDetail', query: { col_name: '科技资讯', id: 'id' } })"
+              v-for="(item, index) in oneList"
+              :key="index"
+            >
               <span></span>
               <span class="textOver">{{ item.title }}</span>
               <span>{{ item.date }}</span>
@@ -23,7 +29,13 @@
             <span @click="$router.push({ path: '/news/listDetail', query: { col_name: '技术前沿' } })">MORE</span>
           </el-col>
           <el-col :span="24" class="list">
-            <el-col :span="24" class="oneList" v-for="(item, index) in twoList" :key="index">
+            <el-col
+              :span="24"
+              class="oneList"
+              @click.native="$router.push({ path: '/news/listDetail', query: { col_name: '技术前沿', id: 'id' } })"
+              v-for="(item, index) in twoList"
+              :key="index"
+            >
               <span></span>
               <span class="textOver">{{ item.title }}</span>
               <span>{{ item.date }}</span>
@@ -37,7 +49,13 @@
             <span @click="$router.push({ path: '/news/listDetail', query: { col_name: '工作动态' } })">MORE</span>
           </el-col>
           <el-col :span="24" class="list">
-            <el-col :span="24" class="oneList" v-for="(item, index) in threeList" :key="index">
+            <el-col
+              :span="24"
+              class="oneList"
+              @click.native="$router.push({ path: '/news/listDetail', query: { col_name: '工作动态', id: 'id' } })"
+              v-for="(item, index) in threeList"
+              :key="index"
+            >
               <span></span>
               <span class="textOver">{{ item.title }}</span>
               <span>{{ item.date }}</span>
@@ -103,6 +121,7 @@ export default {
         float: right;
         font-size: 15px;
         color: #005293;
+        cursor: pointer;
       }
     }
     .oneList {
@@ -131,6 +150,10 @@ export default {
         text-align: right;
       }
     }
+    .oneList:hover span:nth-child(2) {
+      cursor: pointer;
+      color: #005293;
+    }
   }
 }
 </style>

src/views/news/listDetail.vue

@@ -18,10 +18,18 @@
         <el-col :span="24" class="main">
           <div class="w_1200">
             <el-col :span="5" class="left">
-              左侧列表
+              <el-col :span="24" class="top">
+                <i class="el-icon-s-unfold"></i>
+                <span>新闻咨询</span>
+              </el-col>
+              <el-col :span="24" class="menu">
+                <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
+                </el-col>
+              </el-col>
             </el-col>
             <el-col :span="18" class="right">
-              右侧详情
+              <listDetails></listDetails>
             </el-col>
           </div>
         </el-col>
@@ -36,21 +44,45 @@
 </template>
 
 <script>
+import listDetails from './parts/listDetail.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'listDetail',
   props: {},
-  components: {},
+  components: {
+    listDetails, //列表+详情
+  },
   data: function() {
-    return {};
+    return {
+      menuList: [{ name: '科技资讯' }, { name: '技术前沿' }, { name: '工作动态' }, { name: '通知通告' }],
+      menuColor: 'rgb(254, 149, 14)',
+      menuIndex: '0',
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    searchInfo() {
+      if (this.col_name == '科技资讯') this.changeMenu(this.$route.query.col_name, 0);
+      if (this.col_name == '技术前沿') this.changeMenu(this.$route.query.col_name, 1);
+      if (this.col_name == '工作动态') this.changeMenu(this.$route.query.col_name, 2);
+      if (this.col_name == '通知通告') this.changeMenu(this.$route.query.col_name, 3);
+    },
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(254, 149, 14)';
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    col_name() {
+      return this.$route.query.col_name;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -81,6 +113,22 @@ export default {
       min-height: 600px;
       background: #fff;
       margin: 0 10px 0 0;
+      .top {
+        height: 60px;
+        line-height: 60px;
+        background-color: #054982;
+        color: #fff;
+        font-size: 25px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+      }
+      .menuList {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border-bottom: 1px solid #ccc;
+      }
     }
     .right {
       width: 78%;

src/views/news/parts/listDetail.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="listDetail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ col_name }}</span>
+        </el-col>
+        <el-col :span="24" class="message">
+          列表详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'listDetail',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    col_name() {
+      return this.$route.query.col_name;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/partisan/index.vue

@@ -37,6 +37,11 @@
             </el-col>
           </el-col>
         </el-col>
+        <el-col :span="24" class="foot">
+          <div class="w_1200">
+            底部
+          </div>
+        </el-col>
       </div>
     </el-row>
   </div>
@@ -195,4 +200,7 @@ export default {
   top: 340px;
   padding: 7px;
 }
+.foot {
+  height: 120px;
+}
 </style>