.

src/components/auction/info.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="auction-info">
+        <van-image width="128" height="128" :src="require('../../assets/paimai.png')" fit="cover" />
+        <div class="content">
+            <div class="text1 van-multi-ellipsis--l2">
+                北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排…北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排
+            </div>
+            <div class="text2"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.auction-info {
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #fff;
+    display: inline-flex;
+    width: calc(100% - 16px);
+    margin: 8px;
+    align-items: stretch;
+    box-sizing: border-box;
+    .van-image {
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex-grow: 1;
+        padding: 10px 12px;
+        .flex-col();
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .text2 {
+            flex-grow: 1;
+        }
+    }
+}
+</style>

src/views/auction/Home.vue

@@ -2,7 +2,7 @@
     <div class="auction">
         <van-sticky :offset-top="46">
             <div class="search-bar">
-                <img class="icon" src="../../assets/nav_logo_2.png" alt="" />
+                <span class="icon">拍卖中心</span>
                 <div class="search-input">
                     <img src="../../assets/icon-sosuo1.png" alt="" />
                     <span>搜索你要的精彩</span>
@@ -10,7 +10,7 @@
             </div>
         </van-sticky>
 
-        <swiper :pagination="{ type: 'progressbar' }" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
+        <swiper pagination :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
             <swiper-slide>
                 <van-image
                     width="calc(100vw - 32px)"
@@ -30,6 +30,36 @@
                 />
             </swiper-slide>
         </swiper>
+        <van-grid :border="false">
+            <van-grid-item :icon="require('../../assets/yikou.png')" text="随时拍" />
+            <van-grid-item :icon="require('../../assets/suishi.png')" text="一口价" />
+            <van-grid-item :icon="require('../../assets/shuzi.png')" text="数字艺术" />
+            <van-grid-item :icon="require('../../assets/zhengji.png')" text="拍卖征集" />
+        </van-grid>
+        <van-tabs v-model:active="sort">
+            <van-tab title="藏传文玩" name="id,desc"></van-tab>
+            <van-tab title="数字艺术" name="like,desc"></van-tab>
+        </van-tabs>
+        <van-list
+            :immediate-check="false"
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text=""
+            @load="getData"
+        >
+            <template v-for="(item, index) in list" :key="index">
+                <auction-info :info="item"></auction-info>
+            </template>
+            <template v-for="i in 10" :key="i">
+                <auction-info></auction-info>
+            </template>
+
+            <van-empty
+                :image="require('@assets/kong_png_yongyoude  (1).png')"
+                v-if="empty"
+                description="没有任何藏品哦~"
+            />
+        </van-list>
     </div>
 </template>
 
@@ -43,10 +73,21 @@ import SwiperCore, { Pagination, Autoplay } from 'swiper';
 
 // install Swiper modules
 SwiperCore.use([Pagination, Autoplay]);
+import list from '../../mixins/list';
+import auctionInfo from '../../components/auction/info.vue';
 export default {
+    mixins: [list],
     components: {
         Swiper,
-        SwiperSlide
+        SwiperSlide,
+        auctionInfo
+    },
+    data() {
+        return {
+            sort: 'id,desc',
+            url: '',
+            list: []
+        };
     }
 };
 </script>
@@ -59,9 +100,10 @@ export default {
     padding: 9px 16px;
     .flex();
     .icon {
-        height: 24px;
-        width: auto;
-        display: block;
+        font-size: 16px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
     }
 
     .search-input {
@@ -86,16 +128,78 @@ export default {
 }
 
 /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);
+
+        .swiper-pagination-bullet {
+            width: 16px;
+            height: 4px;
+            border-radius: 2px;
+            margin: 0 0;
+            background-color: #fff;
+            opacity: 0.5;
+
+            &.swiper-pagination-bullet-active {
+                background-color: @prim;
+                opacity: 1;
+            }
+        }
+    }
+}
+
+/deep/.van-grid {
+    .van-grid-item__content {
+        padding: 10px 16px;
+    }
+    .van-icon__image {
+        width: 32px;
+        height: 32px;
+    }
+    .van-grid-item__text {
+        margin-top: 4px;
+        font-size: 12px;
+        color: #000;
     }
 }
+
+/deep/.van-tabs {
+    padding: 0 16px;
+    position: relative;
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        height: 2px;
+        right: 0;
+        bottom: 0;
+        background: #f5f5f5;
+    }
+    .van-tab {
+        margin-right: 30px;
+        .van-tab__text {
+            font-size: 16px;
+        }
+
+        &.van-tab--active {
+            .van-tab__text {
+                color: #000;
+                font-weight: bold;
+            }
+        }
+    }
+    .van-tabs__nav--line {
+        padding-bottom: 0;
+    }
+    .van-tabs__line {
+        width: 16px;
+        height: 2px;
+        bottom: 0px;
+    }
+}
+
+.van-list {
+    padding: 8px;
+    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 40px, #f5f5f5 100%);
+}
 </style>