1

src/layout/index/tztg.vue

@@ -5,14 +5,22 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>通知通告</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="24" class="tztgList" v-for="(item, index) in tztgList" :key="index">
+            <el-col :span="20" class="title">
+              <span></span>
+              {{ item.title }}
+            </el-col>
+            <el-col :span="4" class="date textOver">
+              {{ item.date }}
+            </el-col>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +34,7 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'tztg',
-  props: {},
+  props: { tztgList: { type: Array } },
   components: {},
   data: function() {
     return {};
@@ -47,6 +55,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +75,44 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 255px;
+    overflow: hidden;
+    .tztgList {
+      padding: 0 0 10px 0;
+      .title {
+        color: #555;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        height: 42px;
+        span {
+          display: inline-block;
+          width: 4px;
+          height: 4px;
+          background: #666;
+          border-radius: 90px;
+          position: relative;
+          top: -4px;
+        }
+      }
+      .date {
+        color: #555;
+        text-align: right;
+      }
+    }
+    .kjfwList {
+      width: 170px;
+      height: 53px;
+      margin: 0 6px 15px 0;
+      .el-image {
+        width: 170px;
+        height: 53px;
+      }
+    }
+  }
 }
 </style>

src/layout/index/zcfg.vue

@@ -5,14 +5,22 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>政策法规</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="24" class="tztgList" v-for="(item, index) in zcfgList" :key="index">
+            <el-col :span="20" class="title">
+              <span></span>
+              {{ item.title }}
+            </el-col>
+            <el-col :span="4" class="date textOver">
+              {{ item.date }}
+            </el-col>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +34,7 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'zcfg',
-  props: {},
+  props: { zcfgList: { type: Array } },
   components: {},
   data: function() {
     return {};
@@ -47,6 +55,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +75,44 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 255px;
+    overflow: hidden;
+    .tztgList {
+      padding: 0 0 10px 0;
+      .title {
+        color: #555;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        height: 42px;
+        span {
+          display: inline-block;
+          width: 4px;
+          height: 4px;
+          background: #666;
+          border-radius: 90px;
+          position: relative;
+          top: -4px;
+        }
+      }
+      .date {
+        color: #555;
+        text-align: right;
+      }
+    }
+    .kjfwList {
+      width: 170px;
+      height: 53px;
+      margin: 0 6px 15px 0;
+      .el-image {
+        width: 170px;
+        height: 53px;
+      }
+    }
+  }
 }
 </style>

src/layout/index/zxfw.vue

@@ -5,14 +5,18 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>科技服务</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="12" class="kjfwList" v-for="(item, index) in kjfwList" :key="index">
+            <el-link :underline="false" :href="item.href">
+              <el-image :src="item.url"></el-image>
+            </el-link>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +30,9 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'zxfw',
-  props: {},
+  props: {
+    kjfwList: { type: Array },
+  },
   components: {},
   data: function() {
     return {};
@@ -47,6 +53,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;

src/layout/index/zxzx.vue

@@ -5,14 +5,22 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>最新资讯</span>
           </el-col>
           <el-col :span="4" class="right">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="24" class="zxzxList" v-for="(item, index) in zxzxList" :key="index">
+            <el-col :span="20" class="title textOver">
+              <span></span>
+              {{ item.title }}
+            </el-col>
+            <el-col :span="4" class="date textOver">
+              {{ item.date }}
+            </el-col>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +34,7 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'zxzx',
-  props: {},
+  props: { zxzxList: { type: Array } },
   components: {},
   data: function() {
     return {};
@@ -47,6 +55,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +75,28 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 265px;
+    overflow: hidden;
+    .zxzxList {
+      padding: 0 0 9px 0;
+      .title {
+        color: #555;
+        span {
+          display: inline-block;
+          width: 4px;
+          height: 4px;
+          background: #666;
+          border-radius: 90px;
+          position: relative;
+          top: -4px;
+        }
+      }
+      .date {
+        text-align: right;
+        color: #555;
+      }
+    }
+  }
 }
 </style>

src/layout/kjfw/cyfw.vue

@@ -5,14 +5,18 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>常用服务</span>
           </el-col>
-          <el-col :span="4" class="right">
+          <el-col :span="4" class="right" style="display:none">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="8" class="cyfwList" v-for="(item, index) in cyfwList" :key="index">
+            <el-link :href="item.href" :underline="false">
+              <el-image :src="item.url" style="width:185px;height:110px;"></el-image>
+            </el-link>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +30,7 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'cyfw',
-  props: {},
+  props: { cyfwList: { type: Array } },
   components: {},
   data: function() {
     return {};
@@ -47,6 +51,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +71,12 @@ export default {
       text-align: right;
     }
   }
+  .list {
+    height: 245px;
+    overflow: hidden;
+    .cyfwList {
+      margin: 0 0 10px 0;
+    }
+  }
 }
 </style>

src/layout/kjfw/ggcy.vue

@@ -5,14 +5,18 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>公众参与</span>
           </el-col>
-          <el-col :span="4" class="right">
+          <el-col :span="4" class="right" style="display:none">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="4" class="gzcyList" v-for="(item, index) in gzcyList" :key="index">
+            <el-link :href="item.href" :underline="false">
+              <el-image :src="item.url" style="width:185px;height:146px;"></el-image>
+            </el-link>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +30,9 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'ggcy',
-  props: {},
+  props: {
+    gzcyList: { type: Array },
+  },
   components: {},
   data: function() {
     return {};
@@ -47,6 +53,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +73,12 @@ export default {
       text-align: right;
     }
   }
+  .list {
+    height: 150px;
+    overflow: hidden;
+    .zwgkList {
+      text-align: center;
+    }
+  }
 }
 </style>

src/layout/kjfw/zwgk.vue

@@ -5,14 +5,18 @@
         <el-col :span="24" class="top">
           <el-col :span="20" class="left">
             <span></span>
-            <span>栏目名称</span>
+            <span>政务公开</span>
           </el-col>
-          <el-col :span="4" class="right">
+          <el-col :span="4" class="right" style="display:none">
             <i class="el-icon-more"></i>
           </el-col>
         </el-col>
         <el-col :span="24" class="info">
-          列表
+          <el-col :span="6" class="zwgkList" v-for="(item, index) in zwgkList" :key="index">
+            <el-link :href="item.href" :underline="false">
+              <el-image :src="item.url" style="width:130px;height:115px;"></el-image>
+            </el-link>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -26,7 +30,7 @@ export default {
     return { title: this.$route.meta.title };
   },
   name: 'zwgk',
-  props: {},
+  props: { zwgkList: { type: Array } },
   components: {},
   data: function() {
     return {};
@@ -47,6 +51,7 @@ export default {
     height: 50px;
     line-height: 50px;
     border-bottom: 1px solid #ccc;
+    margin: 0 0 15px 0;
     .left {
       span:nth-child(1) {
         display: inline-block;
@@ -66,5 +71,12 @@ export default {
       text-align: right;
     }
   }
+  .info {
+    height: 245px;
+    overflow: hidden;
+    .zwgkList {
+      margin: 0 0 10px 0;
+    }
+  }
 }
 </style>

src/router/index.js

@@ -7,19 +7,19 @@ const routes = [
     path: '/',
     name: 'index',
     meta: { title: '首页' },
-    component: () => import('../views/index.vue'),
+    component: () => import('../views/index copy.vue'),
   },
   {
     path: '/kjzx',
     name: 'kjzx',
     meta: { title: '科技咨讯' },
-    component: () => import('../views/kjzx/index.vue'),
+    component: () => import('../views/kjzx/index copy.vue'),
   },
   {
     path: '/kjpx',
     name: 'kjpx',
     meta: { title: '科技培训' },
-    component: () => import('../views/kjpx/index.vue'),
+    component: () => import('../views/kjpx/index copy.vue'),
   },
   {
     path: '/kjzy',
@@ -31,7 +31,7 @@ const routes = [
     path: '/kjfw',
     name: 'kjfw',
     meta: { title: '科技服务' },
-    component: () => import('../views/kjfw/index.vue'),
+    component: () => import('../views/kjfw/index copy.vue'),
   },
 ];
 

src/views/index copy.vue

@@ -15,18 +15,18 @@
                 <maps></maps>
               </el-col>
               <el-col :span="15" class="right animate__animated animate__backInDown">
-                <zxzx></zxzx>
+                <zxzx :zxzxList="zxzxList"></zxzx>
               </el-col>
             </el-col>
             <el-col :span="24" class="two">
               <el-col :span="8" class="a animate__animated animate__fadeInLeft">
-                <tztg></tztg>
+                <tztg :tztgList="tztgList"></tztg>
               </el-col>
               <el-col :span="8" class="a animate__animated animate__fadeIn">
-                <zcfg></zcfg>
+                <zcfg :zcfgList="zcfgList"></zcfg>
               </el-col>
               <el-col :span="8" class="a animate__animated animate__fadeInRight">
-                <zxfw></zxfw>
+                <zxfw :kjfwList="kjfwList"></zxfw>
               </el-col>
             </el-col>
             <el-col :span="24" class="three animate__animated animate__fadeIn">
@@ -53,6 +53,8 @@ import zxzx from '@/layout/index/zxzx.vue';
 import tztg from '@/layout/index/tztg.vue';
 import zcfg from '@/layout/index/zcfg.vue';
 import zxfw from '@/layout/index/zxfw.vue';
+// 基本配置
+import { kjfw } from '@/util/Basics';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   metaInfo() {
@@ -74,6 +76,41 @@ export default {
   },
   data: function() {
     return {
+      // 最新资讯
+      zxzxList: [
+        {
+          title: '测试标题',
+          date: '2020-10-29',
+        },
+        {
+          title: '九条数据',
+          date: '2020-10-29',
+        },
+      ],
+      // 通知通告
+      tztgList: [
+        {
+          title: '测试标题',
+          date: '10-10',
+        },
+        {
+          title: '五条数据',
+          date: '10-10',
+        },
+      ],
+      // 政策法规
+      zcfgList: [
+        {
+          title: '测试标题',
+          date: '10-10',
+        },
+        {
+          title: '五条数据',
+          date: '10-10',
+        },
+      ],
+      // 科技服务
+      kjfwList: kjfw,
       linkList: [
         {
           pic: require('@a/link.jpg'),

src/views/kjfw/index copy.vue

@@ -12,14 +12,14 @@
           <div class="w_1200">
             <el-col :span="24" class="one">
               <el-col :span="12" class="left animate__animated animate__lightSpeedInLeft">
-                <zwgk></zwgk>
+                <zwgks :zwgkList="zwgkList"></zwgks>
               </el-col>
               <el-col :span="12" class="right animate__animated animate__lightSpeedInRight">
-                <cyfw></cyfw>
+                <cyfws :cyfwList="cyfwList"></cyfws>
               </el-col>
             </el-col>
             <el-col :span="24" class="two animate__animated animate__fadeInUp">
-              <ggcy></ggcy>
+              <ggcys :gzcyList="gzcyList"></ggcys>
             </el-col>
           </div>
         </el-col>
@@ -36,9 +36,11 @@ import top from '@/components/common/top.vue';
 import menus from '@/components/common/menus.vue';
 import foot from '@/components/common/foot.vue';
 // 科技服务
-import zwgk from '@/layout/kjfw/zwgk.vue';
-import cyfw from '@/layout/kjfw/cyfw.vue';
-import ggcy from '@/layout/kjfw/ggcy.vue';
+import zwgks from '@/layout/kjfw/zwgk.vue';
+import cyfws from '@/layout/kjfw/cyfw.vue';
+import ggcys from '@/layout/kjfw/ggcy.vue';
+// 基本配置
+import { zcgk, cyfw, gzcy } from '@/util/Basics';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   metaInfo() {
@@ -51,12 +53,19 @@ export default {
     menus,
     foot,
     // 科技服务
-    zwgk,
-    cyfw,
-    ggcy,
+    zwgks,
+    cyfws,
+    ggcys,
   },
   data: function() {
-    return {};
+    return {
+      // 政务公共
+      zwgkList: zcgk,
+      // 常用服务
+      cyfwList: cyfw,
+      // 公众参与
+      gzcyList: gzcy,
+    };
   },
   created() {},
   methods: {},