样式优化

src/views/RobotDetails.vue

@@ -522,8 +522,8 @@
         total: 0, //记录总条数
         list: [],//表格数据
         isIndeterminate: true,
-        checkAll: false,
-        checkedOptions: [],
+        checkAll: true,
+        checkedOptions: ['0', '1'],
         options: ["买入", "卖出"],
         /*充提记录参数*/
         transactionTime1: null,// 时间筛选
@@ -533,15 +533,15 @@
         list1: [],//表格数据
         recordsCountList: [],//充提记录统计
         isIndeterminate2: true,
-        checkAll2: false,
-        checkedOptions1: [],
+        checkAll2: true,
+        checkedOptions1: ['0', '1'],
         options1: ["充币", "提币"],
         isIndeterminate3: true,
         checkAll3: false,
         checkedStates1: ['0'],
         states1: ["成功", "失败"],
         isIndeterminate4: true,//币种筛选
-        checkAll4: false,
+        checkAll4: true,
         checkedCoins: [],
         coins: [],
         Loading: false,//充提币后数据加载标志
@@ -556,7 +556,7 @@
       //页面初始化
       init() {
         this.robotDetailInfo = JSON.parse(sessionStorage.getItem('robotDetailInfo'));
-        this.coins = [this.robotDetailInfo.coin, this.robotDetailInfo.base];
+        this.checkedCoins = this.coins = [this.robotDetailInfo.coin, this.robotDetailInfo.base];
         this.getWalletInfo();
         this.getTransaction();
         this.getRecords();

src/views/account.vue

@@ -262,7 +262,7 @@
         pageSize: 10,
         transactionTime: '', //操作记录时间筛选
         isIndeterminate: true,
-        checkAll: false,
+        checkAll: true,
         checkedCoins: [],
         transactionLoading: false, //操作记录表格刷新标志
         foldBar: true,
@@ -295,7 +295,7 @@
           this.walletInfo.forEach(item => {
             this.coinList.push(item.coin);
           })
-          this.coinList = [...new Set(this.coinList)];
+          this.checkedCoins = this.coinList = [...new Set(this.coinList)];
           this.getRecords('1', 'init');
         })
       },

src/views/coinRecharge.vue

 <template>
   <div class="coin-recharge-box">
     <div class="record-box" v-loading="Loading" element-loading-text="正在刷新数据">
-      <div class="title-box clearfix">
+      <div class="title-box ">
         <span class="title">币种充提统计</span>
-        <div class="select-bar fr clearfix">
+        <div class="select-bar fr ">
           <div class="fl select">
-            <el-select v-model="checkedWeb" clearable placeholder="交易所筛选">
+            <el-select v-model="checkedWeb" placeholder="交易所筛选">
               <el-option
                 v-for="item in webs"
                 :key="item"
@@ -14,7 +14,7 @@
               </el-option>
             </el-select>
           </div>
-          <div class="select-bar-content fl" :class="{'unfold' : !foldExchange0}">
+          <div ref="selectBar" v-click-outside="clickFoldExchange" class="select-bar-content fl" :class="{'unfold' : !foldExchange0}">
             <span class="title">币种</span>
             <div class="fr">
               <span class="ellipsis" v-show="currencies.length>3 && foldExchange0">...</span>
@@ -102,6 +102,7 @@
 <script>
   import axios from 'axios';
   import ApiConfig from "../config/api-config";
+  import ClickOutside from 'vue-click-outside';
   export default {
     data() {
       return {
@@ -110,9 +111,8 @@
         Loading: false,
         checkedWeb: '',
         webs: [],
-        checkAll0: false, //币种筛选
+        checkAll0: true, //币种筛选
         checkedCurrencies: [],
-        allCurrencies: [],//所有币种
         currencies: [],//符合交易所条件的所有币种
         isIndeterminate0: true,
         foldExchange0: true,
@@ -121,12 +121,27 @@
         currentPage: 1,
       }
     },
+    mounted () {
+      // prevent click outside event with popupItem.
+      this.popupItem = this.$refs.selectBar
+    },
+
+    // do not forget this section
+    directives: {
+      ClickOutside
+    },
     created() {
       this.webs = this.webs.length === 0 && sessionStorage.getItem('webs') ? JSON.parse(sessionStorage.getItem('webs')) : this.webs;
-      this.currencies = this.currencies.length === 0 && sessionStorage.getItem('currencies') ? JSON.parse(sessionStorage.getItem('currencies')) : this.currencies;
+      this.checkedWeb = this.webs[0];
+      for (let item of JSON.parse(sessionStorage.getItem('platInfo'))) {
+        if(item.platform === this.checkedWeb) {
+          this.checkedCurrencies = this.currencies = item.coin;
+        }
+      }
       this.getRechargeList();
     },
     watch: {
+
       checkedWeb() {
         this.getRechargeList();
       },
@@ -134,13 +149,11 @@
     methods: {
       clickFoldExchange(type) {
         switch (type) {
-          case 'web':
-            this.foldExchange = !this.foldExchange;
-            break;
           case 'currency':
             this.foldExchange0 = !this.foldExchange0;
             break;
           default:
+            this.foldExchange0 = true;
             break
         }
       },
@@ -252,7 +265,15 @@
       color: rgba(51, 51, 51, 1);
     }
   }
+  .select-bar {
+    width: 623px;
+    height: 40px;
+    position: relative;
+  }
   .select-bar-content {
+    position: absolute;
+    right: 0;
+    top: 0;
     float: left;
     margin-left: 10px;
     width: 410px;
@@ -260,7 +281,7 @@
     background-color: #fff;
     border-radius:4px;
     border:1px solid rgba(224,224,224,1);
-    z-index: 100;
+    z-index: 1000;
     height: 40px;
     overflow: hidden;
     .amount {
@@ -295,6 +316,9 @@
 <style>
   /*select组件样式覆盖*/
   .coin-recharge-box {
+    .el-table {
+      z-index: 1;
+    }
     .count-box .el-button {
       background: rgba(119, 146, 167, 1);
       border: none;