首页页面更新

src/App.vue

@@ -27,4 +27,9 @@ body {
   margin: 0;
   overflow-x: hidden;
 }
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

src/components/index.vue

@@ -17,10 +17,10 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="12" class="map">
-            创新地图
+            <mapInfo :map="map"></mapInfo>
           </el-col>
-          <el-col :span="12" class="zixun">
-            最新资讯
+          <el-col :span="12" class="">
+            <zixun :zixunList="zixunList"></zixun>
           </el-col>
           <el-col :span="15" class="aoliao">
             <el-col :span="24" class="notification">
@@ -52,17 +52,23 @@
 import top from '@/layout/index/top.vue';
 import logo from '@/layout/index/logo.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
+import mapInfo from '@/layout/index/mapInfo.vue';
+import zixun from '@/layout/index/zixun.vue';
 import foot from '@/layout/index/foot.vue';
 
 export default {
   name: 'index',
   props: {
     info: null, //站点信息
+    map: null, //创新地图
+    zixunList: null, //最新资讯
   },
   components: {
     top, //头部
     logo, //logo
     menuInfo, //导航
+    mapInfo, //创新地图
+    zixun, //最新资讯
     foot, //底部
   },
   data: () => ({}),
@@ -98,7 +104,7 @@ export default {
 .main .map {
   float: left;
   width: 590px;
-  height: 360px;
+  height: 400px;
   overflow: hidden;
   margin: 0 10px 10px 0;
   background-color: #fff;
@@ -106,10 +112,9 @@ export default {
 .main .zixun {
   float: left;
   width: 600px;
-  height: 360px;
+  height: 400px;
   margin: 0 0 10px 0;
   overflow: hidden;
-  background-color: #fff;
 }
 .main .aoliao {
   float: left;

src/layout/index/mapInfo.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="mapInfo">
+    <el-row>
+      <el-col :span="24" class="map">
+        <el-link :underline="false">
+          <el-image style="width:550px;height:360px;" :src="map"></el-image>
+        </el-link>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mapInfo',
+  props: {
+    map: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.map {
+  padding: 20px;
+}
+</style>

src/layout/index/zixun.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="zixun">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="search">
+          <el-col :span="15" class="input">
+            <el-input v-model="input" placeholder="请输入搜索关键词"></el-input>
+          </el-col>
+          <el-col :span="8" class="btn">
+            <el-select v-model="region" placeholder="请选择搜索条件">
+              <el-option label="科技政务" value="zhengwu"></el-option>
+              <el-option label="科技政策" value="zhengce"></el-option>
+            </el-select>
+            <i class="el-icon-search icons"></i>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="topInfo">
+            <el-col :span="20" class="left">最新资讯</el-col>
+            <el-col :span="4" class="more">
+              <el-link :underline="false"><el-image :src="more"></el-image></el-link>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="list">
+            <ul>
+              <li class="zixunList" v-for="(item, index) in zixunList" :key="index">
+                <el-link :underline="false">
+                  <span class="title textOver">{{ item.title }}</span>
+                  <span class="date textOver">{{ item.date }}</span>
+                </el-link>
+              </li>
+            </ul>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zixun',
+  props: {
+    zixunList: null,
+  },
+  components: {},
+  data: () => ({
+    more: require('@/assets/更多.png'),
+    input: '',
+    select: '',
+    region: '',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.search {
+  width: 100%;
+  height: 80px;
+  overflow: hidden;
+  margin: 0 0 10px 0;
+  padding: 20px;
+  background-color: #fff;
+}
+.search .input {
+  margin: 0 5px 0 0;
+}
+/deep/.el-input__inner {
+  background-color: #f3f3f3;
+  border-radius: 0;
+  border: none;
+}
+.search .btn {
+  width: 205px;
+  height: 40px;
+}
+.search .btn .el-select {
+  width: 160px;
+  background-color: #f3f3f3;
+}
+.search .btn .icons {
+  width: 45px;
+  color: #4978bb;
+  font-size: 25px;
+  font-weight: bold;
+  text-align: center;
+}
+.info {
+  width: 100%;
+  height: 310px;
+  overflow: hidden;
+  padding: 20px;
+  background-color: #fff;
+}
+.topInfo {
+  height: 30px;
+  line-height: 30px;
+  margin: 0 0 10px 0;
+}
+.topInfo .left {
+  font-size: 22px;
+  color: #2c3350;
+  font-weight: bold;
+}
+.topInfo .more {
+  height: 30px;
+  text-align: right;
+  padding: 6px 0;
+}
+.list {
+  padding: 0 0 0 20px;
+  height: 230px;
+  overflow: hidden;
+}
+.zixunList {
+  padding: 0 0 4px 0;
+}
+.zixunList .title {
+  font-size: 14px;
+  color: #60626e;
+  display: inline-block;
+  width: 440px;
+  margin: 0 20px 0 0;
+}
+.zixunList .date {
+  font-size: 14px;
+  color: #abaab8;
+  float: right;
+  max-width: 90px;
+}
+</style>

src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="index">
-    <index-detail :info="info"></index-detail>
+    <index-detail :info="info" :map="map" :zixunList="zixunList"></index-detail>
   </div>
 </template>
 
@@ -16,6 +16,42 @@ export default {
     info: {
       logo: require('@/assets/logo.png'),
     },
+    map: require('@/assets/map.jpg'),
+    zixunList: [
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+      {
+        title:
+          '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        date: '2019-12-25',
+      },
+    ],
   }),
   created() {},
   computed: {},