科技数据

src/components/shuju/shuju.vue

@@ -19,14 +19,16 @@
           <el-col :span="16" class="leftcont">
             <el-col :span="5" class="fenlei"> <fenlei></fenlei></el-col>
             <el-col :span="19" class="between"><zhanshi :zhanshiList="zhanshiList"></zhanshi></el-col>
-            <el-col :span="24" class="gonggao">通知公告</el-col>
+            <el-col :span="24" class="gonggao">
+              <gonggao :gonggaoList="gonggaoList"></gonggao>
+            </el-col>
           </el-col>
           <el-col class="rightCont">
             <el-col :span="24" class="tongzhi">
-              通知公告
+              <tongzhi :tongzhiList="tongzhiList"></tongzhi>
             </el-col>
             <el-col :span="24" class="shangbao">
-              上报通知
+              <shangbao :shangbaoList="shangbaoList"></shangbao>
             </el-col>
           </el-col>
         </div>
@@ -47,11 +49,18 @@ import menuInfo from '@/layout/index/menuInfo.vue';
 import foot from '@/layout/index/foot.vue';
 import fenlei from '@/layout/shuju/fenlei.vue';
 import zhanshi from '@/layout/shuju/zhanshi.vue';
+import gonggao from '@/layout/shuju/gonggao.vue';
+import shangbao from '@/layout/shuju/shangbao.vue';
+import tongzhi from '@/layout/shuju/tongzhi.vue';
+
 export default {
   name: 'shuju',
   props: {
     info: null, //站点信息
     zhanshiList: null,
+    gonggaoList: null, //底部通知公告
+    shangbaoList: null, //上报通知
+    tongzhiList: null, //右侧通知公告
   },
   components: {
     top, //头部
@@ -60,6 +69,9 @@ export default {
     foot, //底部
     fenlei, //左侧分类
     zhanshi, //数据展示
+    gonggao, //底部通知公告
+    shangbao, //上报通知
+    tongzhi, //右侧通知公告
   },
   data: () => ({}),
   created() {},

src/layout/shuju/gonggao.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="gonggao">
+    <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">
+          <el-col :span="9" class="listImg">
+            <el-image style="width:270px;height:190px;" :src="listImg"></el-image>
+          </el-col>
+          <el-col :span="15" class="gonggaoList">
+            <ul>
+              <li v-for="(item, index) in gonggaoList" :key="index">
+                <el-link :underline="false">
+                  <span class="title textOver">{{ item.title }}</span>
+                </el-link>
+              </li>
+            </ul>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'gonggao',
+  props: {
+    gonggaoList: null,
+  },
+  components: {},
+  data: () => ({
+    more: require('@/assets/更多.png'),
+    title: '通知公告',
+    listImg: require('@/assets/tongji.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: 270px;
+  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 {
+  height: 190px;
+  overflow: hidden;
+}
+.list .listImg {
+  width: 270px;
+  height: 190px;
+  overflow: hidden;
+  margin: 0 10px 0 0;
+}
+.gonggaoList {
+  padding: 0 0 0 20px;
+  height: 190px;
+  overflow: hidden;
+}
+.gonggaoList ul {
+  padding: 0 0 0 20px;
+}
+.gonggaoList ul li {
+  float: left;
+  width: 100%;
+  padding: 0 0 6px 0;
+}
+.gonggaoList ul li .title {
+  font-size: 16px;
+  color: #60626e;
+  display: inline-block;
+  width: 440px;
+}
+.gonggaoList ul li:hover .title {
+  color: #215299;
+}
+</style>

src/layout/shuju/shangbao.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="shangbao">
+    <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 shangbaoList" :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: 'shangbao',
+  props: {
+    shangbaoList: null,
+  },
+  components: {},
+  data: () => ({
+    more: require('@/assets/更多.png'),
+    title: '上报通知',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.info {
+  width: 100%;
+  height: 340px;
+  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: 260px;
+  overflow: hidden;
+}
+.zixunList {
+  padding: 0 0 2px 0;
+}
+.zixunList .title {
+  font-size: 14px;
+  color: #60626e;
+  display: inline-block;
+  width: 230px;
+  margin: 0 20px 0 0;
+}
+.zixunList .date {
+  font-size: 14px;
+  color: #abaab8;
+  float: right;
+  max-width: 90px;
+}
+.zixunList:hover .date {
+  color: #215299;
+}
+.zixunList:hover .title {
+  color: #215299;
+}
+</style>

src/layout/shuju/tongzhi.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="tongzhi">
+    <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 tongzhiList" :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: 'tongzhi',
+  props: {
+    tongzhiList: null,
+  },
+  components: {},
+  data: () => ({
+    more: require('@/assets/更多.png'),
+    title: '通知通告',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  color: #999;
+}
+.info {
+  width: 100%;
+  height: 350px;
+  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: 270px;
+  overflow: hidden;
+}
+.zixunList {
+  padding: 0 0 3px 0;
+}
+.zixunList .title {
+  font-size: 14px;
+  color: #60626e;
+  display: inline-block;
+  width: 230px;
+  margin: 0 20px 0 0;
+}
+.zixunList .date {
+  font-size: 14px;
+  color: #abaab8;
+  float: right;
+  max-width: 90px;
+}
+.zixunList:hover .date {
+  color: #215299;
+}
+.zixunList:hover .title {
+  color: #215299;
+}
+</style>

src/views/shuju/shuju.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="shuju">
-    <shuju-detail :info="info" :zhanshiList="zhanshiList"></shuju-detail>
+    <shuju-detail :info="info" :zhanshiList="zhanshiList" :gonggaoList="gonggaoList" :shangbaoList="shangbaoList" :tongzhiList="tongzhiList"></shuju-detail>
   </div>
 </template>
 
@@ -26,6 +26,34 @@ export default {
     zhanshiList: {
       title: '数据展示',
     },
+    gonggaoList: [
+      {
+        title: '标题',
+      },
+      {
+        title: '六条数据',
+      },
+    ],
+    shangbaoList: [
+      {
+        title: '标题',
+        date: '2019-01-02',
+      },
+      {
+        title: '十条数据',
+        date: '2019-01-02',
+      },
+    ],
+    tongzhiList: [
+      {
+        title: '标题',
+        date: '2019-01-02',
+      },
+      {
+        title: '十条数据',
+        date: '2019-01-02',
+      },
+    ],
   }),
   created() {},
   computed: {},