首页轮播图

ant-design-vue-jeecg/src/views/shopping/shopHome.vue

@@ -74,6 +74,15 @@
           <div class="orange"></div>
           <p class="desc">Recommending Commodities</p>
         </div>
+<!--        <el-carousel :interval="4000" type="card">-->
+<!--          <el-carousel-item v-for="(item, index) in clothList2" :key="index" @click="tjspxq1(item.id,item.title)">-->
+<!--            <div class="box" >-->
+<!--              <img :src="item.imgUrl" alt="" />-->
+<!--              <p class="box1">{{item.title}}</p>-->
+<!--              <p class="box2">{{item.time}}</p>-->
+<!--            </div>-->
+<!--          </el-carousel-item>-->
+<!--        </el-carousel>-->
         <a-carousel arrows :slides-to-show="3" :slides-to-scroll="1" >
           <div
             slot="prevArrow"
@@ -89,7 +98,7 @@
           <div class="box" v-for="(item, index) in clothList2" :key="index" @click="tjspxq1(item.id,item.title)">
             <img :src="item.imgUrl" alt="" />
             <p class="box1">{{item.title}}</p>
-            <p class="box2">{{item.time}}</p>
+            <p class="box2">价格:{{item.time}}</p>
           </div>
         </a-carousel>
         <div class="more d-flex" style="padding-top: 20px">
@@ -693,20 +702,37 @@
   @import './assets/common.css';
 </style>
 <style scoped>
-  .box {
+  /*.box {*/
-    position: relative;
+  /*     position: relative;*/
-  }
+  /*   }*/
-  .img {
+  /*.img {*/
-    position: absolute;
+  /*  position: absolute;*/
-    top: 0;
+  /*  top: 0;*/
-  }
+  /*}*/
-  .box1 {
+  /*.box1 {*/
-    position: absolute;
+  /*  position: absolute;*/
-    bottom: 20%;
+  /*  bottom: 20%;*/
-  }
+  /*}*/
-  .box2 {
+  /*.box2 {*/
-    position: absolute;
+  /*  position: absolute;*/
-    bottom: 5%;
+  /*  bottom: 5%;*/
+  /*}*/
+  /*.slick-slide.slick-active:nth-child(2) img{*/
+  /*  height: 450px;*/
+  /*  width: 100%;*/
+  /*}*/
+  .box img{
+    width: 90%;
+    height: 400px;
+  }
+  .box .box1{
+    width: 90%;
+    margin-top: 20px;
+    letter-spacing: 0.1em;
+    font-size: 24px;color: #1B1B1B;
+  }
+  .box .box2{
+    font-size: 18px;color: #1B1B1B;text-align: right;padding-right: 80px;
   }
   .more {
     align-items: center;