合并

src/layout/index/dynamic.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="dynamic">
+    <el-col :span="24" class="maintoplefttitle"> </el-col>
+    <el-col :span="24">
+      <el-col :span="12" class="leftcontext">
+        统计图
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dynamic',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main .maintopleft .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .maintopleft .maintoplefttitle span:first-child {
+  font-weight: 1000;
+  padding: 10px 5px 0 0px;
+  font-size: 20px;
+  color: #005293;
+}
+
+.main .maintopleft .maintoplefttitle span:nth-child(2) {
+  font-size: 20px;
+  color: #005293;
+  padding: 0 10px 0 0;
+}
+.main .maintopleft .maintoplefttitle span:nth-child(3) {
+  font-size: 20px;
+  color: #005293;
+  float: right;
+}
+
+.maintopleft .leftcontext {
+  padding: 0 20px 0 20px;
+  font-size: 16px;
+}
+
+.maintopright {
+  height: 300px;
+  background-color: #fff;
+  width: 595px;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.main .maintopright .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .maintopright .maintoplefttitle span:first-child {
+  font-weight: 1000;
+  padding: 10px 5px 0 0px;
+  font-size: 20px;
+  color: #005293;
+}
+
+.main .maintopright .maintoplefttitle span:nth-child(2) {
+  font-size: 20px;
+  color: #005293;
+  padding: 0 10px 0 0;
+}
+.main .maintopright .maintoplefttitle span:nth-child(3) {
+  font-size: 20px;
+  color: #005293;
+  float: right;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+  font-size: 16px;
+}
+
+.maintopright .leftcontext p {
+  margin: 0;
+  padding: 0;
+}
+
+.maintopright .leftcontext p span:first-child {
+  font-weight: 1000;
+  padding: 5px;
+}
+</style>

src/layout/index/jobs.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="jobs">
+    <el-col :span="24" class="maintoplefttitle">
+      <div style="border-bottom: 1px solid  #ccc;height: 40px;">
+        <span></span><span>工作动态</span><span><i class="el-icon-more"></i></span>
+      </div>
+    </el-col>
+    <el-col :span="24">
+      <el-col :span="24" class="leftcontext" v-for="(item, index) in jobsList" :key="index">
+        <el-col :span="20" class="title"> <span></span>{{ item.title }} </el-col>
+        <el-col :span="4" class="date">{{ item.date }}</el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'jobs',
+  props: { jobsList: null },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.maintopright {
+  height: 300px;
+  background-color: #fff;
+  width: 595px;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.main .maintopright .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .maintopright .maintoplefttitle span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: #005293;
+  margin: 0 10px -3px 0;
+}
+
+.main .maintopright .maintoplefttitle span:nth-child(2) {
+  font-size: 20px;
+  color: #005293;
+  padding: 0 10px 0 0;
+}
+.main .maintopright .maintoplefttitle span:nth-child(3) {
+  font-size: 20px;
+  color: #005293;
+  float: right;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+  font-size: 16px;
+}
+
+.maintopright .leftcontext p {
+  margin: 0;
+  padding: 0;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 38px;
+}
+.title span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 9px 10px 3px 0;
+  background: #ccc;
+}
+.date {
+  float: right;
+  color: #777777;
+}
+</style>

src/layout/index/notice.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="notice">
+    <el-col :span="24" class="maintoplefttitle">
+      <div style="border-bottom: 1px solid #ccc;height: 40px;">
+        <span></span><span>通知公告</span><span><i class="el-icon-more"></i></span>
+      </div>
+    </el-col>
+    <el-col :span="24">
+      <el-col :span="24" class="leftcontext" v-for="(item, index) in noticeList" :key="index">
+        <el-col :span="18" class="title"> <span></span>{{ item.title }} </el-col>
+        <el-col :span="6" class="date">{{ item.date }}</el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {
+    noticeList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.context {
+  height: 300px;
+  background-color: #fff;
+  width: 595px;
+}
+
+.context .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.main .context .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .context .maintoplefttitle span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: #005293;
+  margin: 0 10px -3px 0;
+}
+
+.main .context .maintoplefttitle span:nth-child(2) {
+  font-size: 20px;
+  color: #005293;
+  padding: 0 10px 0 0;
+}
+.main .context .maintoplefttitle span:nth-child(3) {
+  font-size: 20px;
+  color: #005293;
+  float: right;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+  font-size: 16px;
+}
+
+.maintopright .leftcontext p {
+  margin: 0;
+  padding: 0;
+}
+
+.maintopright .leftcontext title span:first-child {
+  font-weight: 1000;
+  padding: 5px;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 38px;
+}
+.title span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 9px 10px 3px 0;
+  background: #ccc;
+}
+
+.date {
+  float: right;
+  color: #777777;
+}
+</style>

src/layout/index/service.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="service">
+    <el-col :span="24" class="maintoplefttitle">
+      <div style="border-bottom: 1px solid #ccc;height: 40px;">
+        <span></span><span>科级合作</span><span><i class="el-icon-more"></i></span>
+      </div>
+    </el-col>
+    <el-col :span="24">
+      <el-col :span="24" class="leftcontext" v-for="(item, index) in serviceList" :key="index">
+        <el-col :span="16" class="title"> <span></span>{{ item.title }} </el-col>
+        <el-col :span="8" class="date">{{ item.date }}</el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'service',
+  props: {
+    serviceList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.between {
+  height: 300px;
+  background-color: #fff;
+
+  padding: 0 10px 0 10px;
+}
+
+.between .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.main .between .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .between .maintoplefttitle span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: #005293;
+  margin: 0 10px -3px 0;
+}
+
+.main .between .maintoplefttitle span:nth-child(2) {
+  font-size: 20px;
+  color: #005293;
+  padding: 0 10px 0 0;
+}
+.main .between .maintoplefttitle span:nth-child(3) {
+  font-size: 20px;
+  color: #005293;
+  float: right;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+  font-size: 16px;
+}
+
+.maintopright .leftcontext p {
+  margin: 0;
+  padding: 0;
+}
+
+.maintopright .leftcontext title span:first-child {
+  font-weight: 1000;
+  padding: 5px;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 38px;
+}
+.title span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 9px 10px 3px 0;
+  background: #ccc;
+}
+
+.date {
+  float: right;
+  color: #777777;
+  text-indent: 24px;
+}
+</style>

src/layout/index/technology.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="technology">
+    <el-col :span="24" class="maintoplefttitle">
+      <div style="border-bottom: 1px solid #ccc;height: 40px;">
+        <span></span><span>技术问答</span><span><i class="el-icon-more"></i></span>
+      </div>
+    </el-col>
+    <el-col :span="24">
+      <el-col :span="24" class="leftcontext" v-for="(item, index) in jishuList" :key="index">
+        <el-col :span="18" class="title"> <span></span>{{ item.title }} </el-col>
+        <el-col :span="6" class="date">{{ item.date }}</el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'technology',
+  props: {
+    jishuList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.context {
+  height: 300px;
+  background-color: #fff;
+  width: 595px;
+}
+
+.context .leftcontext {
+  padding: 0 20px 0 20px;
+}
+
+.main .context .maintoplefttitle {
+  padding: 20px;
+  // border-bottom: 1px dashed #ccc;
+}
+.main .context .maintoplefttitle span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: #005293;
+  margin: 0 10px -3px 0;
+}
+
+.main .context .maintoplefttitle span:nth-child(2) {
+  font-size: 20px;
+  color: #005293;
+  padding: 0 10px 0 0;
+}
+.main .context .maintoplefttitle span:nth-child(3) {
+  font-size: 20px;
+  color: #005293;
+  float: right;
+}
+
+.maintopright .leftcontext {
+  padding: 0 20px 0 20px;
+  font-size: 16px;
+}
+
+.maintopright .leftcontext p {
+  margin: 0;
+  padding: 0;
+}
+
+.maintopright .leftcontext title span:first-child {
+  font-weight: 1000;
+  padding: 5px;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 38px;
+}
+.title span:first-child {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin: 9px 10px 3px 0;
+  background: #ccc;
+}
+.date {
+  float: right;
+  color: #777777;
+}
+</style>

src/layout/news/infoList.vue

@@ -6,10 +6,16 @@
           <el-col :span="24" class="top">
             <span></span>
             <span>科技资讯</span>
-            <span>MORE</span>
+            <span @click="$router.push({ path: '/news/listDetail', query: { col_name: '科技资讯', display: '0' } })">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', display: '1' } })"
+              v-for="(item, index) in oneList"
+              :key="index"
+            >
               <span></span>
               <span class="textOver">{{ item.title }}</span>
               <span>{{ item.date }}</span>
@@ -20,10 +26,16 @@
           <el-col :span="24" class="top">
             <span></span>
             <span>技术前沿</span>
-            <span>MORE</span>
+            <span @click="$router.push({ path: '/news/listDetail', query: { col_name: '技术前沿', display: '0' } })">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', display: '1' } })"
+              v-for="(item, index) in twoList"
+              :key="index"
+            >
               <span></span>
               <span class="textOver">{{ item.title }}</span>
               <span>{{ item.date }}</span>
@@ -34,10 +46,16 @@
           <el-col :span="24" class="top">
             <span></span>
             <span>工作动态</span>
-            <span>MORE</span>
+            <span @click="$router.push({ path: '/news/listDetail', query: { col_name: '工作动态', display: '0' } })">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', display: '1' } })"
+              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/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="index">
     <el-row>
+      <top></top>
       <div class="w_1200">
-        <top></top>
-
         <el-col :span="24" class="menu">
           <div class="w_1200">
             <newmenu></newmenu>
@@ -12,20 +11,20 @@
         <el-col :span="24" class="main">
           <el-col :span="24">
             <el-col :span="12" class="maintopleft">
-              <left></left>
+              <dynamic></dynamic>
             </el-col>
             <el-col :span="12" class="maintopright">
-              <right :list="list"></right>
+              <jobs :jobsList="jobsList"></jobs>
             </el-col>
 
             <el-col :span="8" class="context">
-              <context :infolist="infolist"></context>
+              <notice :noticeList="noticeList"></notice>
             </el-col>
             <el-col :span="8" class="between">
-              <contextbetween :servicelist="servicelist"></contextbetween>
+              <service :serviceList="serviceList"></service>
             </el-col>
             <el-col :span="8" class="context">
-              <contextright :jishulsit="jishulsit"></contextright>
+              <technology :jishuList="jishuList"></technology>
             </el-col>
 
             <el-col :span="24" class="lianjie">
@@ -42,11 +41,11 @@
 <script>
 import top from '@/layout/common/top.vue';
 import newmenu from '@/layout/common/newmenu.vue';
-import left from '@/layout/index/left.vue';
-import right from '@/layout/index/right.vue';
-import context from '@/layout/index/context.vue';
-import contextbetween from '@/layout/index/contextbetween.vue';
-import contextright from '@/layout/index/contextright.vue';
+import dynamic from '@/layout/index/dynamic.vue';
+import jobs from '@/layout/index/jobs.vue';
+import notice from '@/layout/index/notice.vue';
+import service from '@/layout/index/service.vue';
+import technology from '@/layout/index/technology.vue';
 import lianjie from '@/layout/common/lianjie.vue';
 import foot from '@/layout/common/foot.vue';
 export default {
@@ -55,54 +54,98 @@ export default {
   components: {
     top,
     newmenu,
-    left,
-    right,
-    context,
-    contextbetween,
-    contextright,
+    dynamic,
+    jobs,
+    notice,
+    service,
+    technology,
     lianjie,
     foot,
   },
   data: () => ({
     week: '',
     date: '',
-    servicelist: [
+    serviceList: [
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
+      },
       {
-        title:
-          '运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态',
-        date: '03-04',
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
+      },
+      {
+        title: '运行动态',
+        date: '2018-03-04',
       },
       {
         title: '6条数据',
-        date: '03-04',
+        date: '2018-03-04',
       },
     ],
-    jishulsit: [
+    jishuList: [
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
+      },
       {
-        title:
-          '运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态',
-        date: '03-04',
+        title: '运行动态',
+        date: '2018-03-04',
       },
       {
         title: '6条数据',
-        date: '03-04',
+        date: '2018-03-04',
+      },
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
       },
     ],
-    infolist: [
+    noticeList: [
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
+      },
       {
-        title:
-          '运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态',
-        date: '03-04',
+        title: '运行动态',
+        date: '2018-03-04',
       },
       {
         title: '6条数据',
-        date: '03-04',
+        date: '2018-03-04',
+      },
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
       },
     ],
-    list: [
+    jobsList: [
       {
-        title:
-          '运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态运行动态',
+        title: '运行动态',
         date: '2018-03-04',
       },
 
@@ -110,6 +153,22 @@ export default {
         title: '6条数据',
         date: '2018-03-04',
       },
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
+      },
+      {
+        title: '运行动态',
+        date: '2018-03-04',
+      },
+      {
+        title: '6条数据',
+        date: '2018-03-04',
+      },
     ],
   }),
   created() {},

src/views/news/listDetail.vue

@@ -18,10 +18,29 @@
         <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">
-              右侧详情
+              <el-col :span="24" class="top">
+                <span></span>
+                <span>{{ columnName }}</span>
+              </el-col>
+              <el-col :span="24" class="list">
+                <span v-if="display == '0'">
+                  列表
+                </span>
+                <span v-else-if="display == '1'">
+                  详情
+                </span>
+              </el-col>
             </el-col>
           </div>
         </el-col>
@@ -36,21 +55,50 @@
 </template>
 
 <script>
+import listDetails from './parts/listDetail.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'listDetail',
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      menuList: [{ name: '科技资讯' }, { name: '技术前沿' }, { name: '工作动态' }, { name: '通知通告' }],
+      menuColor: 'rgb(254, 149, 14)',
+      menuIndex: '0',
+      columnName: '',
+      display: '',
+    };
+  },
+  created() {
+    this.$set(this, `display`, this.displays);
+    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)';
+      this.display = '0';
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    col_name() {
+      return this.$route.query.col_name;
+    },
+    displays() {
+      return this.$route.query.display;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -81,11 +129,45 @@ 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%;
       min-height: 600px;
       background: #fff;
+      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;
+        }
+      }
     }
   }
   .foot {

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>