fix

.postcssrc.js

@@ -1,22 +1,22 @@
 
-  // module.exports = {
+  module.exports = {
-  //   plugins: {
+    plugins: {
-  //     autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
+      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
-  //     "postcss-px-to-viewport": {
+      "postcss-px-to-viewport": {
-  //       unitToConvert: "px", // 要转化的单位
+        unitToConvert: "px", // 要转化的单位
-  //       viewportWidth: 1080, // UI设计稿的宽度
+        viewportWidth: 1080, // UI设计稿的宽度
-  //       unitPrecision: 6, // 转换后的精度，即小数点位数
+        unitPrecision: 6, // 转换后的精度，即小数点位数
-  //       propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-  //       viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
+        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
-  //       fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
+        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
-  //       selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
+        selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
-  //       minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-  //       mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
-  //       replace: true, // 是否转换后直接更换属性值
+        replace: true, // 是否转换后直接更换属性值
-  //       exclude: [/\/src\/views\/desktop\//], // 设置忽略文件，用正则做目录名匹配
+        exclude: [/\/src\/views\/desktop\//], // 设置忽略文件，用正则做目录名匹配
-  //       landscape: false // 是否处理横屏情况
+        landscape: false // 是否处理横屏情况
-  //     },
+      },
       
-  //   }
+    }
-  // };
+  };
 

src/components/mobile/main/TheBuyDialog.vue

@@ -4,7 +4,11 @@
       <div class="price-title">PRIECE SETTIONG</div>
       <div class="container">
         <HeroBuyTop :data="piece" :type="type"></HeroBuyTop>
-        <WeaponSellTop v-if="type == 'weapon'" :isBuy="isBuy"  :data="piece"></WeaponSellTop>
+        <WeaponSellTop
+          v-if="type == 'weapon'"
+          :isBuy="isBuy"
+          :data="piece"
+        ></WeaponSellTop>
         <PieceSellTop
           v-if="type == 'piece'"
           :isBuy="isBuy"
@@ -24,7 +28,7 @@
             </div>
             <div class="token-item">
               <div>Price</div>
-              <div>{{formatPriceShow(piece.s_price,18)  }}</div>
+              <div>{{ formatPriceShow(piece.s_price, 18) }}</div>
             </div>
             <div class="token-item-balance">
               <div>Balance</div>
@@ -36,8 +40,14 @@
             <div class="progress-content">
               <div class="progress">
                 <div class="approve-progress"></div>
-                <div class="boder"></div>
+                <div
-                <div class="buy-progress"></div>
+                  :class="isApprove == true ? 'boder-active' : 'boder'"
+                ></div>
+                <div
+                  :class="
+                    isApprove == true ? 'buy-progress-active' : 'buy-progress'
+                  "
+                ></div>
               </div>
 
               <div class="progress-neme">
@@ -65,7 +75,7 @@ import ChipSellTop from "./ChipSellTop.vue";
 import PieceSellTop from "./PieceSellTop.vue";
 import WeaponSellTop from "./WeaponSellTop.vue";
 import { formatPrice } from "@/utils/chain.util";
- import { AppModule } from "@/store/modules/app";
+import { AppModule } from "@/store/modules/app";
 import { CONTRACT_ADDRESS } from "@/configs/config_chain";
 import ChainManager from "@/chain/ChainManager";
 export default {
@@ -84,7 +94,7 @@ export default {
       loadingInstance: "",
       piece: "",
       prices: "",
-      isApprove:false,
+      isApprove: false,
       value: "",
       isBuy: false,
       currencyTypeList: [],
@@ -99,8 +109,7 @@ export default {
       // this.$emit("closeTip");
       this.detailVisible = false;
     },
-      async haldBuy() {
+    async haldBuy() {
-      
       try {
         this.showLoading();
         const nftres = await this.chainManager.bc.beginApproveBuy(
@@ -121,7 +130,6 @@ export default {
       }
     },
     async handBeginBuy() {
-     
       try {
         this.showLoading();
         const nftres = await this.chainManager.bc.beginBuy(
@@ -135,9 +143,9 @@ export default {
             this.$emit("handMessageHide");
             this.closeTip();
             this.$emit("on-close");
-            setTimeout(()=>{
+            setTimeout(() => {
               this.$emit("getMarketNftList");
-            },1000)
+            }, 1000);
           }, 1000);
         }
       } catch (err) {
@@ -167,7 +175,7 @@ export default {
       return formatPrice(price, decimals, fixed);
     },
     handMessage() {
-      this.$emit("handMessage")
+      this.$emit("handMessage");
     },
   },
 };
@@ -182,7 +190,8 @@ export default {
   width: 100%;
   background-color: rgba(20, 28, 34, 0.6);
   z-index: 2000;
-  transition: opacity 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0s, transform 0.2s ease-in-out 0s;
+  transition: opacity 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0s,
+    transform 0.2s ease-in-out 0s;
   .content {
     position: relative;
     .close {
@@ -373,6 +382,19 @@ export default {
           border: 2px solid #557cda;
           border-radius: 50%;
         }
+        .boder-active {
+          width: 380px;
+          height: 2px;
+          background: rgba(43, 204, 237, 1);
+          border-radius: 1px;
+        }
+        .buy-progress-active {
+          width: 27px;
+          height: 26px;
+          background: rgba(43, 204, 237, 1);
+          border: 2px solid #557cda;
+          border-radius: 50%;
+        }
       }
       .progress-neme {
         display: flex;
@@ -408,7 +430,7 @@ export default {
       height: 115px;
       text-align: center;
       line-height: 115px;
-       opacity: 0;
+      opacity: 0;
       cursor: pointer;
       color: #9dabd3;
       background: url("../../../assets/market/dialog/confirm.png") no-repeat;