[edit][ui]

src/view/iframe/buy-nft/buy/home.vue

@@ -21,9 +21,8 @@
             </div>
             <div class="btn-area">
                 <template v-for="item in state.data.salePlans.splice(0, 2).reverse()">
-                    <div class="buy1" @click="clickJump(item)"
-                        v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1
-                        && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
+                    <div class="buy1" @click="clickJump(item)" v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1
+                    && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
                         <template v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
                             <div class="left">Buy 1</div>
                             <div class="right">
@@ -39,9 +38,8 @@
                             </div>
                         </template>
                     </div>
-                    <div class="buy1 grey"
-                        v-if="item.itemCount == 1 && ((state.data.perUserBuyLimit - state.data.userBuyCount) <= 0
-                        || (state.data.itemTotalCount - state.data.itemSoldCount) <= 0)">
+                    <div class="buy1 grey" v-if="item.itemCount == 1 && ((state.data.perUserBuyLimit - state.data.userBuyCount) <= 0
+                    || (state.data.itemTotalCount - state.data.itemSoldCount) <= 0)">
                         <template v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
                             <div class="left">Buy 1</div>
                             <div class="right">
@@ -57,11 +55,9 @@
                             </div>
                         </template>
                     </div>
-                    
-                    <div class="buy5" 
-                        v-if="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5 && 
-                        (state.data.itemTotalCount - state.data.itemSoldCount) >= 5"
-                        @click="clickJump(item)">
+
+                    <div class="buy5" v-if="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5 &&
+                    (state.data.itemTotalCount - state.data.itemSoldCount) >= 5" @click="clickJump(item)">
                         <div class="left">Buy {{ item.itemCount }}</div>
 
                         <div class="right" v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
@@ -85,7 +81,7 @@
 </template>
 <script setup>
 import router from "@/router/buy-nft.js";
-import { onMounted, reactive, inject,  } from "vue";
+import { onMounted, reactive, inject, } from "vue";
 import { getNftMysteryBoxSaleInfo } from "@/http/nft";
 import BtnLoading from '../components/btn-loading.vue'
 import { getQueryString } from "@/uilts/help";
@@ -123,7 +119,7 @@ const clickJump = (item) => {
 }
 onMounted(() => {
     let nft_project_Id = getQueryString('nftProjectId') || ''
-    if(!nft_project_Id){
+    if (!nft_project_Id) {
         return
     }
     getNftMysteryBoxSaleInfo({
@@ -192,16 +188,14 @@ onMounted(() => {
         width: 100%;
         display: flex;
         align-items: center;
-        justify-content: flex-end;
-        position: relative;
+        justify-content: space-between;
 
         .loading {
             width: 24px;
         }
 
         .mark {
-            position: absolute;
-            left: 20px;
+            margin-left: 20px;
 
             .sold {}
 
@@ -224,7 +218,7 @@ onMounted(() => {
                 color: #1D9BF0;
                 min-width: 217px;
                 display: flex;
-                
+
                 justify-content: space-between;
                 align-items: center;
                 padding: 10px 15px 10px 20px;
@@ -298,7 +292,7 @@ onMounted(() => {
 
             .grey {
                 background: #CDCDCD;
-                    cursor: not-allowed;
+                cursor: not-allowed;
             }
         }
     }

src/view/iframe/buy-nft/buy/pay.vue

@@ -14,10 +14,10 @@
                     alt="" />
                 <div class="tip">
                     <span>Mystery box*{{ pay_info.home.sale_plan.itemCount }}</span>
-                    <span>
-                        <img :src="pay_info.home.sale_plan.currencyInfo.iconPath" alt="">
-                        {{ pay_info.home.sale_plan.price }}
-                    </span>
+                    <div>
+                        <img :src="pay_info.home.sale_plan.currencyInfo.iconPath" alt="" />
+                        <span>{{ pay_info.home.sale_plan.price }}</span>
+                    </div>
                 </div>
             </div>
             <div class="right">
@@ -256,8 +256,13 @@ onMounted(() => {
                 margin-top: 15px;
                 display: flex;
                 justify-content: space-between;
+                div{
+                    display: flex;
+                        align-items: center;
+                }
 
                 img {
+                    margin-right: 4px;
                     width: 14px;
                     height: 14px;
                 }