修改余额管理元素样式

src/views/agent/payoff.vue

@@ -25,7 +25,7 @@
                         </div>
                         <div class="flex gap12">
                             <span class="payoff-has">已配置</span>
-                            <GuipButton type="system" @click="handlePayoffInfo()" :btnstyle="{'color':'#006AFF','background':'#FFFFFF','broder-color':'#006AFF'}">修改账号</GuipButton>
+                            <GuipButton type="system" @click="handlePayoffInfo()" :btnstyle="{'color':'#006AFF','background':'#FFFFFF','broder':'none',width:'126px'}">修改账号</GuipButton>
                         </div>
                    </div>
 
@@ -35,7 +35,7 @@
                        </div>
                        <div class="flex gap12">
                            <span class="payoff-no">未设置</span>
-                           <GuipButton type="danger" @click="handlePayoffInfo()" :btnstyle="{'color':'#fff','background':'#FF4D4F','broder-color':'#FF4D4F'}">立即设置</GuipButton>
+                           <GuipButton type="danger" @click="handlePayoffInfo()" :btnstyle="{'color':'#fff','background':'#FF4D4F','broder':'none',width:'126px'}">立即设置</GuipButton>
                        </div>
                    </div>
                </el-form>
@@ -71,8 +71,14 @@
                             <template slot-scope="scope">
                                 <div class="flex gap8">
                                     <div :class="payoffStatusClass(scope.row.status)">{{scope.row.status}}</div>
-                                    <GuipToolTip v-if="scope.row.status == '异常'" :content="scope.row.remark">
-                                        <img class="w16" src="@/assets/site/more_setIcon.png">
+                                    <GuipToolTip placement="top" v-if="scope.row.status == '异常'" :manual="false" effect="light">
+                                        <img style="width: 16px;height: 16px;" src="@/assets/site/more_setIcon.png" alt="">
+                                        <template #content>
+                                            <div class="flex toolFilled">
+                                                <img src="@/assets/site/info_filled.svg" alt="">
+                                                <p>{{ scope.row.remark }}</p>
+                                            </div>
+                                        </template>
                                     </GuipToolTip>
                                 </div>
                             </template>
@@ -88,7 +94,7 @@
                         <el-table-column prop="bill_date" label="账单日期"></el-table-column>
                         <el-table-column prop="pay_type" label="支付类型">
                             <template slot-scope="scope">
-                                <img :src="require('@/assets/pay/pay_'+scope.row.pay_type+'.svg')" alt="">
+                                <img style="width: 20px;height: 20px;" :src="require('@/assets/pay/pay_'+scope.row.pay_type+'.svg')" alt="">
                             </template>
                         </el-table-column>
                         <el-table-column prop="money" label="收入金额（元）"></el-table-column>
@@ -335,6 +341,7 @@ export default {
       }
       .payoff-name{
         color: #6B7280;
+        letter-spacing: normal;
       }
     }
 
@@ -368,4 +375,17 @@ export default {
     border: 1px solid #FFA39E;
   }
 }
+.toolFilled{
+  max-width: 457px;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  color: #1E2226;
+  letter-spacing: 0.08em;
+  gap: 8px;
+  line-height: 20px;
+  img{
+      width: 16px;
+      height: 16px;
+  }
+}
 </style>

src/views/agent/recharge.vue

@@ -3,7 +3,7 @@
         <h3 class="pagetitle">余额管理</h3>
         <div class="flex-common">
             <div class="flex-between">
-                <el-tabs v-model="totalType" @tab-click="handleClick">
+                <el-tabs v-model="totalType" v-if="totalType" class="custom-tabs" @tab-click="handleClick">
                     <el-tab-pane label="余额充值" name="1"></el-tab-pane>
                     <el-tab-pane label="充值记录" name="2"></el-tab-pane>
                     <el-tab-pane label="退款记录" name="3"></el-tab-pane>
@@ -195,9 +195,10 @@ export default {
         GuipRadio
 
     },
+    options: { styleIsolation: "shared" },
     data() {
         return {
-            totalType:'1',
+            totalType:null,
             tableLoading:false,
 
             walletType: '',
@@ -237,6 +238,7 @@ export default {
     },
     mounted() {
         this.$nextTick(()=>{
+            this.totalType = '1';
             this.handleClick()
         })
     },
@@ -399,6 +401,9 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+ ::v-deep .el-tabs__active-bar {
+  display: block !important;
+}
 .recharge-wrap{
   ::v-deep .el-tabs__header{
     margin: 0;
@@ -442,14 +447,16 @@ export default {
     box-sizing: border-box;
 
     .wallet-name{
-      color: #1E2226;;
+      color: #1E2226;
       font-size: 14px;
       font-weight: bold;
     }
     .wallet-num{
-      font-size: 12px;
-      color: #626573;
-      padding: 0 2px;
+        font-size: 12px;
+        color: #626573;
+        padding: 0 2px;
+        display: flex;
+        align-items: baseline;
     }
     .wallet-price{
       font-size: 22px;