Merge branch 'yuan' of panhui/lasuo_nft_front into master

src/components/CollectionList.vue

@@ -1,27 +1,33 @@
 <template>
     <div class="current_recommendation_con" :key="index" @click="goDetail">
         <!-- <img :src="info.pic[0].url" alt="" class="current_recommendation_img"> -->
-        <van-image width="100%" height="164px" :src="getImg(info.pic[0].url)" fit="cover" />
+        <van-image width="100%" height="165px" :radius="18" :src="getImg(info.pic[0].url)" fit="cover" />
         <!-- <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" class="current_recommendation_img"/> -->
         <div class="current_recommendation_title">{{ info.name }}</div>
-        <div class="current_recommendation_price" :style="{ 'padding-left': info.salable ? '16px' : '9px' }">
-            <div v-if="info.salable">
-                <div class="current_recommendation_price_one">¥</div>
-                <div class="current_recommendation_price_two">{{ info.price }}</div>
+        <div class="information_display">
+            <div class="current_recommendation_price" :style="{ 'padding-left': info.salable ? '14px' : '0px' }">
+                <div v-if="info.salable">
+                    <div class="current_recommendation_price_one">¥</div>
+                    <div class="current_recommendation_price_two">{{ info.price }}</div>
+                </div>
+                <div v-else class="showOnly">仅展示</div>
+            </div>
+            <div class="information_display_con">
+                <span>1000</span>&nbsp;/&nbsp;<span>4000</span>
             </div>
-            <div v-else class="showOnly">仅展示</div>
         </div>
         <div class="current_recommendation_bottom">
             <div class="current_recommendation_bottom_left">
                 <!-- <img :src="info.minterAvatar" alt="" class="current_recommendation_name_img"> -->
-                <van-image width="18px" height="18px" :radius="18" :src="getImg(info.minterAvatar)" fit="cover" />
+                <van-image width="20px" height="20px" :radius="20" :src="getImg(info.minterAvatar)" fit="cover" />
                 <div class="current_recommendation_name">{{ info.owner }}</div>
             </div>
             <div class="current_recommendation_bottom_right">
-                <img :src="info.liked ? likes : noLikes" alt="" class="current_recommendation_bottom_right_img"/>
-                <div class="give_number">{{ info.likes }}</div>
+                <img :src="require('@assets/viewsnumber.png')"  alt="" class="current_recommendation_bottom_right_img" />
+                <div class="give_number">{{info.likes}}</div>
             </div>
         </div>
+        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
     </div>
     <!-- <div class="sold xianliang" v-if="time && info.salable">
                 <img src="@assets/shizhong.png" alt="" />
@@ -111,52 +117,72 @@ export default {
 <style lang="less" scoped>
 .current_recommendation_con {
     width: 48%;
-    height: 254px;
-    background: #29293f;
-    border-radius: 8px;
-    margin-bottom: 16px;
+    // height: 254px;
+    background: #1e222c;
+    border-radius: 18px;
+    margin-bottom: 17px;
     overflow: hidden;
+    position: relative;
+    .bottom_texture{
+        width: 100px;
+        height: 100px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
     .current_recommendation_title {
-        margin-top: 6px;
+        margin-top: 12px;
         padding: 0 10px;
-        width: 170px;
+        width: 100%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         box-sizing: border-box;
-        font-size: 14px;
+        font-size: 12px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #ffffff;
+        line-height: 18px;
     }
-    .current_recommendation_price {
-        width: 100%;
-        margin-top: 5px;
-        // padding-left: 22px;
-        box-sizing: border-box;
+    .information_display {
         display: flex;
-        position: relative;
+        justify-content: space-between;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        margin-top: 8px;
         margin-bottom: 8px;
-        .showOnly {
-            font-size: 14px;
+        .current_recommendation_price {
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #ffffff;
+            position: relative;
+            .current_recommendation_price_one{
+                font-size: 12px;
+                line-height: 20px;
+                position: absolute;
+                bottom: 1px;
+                left: 0px;
+            }
+            .current_recommendation_price_two{
+                font-size: 16px;
+                line-height: 24px;
+            }
+            .showOnly {
+                font-size: 16px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #939599;
+            }
+        }
+        .information_display_con{
+            height: 18px;
+            font-size: 11px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #939599;
-        }
-        .current_recommendation_price_one {
-            font-size: 10px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #28b6ff;
-            position: absolute;
-            bottom: 1px;
-            left: 8px;
-        }
-        .current_recommendation_price_two {
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #28b6ff;
+            color: #FFFFFF;
+            opacity: 0.5;
+            line-height: 18px;
+            margin-top: 3px;
         }
     }
     .current_recommendation_bottom {
@@ -165,26 +191,28 @@ export default {
         justify-content: space-between;
         padding: 0px 10px;
         box-sizing: border-box;
+        margin-bottom: 10px;
         .current_recommendation_bottom_left {
             display: flex;
         }
         .current_recommendation_bottom_right {
             display: flex;
             height: 18px;
-            .current_recommendation_bottom_right_img{
-                width: 18px;
-                height: 18px;
+            .current_recommendation_bottom_right_img {
+                width: 20px;
+                height: 20px;
             }
         }
         .current_recommendation_name {
             margin-left: 4px;
-            width: 80px;
+            width: 40px;
             height: 18px;
             line-height: 18px;
             font-size: 12px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #939599;
+            color: #FFFFFF;
+            opacity: 0.5;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

src/components/asset/assetInfo.vue

@@ -7,16 +7,30 @@
             }
         }"
     > -->
-        <div class="data_display_con" @click="$router.push({path: '/assetDetail',query:{id: info.id}})">
-            <div class="data_display_con_tip" v-if="info.consignment === true">出售中</div>
-            <div class="data_display_con_tip" v-if="info.publicShow === true">展示中</div>
-            <!-- <div class="sales_information_tips" v-if="item.salesInformationTips!=''">{{item.salesInformationTips}}</div> -->
-            <!-- <img :src="getImg(changeImgs(info.pic))" alt="" class="data_display_con_img"> -->
-            <van-image width="100%" height="164px" radius="4" :src="getImg(changeImgs(info.pic))" fit="cover" class="data_display_con_img"/>
-            <div class="data_display_con_title">{{info.name}}</div>
-            <div class="data_display_con_collection">{{info.category}}</div>
+    <div class="data_display_con" @click="$router.push({ path: '/assetDetail', query: { id: info.id } })">
+        <div class="data_display_con_tip" v-if="info.consignment === true">出售中</div>
+        <div class="data_display_con_tip" v-if="info.publicShow === true">展示中</div>
+        <!-- <div class="sales_information_tips" v-if="item.salesInformationTips!=''">{{item.salesInformationTips}}</div> -->
+        <!-- <img :src="getImg(changeImgs(info.pic))" alt="" class="data_display_con_img"> -->
+        <van-image
+            width="100%"
+            height="165px"
+            radius="18"
+            :src="getImg(changeImgs(info.pic))"
+            fit="cover"
+            class="data_display_con_img"
+        />
+        <div class="data_display_con_title">{{ info.name }}</div>
+        <div class="blockchain">
+            <img :src="require('@assets/blockchain@3x.png')" alt="" class="blockchain_img" />
+            <div class="blockchain_title">ac10781#03506/10000</div>
+        </div>
+        <div class="data_display_con_collection">
+            <div class="data_display_con_collection_title">{{info.minter}}</div>
+            <img :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />
         </div>
-        <!-- <van-image
+    </div>
+    <!-- <van-image
             v-if="opened === false"
             width="21.3vw"
             height="21.3vw"
@@ -31,7 +45,7 @@
             <div class="name van-ellipsis">
                 {{ !opened ? '盲盒待开启' : info.name }}
             </div> -->
-            <!-- <template v-if="opened">
+    <!-- <template v-if="opened">
                 <div class="price-content" v-if="info.consignment">
                     <div class="price">
                         <img src="@assets/jiage_huang.png" alt="" />
@@ -46,14 +60,14 @@
                 </div>
             </template>
             <div v-else class="status" style="min-height: 24px;"></div> -->
-            <!-- <div class="text">
+    <!-- <div class="text">
                 <div class="minter"> -->
-                    <!-- <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" /> -->
-                    <!-- <span class="van-ellipsis">{{ info.minter }}</span>
+    <!-- <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" /> -->
+    <!-- <span class="van-ellipsis">{{ info.minter }}</span>
                 </div> -->
-                <!-- <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
+    <!-- <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
                 <span>{{ info.minter }}</span> -->
-                <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
+    <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
           <span>{{ info.sale }}/ </span>
           <span>{{ info.stock }}</span>
         </div>
@@ -61,7 +75,7 @@
         <like-button :isLike="info.liked" @click="likeProduct">
           {{ info.likes }}
         </like-button> -->
-            <!-- </div>
+    <!-- </div>
         </div> -->
     <!-- </router-link> -->
 </template>
@@ -113,26 +127,21 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data_display_con_img{
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-.data_display_con{
+.data_display_con {
     width: 48%;
-    height: 235px;
-    background: #29293F;
-    border-radius: 8px;
-    margin-bottom: 16px;
+    background: #1e222c;
+    border-radius: 18px;
+    margin-bottom: 15px;
     position: relative;
-    .data_display_con_tip{
+    .data_display_con_tip {
         width: 50px;
         height: 18px;
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 4px;
         font-size: 10px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #28B6FF;
+        color: #28b6ff;
         text-align: center;
         line-height: 18px;
         position: absolute;
@@ -140,43 +149,86 @@ export default {
         top: 10px;
         z-index: 9;
     }
-    .sales_information_tips{
+    .sales_information_tips {
         width: 50px;
         height: 18px;
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 4px;
         font-size: 10px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #28B6FF;
+        color: #28b6ff;
         line-height: 18px;
         text-align: center;
         position: absolute;
         left: 10px;
         top: 10px;
     }
-                .data_display_con_title{
-                    padding: 6px 10px;
-                    font-size: 14px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
-                    color: #FFFFFF;
-                    white-space:nowrap;
-                    overflow:hidden;
-                    text-overflow:ellipsis;
-                }
-                .data_display_con_collection{
-                    margin-left: 10px;
-                    width: 56px;
-                    height: 22px;
-                    background: rgba(255, 255, 255, 0.1);
-                    border-radius: 4px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #28B6FF;
-                    text-align: center;
-                    line-height: 22px;
-                }
+    .data_display_con_title {
+        padding: 12px 10px 6px;
+        box-sizing: border-box;
+        font-size: 12px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 18px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .blockchain {
+        padding: 0px 8px 6px;
+        box-sizing: border-box;
+        display: flex;
+        position: relative;
+        .blockchain_img {
+            width: 26px;
+            height: 26px;
+            position: relative;
+            z-index: 1;
+        }
+        .blockchain_title {
+            width: ceil(100% - 30px);
+            height: 18px;
+            padding: 2px 8px;
+            box-sizing: border-box;
+            background: linear-gradient(141deg, #fcdc99 0%, #fce7c8 100%);
+            border-radius: 4px;
+            font-size: 9px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #725837;
+            line-height: 14px;
+            position: absolute;
+            left: 28px;
+            bottom: 10px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .data_display_con_collection {
+        display: flex;
+        justify-content: space-between;
+        padding: 0px 10px 14px;
+        box-sizing: border-box;
+        .data_display_con_collection_title{
+            margin-right: 21px;
+            width: calc(100% - 39px);
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 18px;
+            opacity: 0.5;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .shop_title_img{
+            width: 18px;
+            height: 18px;
+        }
+    }
 }
 </style>

src/components/product/productLarge.vue

@@ -14,28 +14,39 @@
                 <div>即将开售: {{ startTime || time }}</div>
             </div>
             <!-- 已售完 -->
-            <div class="shop_sold_out" v-if="isSolded">已售罄</div>
+            <div class="shop_sold_out" v-if="isSolded">
+                <img :src="require('@assets/shop_sold_out.png')" alt="" class="shop_sold_out_img" />
+                <div>已售罄</div>
+            </div>
             <!-- 即将售罄 -->
-            <div class="shop_sold_out" v-else-if="isSold">即将售罄</div>
+            <div class="shop_sold_out_two" v-else-if="isSold">即将售罄</div>
             <!-- <img :src="getImg(changeImgs(info.pic, 600))" alt="" class="commodity_map" /> -->
-            <van-image width="100%" height="343px" :radius="20" :src="getImg(changeImgs(info.pic))" fit="cover" />
-            <div class="shop_title">{{ info.name }}</div>
+            <van-image width="100%" height="345px" :radius="30" :src="getImg(changeImgs(info.pic))" fit="cover" />
+            <div class="shop_title">
+                <div>{{ info.name }}</div>
+                <img :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />
+            </div>
             <div class="shop_number">
+                <div class="shop_number_con">清乾隆</div>
                 <div class="limit">限量</div>
                 <div class="number_of_copies">{{ info.total }}份</div>
-                <div class="collection" v-if="info.category !=''">{{info.category}}</div>
+                <div class="collection" v-if="info.category != ''">{{ info.category }}</div>
             </div>
             <div class="shop_bottom">
                 <div class="shop_bottom_left">
                     <!-- <img :src="getImg(info.minterAvatar)" alt="" class="shop_bottom_left_img" /> -->
-                    <van-image width="18px" height="18px" :radius="18" :src="getImg(info.minterAvatar)" fit="cover"/>
+                    <van-image width="16px" height="16px" :radius="16" :src="getImg(info.minterAvatar)" fit="cover" />
                     <div class="shop_bottom_left_name">{{ info.minter }}</div>
                 </div>
                 <div class="shop_bottom_right">
                     <div class="shop_bottom_right_con">￥</div>
                     <div class="shop_bottom_right_price">{{ info.price }}</div>
                 </div>
+                <!-- <div class="shop_bottom_right">
+                    <div class="shop_bottom_right_title">仅展示</div>
+                </div> -->
             </div>
+            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
         </div>
     </router-link>
 </template>
@@ -107,142 +118,212 @@ export default {
 <style lang="less" scoped>
 .shop_list {
     width: 100%;
-            height: 455px;
-            background: #29293f;
-            border-radius: 20px;
-            margin-bottom: 20px;
-            position: relative;
-            .not_sold_out {
-                width: 136px;
-                height: 24px;
-                background: #ffffff;
-                border-radius: 4px;
-                line-height: 24px;
+    // height: 455px;
+    background: #1e222c;
+    border-radius: 30px;
+    margin-bottom: 15px;
+    position: relative;
+    .bottom_texture{
+        width: 196px;
+        height: 140px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
+    .not_sold_out {
+        width: 144px;
+        height: 25px;
+        background: #000000;
+        border-radius: 15px;
+        line-height: 17px;
+        font-size: 13px;
+        padding: 4px 6px;
+        box-sizing: border-box;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        z-index: 99;
+        .not_sold_out_img {
+            width: 16px;
+            height: 17px;
+            margin-right: 4px;
+            // margin: 3px 3px 0 10px;
+        }
+    }
+    .shop_sold_out {
+        display: flex;
+        width: 75px;
+        height: 25px;
+        background: #929292;
+        border-radius: 15px;
+        font-size: 13px;
+        padding: 4px 6px;
+        box-sizing: border-box;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 17px;
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        z-index: 99;
+        .shop_sold_out_img {
+            width: 16px;
+            height: 17px;
+            margin-right: 4px;
+        }
+    }
+    .shop_sold_out_two {
+        width: 75px;
+        height: 25px;
+        background: #929292;
+        border-radius: 15px;
+        font-size: 13px;
+        padding: 4px 6px;
+        box-sizing: border-box;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 17px;
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        z-index: 99;
+        text-align: center;
+    }
+    .commodity_map {
+        width: 100%;
+        height: 343px;
+        border-radius: 30px;
+    }
+    .shop_title {
+        display: flex;
+        padding: 0px 15px;
+        box-sizing: border-box;
+        font-size: 16px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 22px;
+        margin: 10px 0px;
+        .shop_title_img {
+            width: 18px;
+            height: 18px;
+            margin-top: 2px;
+            margin-left: 5px;
+        }
+    }
+    .shop_number {
+        padding: 0 15px;
+        box-sizing: border-box;
+        display: flex;
+        .shop_number_con {
+            height: 16px;
+            padding: 0px 6px;
+            box-sizing: border-box;
+            background: #f9ddb3;
+            border-radius: 3px;
+            margin-right: 6px;
+            font-size: 11px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #282d3a;
+            line-height: 16px;
+        }
+        .limit {
+            width: 34px;
+            height: 16px;
+            background: #f9ddb3;
+            border-radius: 3px 0px 0px 3px;
+            font-size: 11px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #282d3a;
+            line-height: 16px;
+            text-align: center;
+        }
+        .number_of_copies {
+            // width: 96px;
+            padding: 0px 6px;
+            box-sizing: border-box;
+            height: 16px;
+            background: #323743;
+            border-radius: 0px 3px 3px 0px;
+            font-size: 11px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #f9ddb3;
+            line-height: 16px;
+            text-align: center;
+        }
+        .collection {
+            // width: 56px;
+            height: 16px;
+            background: #323743;
+            padding: 0px 6px;
+            box-sizing: border-box;
+            border-radius: 3px;
+            font-size: 11px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #f9ddb3;
+            margin-left: 6px;
+            line-height: 16px;
+            // text-align: center;
+        }
+    }
+    .shop_bottom {
+        padding: 2px 15px 15px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        .shop_bottom_left {
+            display: flex;
+            padding-top: 9px;
+            box-sizing: border-box;
+            .shop_bottom_left_name {
                 font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #28b6ff;
-                display: flex;
-                position: absolute;
-                top: 16px;
-                left: 16px;
-                .not_sold_out_img {
-                    width: 18px;
-                    height: 18px;
-                    margin: 3px 3px 0 10px;
-                }
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 16px;
+                margin-left: 8px;
             }
-            .shop_sold_out {
-                width: 68px;
-                height: 24px;
-                background: #ffffff;
-                border-radius: 4px;
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
-                text-align: center;
-                position: absolute;
-                top: 16px;
-                left: 16px;
-                z-index: 99;
+        }
+        .shop_bottom_right {
+            display: flex;
+            position: relative;
+            .shop_bottom_right_con {
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 600;
+                color: #FFFFFF;
+                line-height: 22px;
+                margin-top: 4px;
+                // position: absolute;
+                // bottom: 3px;
+                // left: -12px;
             }
-            .commodity_map {
-                width: 100%;
-                height: 343px;
-                border-radius: 30px;
+            .shop_bottom_right_price {
+                font-size: 20px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 28px;
             }
-            .shop_title {
-                margin-bottom: 6px;
-                padding: 10px 16px 6px 16px;
-                box-sizing: border-box;
+            .shop_bottom_right_title{
+                margin-top: 9px;
                 font-size: 14px;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                color: #ffffff;
-            }
-            .shop_number {
-                padding: 0 16px;
-                box-sizing: border-box;
-                display: flex;
-                .limit {
-                    width: 44px;
-                    height: 22px;
-                    background: #28b6ff;
-                    border-radius: 4px 0px 0px 4px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #ffffff;
-                    line-height: 22px;
-                    text-align: center;
-                }
-                .number_of_copies {
-                    // width: 96px;
-                    padding: 0px 10px;
-                    box-sizing: border-box;
-                    height: 22px;
-                    background: rgba(255, 255, 255, 0.1);
-                    border-radius: 0px 4px 4px 0px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #28b6ff;
-                    line-height: 22px;
-                    text-align: center;
-                }
-                .collection {
-                    width: 56px;
-                    height: 22px;
-                    background: rgba(255, 255, 255, 0.1);
-                    border-radius: 4px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #28b6ff;
-                    margin-left: 10px;
-                    line-height: 22px;
-                    text-align: center;
-                }
+                color: #FFFFFF;
+                line-height: 16px;
             }
-            .shop_bottom {
-                padding: 0 16px;
-                margin-top: 10px;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                .shop_bottom_left {
-                    display: flex;
-                    padding-top: 5px;
-                    box-sizing: border-box;
-                    .shop_bottom_left_name {
-                        font-size: 12px;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        color: #939599;
-                        margin-left: 6px;
-                    }
-                }
-                .shop_bottom_right {
-                    display: flex;
-                    position: relative;
-                    .shop_bottom_right_con {
-                        font-size: 12px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #ffffff;
-                        position: absolute;
-                        bottom: 3px;
-                        left: -12px;
-                    }
-                    .shop_bottom_right_price {
-                        font-size: 20px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #ffffff;
-                    }
-                }
-            }    
+        }
+    }
 }
 </style>

src/components/product/recentSale.vue

@@ -0,0 +1,123 @@
+<template>
+    <router-link
+        :to="{
+            path: '/productDetail',
+            query: {
+                collectionId: info.id
+            }
+        }"
+    >
+        <div class="recent_sale_list">
+            <img :src="require('@assets/commodity-background-map.png')" alt="" class="recent_sale_list_three_img" />
+            <div class="recent_sale_list_three_con">
+                <div class="title">古董_百度图片搜索</div>
+                <div class="limit">
+                    <div class="limit_tip">限量</div>
+                    <div class="limit_number">888份</div>
+                </div>
+                <div class="price">
+                    <div class="price_tip">¥</div>
+                    <div class="price_number">28.00</div>
+                </div>
+            </div>
+            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
+        </div>
+    </router-link>
+</template>
+
+<script>
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        type: {
+            type: String,
+            default: 'collection'
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.recent_sale_list {
+    background: #1e222c;
+    border-radius: 18px;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    .recent_sale_list_three_img {
+        width: 120px;
+        height: 120px;
+        border-radius: 18px;
+        margin-right: 12px;
+    }
+    .recent_sale_list_three_con {
+        padding-top: 16px;
+        box-sizing: border-box;
+        .title {
+            height: 22px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 22px;
+            margin-bottom: 12px;
+        }
+        .limit {
+            display: flex;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            margin-bottom: 12px;
+            .limit_tip {
+                width: 36px;
+                height: 18px;
+                background: #f9ddb3;
+                border-radius: 3px 0px 0px 3px;
+                color: #282d3a;
+                line-height: 18px;
+                text-align: center;
+            }
+            .limit_number {
+                height: 18px;
+                background: #323743;
+                border-radius: 0px 3px 3px 0px;
+                padding: 0px 6px;
+                box-sizing: border-box;
+                color: #f9ddb3;
+                line-height: 18px;
+            }
+        }
+        .price {
+            display: flex;
+            .price_tip {
+                font-size: 16px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 22px;
+                margin-top: 2px;
+                margin-right: 4px;
+            }
+            .price_number {
+                font-size: 18px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 24px;
+            }
+        }
+    }
+    .bottom_texture{
+        width: 115px;
+        height: 100px;
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+    }
+}
+</style>

src/views/Discover.vue

@@ -17,35 +17,71 @@
                 </div>
             </div>
         </van-sticky>
-        <div
-            class="explore_content"
-            :class="
-                (currentRecommendationList.length < 3 && hotCollectionList.length == 0) ||
-                (currentRecommendationList.length == 0 && hotCollectionList.length < 3)
-                    ? 'shop_list_one'
-                    : ''
-            "
-        >
-            <!-- 商品展示 -->
-            <div class="commodity_display">
-                <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
+        <!-- 商品展示 -->
+        <div class="commodity_display">
+            <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
                 <van-swipe-item v-for="(item, index) in commodityDisplayList" :key="index">
                     <van-image width="94px" height="90px" :src="getImg(item.pic)" fit="cover" />
                 </van-swipe-item>
             </van-swipe> -->
-                <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
-                    <swiper-slide
-                        class="setting"
-                        v-for="item in commodityDisplayList"
-                        :key="item.id"
-                        style="width: 94px"
-                    >
-                        <van-image width="94px" height="90px" radius="8" :src="getImg(item.pic)" fit="cover" @click="goNext(item)"/>
-                    </swiper-slide>
-                </swiper>
-            </div>
+            <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
+                <swiper-slide class="setting" v-for="item in commodityDisplayList" :key="item.id" style="width: 64px">
+                    <van-image
+                        width="64px"
+                        height="64px"
+                        radius="33"
+                        :src="getImg(item.pic)"
+                        fit="cover"
+                        @click="goNext(item)"
+                    />
+                    <div class="setting_title">{{item.name}}</div>
+                </swiper-slide>
+            </swiper>
+        </div>
+        <div
+            class="explore_content"
+        >
+            <van-tabs
+                v-model:active="sort"
+                :ellipsis="false"
+                line-width="16"
+                line-height="2"
+                @click-tab="changeTab"
+                :class="{ trans: source == 'TRANSFER' }"
+            >
+                <van-tab
+                    :title="item.label"
+                    :name="item.value"
+                    :title-class="item.type === 'select' && sortDes ? sortDes : ''"
+                    :key="index"
+                    :lazy-render="false"
+                    v-for="(item, index) in selectOptions"
+                >
+                    <!-- <template v-if="item.type === 'sales'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template> -->
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                    <template v-if="item.type === 'views'" #title2>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                </van-tab>
+            </van-tabs>
             <!-- banner图展示 -->
-            <div class="banner">
+            <!-- <div class="banner">
                 <div class="banner_con" v-for="(item, index) in bannerList" :key="index" @click="showJump(index)">
                     <img :src="item.img" alt="" class="banner_con_img" />
                     <div class="banner_con_title">
@@ -53,22 +89,24 @@
                         <div class="banner_con_titletwo">{{ item.titletwo }}</div>
                     </div>
                 </div>
-            </div>
+            </div> -->
             <div class="content_list">
                 <!-- 本期推荐 -->
-                <page-title
+                <!-- <page-title
                     title="本期推荐"
                     :to="{ path: '/productList', query: { type: 'DEFAULT', title: '本期推荐' } }"
                 >
-                </page-title>
-                <div class="current_recommendation">
-                    <template v-for="(item, index) in currentRecommendationList" :key="item.id">
-                        <CollectionList v-model:info="currentRecommendationList[index]"></CollectionList
-                    ></template>
-                </div>
+                </page-title> -->
+                <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+                    <div class="current_recommendation">
+                        <template v-for="(item, index) in list" :key="item.id">
+                            <CollectionList v-model:info="list[index]"></CollectionList
+                        ></template>
+                    </div>
+                </van-list>
                 <!-- <List :dataList="currentRecommendationList"></List> -->
                 <!-- 最HOT收藏品 -->
-                <page-title
+                <!-- <page-title
                     title="最HOT收藏品"
                     :to="{ path: '/productList', query: { type: 'DEFAULT', title: '最HOT收藏品' } }"
                 >
@@ -77,7 +115,7 @@
                     <template v-for="(item, index) in hotCollectionList" :key="item.id">
                         <CollectionList v-model:info="hotCollectionList[index]"></CollectionList
                     ></template>
-                </div>
+                </div> -->
             </div>
         </div>
     </van-pull-refresh>
@@ -103,11 +141,12 @@ import 'swiper/swiper-bundle.min.css';
 import product from '../mixins/product';
 import CollectionList from '../components/CollectionList.vue';
 import banner from '../mixins/banner';
+import list from '../mixins/list';
 // import TopNavigation from "../components/TopNavigation.vue"
 export default {
     // name: 'discover',
     // inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
-    mixins: [product,banner],
+    mixins: [product, banner, list],
     components: {
         CollectionList,
         Swiper,
@@ -128,19 +167,45 @@ export default {
                     img: require('@assets/icon-jingxuan.png'),
                     titleone: '精选推荐',
                     titletwo: '介绍介绍介绍介绍'
-                },
+                }
                 // {
                 //     img: require('@assets/icon-zhanlan.png'),
                 //     titleone: '藏品展览',
                 //     titletwo: '介绍介绍介绍介绍'
                 // }
             ],
+            selectOptions: [
+                {
+                    label: '全部',
+                    value: 'id,desc'
+                },
+                {
+                    label: '最新',
+                    value: 'createdAt,desc'
+                },
+                {
+                    label: '销量',
+                    value: 'likes,desc',
+                    type: 'select'
+                },
+                // {
+                //     label: '价格',
+                //     value: 'price',
+                //     type: 'select'
+                // },
+                {
+                    label: '浏览量',
+                    value: 'view,desc',
+                    type: 'views'
+                }
+            ],
             // 商品展示列表
             commodityDisplayList: [],
             // 本期推荐列表
-            currentRecommendationList: [],
+            list: [],
             // 最HOT收藏品
-            hotCollectionList: []
+            hotCollectionList: [],
+            url: '/collection/all'
         };
     },
     mounted() {
@@ -167,6 +232,32 @@ export default {
         //     let currentRecommendationList = this.currentRecommendationList
         //     currentRecommendationList[index].liked = !currentRecommendationList[index].liked
         // },
+        changeTab(info) {
+            this.$nextTick(() => {
+                if (info.name === 'price') {
+                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
+                }
+                this.getData(true);
+            });
+        },
+        beforeData() {
+            let sort = this.sort;
+            if (sort == 'price') {
+                sort = 'price,' + this.sortDes;
+            }
+            return {
+                query: {
+                    onShelf: true,
+                    type: this.type,
+                    source: this.source,
+                    minterId: this.minterId,
+                    del: false,
+                    salable: this.salable
+                },
+                search: this.search,
+                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
+            };
+        },
         // 精品推荐跳转
         showJump(index) {
             if (index == 0) {
@@ -196,7 +287,7 @@ export default {
                 });
         },
         // 获取本期推荐的列表
-        getProduct(type = '', sort = 'sort,desc', size = 4) {
+        getProduct(type = '', sort = 'sort,desc', size = 8) {
             let page = this.page;
             return this.$http
                 .post(
@@ -387,31 +478,32 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.shop_list_one {
-    height: 100%;
-    position: absolute;
+.scroll-wrapper{
+    background: #191D27 !important;
 }
-.discover{
-    background: #0f0f27;
+.discover {
+    background: #191D27;
 }
 .search_con {
-    padding: 12px 16px 24px 16px;
+    padding: 9px 15px 20px 15px;
     box-sizing: border-box;
-    background: #0f0f27;
+    background: #191D27;
+    // background: #191D27;
     .search {
         width: 100%;
-        height: 32px;
-        background: #29293f;
+        height: 38px;
+        background: #1e222c;
         border-radius: 4px;
-        padding: 5px 0 4px 33px;
+        padding: 7px 0 7px 35px;
         box-sizing: border-box;
         position: relative;
+        line-height: 24px;
         .search_img {
-            width: 16px;
-            height: 16px;
+            width: 20px;
+            height: 20px;
             position: absolute;
             left: 10px;
-            top: 6px;
+            top: 9px;
         }
         .search_text {
             font-size: 14px;
@@ -422,8 +514,23 @@ export default {
     }
 }
 .setting {
-    height: 90px;
-    margin-right: 16px;
+    height: 94px;
+    margin-right: 24px;
+    margin-bottom: 20px;
+    .setting_title {
+        width: 64px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-top: 10px;
+        height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+        text-align: center;
+    }
 }
 .setting:last-child {
     margin-right: 0px;
@@ -434,10 +541,14 @@ export default {
     justify-content: space-between;
     flex-wrap: wrap;
 }
+.commodity_display {
+    padding-left: 15px;
+    box-sizing: border-box;
+}
 .explore_content {
     width: 100%;
-    background: #0f0f27;
-    padding: 0px 16px 16px 16px;
+    background: #191D27;
+    padding: 0px 15px 15px 15px;
     // margin-top: 44px;
     box-sizing: border-box;
     /deep/ .van-cell__title span {
@@ -450,23 +561,64 @@ export default {
     /deep/ .van-swipe__track {
         width: 100%;
     }
-    .commodity_display {
-        width: 100%;
-        margin-bottom: 24px;
-        display: flex;
-        .van-swipe {
-            width: 100%;
-        }
-        .van-swipe-item {
-            margin-right: 16px;
+    // .commodity_display {
+    //     width: 100%;
+    //     margin-bottom: 24px;
+    //     display: flex;
+    //     .van-swipe {
+    //         width: 100%;
+    //     }
+    //     .van-swipe-item {
+    //         margin-right: 16px;
+    //     }
+    //     .commodity_display_img {
+    //         width: 94px;
+    //         height: 90px;
+    //     }
+    //     .commodity_display_img:last-of-type{
+    //         margin-right: 50px;
+    //     }
+    // }
+    /deep/ .van-tabs--line .van-tabs__wrap {
+        height: 40px;
+        margin-bottom: 8px;
+        .van-tab--active{
+            font-weight: 500;
+            color: #F2D5B2 !important;
         }
-        .commodity_display_img {
-            width: 94px;
-            height: 90px;
+        .van-tab {
+            margin-right: 32px;
+            // width: 20%;
+            flex: 1 !important;
         }
-        // .commodity_display_img:last-of-type{
-        //     margin-right: 50px;
+        // .van-tab:nth-of-type(4){
+        //     margin-right: 0px;
         // }
+        .tab {
+            position: relative;
+            padding-right: 14px;
+            box-sizing: border-box;
+            .van-icon {
+                position: absolute;
+                right: 0;
+
+                &.van-icon-arrow-down {
+                    top: 8px;
+                }
+
+                &.van-icon-arrow-up {
+                    bottom: 8px;
+                }
+            }
+        }
+    }
+    /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
+        padding: 0 !important;
+        border: none !important;
+    }
+    /deep/ .van-tabs__line {
+        width: 0px !important;
+        height: 0px !important;
     }
     .banner {
         width: 100%;

src/views/Home.vue

@@ -7,14 +7,25 @@
         @refresh="onRefresh"
     >
         <div class="home">
-            <div class="contect" :class="shopList.length < 2 ? 'shop_list_one' : ''">
+            <div class="contect">
                 <!-- 首页轮播 -->
                 <van-swipe class="swipe_banner" :autoplay="3000" indicator-color="#ffffff">
                     <van-swipe-item v-for="(item, index) in banners" :key="index">
                         <!-- <img :src="item.pic" alt="" class="swipe_banner_img" /> -->
-                        <van-image width="100%" height="140px" :src="getImg(item.pic)" fit="cover" @click="goNext(item)"/>
+                        <van-image
+                            width="100%"
+                            height="140px"
+                            :src="getImg(item.pic)"
+                            fit="cover"
+                            @click="goNext(item)"
+                        />
                     </van-swipe-item>
                 </van-swipe>
+                <!-- 藏品切换 -->
+                <div class="tabs">
+                    <div class="tab" :class="{ active: active === 0 }" @click="active = 0">推荐藏品</div>
+                    <div class="tab" :class="{ active: active === 1 }" @click="active = 1">发售预告</div>
+                </div>
                 <!-- <swiper
             pagination
             class="swipe_banner"
@@ -28,7 +39,7 @@
                 </swiper-slide>
             </swiper> -->
                 <!-- 商品列表 -->
-                <div class="collection_list">
+                <div class="collection_list" v-if="active === 0">
                     <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getList"> -->
                     <!-- @load="getList" -->
                     <product-large
@@ -39,6 +50,22 @@
                     ></product-large>
                     <!-- </van-list> -->
                 </div>
+                <div class="collection_list" v-else>
+                    <div class="advance_notice_sale">
+                        <div class="advance_notice_sale_left">近期发售计划</div>
+                        <div class="advance_notice_sale_right">
+                            <!-- <div class="advance_notice_sale_right_one">已预定</div> -->
+                            <div class="advance_notice_sale_right_two">预定</div>
+                        </div>
+                    </div>
+                    <div class="collection_list_con" v-for="(item,index) in saleList" :key="index">
+                        <div class="collection_list_con_month">{{item.month}}</div>
+                        <div class="collection_list_con_time" v-for="(item,index) in item.children" :key="index">
+                            <div class="collection_list_con_time_con">{{item.time}}</div>
+                            <RecentSale v-for="(item,index) in item.saleChildren" :key="index" v-model:info="item[index]"></RecentSale>
+                        </div>
+                    </div>                    
+                </div>
             </div>
             <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in banners" :key="item.id">
@@ -110,6 +137,7 @@
 import product from '../mixins/product';
 import ProductLarge from '../components/product/productLarge.vue';
 import banner from '../mixins/banner';
+import RecentSale from '../components/product/recentSale.vue';
 // import ProductSmall from '../components/product/productSmall.vue';
 export default {
     data() {
@@ -120,12 +148,46 @@ export default {
             loading: false,
             finished: false,
             page: 0,
-            isLoading: true
+            isLoading: true,
+            active: 0,
+            saleList: [
+                {
+                    month: "03月21日",
+                    children: [
+                        {
+                            time: "10:00开售",
+                            saleChildren: [
+                                {name:'11111'},
+                            ]
+                        },
+                        {
+                            time: "12:00开售",
+                            saleChildren: [
+                                {name:'11111'},
+                            ]
+                        },
+                    ]
+                },
+                {
+                    month: "03月22日",
+                    children: [
+                        {
+                            time: "10:00开售",
+                            saleChildren: [
+                                {name:'11111'},
+                                {name:'11111'},
+                                {name:'11111'}
+                            ]
+                        }
+                    ]
+                }
+            ]
         };
     },
-    mixins: [product,banner],
+    mixins: [product, banner],
     components: {
-        ProductLarge
+        ProductLarge,
+        RecentSale
         // ProductSmall
     },
     methods: {
@@ -169,7 +231,7 @@ export default {
             this.$http.post('user/my').then(res => {});
         },
         onRefresh() {
-            Promise.all([this.getBanner(),this.getList()]).then(res => {
+            Promise.all([this.getBanner(), this.getList()]).then(res => {
                 this.isLoading = false;
             });
         }
@@ -374,32 +436,114 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home_refresh{
-    background: #0f0f27;
+.home_refresh {
+    background: #191d27;
+}
+.scroll-content {
+    background: #191d27;
 }
 .home {
+    background: #191d27;
     .contect {
         width: 100%;
-        height: 100%;
-        background-color: #0f0f27;
-        padding: 16px;
+        padding: 12px 15px;
         box-sizing: border-box;
         .swipe_banner {
             width: 100%;
             height: 140px;
-            margin-bottom: 20px;
-            border-radius: 20px;
+            margin-bottom: 24px;
+            border-radius: 18px;
             .swipe_banner_img {
                 width: 100%;
             }
         }
+        .tabs {
+            display: flex;
+            margin-bottom: 18px;
+            .tab {
+                margin-right: 18px;
+                font-size: 16px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 26px;
+            }
+            .active {
+                font-size: 20px;
+                font-weight: 600;
+                color: #f2d5b2;
+            }
+        }
         .collection_list {
             margin-bottom: 50px;
+            .advance_notice_sale {
+                padding-top: 3px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 15px;
+                .advance_notice_sale_left {
+                    margin-top: 5px;
+                    font-size: 20px;
+                    font-family: PingFangSC-Semibold, PingFang SC;
+                    font-weight: 600;
+                    color: #f2d5b2;
+                    line-height: 26px;
+                }
+                .advance_notice_sale_right {
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    display: flex;
+                    .advance_notice_sale_right_one {
+                        width: 60px;
+                        height: 28px;
+                        border-radius: 4px;
+                        border: 1px solid #222630;
+                        color: #ffffff;
+                        box-sizing: border-box;
+                        line-height: 28px;
+                        text-align: center;
+                        margin-right: 9px;
+                    }
+                    .advance_notice_sale_right_two {
+                        width: 60px;
+                        height: 28px;
+                        background: #f9ddb3;
+                        border-radius: 4px;
+                        color: #503a1e;
+                        line-height: 28px;
+                        text-align: center;
+                    }
+                }
+            }
+            .collection_list_con{
+                padding-top: 12px;
+                box-sizing: border-box;
+                background: linear-gradient(180deg, #232731 0%, #191D27 100%);
+                border-radius: 18px;
+                .collection_list_con_month{
+                    margin-left: 15px;
+                    height: 28px;
+                    font-size: 20px;
+                    font-family: PingFangSC-Semibold, PingFang SC;
+                    font-weight: 600;
+                    color: #FFFFFF;
+                    line-height: 28px;
+                    margin-bottom: 2px;
+                }
+                .collection_list_con_time_con{
+                    margin-left: 15px;
+                    height: 22px;
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 22px;
+                    margin-bottom: 8px;
+                }
+            }
         }
     }
-    .shop_list_one {
-        height: 100%;
-        position: absolute;
-    }
 }
 </style>

src/views/Store.vue

@@ -10,12 +10,33 @@
             <!-- 搜素 -->
             <van-sticky :offset-top="0" class="explore_content_con">
                 <div class="explore_content_top">
-                    <div class="search" @click="$router.push('/productSearch')">
-                        <img src="@assets/icon-sosuo.png" alt="" class="search_img" />
-                        <span class="search_text">搜索你想要的</span>
+                    <div class="explore_content_top_one">
+                        <div class="collection_switching">
+                            <div class="collection_switching_con" :class="{ active: active === 0 }" @click="active = 0">
+                                持有藏品
+                            </div>
+                            <div class="collection_switching_con" :class="{ active: active === 1 }" @click="active = 1">
+                                收藏藏品
+                            </div>
+                        </div>
+                        <img
+                            src="@assets/icon-sosuo.png"
+                            alt=""
+                            class="search_img"
+                            @click="$router.push('/productSearch')"
+                        />
                     </div>
                     <!-- 标签页展示切换 -->
-                    <div class="label_tabs">
+                    <van-tabs v-model:active="sort" line-width="32" line-height="2" @click-tab="changeTab">
+                        <van-tab
+                            :title="item.label"
+                            :name="item.value"
+                            :key="index"
+                            v-for="(item, index) in selectOptions"
+                        >
+                        </van-tab>
+                    </van-tabs>
+                    <!-- <div class="label_tabs">
                         <div
                             :class="tabLabel == 'whole' ? 'label_selected' : 'label_not_selected'"
                             @click="tabLabelName('whole')"
@@ -44,7 +65,7 @@
                         >
                             未展示
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </van-sticky>
             <div class="data_display">
@@ -57,10 +78,11 @@
                     </div>
                     <van-empty
                         v-if="empty || (collections.length === 0 && !loading)"
-                        :description="'你还没有藏品哦～'"
-                        :image="require(`@assets/storage_room_icon_01.png`)"
+                        :image="require(`@assets/empty-collection.png`)"
+                        :image-size="`172`"
                     >
-                        <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button>
+                        <div class="h44_tip_one">你还没有相关藏品</div>
+                        <div class="h44_tip">这里将展示你在拉索持有的数字藏品</div>
                     </van-empty>
                     <!-- </van-empty> -->
                 </van-list>
@@ -84,7 +106,26 @@ export default {
             finished: false,
             // 藏品列表
             collections: [],
-            isLoading: true
+            isLoading: true,
+            active: 0,
+            selectOptions: [
+                {
+                    label: '全部',
+                    value: 'whole'
+                },
+                {
+                    label: '挂售中',
+                    value: 'onSale'
+                },
+                {
+                    label: '仅展示',
+                    value: 'showOnly'
+                },
+                {
+                    label: '未展示',
+                    value: 'notShown'
+                }
+            ]
         };
     },
     computed: {
@@ -136,8 +177,8 @@ export default {
             });
         },
         // 顶部数据类型切换
-        tabLabelName(title) {
-            this.tabLabel = title;
+        changeTab(info) {
+            this.tabLabel = info.name;
             this.page = 0;
             this.loading = true;
             this.getAllCollections();
@@ -180,7 +221,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .load_refresh {
-    background: #0f0f27;
+    background: #191d27;
 }
 /deep/ .van-button {
     width: 280px;
@@ -188,46 +229,78 @@ export default {
 }
 .explore_content {
     width: 100%;
-    height: 100%;
     // margin-top: 44px;
     box-sizing: border-box;
-    background: #0f0f27;
+    background: #191d27;
     .explore_content_top {
-        padding: 12px 16px 20px;
-        box-sizing: border-box;
-        background: #0f0f27;
-    }
-    .search {
-        width: 100%;
-        height: 32px;
-        background: #29293f;
-        border-radius: 4px;
-        padding: 5px 0 4px 33px;
-        margin-bottom: 16px;
+        padding: 0px 15px 15px;
         box-sizing: border-box;
-        position: relative;
-        .search_img {
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            left: 10px;
-            top: 6px;
+        background: #191d27;
+        .explore_content_top_one {
+            height: 44px;
+            padding: 6px 0px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            .collection_switching {
+                display: flex;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                .collection_switching_con {
+                    padding-top: 5px;
+                    box-sizing: border-box;
+                    margin-right: 18px;
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #ffffff;
+                    line-height: 22px;
+                }
+                .active {
+                    padding-top: 2px;
+                    box-sizing: border-box;
+                    font-size: 20px;
+                    font-weight: 600;
+                    color: #f2d5b2;
+                    line-height: 28px;
+                }
+            }
+            .search_img {
+                width: 32px;
+                height: 32px;
+            }
         }
-        .search_text {
-            font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #5f646f;
+        /deep/ .van-tabs__wrap {
+            height: 36px;
+            .van-tabs__nav--line {
+                padding-left: 0 !important;
+                border-top: none;
+                background: #191d27;
+                padding-bottom: 0px;
+            }
+            .van-tab {
+                flex: 1 !important;
+                margin-right: 0px !important;
+            }
+            .van-tabs__line {
+                bottom: 0;
+                background: #d8d8d8;
+            }
+            .van-tab--active {
+                font-size: 16px;
+                font-weight: 500;
+                color: #ffffff !important;
+            }
         }
     }
     .label_tabs {
+        width: 100%;
         display: flex;
+        height: 36px;
         .label_tab {
             // width: 80px;
             flex: 1;
             height: 24px;
-            background: #29293f;
-            border-radius: 4px;
+            // background: #29293f;
+            // border-radius: 4px;
             margin-right: 16px;
             text-align: center;
             line-height: 24px;
@@ -239,7 +312,8 @@ export default {
         }
         .label_selected {
             font-weight: 500;
-            color: #28b6ff;
+            color: #ffffff;
+            border-bottom: 2px solid #d8d8d8;
         }
         .label_not_selected {
             font-weight: 400;
@@ -267,4 +341,22 @@ export default {
     position: relative;
     z-index: 10;
 }
+.h44_tip_one {
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 22px;
+    text-align: center;
+    margin-bottom: 8px;
+}
+.h44_tip {
+    height: 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 20px;
+    opacity: 0.3;
+}
 </style>