11

src/router/index.js

@@ -9,6 +9,12 @@ const routes = [
     meta: { title: '首页' },
     component: () => import('../views/index.vue'),
   },
+  {
+    path: '/list',
+    name: 'index',
+    meta: { title: '更多' },
+    component: () => import('../views/list.vue'),
+  },
   {
     path: '/kjzx',
     name: 'index',

src/views/index.vue

@@ -20,7 +20,7 @@
                   <div class="shu"></div>
                   <p>最新资讯</p>
                 </el-col>
-                <el-col :span="6" class="more">
+                <el-col :span="6" class="more" @click.native="to()">
                   <img src="../assets/more.png" />
                 </el-col>
               </el-col>
@@ -164,7 +164,11 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    to() {
+      this.$router.push({ path: '/list' });
+    },
+  },
   computed: {
     ...mapState(['user']),
   },

src/views/kjfw/index.vue

@@ -2,7 +2,111 @@
   <div id="index">
     <el-row>
       <el-col :span="24">
-        <p>index</p>
+        <el-col :span="24">
+          <top></top>
+        </el-col>
+        <el-col :span="24">
+          <menus></menus>
+        </el-col>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="12" class="one">
+              <el-col :span="24" class="top">
+                <div class="shu"></div>
+                <span class="title">政务公开</span>
+              </el-col>
+              <el-col :span="24" class="con1">
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url" style="width: 100%; height: 100%"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="6" class="img">
+                  <!-- <el-image :src="url"></el-image> -->
+                  <img src="../../assets/zhengwu1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="two">
+              <el-col :span="24" class="top">
+                <div class="shu"></div>
+                <span class="title">政务公开</span>
+              </el-col>
+              <el-col :span="24" class="con2">
+                <el-col :span="8" class="img">
+                  <img src="../../assets/changyong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="8" class="img">
+                  <img src="../../assets/changyong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="8" class="img">
+                  <img src="../../assets/changyong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="8" class="img">
+                  <img src="../../assets/changyong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="8" class="img">
+                  <img src="../../assets/changyong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="8" class="img">
+                  <img src="../../assets/changyong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="three">
+              <el-col :span="24" class="top">
+                <div class="shu"></div>
+                <span class="title">公众参与</span>
+              </el-col>
+              <el-col :span="24" class="con3">
+                <el-col :span="4" class="img">
+                  <img src="../../assets/gongzhong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="4" class="img">
+                  <img src="../../assets/gongzhong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="4" class="img">
+                  <img src="../../assets/gongzhong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="4" class="img">
+                  <img src="../../assets/gongzhong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="4" class="img">
+                  <img src="../../assets/gongzhong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+                <el-col :span="4" class="img">
+                  <img src="../../assets/gongzhong1.jpg" style="width: 100%; height: 100%" />
+                </el-col>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <foot></foot>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -10,15 +114,24 @@
 
 <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';
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    top,
+    menus,
+    foot,
+  },
   data: function() {
-    return {};
+    return {
+      url: '../../assets/zhengwu1.jpg',
+    };
   },
   created() {},
   methods: {},
@@ -28,4 +141,127 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.info {
+  margin: 20px 0px;
+  .one {
+    width: 595px;
+    margin-right: 10px;
+    height: 330px;
+    background-color: #fff;
+    padding: 20px;
+    overflow: hidden;
+    .top {
+      border-bottom: 1px solid #ccc;
+      padding: 5px 0px;
+      .shu {
+        width: 4px;
+        height: 20px;
+        background: #005293;
+        display: inline-block;
+        margin-right: 20px;
+        vertical-align: middle;
+      }
+      .title {
+        display: inline-block;
+        font-size: 20px;
+        line-height: 23px;
+        vertical-align: middle;
+        color: #005293;
+      }
+    }
+    .con1 {
+      margin-top: 15px;
+      .img {
+        width: 130px;
+        height: 115px;
+        background-color: #ccc;
+        margin-right: 10px;
+        margin-bottom: 10px;
+      }
+      .img:nth-child(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+  .two {
+    width: 595px;
+    height: 330px;
+    background-color: #fff;
+    padding: 20px;
+    overflow: hidden;
+    .top {
+      border-bottom: 1px solid #ccc;
+      padding: 5px 0px;
+      .shu {
+        width: 4px;
+        height: 20px;
+        background: #005293;
+        display: inline-block;
+        margin-right: 20px;
+        vertical-align: middle;
+      }
+      .title {
+        display: inline-block;
+        font-size: 20px;
+        line-height: 23px;
+        vertical-align: middle;
+        color: #005293;
+      }
+    }
+    .con2 {
+      margin-top: 15px;
+      .img {
+        height: 115px;
+        margin-right: 10px;
+        margin-bottom: 15px;
+        width: 178px;
+      }
+      .img:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+  }
+  .three {
+    height: 237px;
+    padding: 20px;
+    background-color: #fff;
+    margin-top: 10px;
+    overflow: hidden;
+    .top {
+      border-bottom: 1px solid #ccc;
+      padding: 5px 0px;
+      .shu {
+        width: 4px;
+        height: 20px;
+        background: #005293;
+        display: inline-block;
+        margin-right: 20px;
+        vertical-align: middle;
+      }
+      .title {
+        display: inline-block;
+        font-size: 20px;
+        line-height: 23px;
+        vertical-align: middle;
+        color: #005293;
+      }
+    }
+    .con3 {
+      margin-top: 15px;
+      .img {
+        width: 185px;
+        height: 146px;
+        margin-right: 10px;
+      }
+      .img:nth-child(6n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>

src/views/kjpx/index.vue

@@ -8,7 +8,84 @@
         <el-col :span="24">
           <menus></menus>
         </el-col>
-        <el-col :span="24" class="info"> </el-col>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="10" class="left">
+              <el-col :span="24" class="title">
+                <el-col :span="18">
+                  <div class="shu"></div>
+                  <p>视频会议中心</p>
+                </el-col>
+                <el-col :span="6" class="more">
+                  <img src="../../assets/more.png" />
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="con" v-for="(item, index) in kjpx" :key="index">
+                <el-col :span="5" class="time">{{ item.time }}</el-col>
+                <el-col :span="19" class="list">
+                  <el-col :span="24" class="title1">{{ item.title }}</el-col>
+                  <el-col :span="24" class="con1">{{ item.text }}</el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="14" class="right">
+              <el-tabs v-model="activeName">
+                <el-tab-pane label="专题研讨" name="first">
+                  <el-col :span="24" class="ztyt">
+                    <el-col :span="24" class="list1" v-for="(item, index) in ztyt" :key="index">
+                      <el-col :span="20">
+                        <span class="circle"></span>
+                        <span class="text">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="4" class="time">
+                        {{ item.time }}
+                      </el-col>
+                    </el-col>
+                  </el-col>
+                </el-tab-pane>
+                <el-tab-pane label="技术问答" name="second"
+                  ><el-col :span="24" class="ztyt">
+                    <el-col :span="24" class="list1" v-for="(item, index) in ztyt" :key="index">
+                      <el-col :span="20">
+                        <span class="circle"></span>
+                        <span class="text">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="4" class="time">
+                        {{ item.time }}
+                      </el-col>
+                    </el-col>
+                  </el-col></el-tab-pane
+                >
+                <el-tab-pane label="行业研究" name="third"
+                  ><el-col :span="24" class="ztyt">
+                    <el-col :span="24" class="list1" v-for="(item, index) in ztyt" :key="index">
+                      <el-col :span="20">
+                        <span class="circle"></span>
+                        <span class="text">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="4" class="time">
+                        {{ item.time }}
+                      </el-col>
+                    </el-col>
+                  </el-col></el-tab-pane
+                >
+                <el-tab-pane label="教育培训" name="fourth"
+                  ><el-col :span="24" class="ztyt">
+                    <el-col :span="24" class="list1" v-for="(item, index) in ztyt" :key="index">
+                      <el-col :span="20">
+                        <span class="circle"></span>
+                        <span class="text">{{ item.text }}</span>
+                      </el-col>
+                      <el-col :span="4" class="time">
+                        {{ item.time }}
+                      </el-col>
+                    </el-col>
+                  </el-col></el-tab-pane
+                >
+              </el-tabs>
+            </el-col>
+          </div>
+        </el-col>
         <el-col :span="24">
           <foot></foot>
         </el-col>
@@ -28,9 +105,87 @@ export default {
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    top,
+    menus,
+    foot,
+  },
   data: function() {
-    return {};
+    return {
+      kjpx: [
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+        {
+          time: '19-25',
+          title: '【重点任务看进展】经济体制改革深入推进',
+          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
+        },
+      ],
+      activeName: 'first',
+      ztyt: [
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '2019-12-05' },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -40,4 +195,116 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.info {
+  margin-bottom: 20px;
+  .left {
+    width: 514px;
+    height: 612px;
+    margin-right: 10px;
+    background: #fff;
+    overflow: hidden;
+    .con {
+      padding: 0px 10px;
+      margin-bottom: 27px;
+      .time {
+        height: 20px;
+        background-color: #005293;
+        width: 60px;
+        line-height: 20px;
+        text-align: center;
+        color: #fff;
+      }
+      .list {
+        padding-left: 10px;
+        .title1 {
+          font-size: 17px;
+          color: #005293;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .con1 {
+          font-size: 15px;
+          color: #666;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+  .right {
+    width: 676px;
+    height: 612px;
+    background-color: #fff;
+    padding: 10px 10px 0px 20px;
+  }
+  .title {
+    height: 39px;
+    border-bottom: 1px solid #ccc;
+    line-height: 39px;
+    width: 474px;
+    margin: 20px;
+    .shu {
+      width: 4px;
+      height: 20px;
+      background-color: #005293;
+      margin-right: 10px;
+      display: inline-block;
+      margin-bottom: -3px;
+    }
+    p {
+      font-size: 20px;
+      color: #005293;
+      display: inline-block;
+    }
+    .more {
+      text-align: right;
+    }
+  }
+  .ztyt {
+    overflow: hidden;
+    height: 538px;
+    .list1 {
+      padding: 0px 20px;
+      font-size: 16px;
+      color: #555555;
+      font-family: '微软雅黑';
+      padding: 4.5px 20px;
+      .circle {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        margin: 0 10px 8px 0;
+        background: #ccc;
+      }
+      .text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 380px;
+        display: inline-block;
+      }
+      .time {
+        text-align: right;
+      }
+    }
+    .list1:last-child {
+      padding-bottom: 0;
+    }
+  }
+}
+/deep/.el-tabs__item {
+  font-size: 20px;
+}
+/deep/.el-tabs__active-bar {
+  width: 80px;
+}
+</style>

src/views/list.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24">
+          <top></top>
+        </el-col>
+        <el-col :span="24">
+          <menus></menus>
+        </el-col>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="more">
+              <el-col :span="24" class="title">
+                <el-col :span="24">
+                  <div class="shu"></div>
+                  <p>视频会议中心</p>
+                </el-col>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <foot></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';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'list',
+  props: {},
+  components: {
+    top,
+    menus,
+    foot,
+  },
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.info {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  .more {
+    padding: 10px 10px 10px 20px;
+    background-color: #fff;
+    .title {
+      height: 39px;
+      border-bottom: 1px solid #ccc;
+      line-height: 39px;
+      .shu {
+        width: 4px;
+        height: 20px;
+        background-color: #005293;
+        margin-right: 10px;
+        display: inline-block;
+        margin-bottom: -3px;
+      }
+      p {
+        font-size: 20px;
+        color: #005293;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>