改版

src/main/nine-space/package.json

@@ -31,6 +31,7 @@
     "vue": "^3.2.20",
     "vue-clipboard2": "^0.3.3",
     "vue-croppie": "^2.0.2",
+    "vue-lottie": "^0.2.1",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },

src/main/nine-space/src/components/CouponInfo.vue

@@ -100,7 +100,7 @@ export default {
         .text1 {
             font-size: 18px;
             font-weight: bold;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             background: linear-gradient(0deg, #fdfb60 0%, #ff8f3e 100%);
             -webkit-background-clip: text;
@@ -111,7 +111,7 @@ export default {
             padding-top: 6px;
             font-size: 12px;
             line-height: 17px;
-            color: #939599;
+            color: @text3;
             span {
                 &:last-child {
                     color: #fff;
@@ -123,7 +123,7 @@ export default {
 
     .coupon-bottom {
         border-top: 1px dashed #ebebeb50;
-        color: #939599;
+        color: @text3;
         font-size: 11px;
         line-height: 17px;
         padding: 9px 0;
@@ -167,12 +167,12 @@ export default {
         .coupon-top {
             .text1 {
                 -webkit-background-clip: none;
-                -webkit-text-fill-color: #939599;
+                -webkit-text-fill-color: @text3;
             }
             .text2 {
                 span {
                     &:last-child {
-                        color: #939599;
+                        color: @text3;
                     }
                 }
             }
@@ -223,7 +223,7 @@ export default {
     color: #ffffff;
     line-height: 18px;
     height: 18px;
-    background: #939599;
+    background: @text3;
     border-radius: 0px 8px 0px 8px;
     padding: 0 7px;
     position: absolute !important;

src/main/nine-space/src/components/LikeButton.vue

@@ -49,6 +49,7 @@ export default {
 
     span {
         vertical-align: middle;
+        font-size: @font1;
     }
 }
 

src/main/nine-space/src/components/PageTitle.vue

@@ -1,10 +1,17 @@
 <template>
-    <van-cell :title="title" :border="false" value="查看全部" :to="to" is-link />
+    <van-cell :title="title" :border="false" :value="isLink ? '查看全部' : ''" :to="to" :is-link="isLink" />
 </template>
 
 <script>
 export default {
-    props: ['title', 'to']
+    props: {
+        title: {},
+        to: {},
+        isLink: {
+            type: Boolean,
+            default: true
+        }
+    }
 };
 </script>
 
@@ -13,10 +20,16 @@ export default {
     /deep/ .van-cell__title {
         flex: 2;
         span {
-            font-size: 20px;
+            font-size: @font3;
             // font-family: ZhenyanGB-Regular, ZhenyanGB;
         }
     }
-    padding: 30px 16px 12px 16px;
+    padding: 20px 16px 8px 16px;
+
+    /deep/.van-cell__value {
+        span {
+            font-size: @font1;
+        }
+    }
 }
 </style>

src/main/nine-space/src/components/Post.vue

@@ -201,7 +201,7 @@ export default {
         }
         .text1 {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             span + span {
                 margin-left: 10px;
@@ -230,7 +230,7 @@ export default {
         }
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
     }
@@ -238,7 +238,7 @@ export default {
 
 .tips {
     font-size: 13px;
-    color: #939599;
+    color: @text3;
     line-height: 22px;
     margin-top: 16px;
 }

src/main/nine-space/src/components/asset/assetInfo.vue

@@ -112,7 +112,7 @@ export default {
 
         .status {
             font-size: 16px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             margin-top: 6px;
         }
@@ -141,7 +141,7 @@ export default {
         }
         span {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             margin-left: 5px;
         }

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -127,15 +127,15 @@ export default {
         flex-direction: column;
 
         .text1 {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: bold;
             color: #ffffff;
             line-height: 24px;
         }
 
         .text2 {
-            font-size: 14px;
-            color: #939599;
+            font-size: @font1;
+            color: @text3;
             line-height: 20px;
             margin: 6px 0;
         }
@@ -148,11 +148,11 @@ export default {
             .sale {
                 display: flex;
                 align-items: center;
-                font-size: 14px;
+                font-size: @font1;
                 line-height: 24px;
 
                 .font_family {
-                    font-size: 18px;
+                    font-size: @font1;
                     margin-left: 2px;
                 }
 
@@ -176,17 +176,17 @@ export default {
                 background-clip: content-box, border-box;
 
                 &.follow {
-                    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #939599, #939599);
-                    color: #939599;
+                    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3);
+                    color: @text3;
                 }
             }
 
             .text4 {
                 span {
-                    font-size: 14px;
+                    font-size: @font1;
                     color: #fff;
                     &:first-child {
-                        color: #939599;
+                        color: @text3;
                         margin-right: 2px;
                     }
                 }

src/main/nine-space/src/components/order/OrderInfo.vue

@@ -31,7 +31,7 @@
         </div>
 
         <div class="btns">
-            <van-button color="#939599" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
+            <van-button color="@text3" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
         </div>
     </router-link>
 </template>
@@ -155,7 +155,7 @@ export default {
         }
         .text {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             margin-top: 4px;
         }

src/main/nine-space/src/components/product/productInfo.vue

@@ -7,7 +7,6 @@
             }
         }"
         class="product"
-        @click="click"
     >
         <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(changeImgs(info.pic))" fit="cover" />
 
@@ -43,13 +42,6 @@ export default {
             }
         }
     },
-    setup() {
-        const click = function () {
-            console.log('wyt6w');
-        };
-
-        return { click };
-    },
     methods: {
         likeProduct() {
             if (!this.info.liked) {
@@ -93,7 +85,7 @@ export default {
         padding: 10px;
 
         .name {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: bold;
             color: #ffffff;
             line-height: 24px;
@@ -114,8 +106,8 @@ export default {
         .status {
             line-height: 22px;
             padding: 7px 0;
-            color: #939599;
-            font-size: 16px;
+            color: @text3;
+            font-size: @font1;
         }
     }
 
@@ -125,12 +117,12 @@ export default {
         align-items: center;
         .text1 {
             font-weight: 400;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             span {
                 &:last-child {
                     color: #fff;
-                    font-size: 14px;
+                    font-size: @font1;
                 }
             }
         }

src/main/nine-space/src/components/product/productLarge.vue

@@ -8,13 +8,13 @@
         }"
         class="product"
     >
-        <van-image width="100%" height="calc(37.2vw - 17.9px)" :src="getImg(changeImgs(info.pic))" fit="cover" />
+        <van-image width="100%" height="calc(100vw - 32px)" :src="getImg(changeImgs(info.pic))" fit="cover" />
 
         <div class="content">
             <div class="name van-ellipsis">{{ info.name }}</div>
             <div class="sales">
                 <span>限量</span>
-                <span>155份</span>
+                <span>{{ info.total }}份</span>
             </div>
             <div class="bottom">
                 <div class="miner">
@@ -28,11 +28,19 @@
                 </div>
             </div>
         </div>
+
+        <div class="xianliang" v-if="startTime">
+            <img src="../../assets/shizhong.png" alt="" />
+            <span>即将开售：{{ startTime }}</span>
+        </div>
     </router-link>
 </template>
 
 <script>
 import product from '../../mixins/product';
+import dayjs from 'dayjs';
+var isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
+dayjs.extend(isSameOrBefore);
 export default {
     mixins: [product],
     props: {
@@ -43,6 +51,17 @@ export default {
             }
         }
     },
+    computed: {
+        startTime() {
+            if (this.info.startTime) {
+                if (dayjs().isSameOrBefore(this.info.startTime)) {
+                    return dayjs(this.info.startTime).format('MM月DD日');
+                }
+            }
+
+            return '';
+        }
+    },
     methods: {
         likeProduct() {
             if (!this.info.liked) {
@@ -79,8 +98,33 @@ export default {
     border-radius: 12px;
     overflow: hidden;
 
+    .xianliang {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        font-size: @font1;
+        color: @prim;
+        display: flex;
+        align-items: center;
+        img {
+            width: 18px;
+            height: 18px;
+            margin-right: 3px;
+        }
+    }
+
     .van-image {
         display: block;
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            background-color: #00000030;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+        }
     }
     .content {
         padding: 10px;
@@ -115,6 +159,7 @@ export default {
 
         .bottom {
             display: flex;
+            margin-top: 10px;
 
             .miner {
                 display: flex;
@@ -132,10 +177,11 @@ export default {
                 color: #fff;
                 line-height: 22px;
                 font-family: OSP;
+                font-weight: bold;
                 .font_family {
                     font-size: 11px;
                     margin-bottom: 3px;
-                    display: inline-block;
+                    vertical-align: middle;
                 }
             }
         }

src/main/nine-space/src/components/product/productSmall.vue

@@ -1,77 +0,0 @@
-<template>
-    <div class="product" @click="click">
-        <van-image
-            width="100%"
-            height="calc(37.2vw - 17.9px)"
-            src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
-            fit="cover"
-        />
-
-        <div class="content">
-            <div class="name van-ellipsis">游戏《百分之一》游戏《百分之一》游戏《百分之一》</div>
-            <div class="text">
-                <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
-                <like-button>20</like-button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    setup() {
-        const click = function () {
-            console.log('wyt6w');
-        };
-
-        return { click };
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.product {
-    width: calc(50vw - 24px);
-    margin: 0 8px;
-    position: relative;
-
-    .van-image {
-        border-radius: 8px;
-        overflow: hidden;
-        display: block;
-    }
-    .content {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 3px 10px;
-        background-color: rgba(0, 0, 0, 0.6);
-
-        .name {
-            font-size: 16px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 24px;
-        }
-
-        .price {
-            font-size: 24px;
-            font-family: OSP;
-            color: @prim;
-            line-height: 22px;
-
-            i {
-                vertical-align: text-bottom;
-                font-size: 10px;
-            }
-        }
-    }
-
-    .text {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-}
-</style>

src/main/nine-space/src/styles/app.less

@@ -5,7 +5,7 @@
     --van-nav-bar-background-color: @bg;
     --van-cell-background-color: @bg;
     --van-text-color: #fff;
-    --van-gray-6: #939599;
+    --van-gray-6: @text3;
     --van-gray-3: @bg3;
     --van-tabbar-item-active-color: #fff;
     --van-button-plain-background-color: transparent;
@@ -126,3 +126,4 @@ input:-webkit-autofill {
     width: 235px;
     height: 170px;
 }
+

src/main/nine-space/src/styles/common/theme.less

@@ -21,3 +21,7 @@
 @menu-bg-active: #1f2d3d;
 @menu-bg-hover: #232e3b;
 @background-color-light: #181818;
+@font1:12px;
+@font2:14px;
+@font3:16px;
+@font4:20px;

src/main/nine-space/src/views/Discover.vue

@@ -2,12 +2,11 @@
     <div class="discover">
         <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
             <div class="top">
-                <div class="top-btn">
-                    <div class="btn active">收藏探索</div>
-                    <div class="btn" @click="$router.replace('/creator')">铸造者</div>
-                </div>
+                <img src="../assets/nav_logo.png" class="logo" alt="" />
+
                 <div class="search" @click="$router.push('/productSearch')">
-                    <img src="../assets/svgs/search.svg" alt="" />
+                    <img src="../assets/icon-sosuo.png" alt="" />
+                    <span>请输入</span>
                 </div>
             </div>
         </van-sticky>
@@ -55,15 +54,77 @@
                     <img class="grid-img" src="../assets/info_icon_paimaixilie.png" />
                 </template>
             </van-grid-item>
+            <van-grid-item text="二手市场" @click="wait">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/info_icon_ershoushichang.png" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="铸造商店" @click="wait">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/info_icon_zhuzaoshangdian.png" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="铸造者" :to="{ path: '/creatorList' }">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/info_icon_zhuzaozhe.png" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="系列活动" @click="wait">
+                <template v-slot:icon>
+                    <img class="grid-img" src="../assets/info_icon_xiliehuodong.png" />
+                </template>
+            </van-grid-item>
         </van-grid>
 
-        <div class="title">本期推荐</div>
+        <div class="box">
+            <page-title title="精选盲盒" :to="{ path: '/productList', query: { type: 'BLIND_BOX' } }"></page-title>
+            <div class="box-list">
+                <product-info v-for="(item, index) in box" :key="item.id" v-model:info="box[index]"></product-info>
+            </div>
+        </div>
+        <div class="box">
+            <page-title title="本期推荐" :to="{ path: '/productList' }"></page-title>
+            <div class="box-list">
+                <template v-for="(item, index) in products" :key="item.id">
+                    <product-info v-model:info="products[index]"></product-info
+                ></template>
+            </div>
+        </div>
+        <div class="box">
+            <page-title title="最HOT收藏品" :to="{ path: '/productList', query: { type: 'DEFAULT' } }"></page-title>
+            <div class="box-list">
+                <template v-for="(item, index) in hots" :key="item.id">
+                    <product-info v-model:info="hots[index]"></product-info
+                ></template>
+            </div>
+        </div>
 
-        <van-list class="box-list" v-model:loading="loading" :finished="finished" finished-text="" @load="getList">
-            <template v-for="(item, index) in list" :key="item.id">
-                <product-info v-model:info="list[index]"></product-info>
+        <div class="casting">
+            <page-title title="最受欢迎铸造者" :to="{ path: '/creatorList' }"></page-title>
+            <template v-for="(item, index) in miners" :key="index">
+                <creator-info
+                    :rank="index < 3 ? index + 1 : 0"
+                    v-model:info="miners[index]"
+                    size="large"
+                ></creator-info>
             </template>
-        </van-list>
+        </div>
+
+        <div class="box">
+            <page-title title="更多藏品" :isLink="false"></page-title>
+            <van-list
+                style="padding-bottom: 100px"
+                class="box-list"
+                v-model:loading="loading"
+                :finished="finished"
+                finished-text=""
+                @load="getList"
+            >
+                <template v-for="(item, index) in list" :key="item.id">
+                    <product-info v-model:info="list[index]"></product-info>
+                </template>
+            </van-list>
+        </div>
 
         <div class="tabbar-placeholder"></div>
     </div>
@@ -82,6 +143,7 @@ SwiperCore.use([Pagination, Autoplay]);
 
 import ProductInfo from '../components/product/productInfo.vue';
 import banner from '../mixins/banner';
+import CreatorInfo from '../components/creator/CreatorInfo.vue';
 
 export default {
     name: 'discover',
@@ -90,12 +152,17 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        ProductInfo
+        ProductInfo,
+        CreatorInfo
     },
     data() {
         return {
             stiky: null,
             banners: [],
+            box: [],
+            products: [],
+            hots: [],
+            miners: [],
             list: [],
             loading: false,
             finished: false,
@@ -113,6 +180,36 @@ export default {
                 forbidClick: true
             });
             this.getBanner();
+            this.getProduct('BLIND_BOX').then(res => {
+                this.box = res;
+            });
+            this.getProduct('DEFAULT').then(res => {
+                this.hots = res;
+            });
+            this.getProduct().then(res => {
+                this.products = res;
+            });
+            this.getMiner();
+        },
+        getProduct(type = '') {
+            return this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 4,
+                        query: {
+                            type: type,
+                            onShelf: true,
+                            del: false
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    return Promise.resolve(res.content);
+                });
         },
         getBanner() {
             this.$http
@@ -161,6 +258,23 @@ export default {
                         this.page = this.page + 1;
                     }
                 });
+        },
+        getMiner() {
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: { hasRole: 'ROLE_MINTER' },
+                        size: 5,
+                        sort: 'sales,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.miners = res.content;
+                    // console.log(this.miners);
+                });
         }
     }
 };
@@ -169,29 +283,31 @@ export default {
 <style lang="less" scoped>
 .top {
     display: flex;
-    padding: 10px 16px;
+    padding: 9px 16px;
     background-color: @bg;
-    .top-btn {
-        flex-grow: 1;
-        .btn {
-            font-size: 16px;
-            // font-family: ZhenyanGB;
-            // font-weight: 400;
-            line-height: 26px;
-            display: inline-block;
-            vertical-align: text-bottom;
-
-            &.active {
-                color: @prim;
-                font-size: 20px;
-                font-weight: bold;
-                line-height: 30px;
-            }
-        }
+    display: flex;
+    align-items: center;
+    .logo {
+        width: 74px;
+        height: 26px;
+    }
 
-        .btn + .btn {
-            margin-left: 30px;
+    .search {
+        flex-grow: 1;
+        background-color: @bg3;
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+        padding: 4px 20px;
+        border-radius: 21px;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
         }
+        font-size: 14px;
+        color: @text3;
+        line-height: 24px;
     }
 }
 
@@ -201,11 +317,11 @@ export default {
 
 ::v-deep(.mySwiper) {
     width: calc(100vw - 32px);
-    height: calc(50vw - 16px);
+    height: calc(40vw - 12.8px);
     padding-top: 12px;
 
     .swiper-pagination {
-        bottom: 12px;
+        bottom: 6px;
     }
 
     .swiper-pagination-bullet {
@@ -213,6 +329,7 @@ export default {
         height: 2px;
         border-radius: 1px;
         background: #d7d7d7;
+        margin: 0 3px;
     }
 
     .swiper-pagination-bullet-active {
@@ -244,7 +361,7 @@ export default {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 4px;
+    border-radius: 12px;
 }
 .grid-img {
     display: block;
@@ -259,7 +376,7 @@ export default {
 }
 /deep/ .van-grid-item__text {
     color: #fff;
-    font-size: 13px;
+    font-size: @font1;
     line-height: 18px;
     margin-top: 4px;
 }
@@ -267,14 +384,14 @@ export default {
 .title {
     padding: 16px 20px 8px;
     color: @prim;
-    font-size: 18px;
+    font-size: @font3;
     font-weight: bold;
 }
 
 .box-list {
     // display: flex;
     // flex-wrap: wrap;
-    padding: 0 8px 100px;
+    padding: 0 8px 2px;
 }
 
 /deep/.van-tab {
@@ -292,4 +409,8 @@ export default {
 /deep/ .van-tabs__line {
     bottom: 20px;
 }
+
+.casting {
+    padding-bottom: 10px;
+}
 </style>

src/main/nine-space/src/views/Givesubmit.vue

@@ -204,7 +204,7 @@ export default {
         font-size: 14px;
         text-align: right;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         margin-right: 15px;
     }
@@ -213,13 +213,13 @@ export default {
 /deep/ .van-password-input {
     margin: 0 0;
     .van-password-input__security {
-        border: 1px solid #939599;
+        border: 1px solid @text3;
         height: 42px;
         border-radius: 2px;
         li {
             background-color: transparent;
             &:not(:last-child) {
-                border-right: 1px solid #939599;
+                border-right: 1px solid @text3;
             }
             i {
                 background-color: #fff;
@@ -257,7 +257,7 @@ export default {
 
     .text3 {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 20px;
     }
 }
@@ -265,13 +265,13 @@ export default {
     margin: 10px 0;
     padding: 0 25px;
     .van-password-input__security {
-        border: 1px solid #939599;
+        border: 1px solid @text3;
         height: 42px;
         border-radius: 2px;
         li {
             background-color: transparent;
             &:not(:last-child) {
-                border-right: 1px solid #939599;
+                border-right: 1px solid @text3;
             }
             i {
                 background-color: #fff;
@@ -291,12 +291,12 @@ export default {
             flex-grow: 1;
             padding: 4px 0 8px;
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
         }
         .text {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             margin-top: 4px;
         }
@@ -325,7 +325,7 @@ export default {
     }
     .van-field__control {
         text-align: right;
-        color: #939599;
+        color: @text3;
     }
 }
 
@@ -364,9 +364,9 @@ export default {
             height: 44px;
             border-radius: 22px;
             line-height: 44px;
-            color: #939599;
+            color: @text3;
             text-align: center;
-            border: 1px solid #939599;
+            border: 1px solid @text3;
         }
         .btn2 {
             width: 162px;
@@ -385,7 +385,7 @@ export default {
         }
         .text {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 20px;
             word-break: keep-all;
         }

src/main/nine-space/src/views/Home.vue

@@ -1,119 +1,85 @@
 <template>
     <div class="home">
-        <swiper
-            :effect="'coverflow'"
-            :grabCursor="true"
-            :centeredSlides="true"
-            :slidesPerView="'auto'"
-            :coverflowEffect="{
-                rotate: 30,
-                stretch: 0,
-                depth: 0,
-                modifier: 1,
-                slideShadows: true
-            }"
-            :autoplay="{ delay: 3500 }"
-            class="mySwiper"
-            v-if="banners.length > 0"
-        >
-            <template v-for="item in banners" :key="item.id">
-                <swiper-slide>
-                    <van-image
-                        @click="goNext(item)"
-                        :radius="6"
-                        width="100%"
-                        height="calc(50vw - 33px)"
-                        :src="item.pic"
-                        fit="cover"
-                    />
-                </swiper-slide>
-            </template>
+        <swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
+            <swiper-slide v-for="item in banners" :key="item.id">
+                <img :src="item.pic" @click="goNext(item)" />
+            </swiper-slide>
         </swiper>
 
-        <div class="box" v-if="box.length > 0">
-            <page-title title="数字盲盒" :to="{ path: '/productList', query: { type: 'BLIND_BOX' } }"></page-title>
-            <div class="box-list">
-                <product-info v-for="(item, index) in box" :key="item.id" v-model:info="box[index]"></product-info>
-            </div>
+        <div class="list">
+            <product-large
+                v-for="(item, index) in products"
+                :key="index"
+                v-model:info="products[index]"
+            ></product-large>
         </div>
-
-        <div class="box">
-            <page-title title="最HOT收藏品" :to="{ path: '/productList', query: { type: 'DEFAULT' } }"></page-title>
-            <div class="box-list">
-                <template v-for="(item, index) in products" :key="item.id">
-                    <product-info v-model:info="products[index]"></product-info
-                ></template>
-            </div>
-        </div>
-
-        <!-- <page-title title="最HOT收藏品"></page-title>
-
-    <div class="hot">
-      <product-info></product-info>
-      <div class="hot-right">
-        <product-small></product-small>
-        <product-small></product-small>
-      </div>
-    </div> -->
-
-        <div class="casting">
-            <page-title title="最受欢迎铸造者" :to="{ path: '/creatorList' }"></page-title>
-            <template v-for="(item, index) in miners" :key="index">
-                <creator-info
-                    :rank="index < 3 ? index + 1 : 0"
-                    v-model:info="miners[index]"
-                    size="large"
-                ></creator-info>
-            </template>
-        </div>
-
-        <div class="tabbar-placeholder"></div>
     </div>
 </template>
 
 <script>
-// @ is an alias to /src
-
 import { Swiper, SwiperSlide } from 'swiper/vue';
 
-// Import Swiper styles
-
 import 'swiper/swiper.min.css';
 import 'swiper/swiper-bundle.min.css';
 
-import SwiperCore, { EffectCoverflow, Autoplay } from 'swiper';
-import ProductInfo from '../components/product/productInfo.vue';
-// import ProductSmall from "../components/product/productSmall.vue";
-import CreatorInfo from '../components/creator/CreatorInfo.vue';
-import banner from '../mixins/banner';
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
 
 // install Swiper modules
-SwiperCore.use([EffectCoverflow, Autoplay]);
+SwiperCore.use([Pagination, Autoplay]);
+
+import banner from '../mixins/banner';
+import ProductLarge from '../components/product/productLarge.vue';
 
 export default {
-    name: 'Home',
-    inject: ['bs'],
+    name: 'home',
+    inject: ['bar'],
     mixins: [banner],
     components: {
         Swiper,
         SwiperSlide,
-        ProductInfo,
-        CreatorInfo
+        ProductLarge
     },
     data() {
         return {
             banners: [],
-            box: [],
-            products: [],
-            miners: []
+            products: []
         };
     },
     mounted() {
-        this.$toast.loading({
-            message: '加载中...',
-            forbidClick: true
-        });
-        Promise.all([
+        this.getInit();
+    },
+    methods: {
+        getInit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.getBanner();
+            this.getProduct().then(res => {
+                this.products = res;
+            });
+        },
+        getProduct(type = '') {
+            return this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 4,
+                        query: {
+                            type: type,
+                            onShelf: true,
+                            del: false
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    return Promise.resolve(res.content);
+                });
+        },
+        getBanner() {
             this.$http
                 .post(
                     '/banner/all',
@@ -127,28 +93,23 @@ export default {
                 )
                 .then(res => {
                     this.banners = res.content;
-                }),
-            this.getProduct('BLIND_BOX').then(res => {
-                this.box = res;
-            }),
-            this.getProduct().then(res => {
-                this.products = res;
-            }),
-            this.getMiner()
-        ]).then(() => {
-            this.$toast.clear();
-        });
-    },
-    methods: {
-        getProduct(type = 'DEFAULT') {
-            return this.$http
+                    this.$toast.clear();
+                });
+        },
+        getList() {
+            if (this.page === 0) {
+                this.list = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            this.$http
                 .post(
                     '/collection/all',
                     {
                         page: 0,
-                        size: 4,
+                        size: 20,
                         query: {
-                            type: type,
                             onShelf: true,
                             del: false
                         },
@@ -157,7 +118,13 @@ export default {
                     { body: 'json' }
                 )
                 .then(res => {
-                    return Promise.resolve(res.content);
+                    this.list = [...this.list, ...res.content];
+                    this.empty = res.empty;
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!this.finished) {
+                        this.page = this.page + 1;
+                    }
                 });
         },
         getMiner() {
@@ -182,54 +149,90 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.swiper {
-    width: 100%;
-    padding-top: 50px;
-    padding-bottom: 50px;
-}
-
-.swiper-slide {
-    background-position: center;
-    background-size: cover;
-    width: calc(100vw - 66px);
-    height: calc(50vw - 33px);
-
-    img {
-        width: calc(100vw - 66px);
-        height: calc(50vw - 33px);
-        display: block;
+.top {
+    display: flex;
+    padding: 9px 16px;
+    background-color: @bg;
+    display: flex;
+    align-items: center;
+    .logo {
+        width: 74px;
+        height: 26px;
     }
-    .van-image {
-        border-radius: 6px;
+
+    .search {
+        flex-grow: 1;
+        background-color: @bg3;
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+        padding: 4px 20px;
+        border-radius: 21px;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+        font-size: 14px;
+        color: @text3;
+        line-height: 24px;
     }
 }
 
-.swiper-slide img {
-    display: block;
-    width: 100%;
-}
 .home {
-    padding: 10px 0 100px 0;
+    background-color: @bg3;
 }
 
-.hot {
-    display: flex;
-    padding: 0 8px;
+::v-deep(.mySwiper) {
+    width: calc(100vw - 32px);
+    height: calc(40vw - 12.8px);
+    padding-top: 16px;
 
-    .hot-right {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+    .swiper-pagination {
+        bottom: 6px;
+    }
+
+    .swiper-pagination-bullet {
+        width: 6px;
+        height: 2px;
+        border-radius: 1px;
+        background: #d7d7d7;
+        margin: 0 3px;
+    }
+
+    .swiper-pagination-bullet-active {
+        background: @prim;
     }
 }
 
-.box-list {
-    padding: 0 8px;
+.list {
+    padding: 12px 0 100px;
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
     display: flex;
-    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
 
-    .product {
-        margin-bottom: 16px;
-    }
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
 }
 </style>

src/main/nine-space/src/views/Mine.vue

@@ -39,7 +39,7 @@
                     </div>
                     <van-button
                         plain
-                        color="#939599"
+                        color="@text3"
                         size="mini"
                         :icon="require('../assets/renzheng_icon_pre.png')"
                         round
@@ -51,7 +51,7 @@
                     </van-button>
                     <van-button
                         plain
-                        color="#939599"
+                        color="@text3"
                         size="mini"
                         :icon="require('../assets/renzheng_icon.png')"
                         round
@@ -60,7 +60,7 @@
                     >
                         {{ authStatus }}
                     </van-button>
-                    <van-button plain @click="$router.push('/setting')" color="#939599" size="mini" round
+                    <van-button plain @click="$router.push('/setting')" color="@text3" size="mini" round
                         >编辑资料</van-button
                     >
                 </div>
@@ -340,7 +340,7 @@ export default {
     transform: translateY(-8px);
     .sub {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 16px 0;
     }
@@ -361,7 +361,7 @@ export default {
             }
             .text2 {
                 font-size: 14px;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
             }
             &:nth-child(2) {

src/main/nine-space/src/views/Store.vue

@@ -303,7 +303,7 @@ export default {
     position: absolute;
     right: 16px;
     bottom: 9px;
-    color: #939599 !important;
+    color: @text3 !important;
     min-width: 96px;
 }
 // /deep/.van-sticky {

src/main/nine-space/src/views/Submit.vue

@@ -261,7 +261,7 @@ export default {
 
     .text3 {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 20px;
     }
 }
@@ -278,7 +278,7 @@ export default {
             flex-grow: 1;
             padding: 4px 0 8px;
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
         }
 
@@ -307,7 +307,7 @@ export default {
     }
     .van-field__control {
         text-align: right;
-        color: #939599;
+        color: @text3;
     }
 }
 
@@ -352,7 +352,7 @@ export default {
         }
         .text {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 20px;
             word-break: keep-all;
         }

src/main/nine-space/src/views/account/Authentication.vue

@@ -57,7 +57,7 @@ export default {
     .name {
         font-size: 12px;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin: 10px 0 40px;
     }

src/main/nine-space/src/views/account/ChangePhone.vue

@@ -189,7 +189,7 @@ export default {
 
     .text {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin-top: 4px;
     }
@@ -246,7 +246,7 @@ export default {
     }
 
     .van-cell__label {
-        color: #939599;
+        color: @text3;
     }
 }
 </style>

src/main/nine-space/src/views/account/Setting.vue

@@ -146,7 +146,7 @@ export default {
         .van-cell__value {
             span {
                 font-size: 13px;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
             }
         }

src/main/nine-space/src/views/account/TradingPassword.vue

@@ -187,7 +187,7 @@ export default {
 
     .text {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin-top: 4px;
     }
@@ -244,20 +244,20 @@ export default {
     }
 
     .van-cell__label {
-        color: #939599;
+        color: @text3;
     }
 }
 
 /deep/ .van-password-input {
     margin: 0 0;
     .van-password-input__security {
-        border: 1px solid #939599;
+        border: 1px solid @text3;
         height: 42px;
         border-radius: 2px;
         li {
             background-color: transparent;
             &:not(:last-child) {
-                border-right: 1px solid #939599;
+                border-right: 1px solid @text3;
             }
             i {
                 background-color: #fff;

src/main/nine-space/src/views/account/Verified.vue

@@ -208,7 +208,7 @@ export default {
     }
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin-top: 4px;
         span {

src/main/nine-space/src/views/account/VerifiedSuc.vue

@@ -120,14 +120,14 @@ export default {
     }
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin-top: 4px;
     }
 }
 .text4 {
     font-size: 16px;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     margin-bottom: 10px;
 }
@@ -139,14 +139,14 @@ export default {
     .text1 {
         font-size: 14px;
         font-weight: bold;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         min-width: 90px;
     }
 
     .text2 {
         font-size: 16px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         &.text3 {
             margin-left: 20px;

src/main/nine-space/src/views/account/VerifiedSucs.vue

@@ -296,7 +296,7 @@ export default {
     }
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin-top: 4px;
         span {

src/main/nine-space/src/views/account/Waiting.vue

@@ -69,7 +69,7 @@ export default {
     }
     .sub {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         margin-top: 16px;
         text-align: center;

src/main/nine-space/src/views/asset/Consignment.vue

@@ -99,13 +99,13 @@ export default {
 /deep/ .van-password-input {
     margin: 0 0;
     .van-password-input__security {
-        border: 1px solid #939599;
+        border: 1px solid @text3;
         height: 42px;
         border-radius: 2px;
         li {
             background-color: transparent;
             &:not(:last-child) {
-                border-right: 1px solid #939599;
+                border-right: 1px solid @text3;
             }
             i {
                 background-color: #fff;
@@ -137,13 +137,13 @@ export default {
         margin: 10px 0;
         padding: 0 25px;
         .van-password-input__security {
-            border: 1px solid #939599;
+            border: 1px solid @text3;
             height: 42px;
             border-radius: 2px;
             li {
                 background-color: transparent;
                 &:not(:last-child) {
-                    border-right: 1px solid #939599;
+                    border-right: 1px solid @text3;
                 }
                 i {
                     background-color: #fff;
@@ -175,7 +175,7 @@ export default {
         span {
             font-size: 12px;
             font-weight: 400;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
     }
@@ -199,9 +199,9 @@ export default {
                 height: 44px;
                 border-radius: 22px;
                 line-height: 44px;
-                color: #939599;
+                color: @text3;
                 text-align: center;
-                border: 1px solid #939599;
+                border: 1px solid @text3;
             }
             .btn2 {
                 width: 162px;
@@ -220,7 +220,7 @@ export default {
             }
             .text {
                 font-size: 14px;
-                color: #939599;
+                color: @text3;
                 line-height: 20px;
                 word-break: keep-all;
             }
@@ -253,7 +253,7 @@ export default {
             font-size: 14px;
             text-align: right;
             font-weight: 400;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             margin-right: 15px;
         }

src/main/nine-space/src/views/asset/Detail.vue

@@ -573,13 +573,13 @@ export default {
             .text3 {
                 font-size: 14px;
                 font-weight: 400;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
             }
             .text4 {
                 font-size: 14px;
                 font-weight: 400;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
                 margin-left: 156px;
             }
@@ -626,7 +626,7 @@ export default {
 
         .text {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 16px;
             span {
                 margin-left: 10px;
@@ -681,7 +681,7 @@ export default {
         }
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
     }
@@ -798,7 +798,7 @@ export default {
         padding: 10px;
         background: #f5f7fa;
         border-radius: 4px;
-        color: #939599;
+        color: @text3;
         margin-bottom: 11px;
         .qrcodeImg {
             width: 93px;
@@ -809,7 +809,7 @@ export default {
         .qrcode1 {
             font-size: 12px;
             font-weight: 400;
-            color: #939599;
+            color: @text3;
             line-height: 18px;
             margin: 12px 0px 12px 44px;
         }
@@ -820,7 +820,7 @@ export default {
         padding-bottom: 12px;
     }
     .time {
-        color: #939599;
+        color: @text3;
         font-size: 12px;
     }
     .copy {
@@ -847,19 +847,19 @@ export default {
         color: #303133;
     }
     .span {
-        color: #939599;
+        color: @text3;
     }
     .code {
         font-size: 12px;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 18px;
         padding-bottom: 12px;
     }
     .name {
         font-size: 12px;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 18px;
         margin-bottom: 6px;
     }
@@ -875,7 +875,7 @@ export default {
     span {
         font-size: 14px;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
     }
     .top {
@@ -912,7 +912,7 @@ export default {
                     margin-right: 4px;
                 }
                 &.prim {
-                    color: #939599;
+                    color: @text3;
                     border: 1px solid #303133;
                     background: #202122;
                 }
@@ -920,7 +920,7 @@ export default {
             .text4 {
                 color: #fdfb60;
                 &.prim {
-                    color: #939599;
+                    color: @text3;
                 }
             }
         }
@@ -942,7 +942,7 @@ export default {
             border-radius: 4px;
             &.prim {
                 background: #202122;
-                color: #939599;
+                color: @text3;
             }
         }
         .prive2 {
@@ -987,7 +987,7 @@ export default {
     margin: 0 16px;
     .text1 {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
     }
 
@@ -1033,7 +1033,7 @@ export default {
             font-size: 12px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
-            color: #939599;
+            color: @text3;
             line-height: 17px;
             background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
             -webkit-background-clip: text;

src/main/nine-space/src/views/asset/GiveSearch.vue

@@ -101,7 +101,7 @@ export default {
     .name {
         font-size: 12px;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding-left: 16px;
         background-color: #181818;
@@ -136,7 +136,7 @@ export default {
             .text2 {
                 font-size: 14px;
                 font-weight: 400;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
             }
             span {

src/main/nine-space/src/views/asset/Search.vue

@@ -125,7 +125,7 @@ export default {
     position: absolute;
     right: 16px;
     bottom: 9px;
-    color: #939599 !important;
+    color: @text3 !important;
     min-width: 96px;
 }
 // /deep/.van-sticky {

src/main/nine-space/src/views/creator/Detail.vue

@@ -51,7 +51,7 @@
                     <!-- <van-button
             plain
             @click="$router.push('/setting')"
-            color="#939599"
+            color="@text3"
             size="mini"
             round
             >分享</van-button
@@ -241,7 +241,7 @@ export default {
     transform: translateY(-8px);
     .sub {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 16px 0;
     }
@@ -264,7 +264,7 @@ export default {
             }
             .text2 {
                 font-size: 14px;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
             }
         }
@@ -289,8 +289,8 @@ export default {
             box-sizing: border-box;
             background-clip: content-box, border-box;
             &.followed {
-                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #939599, #939599);
-                color: #939599;
+                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3);
+                color: @text3;
             }
         }
     }
@@ -347,7 +347,7 @@ export default {
     .menu-item {
         font-size: 16px;
         font-weight: bold;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         margin-right: 30px;
         &.active {

src/main/nine-space/src/views/order/Detail.vue

@@ -53,7 +53,7 @@
         <div class="tips-item">
             <div class="text1">订单编号</div>
             <div class="text2">
-                <van-button @click="copy" color="#939599" plain size="mini">复制</van-button>
+                <van-button @click="copy" color="@text3" plain size="mini">复制</van-button>
                 <span>{{ info.id }}</span>
             </div>
         </div>
@@ -154,7 +154,7 @@ export default {
 
             .text2 {
                 font-size: 14px;
-                color: #939599;
+                color: @text3;
                 line-height: 24px;
                 margin-top: 4px;
             }
@@ -189,7 +189,7 @@ export default {
     padding: 0 16px;
     .text1 {
         font-size: 13px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         flex-shrink: 0;
     }

src/main/nine-space/src/views/product/Detail.vue

@@ -1,30 +1,56 @@
 <template>
     <div class="detail">
-        <swiper pagination class="mySwiper" v-if="banners.length > 0">
-            <swiper-slide v-for="(item, index) in banners" :key="index">
-                <!-- <img :src="item" /> -->
-
-                <video
-                    class="swiper-video"
-                    v-if="isVideo(item)"
-                    :src="item.url"
-                    :poster="getImg(changeImgs([item]), '', 1200)"
-                    controls="controls"
-                >
-                    您的浏览器不支持 video 标签。
-                </video>
-                <van-image
-                    v-else
-                    @click="preview(index, changeImgs(banners))"
-                    :src="getImg(item.url, '', 1200)"
-                    width="100vw"
-                    height="100vw"
-                    fit="scale-down"
-                />
-            </swiper-slide>
-        </swiper>
+        <div class="detail-top">
+            <img src="../../assets/png-bg-shangping.png" class="bg-img" />
+
+            <div class="detail-info">
+                <swiper pagination class="mySwiper" v-if="banners.length > 0">
+                    <swiper-slide v-for="(item, index) in banners" :key="index">
+                        <!-- <img :src="item" /> -->
+
+                        <video
+                            class="swiper-video"
+                            v-if="isVideo(item)"
+                            :src="item.url"
+                            :poster="getImg(changeImgs([item]), '', 1200)"
+                            controls="controls"
+                        >
+                            您的浏览器不支持 video 标签。
+                        </video>
+                        <van-image
+                            v-else
+                            @click="preview(index, changeImgs(banners))"
+                            :src="getImg(item.url, '', 1200)"
+                            width="calc(100vw - 134px)"
+                            height="calc(100vw - 134px)"
+                            fit="scale-down"
+                        />
+                    </swiper-slide>
+                </swiper>
+
+                <div class="share-content">
+                    <like-button :isLike="info.liked" @click="likeProduct">
+                        {{ info.likes }}
+                    </like-button>
+
+                    <div class="share-icon" @click="share">
+                        <img src="../../assets/svgs/icon-fenxiang.svg" alt="" />
+                        <span>分享</span>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="info">
+            <div class="info-title">
+                <div class="detail-name">
+                    <span>{{ info.name }}</span>
+                    <img src="../../assets/svgs/png-biaotikuang-01.svg" alt="" />
+                    <img src="../../assets/svgs/png-biaotikuang-02.svg" alt="" />
+                    <img src="../../assets/svgs/png-biaotikuang-03.svg" alt="" />
+                    <img src="../../assets/svgs/png-biaotikuang-04.svg" alt="" />
+                </div>
+            </div>
             <div class="name" v-if="info.salable && startTime">
                 <div class="name1">首发抢购倒计时</div>
                 <div class="name2">{{ startTime }}</div>
@@ -42,9 +68,9 @@
                     <span>剩余 {{ info.stock }}</span>
                 </div>
             </div>
-            <div class="title">{{ info.name }}</div>
+            <!-- <div class="title">{{ info.name }}</div> -->
             <div class="info-bottom">
-                <span class="text1"> 编号 {{ info.id }} </span>
+                <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span>
                 <!-- <van-button
           v-if="info.type !== 'DEFAULT'"
           type="primary"
@@ -53,9 +79,9 @@
           >选择其他编号</van-button
         > -->
                 <div class="flex1"></div>
-                <like-button :isLike="info.liked" @click="likeProduct">
+                <!-- <like-button :isLike="info.liked" @click="likeProduct">
                     {{ info.likes }}
-                </like-button>
+                </like-button> -->
             </div>
         </div>
 
@@ -83,7 +109,7 @@
         <driver />
 
         <div class="goods">
-            <template v-if="boxs.length > 0">
+            <div class="goods-info" v-if="boxs.length > 0">
                 <div class="page-title">盲盒详情</div>
                 <swiper :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
                     <swiper-slide v-for="(item, index) in boxs" :key="index">
@@ -97,8 +123,8 @@
                         />
                     </swiper-slide>
                 </swiper>
-            </template>
-            <template v-if="properties.length > 0">
+            </div>
+            <div class="goods-info" v-if="properties.length > 0">
                 <div class="page-title">商品特性</div>
                 <div class="specific-list">
                     <div class="specific-item" v-for="(item, index) in properties" :key="index">
@@ -106,11 +132,11 @@
                         <div class="text2">{{ item.value }}</div>
                     </div>
                 </div>
-            </template>
-            <template v-if="info.detail">
+            </div>
+            <div class="goods-info" v-if="info.detail">
                 <div class="page-title">作品描述</div>
-                <div class="page-text page-detail" v-html="info.detail"></div
-            ></template>
+                <div class="page-text page-detail" v-html="info.detail"></div>
+            </div>
         </div>
         <div class="btn van-safe-area-bottom" v-if="info.isAppointment">
             <div class="btns">
@@ -126,6 +152,10 @@
             </div>
         </div>
 
+        <div class="btn van-safe-area-bottom" v-if="!info.salable">
+            <div class="btns status-text">仅展示</div>
+        </div>
+
         <!-- <driver /> -->
 
         <!-- <van-collapse v-model="activeName" accordion>
@@ -136,7 +166,7 @@
 
         <driver />
 
-        <post :info="info" />
+        <post ref="post" :info="info" noButton />
     </div>
 </template>
 
@@ -274,6 +304,9 @@ export default {
                     }
                 });
             });
+        },
+        share() {
+            this.$refs.post.init();
         }
     }
 };
@@ -301,7 +334,7 @@ export default {
             line-height: 24px;
         }
         .name2 {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: 400;
             color: #fdfb60;
             line-height: 24px;
@@ -330,7 +363,7 @@ export default {
         .sub {
             flex-grow: 1;
             margin-left: 5px;
-            font-size: 14px;
+            font-size: @font2;
             color: #949699;
             line-height: 16px;
             span {
@@ -339,15 +372,15 @@ export default {
         }
 
         .price-sub {
-            font-size: 14px;
-            color: #939599;
+            font-size: @font2;
+            color: @text3;
             text-decoration: line-through;
             margin-left: 10px;
         }
 
         .text {
-            font-size: 14px;
-            color: #939599;
+            font-size: @font2;
+            color: @text3;
             line-height: 16px;
             span {
                 margin-left: 10px;
@@ -369,12 +402,12 @@ export default {
         margin-top: 4px;
         height: 24px;
         .text1 {
-            font-size: 14px;
+            font-size: @font2;
             color: #949699;
             line-height: 24px;
         }
         .van-button {
-            font-size: 13px;
+            font-size: @font2;
             color: #fdfb60;
             line-height: 24px;
             background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
@@ -397,18 +430,18 @@ export default {
     .van-cell__title {
         margin-left: 12px;
         .text1 {
-            font-size: 16px;
+            font-size: @font2;
             line-height: 24px;
         }
         .text2 {
-            font-size: 12px;
-            color: #939599;
+            font-size: @font2;
+            color: @text3;
             line-height: 22px;
         }
     }
 
     .van-cell__value {
-        font-size: 13px;
+        font-size: @font2;
     }
 }
 .buy {
@@ -425,12 +458,12 @@ export default {
 
     &.used {
         background: linear-gradient(135deg, darken(@prim, 50%), darken(@warn, 50%));
-        color: #939599;
+        color: @text3;
     }
 }
 /deep/ .mySwiper {
-    width: 100vw;
-    height: 100vw;
+    width: calc(100vw - 120px);
+    height: calc(100vw - 120px);
     z-index: 1;
 
     .swiper-pagination {
@@ -467,47 +500,64 @@ export default {
 }
 
 .page-title {
-    font-size: 18px;
+    font-size: @font2;
     font-weight: bold;
     color: #ffffff;
     line-height: 28px;
 }
 .specific-list {
-    padding: 16px 0;
+    padding: 10px 0 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    overflow-x: auto;
 }
 .specific-item {
-    width: 94px;
-    height: 62px;
+    // width: 94px;
+    // height: 62px;
     border-radius: 4px;
-    border: solid 0px transparent;
-    padding: 1px;
-    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
-    background-origin: border-box;
-    box-sizing: border-box;
-    background-clip: content-box, border-box;
+    padding: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    position: relative;
+    background: linear-gradient(135deg, @prim, @warn);
+    margin-right: 20px;
+    box-sizing: border-box;
+    min-width: 94px;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        background-color: @bg;
+        border-radius: 4px;
+        z-index: 0;
+    }
 
     .text1 {
-        font-size: 14px;
-        color: #939599;
+        font-size: @font2;
+        color: @text3;
         line-height: 24px;
+        z-index: 1;
+        white-space: nowrap;
     }
 
     .text2 {
-        font-size: 14px;
+        font-size: @font2;
         color: #ffffff;
         line-height: 24px;
+        z-index: 1;
+        white-space: nowrap;
     }
 }
 
 .page-text {
-    font-size: 14px;
+    font-size: @font2;
     color: #ffffff;
     line-height: 28px;
     margin-top: 10px;
@@ -526,14 +576,16 @@ export default {
     .van-button {
         background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
         color: #333230;
-        font-size: 16px;
+        font-size: @font2;
         border-width: 0px;
     }
 }
-
+.goods-info {
+    padding: 0 0 30px;
+}
 .detail-swiper {
     height: 170px;
-    margin-top: 12px;
+    margin-top: 10px;
 }
 
 .swiper-slide {
@@ -548,7 +600,160 @@ export default {
     }
 }
 .swiper-video {
-    width: 100vw;
-    height: 100vw;
+    width: calc(100vw - 134px);
+    height: calc(100vw - 134px);
+    border: 2px solid #2f2f2f;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: @bg;
+}
+
+.detail-top {
+    position: relative;
+    .detail-info {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .bg-img {
+        display: block;
+        width: 100vw;
+    }
+    .mySwiper {
+        border-radius: 8px;
+        border: 2px solid #ffffff;
+        .swiper-slide {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            /deep/ .van-image {
+                border: 2px solid #2f2f2f;
+                border-radius: 8px;
+                overflow: hidden;
+                background-color: @bg;
+            }
+        }
+    }
+
+    .name {
+        font-size: @font4;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+        padding: 10px 25px;
+        position: relative;
+
+        img {
+            position: absolute;
+            &:nth-child(2),
+            &:nth-child(5) {
+                width: 45px;
+                display: block;
+            }
+
+            &:nth-child(3),
+            &:nth-child(4) {
+                width: calc(100% - 65px);
+                height: 10px;
+            }
+            &:nth-child(2) {
+                top: 0;
+                left: 0;
+            }
+            &:nth-child(3) {
+                top: -0.8px;
+                left: 45px;
+            }
+            &:nth-child(4) {
+                bottom: 0.5px;
+                right: 45px;
+            }
+            &:nth-child(5) {
+                bottom: 0;
+                right: 0;
+            }
+        }
+    }
+}
+
+.share-content {
+    display: flex;
+    margin-top: 20px;
+}
+.share-icon {
+    margin-left: 30px;
+    img {
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    span {
+        font-size: @font1;
+        color: #949699;
+        line-height: 24px;
+        vertical-align: middle;
+        margin-left: 2px;
+    }
+}
+.info {
+    .info-title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.detail-name {
+    font-size: @font4;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+    padding: 10px 25px;
+    position: relative;
+
+    img {
+        position: absolute;
+        &:nth-child(2),
+        &:nth-child(5) {
+            width: 45px;
+            display: block;
+        }
+
+        &:nth-child(3),
+        &:nth-child(4) {
+            width: calc(100% - 65px);
+            height: 10px;
+        }
+        &:nth-child(2) {
+            top: 0;
+            left: 0;
+        }
+        &:nth-child(3) {
+            top: -0.8px;
+            left: 45px;
+        }
+        &:nth-child(4) {
+            bottom: 0.5px;
+            right: 45px;
+        }
+        &:nth-child(5) {
+            bottom: 0;
+            right: 0;
+        }
+    }
+}
+
+.status-text {
+    font-size: @font4;
+    color: #939599;
+    line-height: 28px;
+    text-align: center;
+    padding: 14px 50px !important;
+    border-top: 1px solid #313233;
 }
 </style>

src/main/nine-space/src/views/product/DetailMode.vue

@@ -346,14 +346,14 @@ export default {
 
         .price-sub {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             text-decoration: line-through;
             margin-left: 10px;
         }
 
         .text {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 16px;
             span {
                 margin-left: 10px;
@@ -408,7 +408,7 @@ export default {
         }
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
     }
@@ -431,7 +431,7 @@ export default {
 
     &.used {
         background: linear-gradient(135deg, darken(@prim, 50%), darken(@warn, 50%));
-        color: #939599;
+        color: @text3;
     }
 }
 /deep/ .mySwiper {
@@ -501,7 +501,7 @@ export default {
 
     .text1 {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
     }
 
@@ -605,45 +605,5 @@ export default {
             margin-left: 2px;
         }
     }
-
-    .name {
-        font-size: 20px;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 30px;
-        padding: 10px 25px;
-        position: relative;
-
-        img {
-            position: absolute;
-            &:nth-child(2),
-            &:nth-child(5) {
-                width: 45px;
-                display: block;
-            }
-
-            &:nth-child(3),
-            &:nth-child(4) {
-                width: calc(100% - 65px);
-                height: 10px;
-            }
-            &:nth-child(2) {
-                top: 0;
-                left: 0;
-            }
-            &:nth-child(3) {
-                top: -0.8px;
-                left: 45px;
-            }
-            &:nth-child(4) {
-                bottom: 0.5px;
-                right: 45px;
-            }
-            &:nth-child(5) {
-                bottom: 0;
-                right: 0;
-            }
-        }
-    }
 }
 </style>

src/main/nine-space/src/views/user/Point.vue

@@ -41,7 +41,7 @@
                 </div>
                 <div class="text3">-320</div>
             </div> -->
-
+            <!-- <lottie :options="defaultOptions" :height="50" :width="400" v-on:animCreated="handleAnimation" /> -->
             <van-empty description="暂时没有任何记录哦~" />
         </div>
     </div>
@@ -49,6 +49,8 @@
 
 <script>
 import { ref } from 'vue';
+// import Lottie from 'vue-lottie';
+// const animationData = require('../../utils/84860-my-first-ever-lottie84860-my-first-ever-lottie.json');
 export default {
     setup() {
         const showPopover = ref(false);
@@ -61,9 +63,18 @@ export default {
             showPopover
         };
     },
+    data() {
+        return {
+            // defaultOptions: { animationData: animationData },
+            animationSpeed: 1
+        };
+    },
     methods: {
         onSelect(action) {
             console.log(action);
+        },
+        handleAnimation(anim) {
+            this.anim = anim;
         }
     }
 };
@@ -79,7 +90,7 @@ export default {
     position: relative;
     .text1 {
         font-size: 13px;
-        color: #939599;
+        color: @text3;
         line-height: 18px;
     }
     .text2 {
@@ -137,7 +148,7 @@ export default {
 .select {
     min-width: 100px;
     height: 32px;
-    color: #939599 !important;
+    color: @text3 !important;
 
     /deep/.van-icon__image {
         width: 20px;

src/main/nine-space/yarn.lock

@@ -5895,6 +5895,11 @@ loglevel@^1.6.8:
   resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
+lottie-web@^5.1.9:
+  version "5.8.1"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.8.1.tgz#807e0af0ad22b59bf867d964eb684cb3368da0ef"
+  integrity sha512-9gIizWADlaHC2GCt+D+yNpk5l2clZQFqnVWWIVdY0LnxC/uLa39dYltAe3fcmC/hrZ2IUQ8dLlY0O934Npjs7Q==
+
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz"
@@ -9100,6 +9105,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-lottie@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vue-lottie/-/vue-lottie-0.2.1.tgz#f9f62c34a276e6834255406118fb05b51f765e4b"
+  integrity sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==
+  dependencies:
+    lottie-web "^5.1.9"
+
 vue-router@^4.0.0-0:
   version "4.0.12"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz"