首页更新

src/components/index.vue

@@ -24,8 +24,12 @@
           </el-col>
           <el-col :span="15" class="aoliao">
             <el-col :span="24" class="notification">
-              <el-col :span="12" class="notice">通知公告</el-col>
-              <el-col :span="12" class="law">政策法规</el-col>
+              <el-col :span="12" class="notice">
+                <notice :noticeList="noticeList"></notice>
+              </el-col>
+              <el-col :span="12" class="law">
+                <law :lawList="lawList"></law>
+              </el-col>
             </el-col>
             <el-col :span="24" class="dian">
               图标
@@ -54,6 +58,8 @@ 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 notice from '@/layout/index/notice.vue';
+import law from '@/layout/index/law.vue';
 import foot from '@/layout/index/foot.vue';
 
 export default {
@@ -62,6 +68,8 @@ export default {
     info: null, //站点信息
     map: null, //创新地图
     zixunList: null, //最新资讯
+    noticeList: null, //通知公告
+    lawList: null, //政策法规
   },
   components: {
     top, //头部
@@ -69,6 +77,8 @@ export default {
     menuInfo, //导航
     mapInfo, //创新地图
     zixun, //最新资讯
+    notice, //通知公告
+    law, //政策法规
     foot, //底部
   },
   data: () => ({}),

src/layout/index/law.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="law">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="20" class="left">{{ title }}</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 lawList" :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-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {
+    lawList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '政策法规',
+    more: require('@/assets/更多.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.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: 240px;
+  margin: 0 20px 0 0;
+}
+.zixunList .date {
+  font-size: 14px;
+  color: #abaab8;
+  float: right;
+  max-width: 90px;
+}
+</style>

src/layout/index/notice.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="notice">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="20" class="left">{{ title }}</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 noticeList" :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-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice',
+  props: {
+    noticeList: null,
+  },
+  components: {},
+  data: () => ({
+    title: '通知公告',
+    more: require('@/assets/更多.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.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: 240px;
+  margin: 0 20px 0 0;
+}
+.zixunList .date {
+  font-size: 14px;
+  color: #abaab8;
+  float: right;
+  max-width: 90px;
+}
+</style>

src/layout/index/zixun.vue

@@ -16,7 +16,7 @@
         </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="20" class="left">{{ title }}</el-col>
             <el-col :span="4" class="more">
               <el-link :underline="false"><el-image :src="more"></el-image></el-link>
             </el-col>
@@ -49,6 +49,7 @@ export default {
     input: '',
     select: '',
     region: '',
+    title: '最新资讯',
   }),
   created() {},
   computed: {},

src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="index">
-    <index-detail :info="info" :map="map" :zixunList="zixunList"></index-detail>
+    <index-detail :info="info" :map="map" :zixunList="zixunList" :noticeList="noticeList" :lawList="lawList"></index-detail>
   </div>
 </template>
 
@@ -23,32 +23,27 @@ export default {
         date: '2019-12-25',
       },
       {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
-        date: '2019-12-25',
-      },
-      {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
-        date: '2019-12-25',
-      },
-      {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        title: '八条数据',
         date: '2019-12-25',
       },
+    ],
+    noticeList: [
       {
         title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
         date: '2019-12-25',
       },
       {
-        title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        title: '八条数据',
         date: '2019-12-25',
       },
+    ],
+    lawList: [
       {
         title: '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
         date: '2019-12-25',
       },
       {
-        title:
-          '尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验尼日利亚传统领袖：尼应学习借鉴中国自贸区建设经验',
+        title: '八条数据',
         date: '2019-12-25',
       },
     ],