更新科技数据数据展示

src/components/shuju/shuju.vue

@@ -18,7 +18,7 @@
         <div class="w_1200">
           <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="19" class="between"><zhanshi :imageList="imageList"></zhanshi></el-col>
             <el-col :span="24" class="gonggao">通知公告</el-col>
           </el-col>
           <el-col class="rightCont">
@@ -51,7 +51,7 @@ export default {
   name: 'shuju',
   props: {
     info: null, //站点信息
-    zhanshiList: null,
+    imageList: null,
   },
   components: {
     top, //头部

src/layout/shuju/zhanshi.vue

@@ -2,12 +2,15 @@
   <div id="zhanshi">
     <el-col class="zhanshi">
       <el-col :span="24" class="topTitle">
-        {{ zhanshiList.title }}
+        {{ title }}
       </el-col>
-      <el-col>
-        <el-carousel trigger="click" height="380px">
-          <el-carousel-item v-for="item in 4" :key="item">
-            <h3 class="small">{{ item }}</h3>
+      <el-col :span="24" class="image">
+        <el-carousel trigger="click" height="340px">
+          <el-carousel-item v-for="(item, index) in imageList" :key="index">
+            <el-image class="beijing" :src="src"></el-image>
+            <el-col class="imageList">
+              <el-image :src="item.pic" style="width:345px;height:280px;"></el-image>
+            </el-col>
           </el-carousel-item>
         </el-carousel>
       </el-col>
@@ -19,10 +22,13 @@
 export default {
   name: 'zhanshi',
   props: {
-    zhanshiList: null,
+    imageList: null,
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    title: '数据展示',
+    src: require('@/assets/beijing1.gif'),
+  }),
   created() {},
   computed: {},
   methods: {},
@@ -39,23 +45,21 @@ export default {
   float: left;
   background-color: #fff;
   font-size: 22px;
-  height: 40px;
+  height: 30px;
   color: #215299;
+  margin: 0 0 10px 0;
 }
-
-.el-carousel__item h3 {
-  color: #475669;
-  font-size: 14px;
-  opacity: 0.75;
-  line-height: 150px;
-  margin: 0;
+.image {
+  height: 340px;
+  overflow: hidden;
 }
-
-.el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
+.beijing {
+  position: absolute;
+  width: 100%;
+  height: 340px;
 }
-
-.el-carousel__item:nth-child(2n + 1) {
-  background-color: #d3dce6;
+.imageList {
+  text-align: center;
+  padding: 20px 0 0 0;
 }
 </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" :imageList="imageList"></shuju-detail>
   </div>
 </template>
 
@@ -23,9 +23,24 @@ export default {
       phone: '电话：0431-1234567',
       email: '邮箱：123456@163.com',
     },
-    zhanshiList: {
-      title: '数据展示',
-    },
+    imageList: [
+      {
+        pic: require('@/assets/biao1.png'),
+      },
+      {
+        pic: require('@/assets/biao2.png'),
+      },
+
+      {
+        pic: require('@/assets/biao3.png'),
+      },
+      {
+        pic: require('@/assets/biao4.png'),
+      },
+      {
+        pic: require('@/assets/biao5.png'),
+      },
+    ],
   }),
   created() {},
   computed: {},