样式

src/main/nine-space/package.json

@@ -1,56 +1,57 @@
 {
-  "name": "nine-space",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@better-scroll/core": "^2.4.2",
-    "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
-    "@vant/area-data": "^1.1.3",
-    "axios": "^0.21.4",
-    "better-scroll": "^2.4.2",
-    "clipboard": "^2.0.8",
-    "core-js": "^3.6.5",
-    "dayjs": "^1.10.7",
-    "echarts": "^4.9.0",
-    "element-ui": "^2.15.6",
-    "html2canvas": "^1.3.2",
-    "lodash": "^4.17.21",
-    "mathjs": "^9.5.1",
-    "qrcode": "^1.4.4",
-    "query-string": "^7.0.1",
-    "register-service-worker": "^1.7.1",
-    "swiper": "^6.8.1",
-    "v-charts": "^1.19.0",
-    "vant": "^3.2.3",
-    "vconsole": "^3.9.4",
-    "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"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
-    "prettier": "^2.2.1",
-    "style-resources-loader": "^1.4.1",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5"
-  }
+    "name": "nine-space",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "serveRaex": "vue-cli-service serve --mode development_raex",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "@better-scroll/core": "^2.4.2",
+        "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
+        "@vant/area-data": "^1.1.3",
+        "axios": "^0.21.4",
+        "better-scroll": "^2.4.2",
+        "clipboard": "^2.0.8",
+        "core-js": "^3.6.5",
+        "dayjs": "^1.10.7",
+        "echarts": "^4.9.0",
+        "element-ui": "^2.15.6",
+        "html2canvas": "^1.3.2",
+        "lodash": "^4.17.21",
+        "mathjs": "^9.5.1",
+        "qrcode": "^1.4.4",
+        "query-string": "^7.0.1",
+        "register-service-worker": "^1.7.1",
+        "swiper": "^6.8.1",
+        "v-charts": "^1.19.0",
+        "vant": "^3.2.3",
+        "vconsole": "^3.9.4",
+        "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"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "~4.5.0",
+        "@vue/cli-plugin-eslint": "~4.5.0",
+        "@vue/cli-plugin-router": "~4.5.0",
+        "@vue/cli-plugin-vuex": "~4.5.0",
+        "@vue/cli-service": "~4.5.0",
+        "@vue/compiler-sfc": "^3.0.0",
+        "@vue/eslint-config-prettier": "^6.0.0",
+        "babel-eslint": "^10.1.0",
+        "eslint": "^6.7.2",
+        "eslint-plugin-prettier": "^3.3.1",
+        "eslint-plugin-vue": "^7.0.0",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "prettier": "^2.2.1",
+        "style-resources-loader": "^1.4.1",
+        "vue-cli-plugin-style-resources-loader": "^0.1.5"
+    }
 }

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

@@ -70,7 +70,7 @@ export default {
 <style lang="less" scoped>
 .coupon {
     border-radius: 8px;
-    background: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1));
+    background: linear-gradient(135deg, @prim, @warn);
     position: relative;
     padding: 0 10px;
     margin: 8px;
@@ -103,7 +103,7 @@ export default {
             font-weight: bold;
             color: @text3;
             line-height: 24px;
-            background: linear-gradient(0deg, #fdfb60 0%, #ff8f3e 100%);
+            background: linear-gradient(0deg, @prim 0%, @warn 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
@@ -188,7 +188,7 @@ export default {
     width: 70px;
     height: 26px;
     font-size: 12px;
-    color: #fdfb60;
+    color: @prim;
     line-height: 26px;
     text-align: center;
     border-radius: 16px;

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

@@ -7,13 +7,17 @@
                 </div>
                 <div class="content" v-if="!img" ref="post">
                     <!-- @load="loadImg" -->
-                    <img crossOrigin="anonymous" :src="banners" class="detailImg" />
-                    <!-- <van-image :src="detailImg" class="detailImg" fit="cover" /> -->
+                    <!-- <img crossOrigin="anonymous" :src="banners" class="detailImg" /> -->
+                    <van-image :src="detailImg" class="detailImg" fit="cover" />
                     <div class="info">
                         <div class="name van-multi-ellipsis--l2">
                             {{ info.name }}
                         </div>
-                        <div class="text">
+                        <div class="tabs">
+                            <span v-if="info.category">{{ info.category }}</span>
+                            <span v-if="info.number">编号{{ info.number }}</span>
+                        </div>
+                        <div class="text" v-if="isBuy">
                             <div class="price">
                                 <img src="@assets/svgs/jiage.svg" alt="" />
                                 <span>{{ info.price }}</span>
@@ -23,15 +27,17 @@
                                 <span>剩余 {{ info.stock }}</span>
                             </div>
                         </div>
+
+                        <div class="status" v-if="!info.salable">仅展示</div>
                     </div>
                     <div class="minter">
                         <div class="minter-content">
-                            <van-image width="30" height="30" round :src="userImg" fit="cover" />
+                            <van-image width="26" height="26" round :src="userImg" fit="cover" />
                             <div class="text1">{{ info.minter }}</div>
                             <div class="text2">铸造者</div>
                         </div>
 
-                        <vue-qrcode :value="url" :options="{ width: 70, margin: 2 }" class="code"></vue-qrcode>
+                        <vue-qrcode :value="url" :options="{ width: 70, margin: 3 }" class="code"></vue-qrcode>
                     </div>
                 </div>
 
@@ -93,6 +99,9 @@ export default {
         },
         banners() {
             return this.getImg(this.changeImgs(this.info.pic || []), '', 900);
+        },
+        isBuy() {
+            return this.info.stock && this.info.onShelf && this.info.salable;
         }
     },
     components: {
@@ -171,7 +180,8 @@ export default {
 .content {
     width: 80vw;
     background: #19191b;
-    border-radius: 8px;
+    border-radius: 30px;
+    overflow: hidden;
 }
 
 .img {
@@ -182,7 +192,7 @@ export default {
 }
 
 .info {
-    padding: 12px 10px;
+    padding: 12px 10px 7px;
     .name {
         font-size: 18px;
         font-weight: bold;
@@ -199,7 +209,7 @@ export default {
             span {
                 font-size: 32px;
                 font-family: OSP-DIN, OSP;
-                color: #fdfb60;
+                color: @prim;
                 line-height: 36px;
             }
         }
@@ -222,20 +232,20 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 10px;
+    padding: 10px 16px 12px 10px;
     border-top: 2px solid #202122;
 
     .minter-content {
         .text1 {
-            font-size: 14px;
+            font-size: @font1;
             color: #ffffff;
-            line-height: 24px;
+            line-height: 17px;
             margin-top: 6px;
         }
         .text2 {
-            font-size: 12px;
+            font-size: @font1;
             color: @text3;
-            line-height: 22px;
+            line-height: 17px;
         }
     }
 }
@@ -244,7 +254,7 @@ export default {
     font-size: 13px;
     color: @text3;
     line-height: 22px;
-    margin-top: 16px;
+    margin-top: 30px;
 }
 
 .share {
@@ -253,7 +263,7 @@ export default {
     bottom: 20vh;
     width: 48px;
     height: 48px;
-    background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+    background: linear-gradient(135deg, @prim 0%, @warn 100%);
     z-index: 20;
     display: flex;
     flex-direction: column;
@@ -275,4 +285,24 @@ export default {
     height: 80vw;
     display: block;
 }
+.tabs {
+    .flex();
+    margin-top: 6px;
+    span {
+        font-size: 12px;
+        color: #939599;
+        line-height: 22px;
+        padding: 0 10px;
+        background: #27272b;
+        border-radius: 4px;
+        margin-right: 6px;
+    }
+}
+
+.status {
+    font-size: 14px;
+    color: #939599;
+    line-height: 24px;
+    padding-top: 11px;
+}
 </style>

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

@@ -14,13 +14,13 @@
             <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
         </div>
         <div class="order">
-            <van-image :radius="6" width="74" height="104" :src="getImg(changeImgs(info.pic))" fit="cover" />
+            <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
 
             <div class="content">
                 <div class="name van-multi-ellipsis--l2">
                     {{ info.name }}
                 </div>
-                <div class="text">编号:{{ info.id }}</div>
+                <div class="text" v-if="info.number">编号:{{ info.number }}</div>
                 <div class="flex1"></div>
                 <div class="price">¥{{ info.price }}</div>
             </div>
@@ -149,19 +149,19 @@ export default {
         flex-direction: column;
         overflow: hidden;
         .name {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: bold;
             line-height: 22px;
         }
         .text {
-            font-size: 14px;
+            font-size: @font2;
             color: @text3;
             line-height: 24px;
             margin-top: 4px;
         }
 
         .price {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: bold;
             line-height: 24px;
         }

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

@@ -1,21 +1,25 @@
 <template>
     <van-overlay :show="show" z-index="99" @click="show = false">
-        <div class="content" @click.stop="">
-            <img class="bg" ref="bg" src="../../assets/open1.png" alt="" />
+        <div class="content" @click.stop="open">
+            <img class="bg" ref="bg" src="@assets/open1.png" alt="" />
 
             <div class="box">
-                <img class="img1" src="../../assets/box1.png" alt="" />
-                <img class="img2" ref="img2" src="../../assets/box2.png" alt="" />
-                <img class="img3" ref="img3" src="../../assets/png-kapian.png" alt="" />
-                <img class="guang" src="../../assets/png-guang.png" alt="" />
+                <img class="img1" src="@assets/box1.png" alt="" />
+                <img class="img2" ref="img2" src="@assets/box2.png" alt="" />
+                <img class="img3" ref="img3" src="@assets/png-kapian.png" alt="" />
+                <img class="guang" src="@assets/png-guang.png" alt="" />
             </div>
 
             <div class="product" ref="product">
-                <img class="productBg" src="../../assets/png-cangping-bg.png" alt="" />
+                <img class="productBg" src="@assets/png-cangping-bg.png" alt="" />
                 <img class="productImg" :src="imgSrc" />
             </div>
 
-            <img src="../../assets/icon_fenxiang_close.png" alt="" class="close" />
+            <div class="text1" v-if="!showProduct">点击打开盲盒</div>
+
+            <div class="text" v-else>藏品正在生成中<br />约1~3分钟，完成后会出现在你的藏品室</div>
+
+            <img src="@assets/icon_fenxiang_close.png" @click="show = false" alt="" class="close" />
         </div>
     </van-overlay>
 </template>
@@ -30,14 +34,10 @@ export default {
     },
     data() {
         return {
-            show: true
+            show: false,
+            showProduct: false
         };
     },
-    mounted() {
-        setTimeout(() => {
-            this.open();
-        }, 1000);
-    },
     methods: {
         open() {
             this.addClass('img2', 'animate__rollOut', false)
@@ -48,7 +48,10 @@ export default {
                     setTimeout(() => {
                         this.addClass('bg', 'bg1');
                     }, 300);
-                    // return this.addClass('product', 'animate__bounceInDown', true);
+                    return this.addClass('product', 'animate__bounceInDown', true);
+                })
+                .then(() => {
+                    this.showProduct = true;
                 });
         },
         //组件名，动画名，展示（true:出现，false:消失）
@@ -90,10 +93,31 @@ export default {
         }
     }
 
+    .text {
+        text-align: center;
+        font-size: 12px;
+        color: #939599;
+        line-height: 17px;
+        margin-top: 60px;
+    }
+
+    .text1 {
+        font-size: 12px;
+        color: #939599;
+        line-height: 17px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 100px;
+        z-index: 3;
+    }
+
     .close {
         width: 40px;
         height: 40px;
-        margin-top: 10px;
+        margin-top: 30px;
+        position: relative;
+        z-index: 5;
     }
 }
 

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

@@ -36,7 +36,7 @@
             </div>
         </div>
 
-        <div class="xianliang" v-if="time">
+        <div class="sold xianliang" v-if="time">
             <img src="@assets/shizhong.png" alt="" />
             <span>即将开售：{{ time }}</span>
         </div>
@@ -44,7 +44,7 @@
         <div class="sold" v-if="isSold">已售馨</div>
 
         <img class="bg" src="@assets/png-diwen.png" alt="" />
-        <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" />
+        <!-- <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" /> -->
     </router-link>
 </template>
 
@@ -127,7 +127,10 @@ export default {
         color: @prim;
         display: flex;
         align-items: center;
+        // border-radius: 13px !important;
         z-index: 4;
+        padding: 0 10px !important;
+
         img {
             width: 18px;
             height: 18px;
@@ -222,7 +225,7 @@ export default {
     color: #fff;
 }
 .sold {
-    background-color: #303133;
+    background-color: #19191b80;
     font-size: @font1;
     color: #939599;
     padding: 0 17px;

src/main/nine-space/src/main.js

@@ -9,6 +9,7 @@ import 'vant/lib/index.css';
 import './styles/app.less';
 import './styles/font.less';
 import http from './plugins/http';
+import colors from './plugins/colors';
 // import ElementUI from 'element-ui';
 // import 'element-ui/lib/theme-chalk/index.css';
 import PageTitle from './components/PageTitle';
@@ -61,6 +62,7 @@ http.http
 createApp(App)
     .use(Vant)
     .use(http)
+    .use(colors)
     // .use(ElementUI)
     .use(ConfigProvider)
     .use(VueClipboard)

src/main/nine-space/src/plugins/colors.js

@@ -0,0 +1,8 @@
+export default {
+    install(app, options) {
+        app.config.globalProperties.$colors = {
+            prim: '#00FFCB',
+            warn: '#006EFF'
+        };
+    }
+};

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

@@ -54,7 +54,10 @@ textarea {
 .van-divider::before {
     height: 5px;
 }
-
+body {
+    font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui,
+        'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
 html,
 body,
 #app,

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

@@ -1,8 +1,8 @@
 @divider: #f2f4f5;
-@prim: #fdfb60;
+@prim: #00FFCB;
 @success: #67c23a;
 @danger: #f56c6c;
-@warn: #e6a23c;
+@warn: #006EFF;
 @text0: #181818;
 @text1: #323233;
 @text2: #606266;

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

@@ -17,7 +17,7 @@
             </swiper-slide>
         </swiper>
 
-        <van-grid :border="false">
+        <van-grid :border="false" column-num="5">
             <van-grid-item text="精选推荐" :to="{ path: '/productList' }">
                 <template v-slot:icon>
                     <img class="grid-img" src="@assets/info_icon_jingxuanxilie.png" />
@@ -33,6 +33,11 @@
                     <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_paimaixilie.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" />
@@ -47,9 +52,21 @@
 
         <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="box-list"></div> -->
+
+            <swiper
+                :slidesPerView="2"
+                :spaceBetween="16"
+                :pagination="{
+                    clickable: true
+                }"
+                class="box-swiper"
+                :style="{ paddingBottom: box.length > 2 ? '30px' : '8px' }"
+            >
+                <swiper-slide v-for="(item, index) in box" :key="index">
+                    <product-info v-model:info="box[index]"></product-info>
+                </swiper-slide>
+            </swiper>
         </div>
         <div class="box" v-if="products.length > 0">
             <page-title
@@ -84,7 +101,7 @@
         <div class="box">
             <page-title title="更多藏品" :isLink="false"></page-title>
             <van-list
-                style="padding-bottom: 100px"
+                style="padding-bottom: 100px;"
                 class="box-list"
                 v-model:loading="loading"
                 :finished="finished"
@@ -151,7 +168,7 @@ export default {
                 forbidClick: true
             });
             this.getBanner();
-            this.getProduct('BLIND_BOX').then(res => {
+            this.getProduct('BLIND_BOX', 'stock,desc;sort,desc').then(res => {
                 this.box = res;
             });
             this.getProduct('DEFAULT', 'likes,desc;sort,desc;createdAt,desc').then(res => {
@@ -381,4 +398,30 @@ export default {
 .casting {
     padding-bottom: 10px;
 }
+.box-swiper {
+    padding: 8px 16px;
+    box-sizing: border-box;
+    .product {
+        margin: 0;
+    }
+}
+/deep/.box-swiper {
+    .swiper-pagination {
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .swiper-pagination-bullet {
+            margin: 0 0;
+            background-color: #939599;
+            width: 12px;
+            height: 3px;
+            border-radius: 0;
+
+            &.swiper-pagination-bullet-active {
+                background-color: #fff;
+            }
+        }
+    }
+}
 </style>

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

@@ -2,12 +2,12 @@
     <div class="submit">
         <div class="pageTitle">{{ info.minter }}</div>
         <div class="product">
-            <van-image width="74" height="104" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
+            <van-image width="80" height="80" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
             <div class="product-content">
                 <div class="text1">
                     {{ info.name }}
                 </div>
-                <div class="no"></div>
+                <div class="no">{{ info.number }}</div>
                 <div class="price">¥{{ info.price }}</div>
             </div>
         </div>
@@ -33,7 +33,7 @@
                 <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                     <img :src="item.icon" alt="" />
                     <span>{{ item.name }}</span>
-                    <img :src="payType === item.type ? icons[1] : icons[0]" alt="" />
+                    <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
                 </div>
             </div>
         </div>
@@ -45,7 +45,7 @@
                 <div class="btn">
                     <van-button
                         round
-                        color="linear-gradient(135deg, #FDFB60 0%, #FF8F3E 100%)"
+                        :color="`linear-gradient(135deg, ${$colors.prim} 0%, ${$colors.warn} 100%)`"
                         @click="submit"
                         :disabled="orderId"
                     >
@@ -89,7 +89,7 @@ export default {
                 //   name: "DCEP",
                 // },
             ],
-            icons: [require('@assets/svgs/icon_gouxuan_huise.svg'), require('@assets/svgs/icon_gouxuan_pre.svg')],
+            icons: [require('@assets/svgs/icon_gouxuan_huise.svg'), require('@assets/icon_gouxuan_pre.png')],
             bottom: null,
             orderId: 0,
             gas: 1,
@@ -328,7 +328,7 @@ export default {
     .text2 {
         font-size: @font2;
         font-weight: bold;
-        color: #fdfb60;
+        color: @prim;
         line-height: 24px;
     }
 
@@ -354,6 +354,7 @@ export default {
 .product {
     display: flex;
     padding: 12px 0 20px;
+    border-bottom: 1px solid #202122;
     .product-content {
         flex-grow: 1;
         margin-left: 10px;
@@ -368,14 +369,14 @@ export default {
         }
 
         .text1 {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: bold;
             color: #ffffff;
-            line-height: 22px;
+            line-height: 24px;
         }
 
         .price {
-            font-size: 16px;
+            font-size: @font2;
             font-weight: bold;
             color: #ffffff;
             line-height: 24px;
@@ -409,6 +410,10 @@ export default {
         flex-grow: 1;
         padding: 0 10px;
     }
+    .choose-icon {
+        width: 24px;
+        height: 24px;
+    }
 }
 
 .bottom {
@@ -446,7 +451,7 @@ export default {
             font-size: 34px;
             font-family: OSP;
             font-weight: normal;
-            color: #fdfb60;
+            color: @prim;
             line-height: 34px;
             display: flex;
             align-items: center;

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

@@ -147,7 +147,7 @@
                     <div class="prive" v-if="init.length > 0">
                         <div class="prive1" :class="{ opened: item.opened }" v-for="(item, index) in init" :key="index">
                             <img v-if="!item.opened" class="img" :src="item.icon[0]" alt="" />
-                            <div style="margin-top: 4px" v-if="item.icon[2]">
+                            <div style="margin-top: 4px;" v-if="item.icon[2]">
                                 <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
                             </div>
                             <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->
@@ -190,7 +190,7 @@
                             <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
                         </div>
                     </div>
-                    <div v-else style="display: flex; justify-content: center">暂无购买记录</div>
+                    <div v-else style="display: flex; justify-content: center;">暂无购买记录</div>
                 </van-collapse-item>
             </van-collapse>
 
@@ -208,11 +208,7 @@
         <div class="btn van-safe-area-bottom" ref="btn" v-if="info.status === 'NORMAL'">
             <div class="btns1">
                 <div @click="Add">
-                    <img
-                        class="img"
-                        src="https://9space-2021.oss-cn-shenzhen.aliyuncs.com/image/2021-11-09-15-17-04hsdZwERv.png"
-                        alt=""
-                    />
+                    <img class="img" src="@assets/icon-dianzan.png" alt="" />
                     <div class="text2">赠送</div>
                 </div>
                 <van-button class="btn1" type="primary" block round @click="Exhibition">{{
@@ -697,7 +693,7 @@ export default {
     .price {
         font-size: 32px;
         font-family: OSP;
-        color: #fdfb60;
+        color: @prim;
         line-height: 32px;
         transform: translateY(3px);
         .flex();
@@ -751,9 +747,9 @@ export default {
         }
         .van-button {
             font-size: @font1;
-            color: #fdfb60;
+            color: @prim;
             line-height: 24px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             border-width: 0px;
@@ -1002,7 +998,7 @@ export default {
         .text4 {
             color: #ffffff;
             line-height: 22px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             &.prim {
@@ -1042,7 +1038,7 @@ export default {
         width: 94px;
         height: 32px;
         color: #000;
-        background: linear-gradient(48deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(48deg, @prim 0%, @warn 100%);
         border-radius: 4px;
         &.prim {
             background: #202122;
@@ -1169,13 +1165,13 @@ export default {
             font-weight: 500;
             color: @text3;
             line-height: 17px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
     }
     .van-button {
-        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(135deg, @prim 0%, @warn 100%);
         color: #333230;
         font-size: @font2;
         border-width: 0px;
@@ -1184,7 +1180,7 @@ export default {
 .status {
     font-size: @font3;
     // font-weight: bold;
-    color: #fdfb60;
+    color: @prim;
     line-height: 24px;
 }
 

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

@@ -14,7 +14,7 @@
         <div class="product">
             <div class="product-name">{{ info.minter }}</div>
             <div class="product-info">
-                <van-image :radius="6" width="74" height="104" :src="getImg(changeImgs(info.pic))" fit="cover" />
+                <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
                 <div class="product-content">
                     <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
                     <div class="text2" v-if="info.number">编号:{{ info.number }}</div>
@@ -69,7 +69,7 @@
                 {{ info.payTime }}
             </div>
         </div>
-        <order-open :imgSrc="getImg(changeImgs(info.pic))"></order-open>
+        <order-open ref="box" :imgSrc="getImg(changeImgs(info.pic))"></order-open>
     </div>
 </template>
 
@@ -94,6 +94,9 @@ export default {
         this.$http.get('/order/get/' + this.$route.query.id).then(res => {
             this.info = res;
             this.$toast.clear();
+            if (res.status === 'PROCESSING' && res.type === 'BLIND_BOX') {
+                this.$refs.box.show = true;
+            }
         });
     },
     methods: {
@@ -149,20 +152,20 @@ export default {
             flex-direction: column;
             margin-left: 10px;
             .text1 {
-                font-size: 16px;
+                font-size: @font2;
                 font-weight: bold;
                 color: #ffffff;
                 line-height: 22px;
             }
 
             .text2 {
-                font-size: 14px;
+                font-size: @font2;
                 color: @text3;
                 line-height: 24px;
                 margin-top: 4px;
             }
             .price {
-                font-size: 16px;
+                font-size: @font2;
                 font-weight: bold;
                 color: #ffffff;
                 line-height: 24px;

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

@@ -433,7 +433,7 @@ export default {
         width: 94px;
         height: 32px;
         color: #000;
-        background: linear-gradient(48deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(48deg, @prim 0%, @warn 100%);
         border-radius: 4px;
         &.prim {
             background: #202122;
@@ -473,9 +473,9 @@ export default {
         .name2 {
             font-size: @font2;
             font-weight: 400;
-            color: #fdfb60;
+            color: @prim;
             line-height: 24px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
@@ -483,7 +483,7 @@ export default {
     .price {
         font-size: 36px;
         font-family: OSP;
-        color: #fdfb60;
+        color: @prim;
         line-height: 36px;
         transform: translateY(3px);
 
@@ -580,9 +580,9 @@ export default {
         }
         .van-button {
             font-size: @font2;
-            color: #fdfb60;
+            color: @prim;
             line-height: 24px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             border-width: 0px;
@@ -695,7 +695,7 @@ export default {
             }
         }
         .text4 {
-            color: #fdfb60;
+            color: @prim;
             &.prim {
                 color: @text3;
             }
@@ -753,7 +753,7 @@ export default {
 }
 .qiaohua {
     border-radius: 4px;
-    background: linear-gradient(45deg, rgba(253, 251, 96, 1), rgba(254, 181, 74, 1), rgba(255, 143, 62, 1));
+    background: linear-gradient(45deg, @prim, @warn);
     position: relative;
     width: 94px;
     display: flex;
@@ -768,7 +768,7 @@ export default {
         z-index: 1;
     }
     .text4 {
-        color: #fdfb60;
+        color: @prim;
         &.prim {
             color: @text3;
         }
@@ -869,7 +869,7 @@ export default {
         width: 132px;
     }
     .van-button {
-        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+        background: linear-gradient(135deg, @prim 0%, @warn 100%);
         color: #333230;
         font-size: @font2;
         border-width: 0px;
@@ -955,7 +955,7 @@ export default {
     .price {
         font-size: 32px;
         font-family: OSP-DIN, OSP;
-        color: #fdfb60;
+        color: @prim;
         line-height: 32px;
         display: flex;
         align-items: center;
@@ -987,7 +987,7 @@ export default {
     width: 94px;
     height: 30px;
     border-radius: 4px;
-    background: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1));
+    background: linear-gradient(135deg, @prim, @warn);
     font-size: @font1;
     color: #ffffff;
     line-height: 30px;