[edit] nft 主体

src/view/components/popup-transactions.vue

@@ -87,14 +87,17 @@
                                     <!-- 提现状态（0：已申请，1：支付中，2：提现成功，3：提现失败） -->
                                     <template v-if="item.bizData.withdrawStatus == 0 || item.bizData.withdrawStatus == 1">
                                         <div>
-                                            <div class="balance">
+                                            <div class="balance"
+                                                :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
                                                 <span class="amount">
                                                     <a-tooltip :title="'-'+item.trxAmountValue">
                                                         -{{ getBit(item.trxAmountValue) || 0 }}
                                                     </a-tooltip>
                                                 </span>
-                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                <div class="trx-amount-currency-info">
+                                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                </div>
                                             </div>
                                             <div class="desc">
                                                 in progress
@@ -102,26 +105,32 @@
                                         </div>
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 2">
-                                        <div class="balance">
+                                        <div class="balance"
+                                            :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
                                             <span class="amount">
                                                 <a-tooltip :title="'-'+item.trxAmountValue">
                                                     -{{ getBit(item.trxAmountValue) || 0 }}
                                                 </a-tooltip>
                                             </span>
-                                            <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                            <div class="trx-amount-currency-info">
+                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                            </div>
                                         </div>
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 3">
                                         <div>
-                                            <div class="balance">
+                                            <div class="balance"
+                                                :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
                                                 <span class="amount"> 
                                                     <a-tooltip :title="'-'+item.trxAmountValue">
                                                         -{{ getBit(item.trxAmountValue) || 0 }}
                                                     </a-tooltip>
                                                 </span>
-                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                <div class="trx-amount-currency-info">
+                                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                                </div>
                                             </div>
                                             <div class="desc">
                                                 Withdrawal failed
@@ -129,25 +138,35 @@
                                         </div>
                                     </template>
                                     <template v-else>
-                                        <span class="amount">
-                                            <a-tooltip :title="'-'+item.trxAmountValue">
-                                                -{{ getBit(item.trxAmountValue) || 0 }}
-                                            </a-tooltip>
-                                        </span>
-                                        <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                        <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                        <div class="balance"
+                                            :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
+                                            <span class="amount">
+                                                <a-tooltip :title="'-'+item.trxAmountValue">
+                                                    -{{ getBit(item.trxAmountValue) || 0 }}
+                                                </a-tooltip>
+                                            </span>
+                                            <div class="trx-amount-currency-info">
+                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                            </div>
+                                        </div>
                                     </template>
                                 </template>
                                 <!-- 收入 -->
                                 <template v-else>
-                                    <span class="amount">
-                                        <template v-if="item.bizType == -2">-</template>
-                                        <a-tooltip :title="item.bizType == -2 ? '-' + item.trxAmountValue : item.trxAmountValue">
-                                            {{ getBit(item.trxAmountValue) || 0 }}
-                                        </a-tooltip>
-                                    </span>
-                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
-                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                    <div class="balance"
+                                        :class="{'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12}">
+                                        <span class="amount">
+                                            <template v-if="item.bizType == -2">-</template>
+                                            <a-tooltip :title="item.bizType == -2 ? '-' + item.trxAmountValue : item.trxAmountValue">
+                                                {{ getBit(item.trxAmountValue) || 0 }}
+                                            </a-tooltip>
+                                        </span>
+                                        <div class="trx-amount-currency-info">
+                                            <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
+                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
+                                        </div>
+                                    </div>
                                 </template>
                             </div>
                         </div>
@@ -384,9 +403,18 @@ const listScroll = (e) => {
 
                         .balance {
                             text-align: right;
-                            margin-bottom: 4px;
                             display: flex;
                             align-items: center;
+
+                            .trx-amount-currency-info {
+                                display: flex;
+                                align-items: center;
+                            }
+                        }
+
+                        .balance-direction {
+                            flex-direction: column;
+                            align-items: flex-end;
                         }
 
                         .desc {
@@ -394,6 +422,7 @@ const listScroll = (e) => {
                             font-weight: 400;
                             font-size: 12px;
                             color: #797979;
+                            margin-top: 4px;
                         }
                     }
 

src/view/popup/tabbar-page/nft/detail.vue

@@ -12,15 +12,13 @@
         <img
           class="img"
           src="https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
-          alt=""
+          @click="clickNFTImg"
         />
       </div>
 
       <div class="desc item">
         <div class="title">Description</div>
-        <div class="desc-content">
-            Created by <span>Azuki</span>
-        </div>
+        <div class="desc-content" v-html="''"></div>
       </div>
 
       <div class="prop item">
@@ -39,12 +37,7 @@
       <div class="about item">
         <div class="title">About</div>
 
-        <div class="about-content">
-            Take the red bean to join the garden. View the collection at azuki.com/gallery.
-
-Azuki starts with a collection of 10,000 avatars that give you membership access to The Garden: a corner of the internet where artists, builders, and web3 enthusiasts meet to create a decentralized future. Azuki holders receive access to exclusive drops, experiences, and more. Visit azuki.com for more details.
-
-We rise together. We build together. We grow together.
+        <div class="about-content" v-html="testHtml">
         </div>
       </div>
 
@@ -53,7 +46,13 @@ We rise together. We build together. We grow together.
         <div class="detail-content">
             <div class="detail-item" v-for="(item, index) in detailList" :key="index">
                 <div class="left">{{item.label}}</div>
-                <div class="right" :class="{'blue': index < 2}">{{item.value}}</div>
+                <div class="right address" :class="{'blue': index < 2}">
+                    {{item.value}}
+                    <!-- <template>
+                        <span>{{item.value}}</span>
+                        <span>{{item.value}}</span>
+                    </template> -->
+                </div>
             </div>
         </div>
       </div>
@@ -73,14 +72,14 @@ We rise together. We build together. We grow together.
       </div>
     </div>
     <div class="bottom-bar">
-        <!-- <div class="default">
+        <div class="default">
             NFT Sale function, coming soon
-        </div> -->
+        </div> 
         <!-- <div class="sell">
             <div class="sell-btn">
                 Sell
             </div>
-        </div> -->
+        </div> 
         <div class="cancel-sale">
             <div class="left">
                 233 USDT
@@ -91,7 +90,7 @@ We rise together. We build together. We grow together.
             <div class="cancel-btn">
                 Cancel sale
             </div>
-        </div>
+        </div> -->
     </div>
   </div>
 </template>
@@ -113,10 +112,13 @@ let propList = ref([
     }
 ]);
 
+let a = ''
+let testHtml = ref('<div class="section" style="margin-bottom: 20px">Take the red bean to join the garden. View the collection at <a style="text-decoration:none;color: #1D9BF0;" href="https://azuki.com/gallery" target="_blank">azuki.com/gallery</a></div><div class="section" style="margin-bottom: 20px">Azuki starts with a collection of 10,000 avatars that give you membership access to The Garden: a corner of the internet where artists, builders, and web3 enthusiasts meet to create a decentralized future. Azuki holders receive access to exclusive drops, experiences, and more. Visit azuki.com for more details.</div><div class="section" style="margin-bottom: 20px">We rise together. We build together. We grow together. </div>')
+
 let detailList = ref([
     {
         label: 'Contract Address',
-        value: '0xed5a...c5442752'
+        value: '0xed5a889898989c5442752'
     },
     {
         label: 'Contract Address',
@@ -132,6 +134,10 @@ const back = () => {
     router.back();
 }
 
+const clickNFTImg = () => {
+
+
+}
 </script>
 
 
@@ -237,10 +243,19 @@ const back = () => {
     }
 
     .about-content {
-        font-weight: 400;
-        font-size: 14px;
         margin-top: 22px;
+  .section {
+            font-weight: 400;
+            font-size: 14px;
+            margin-bottom:  20px;
+        }
+      
     }
+  .section {
+            font-weight: 400;
+            font-size: 14px;
+            margin-bottom:  10px;
+        }
 
     .detail-content {
         margin-top: 15px;
@@ -260,6 +275,22 @@ const back = () => {
             .blue {
                 color: #1D9BF0 !important;
             }
+
+            .address {
+                width: 100px;
+                white-space: nowrap;
+                > span {
+                    display: inline-block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 50%;
+                    + span {
+                        width: calc(50% + 10px);
+                        direction: rtl;
+                        margin-left: -13px;
+                    }
+                }
+            }
         }
     }
 

src/view/popup/tabbar-page/nft/index.vue

@@ -67,6 +67,8 @@ const clickNFT = (params) => {
           .img {
             width: 100%;
             border-radius: 5px;
+            height: 104px;
+            object-fit: cover;
           }
 
           .name {