收支统计渲染

src/views/agent/recharge.vue

@@ -12,21 +12,38 @@
                 </div>
             </div>
             <div class="mt24">
-                <div class="flex-between w552 mt12">
+                <div class="flex-between w552">
                     <div class="wallet-choose">充值选择</div>
                     <div class="wallet-desc flex">设置通用余额提醒，防止余额不足，点此设置<img style="width: 14px" src="@/assets/input_ex_ic.png"/></div>
                 </div>
 
-                <div class="flex gap24">
+                <el-form class="el-row demo-ruleForm" ref="formRef">
+                    <div class="flex gap24 mt12">
                         <div class="wallet-item wallet-item-active">
+                            <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
                             <div class="wallet-name">通用钱包</div>
                             <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
                         </div>
                         <div class="wallet-item">
+    <!--                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">-->
                             <div class="wallet-name">通用钱包</div>
                             <div class="wallet-num">当前余额<span class="wallet-price">4560</span>元</div>
                         </div>
                     </div>
+                    <div class="flex-between w552 mt24">
+                        <div class="wallet-choose">充值卡面值</div>
+                    </div>
+
+                    <div class="flex mt12">
+                        <GuipRadio v-model="domain_type" :options="domain_types"/>
+                    </div>
+                    <div class="buy-btn flex mt12">
+                        <img src="@/assets/site/tb_buy_btn.svg" alt="">跳转淘宝购买
+                    </div>
+                    <div class="buy-desc flex mt12">
+                        充值以本页跳转链接为准！淘宝交易服务费（0.6%）已由平台承担，暂时无需支付
+                    </div>
+                </el-form>
             </div>
         </div>
     </div>
@@ -34,8 +51,11 @@
 <script>
 
 
+import GuipRadio from "@/components/GuipRadio.vue";
+
 export default {
     components: {
+        GuipRadio
 
     },
     props: {
@@ -47,7 +67,6 @@ export default {
     data() {
         return {
             totalType:'1',
-            date: this.getNow(),
             tableLoading:false,
 
             walletList:[],
@@ -60,6 +79,9 @@ export default {
             payList:[],
             nameList:[],
             topList:[],
+
+            domain_type: 1,
+            domain_types: {1: "平台免费域名", 2: "我自己有域名"},
         }
     },
     mounted() {
@@ -173,7 +195,8 @@ export default {
     width: 264px;
     letter-spacing: 0.08em;
     border-radius: 8px;
-    background: #F2F7FF;
+    background: #F6F7FA;
+    box-sizing: border-box;
 
     .wallet-name{
       color: #006AFF;
@@ -192,7 +215,15 @@ export default {
 }
 
 .wallet-item-active{
+  position: relative;
   background: #F2F7FF;
+  .tem-active{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+  }
 }
 
 .gap24 {
@@ -201,96 +232,26 @@ export default {
   align-items: stretch;
 }
 
-::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
+.buy-btn{
-  background-color: #E8F0FE; /* 背景色 */
+  font-size: 12px;
-  color: #006AFF; /* 文字颜色 */
+  width: 139px;
-  font-weight: 600;
+  color: #006AFF;
-}
-
-.loss-profit{
-    color: #FF4D4F;
-}
-.red{
-  color: #FF4D4F;
-}
-
-.expense-wrap{
-    .pagetitle {
-        text-align: left;
-        font-size: 16px;
-        font-weight: bold;
-        line-height: normal;
   letter-spacing: 0.08em;
-        color: #1E2226;
+  padding: 9px 16px;
-        margin-top: 8px;
+  gap: 6px;
-    }
-    .monthTotal-wrap{
-        display: grid;
-        grid-gap: 12px;
-        grid-template-columns: repeat(auto-fit, 287px);
-    }
-
-    .loss-tip{
-        width: 50px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
   border-radius: 4px;
-        background: #FFF1F0;
+  border: 1px solid #006AFF;
   box-sizing: border-box;
-        border: 1px solid #FFA39E;
+}
-        font-size: 14px;
+
-        font-weight: normal;
+.buy-desc{
-        line-height: 20px;
-        text-align: center;
-        letter-spacing: 0.08em;
-        color: #FF4D4F;
-    }
-    .loss-tip-empty{
-        width: 50px;
-        height: 24px;
-        display: flex;
-    }
-    .total-item{
-        padding: 14px 16px;
-        font-size: 12px;
-        letter-spacing: 0.03em;
-        color: #23242B;
-        box-sizing: border-box;
-        border-radius: 4px;
-        background: #F2F7FF;
-        min-height: 153px;
-        .price{
-            text-align: left;
   font-size: 12px;
-            font-weight: normal;
-            line-height: 15px;
   letter-spacing: 0.08em;
-            color: #1E2226;
+  color: #006AFF;
-            margin: 14px 0;
+}
-            b{
+
-                font-size: 22px;
+
-                line-height: 20px;
+::v-deep .el-form-item {
-                letter-spacing: normal;
+  margin: 0;
-            }
-        }
-        .total-bottom{
-            align-items: flex-start;
-        }
-    }
-    .loss{
-        background: #FFF1F0;
-        .top-left b{
-            color: #FF4D4F;
-        }
-    }
-    .gain{
-        background: #EFFFE0;
-        .top-left b{
-            color: #00C261;
-        }
-    }
 }
 </style>