Browse Source

修改图片,修改为轮播图(上下)

asd123a20 1 year ago
parent
commit
5eb484e30a
2 changed files with 21 additions and 16 deletions
  1. BIN
      src/assets/hf2.jpg
  2. 21 16
      src/views/Home.vue

BIN
src/assets/hf2.jpg


+ 21 - 16
src/views/Home.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="home">
-    <div class="listBox">
-      <a class="hf" href="http://www.jlskl.cn/www/details/6459a6d90d4f95c7b2696b2c">
-        <img src="../assets/hf2.jpg" class="hfimg">
-      </a>
-    </div>
-    <div class="listBox">
-      <a class="hf" href="http://www.gov.cn/zhuanti/zggcddescqgdbdh/index.htm">
-        <img src="../assets/hf1.jpg" class="hfimg">
-      </a>
-    </div>
+    <el-carousel height="100px" class="hfbox" direction="vertical" autoplay indicator-position="none" :interval="3000">
+      <el-carousel-item>
+        <a class="hf" href="http://www.jlskl.cn/www/details/6459a6d90d4f95c7b2696b2c">
+          <img src="../assets/hf1.jpg" class="hfimg">
+        </a>
+      </el-carousel-item>
+      <el-carousel-item>
+        <a class="hf" href="http://www.gov.cn/zhuanti/zggcddescqgdbdh/index.htm">
+          <img src="../assets/hf2.jpg" class="hfimg">
+        </a>
+      </el-carousel-item>
+    </el-carousel>
     <div class="listBox">
       <banner class="lists"></banner>
       <threeList parentCode="02" class="listItem" :imgUrl="newsImgUrl" :data="news" :isImg="false" title="社科要闻" code="02"></threeList>
@@ -177,15 +179,10 @@ export default {
   .top {
     width: 100%;
   }
-  .listBox {
+  .hfbox {
     width: 68%;
     margin: 0.5% auto;
-    display: flex;
-    .listItem {
-      margin: 0 0.5%;
-    }
     .hf {
-      display: block;
       width: 100%;
       .hfimg {
         width: 100%;
@@ -193,6 +190,14 @@ export default {
       }
     }
   }
+  .listBox {
+    width: 68%;
+    margin: 0.5% auto;
+    display: flex;
+    .listItem {
+      margin: 0 0.5%;
+    }
+  }
   .links {
     width: 68%;
   }