1

src/views/index.vue

@@ -11,7 +11,7 @@
         <el-col :span="24" class="info">
           <div class="w_1200">
             <el-col :span="6" class="one">
-              <img src="../assets/map.jpg" />
+              <img src="../assets/map.jpg" style="width: 100%; height: 100%" />
               <p>创新地图提供科技企业的分布和位置信息</p>
             </el-col>
             <el-col :span="18" class="two">
@@ -21,7 +21,7 @@
                   <p>最新资讯</p>
                 </el-col>
                 <el-col :span="6" class="more">
-                  <img src="../assets/more.png" style="width: 100%; height: 100%" />
+                  <img src="../assets/more.png" />
                 </el-col>
               </el-col>
               <el-col :span="24" class="list">

src/views/kjpx/index.vue

@@ -2,7 +2,18 @@
   <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">
+          
+        </el-col>
+        <el-col :span="24">
+          <foot></foot>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -10,6 +21,9 @@
 
 <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 };

src/views/kjzx/index.vue

@@ -15,7 +15,50 @@
                 <img src="../../assets/news.jpg" style="width: 100%; height: 100%" />
                 <p>提示信息</p>
               </el-col>
-              <el-col :span="24" class="two"></el-col>
+              <el-col :span="24" class="two">
+                <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="list">
+                  <el-col :span="24" class="listInfo" v-for="(item, index) in zxzx" :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-col>
+            </el-col>
+            <el-col :span="18" class="con1">
+              <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="list">
+                <el-col :span="24" class="listInfo" v-for="(item, index) in kjdt" :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-col>
           </div>
         </el-col>
@@ -45,7 +88,34 @@ export default {
   },
 
   data: function() {
-    return {};
+    return {
+      zxzx: [
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士中国工程院新增两名吉林省院士', time: '12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '12-05' },
+        { text: '2019年中国科学院、中国工程院新增两名吉林省院士', time: '12-05' },
+      ],
+      kjdt: [
+        { 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: {},
@@ -67,7 +137,7 @@ export default {
     width: 514px;
     margin-right: 10px;
     .one {
-      height: 354px;
+      height: 340px;
       width: 514px;
       background-color: #fff;
       position: relative;
@@ -86,8 +156,84 @@ export default {
       }
     }
     .two {
-      width: 354px;
-      height: 680px;
+      width: 514px;
+      height: 330px;
+      background-color: #fff;
+    }
+  }
+  .con1 {
+    width: 676px;
+    height: 680px;
+    background-color: #fff;
+    overflow: hidden;
+    .title {
+      width: 636px;
+    }
+    .list {
+      overflow: hidden;
+      height: 580px;
+      .listInfo {
+        .text {
+          width: 490px;
+        }
+      }
+      .listInfo:nth-child(8) {
+        padding-bottom: 20px;
+        border-bottom: 1px solid #ccc;
+      }
+      .listInfo:nth-child(9) {
+        padding-top: 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;
+  }
+}
+.list {
+  padding: 0px 20px;
+  font-size: 16px;
+  color: #555555;
+  font-family: '微软雅黑';
+
+  .listInfo {
+    padding: 5px 0px;
+    .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;
     }
   }
 }