展示

src/views/auction/Home.vue

@@ -1,26 +1,101 @@
 <template>
-    <div>
-        <div class="search-bar">
-            <img class="icon" src="../../assets/nav_logo_2.png" alt="" />
-            <div class="search-input">
-                <img src="../../assets/icon-sosuo.png" alt="" />
-                <span>搜索你要的精彩</span>
+    <div class="auction">
+        <van-sticky :offset-top="46">
+            <div class="search-bar">
+                <img class="icon" src="../../assets/nav_logo_2.png" alt="" />
+                <div class="search-input">
+                    <img src="../../assets/icon-sosuo1.png" alt="" />
+                    <span>搜索你要的精彩</span>
+                </div>
             </div>
-        </div>
+        </van-sticky>
+
+        <swiper :pagination="{ type: 'progressbar' }" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
+            <swiper-slide>
+                <van-image
+                    width="calc(100vw - 32px)"
+                    height="calc(100vw - 32px)"
+                    :src="require('../../assets/paimai.png')"
+                    fit="cover"
+                    radius="16"
+                />
+            </swiper-slide>
+            <swiper-slide>
+                <van-image
+                    width="calc(100vw - 32px)"
+                    height="calc(100vw - 32px)"
+                    :src="require('../../assets/paimai.png')"
+                    fit="cover"
+                    radius="16"
+                />
+            </swiper-slide>
+        </swiper>
     </div>
 </template>
 
 <script>
-export default {};
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
+
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Pagination, Autoplay]);
+export default {
+    components: {
+        Swiper,
+        SwiperSlide
+    }
+};
 </script>
 
 <style lang="less" scoped>
+.auction {
+    position: relative;
+}
 .search-bar {
+    padding: 9px 16px;
     .flex();
     .icon {
         height: 24px;
         width: auto;
         display: block;
     }
+
+    .search-input {
+        height: 32px;
+        background: #f5f7fa;
+        border-radius: 8px;
+        flex-grow: 1;
+        margin-left: 10px;
+        .flex();
+        padding: 0 16px;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+        span {
+            font-size: 14px;
+            color: #c8c9cc;
+            line-height: 24px;
+        }
+    }
+}
+
+/deep/.mySwiper {
+    --swiper-theme-color: @prim;
+    margin: 11px 16px;
+    .swiper-pagination {
+        top: calc(100vw - 42px);
+        width: 58px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 2px;
+        overflow: hidden;
+        background-color: rgba(255, 255, 255, 0.5);
+    }
 }
 </style>