a1300399510@qq.com 提交于 2023/03/31 -12:40:01

src/components/unlock/Coins.vue

@@ -4,15 +4,15 @@
         <div class="pop-box flexflex flexcolumn" v-if="popState == 'coinNo'" @click="handlePopCancel()">
             <div class="coin-insufficient pop-box-box" @click.stop="">
                 <div class="coin-close flexcenter" @click="handlePopCancel()">
-                    <img class="coin-close-icom" src="../../img/u1583.svg" />
+                    <svg-icon icon-class="gray-cross" class-name="coin-close-icom"></svg-icon>
                 </div>
                 <div class="insufficient-header flexcenter">
-                    <img class="coin-img" src="@/icons/svg/bi.svg" />
+                    <svg-icon icon-class="bi" class-name="coin-img"></svg-icon>
                     {{ coinConfig.strategy.tips }}
                 </div>
                 <div class="strategy-btn flexcenter" @click.stop="skipUrl(coinConfig.strategy.url)">{{
                     coinConfig.strategy.button }}
-                    <img class="strategy-icom" src="@/icons/svg/arrowsRoundLeft.svg" />
+                    <svg-icon icon-class="arrowsRoundLeft" class-name="strategy-icom"></svg-icon>
                 </div>
             </div>
         </div>
@@ -22,7 +22,7 @@
 <script>
 export default {
     name: 'Coins',
-    props: ["popState"],
+    props: ["popState", "coinConfig"],
     data() {
         return {
 
@@ -39,4 +39,62 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pop-box-box {
+    width: 100vw;
+    background-color: #fff;
+    border-radius: .64rem .64rem 0 0;
+    position: relative;
+}
+
+.coin-insufficient {
+    .coin-img {
+        width: 1.3333rem;
+        height: 1.4667rem;
+        margin-right: .2667rem;
+        padding-left: .48rem;
+        padding-top: .48rem;
+    }
+
+    .insufficient-header {
+        height: 1.4rem;
+        margin-top: 1.36rem;
+        margin-bottom: .9333rem;
+    }
+
+    .coin-img {
+        margin: 0;
+        margin-right: .32rem;
+        padding: 0;
+    }
+
+    .strategy-btn {
+        margin: 0 auto;
+        width: 6.4rem;
+        height: 1.28rem;
+        border-radius: 2rem;
+        background-color: rgba(80, 227, 194, 1);
+        font-size: .48rem;
+        font-weight: 650;
+        margin-bottom: 1.8133rem;
+    }
+
+    .strategy-icom {
+        margin-left: .1867rem;
+        width: .4rem;
+        height: .4rem;
+    }
+
+    .coin-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: .4rem;
+    }
+
+    .coin-close-icom {
+        width: .32rem;
+        height: .32rem;
+    }
+}
+</style>

src/views/detail/detailIndex.vue

@@ -55,7 +55,7 @@
 
 
         <detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
-        <coins  :pop-state="popState"></coins>
+        <coins :coin-config="coinConfig" :pop-state="popState"></coins>
     </div>
 </template>
 
@@ -64,7 +64,6 @@ import DetailReply from '@/components/DetailReply'
 import Coins from '@/components/unlock/Coins'
 export default {
     name: 'detailIndex',
-
     data() {
         return {
             twoCommentData: {
@@ -72,7 +71,13 @@ export default {
                 content: "评论回复",
             },
             popState: "coinNo",
-
+            coinConfig: {
+                strategy: {
+                    button: "攒币指南",
+                    tips: "你的寄托币不够，快去发帖挣币吧",
+                    url: "https://bbs.gter.net/thread-2543548-1-1.html",
+                }
+            },
         };
     },
 
@@ -85,7 +90,7 @@ export default {
     },
 
     components: {
-        DetailReply,Coins
+        DetailReply, Coins
     }
 };
 </script>