翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/page/assetsCenter/index.vue

@@ -1,151 +1,350 @@
<template>
  <div class="pb-120 assetsCenter">
     <div class="price">
        <div class="price_box" style="justify-content: flex-end;">
    <!-- 资产 -->
    <div class="search-wrp">
      <van-search
        v-model="value_bb"
        :placeholder="$t('搜索')"
        shape="round"
        background="#121212"
      />
    </div>

    <div class="price">
      <!-- <div class="price_box" style="justify-content: flex-end;">
           <img class="price_box_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAAEVQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////Up1zwgAAABZ0Uk5TABAgMEBPUF9gb3B/gI+Qn6Cwv8/f7xMcqe8AAAEdSURBVEjH7dXBcoQgEATQBiaRKFHDQv//p+awljqArp6SqqTPvBoYZAR+LObG2o8vAH6yF5fbyAjAM3WX1g+ZCyAvFJFEboAcDsh7ZwG4IZIaME1iACNBg0Aycc0OkGROZNJgpEoByArML0G+C/gPLoBU3/QtIEGlAyCTSsCvT1+dwXqVciY8XnXJ4exB7MGYmXMN/BHoEwMQ+CjH1gGIjhEAYlUitkEnDM8tS9mmNnDGOwBwvpw3JrdAFrumbGxogKTq9kWJxlzq1Wc/lVOyBn4myTzOTbC7PA26Zb8V2FqrgSzVa7AeQ4PP5QlPjX9JagFaywMAE2+C5XgFcO4EQNIG3k7vYSuSniCKnlfj8X9UAIgAsONu0lj82XwD7hxJmfCAhwIAAAAASUVORK5CYII="/>
        </div>
        <div class="price_box">
           {{$t('总资产')}} （ USDT ）
           <!-- <div @click="changeEyes">
        </div> -->
      <div class="price-top">
        <div class="price_box price_box-tit">
          {{ $t("总资产") }} （ USDT ）
          <!-- <div @click="changeEyes">
             <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
             <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
           </div> -->
        </div>
        <div class="price_box">
                   {{funds.total}} USDT
        </div>
     </div>
    <div class="flex justify-between px-52 pt-31  box-border">
      <div class="flex-1 items-center text-center textColor1" v-for="(item, index) in typeList " :key="'type' + index"
        @click="onTabs(index)">
        <div class="font-32  text-center lh-53">{{ item.type }}</div>
        </div>
        <div class="price_box price_box-text">{{ funds.total }}</div>
      </div>

      <div class="price-bot">
        <div class="price-bot-wrp">
          <div class="price-bot-tit">{{ $t("合约") }}</div>
          <div class="price-bot-text">{{ funds.money_contract }}</div>
        </div>
        <div class="price-bot-wrp">
          <div class="price-bot-tit">{{ $t("币") }}</div>
          <div class="price-bot-text">{{ funds.money_coin }}</div>
        </div>
      </div>
    </div>
    <div class="flex mx-52 mt-17">
    <!-- <div class="flex justify-between px-52 pt-31 box-border">
      <div
        class="flex-1 items-center text-center textColor1"
        v-for="(item, index) in typeList"
        :key="'type' + index"
        @click="onTabs(index)"
      >
        <div class="font-32 text-center lh-53">{{ item.type }}</div>
      </div>
    </div> -->
    <!-- <div class="flex mx-52 mt-17">
      <span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>
      <span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>
      <span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>
      <span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>
    </div>
    <over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
    </div> -->
    <!-- <over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
    <as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
    <contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract>
    <financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial>
    <financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial>  -->

    <!-- <over-view :funds="funds" :key="tab"></over-view> -->
    <div class="pl-33 pr-33 btn-box flex justify-between btnGroup">
      <div
        class="text-white font-25 textColor"
        @click="goRouter('/recharge/rechargeList')"
      >
        <div class="word-wrap">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAKESURBVHic7ZxbmqIwEEb/+Lmg2UHjkmYFE1bQS4JeWc0DwabpXLAMKZLUedFP0QrHglyNgQciGtzTf+5x8B3XMDOALwAwxljfAWb/AhFZfAtTFsa9wB/iiGhCf9l1lB/ynuI00w4xG2MeAHADVNoLDOv93wAAEZFocepiyToishRm2tSw3UBEQ8LLEBNnpU9AmoibCS6rfiFd6KsQE+d/QwGAYGLdpAtWKyqOiYpjouKYqDgmKo7JHcBDuhA1cjfGzNKFqBG9VJmoOCYqjsnlxe1GKCbqcJjrZSLDOkPBMlTZyf8IvK6ZFyOQbUUzr9aMGxPva+aFOJB1p2ZerRkHHOsSaub5oGXWSSTzQhmXO85pSMmrXhwgI68JcUB5ec2IA8rKa0ocUE5ec+KAMvJC4sy7v8gF+APg88BxD85oNwUWW94B9LLcYSIiljwfNfQccpItSXoTt64+fZvuxGFZiv823YnTexyPbJPvrczkf2JplsT4q5PvG0IN1LMbwBlPoTxnS4vFyHQK5SkhLRYnwymUp5S0WKwc312UktJi8XJ9fxFKS4vFzBnjVCSkxeLmjpMdEpzhcvGrFScmzcX3irt0l4uO/TUq2xhbM0hm2qYM9WVcAtFMu7q40GolvTxT0LIqc71crEB876VauhzV0eI9ThQVx0TFMbmH2kJaayUINCx7md1PopVDZlQcExXHRMUxUXFMVBwX7cTGCTXXbnC7j3o+YMsW8XpEHHylJkNsqGfRMpTeeM+uWz3qbqwvYIwxa+WQ+l+o8s0IuFrVdehnwcLUwnMv4P0Gyha6rW2I5x7AwK4d52zqZfubcSsN8Ox1vrKpij/QX8Uxu8cR8I9N/gdx8yXMQdQnYAAAAABJRU5ErkJggg=="
            alt=""
          />
          <span> {{ $t("充币") }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor" @click="withdrawBtn">
        <div class="word-wrap">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAQwSURBVHic7Z1rcusgDIVFpvsqXVnIykxWdu6P4Ja6RiAjHvbNN5OpJzFCHEvgxLJraAIA2LBpo7c/N+/5TbNn/J4xZvv5EMyojgG4sHlXMunD38cs4jYHgAuvHixR5F+HIODSScQUCzqJ2yzloZ/SGnhqPCWoC9pASB9tWyWbD2OMU7L1C1VBg5hHhHxE256IX7U36WvpdUZg9/bN9dtK2CpwbKFxUTRr+GDDa5l1fi1CKKaqiBm/pOLaHn7lnC4V0w30USLsGD+Dk0UOjhQzRiCsG+HYvEc7A8qyaunlTImYroszFaAsWtuLegUxYwpEddfsvCHITwGuRac5Ma16px3pKmpGzD6TdweQXx9cj05sdScTURCptrYDLjrrjE9KRlQ3n+EToD528KkuN9gJzawBk52axqZchDYRtWgcdLWgyhiytY5qw/jrFGwnU19iZEnYOEN0thD1uG3maAMTRucK43O1qNwBK2m8JNpOGZ0r3KCVRJXbxUmjc6WlqJztI42mjs6YxqKmsDoNJqWVqIzdv/bApHvl+IbQQlRGo78ZLNr5JDQStSzokF7drcLYhqEtKmPv284HZ0BSAxSMHq3gGMUdAAmqRzxlKmNMiMK91PbGmK+SXhgbp8AYU1yStJvikY0b0/Yp9Ou0CKc2z314o3SKsg03pGxckd1AWw/KjX5q2Q8T5iBfa2cQqvWi7KIkwRjzFY6S1bLZAa8opiUinzxlUurkciDz+yu3KL05QEpQ39OJM8FMEZ9E/Cr/5gDvlFfmRvvpbfu6cR6YLwFPoneEqvNBL2Xt9gMAVnqOFv1AchY0T+o9keKJPV6/nVote52wAKT3KlnuQy7l2YYxITKL958M6Y1qbAamFqX/Co0f0tepQ2VRmvL2vnKk3+dtdo/U9QGJV8zlgZlxwjGWXXuD5BJpnagie7OB0mtvWoJmbJ1e1NSA6nfOd3w5USG91M6I4A46cClRUZjuzb56hpX/wexyP5uoYlpE0xUilRkDf+mcaegaOXQKUav8bjXonKg1tlvC+F1W2MENvKFzwIR1VNAqQmaMOAUnd0WttdsCaJXIc5Gk5KjdOGs17GqiFp2RwRRqRWEzCkmUFfPY+LkoxeSrci1oddNwxrBTG8FENB8zY/xyooLPSp2pLtMJMOk8KKXrOAs6c2qdDWBI0OD9VJwmnV9GVJQ9DMv1cCTnxILJ59WCqOwbHAWi9nVIwHRiRo6ViApMEq2FQo4NBIGTyyhhBT6OFTNymPveuytsa3FDH9I6gaY+icGxZx8vWgMJAh4ptnAa/a/M8pRwoleN1TPaJqLfNe2R+OtfooonhAf77kDbfuDYk7p740brJAZzCutG66ICxhaSLZcRcgt+ona5qogj/5+SDZt30ql+nmKRGSboFvw+fVq34/Lr7W3Vnmie//T1phH/ANm7aXr6fICGAAAAAElFTkSuQmCC"
            alt=""
          />
          <span>{{ $t("提币") }}</span>
        </div>
      </div>
      <div
        class="text-white font-25 textColor"
        @click="goRouter('/exchange/exchangePage')"
      >
        <div class="word-wrap">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAJXSURBVHic7ZxRcqMwDIZ/Mdxr6cnW3GT3JKUn0z5EpCQgMIKOF/x/L+m0RqN842CjKhYsoKqd/fjbXrulcTdmAPAFACKSlgbI+y9UNeFbGHnQvwt8Eaeqn6hvduXyIu8pjjMti0FEPgCgAShtB914/xcAUFUtms61eMw6VU3q8zlZYatBVbsNL92auFT6DZRm1Y3Nqhmlk/5f8D6J/h8IALgTqymd2FWhuCAUF4TiglBcEIoL0gL4KJ3EFWlFZCidxBXhRzUIxQWhuCDtGUEmlZSB98wMnLJLKp3XmZxePXKk3a4kdaq4NWkU5wdalUZxy0E2pSnvcbMA1UkDDoqrVRpwQFzN0oCguNqlAQFxlPZglzhK+yZbHKW9kiWO0uZ44trJgITtVq+/AAa9USNOtJoztnklVNofJyKzdt4p6nSpNjZ7qpR2hAaUFoKl8yANrJ+f7KOxFvS+dCJXowUe3x6xPV3OduTPD+d0PbgBnpP15GADKW9CtjgbTHnGLnF2AeWBhcwwIXF2YdXywuLs4mrlHRJnAaqUd1icBalO3iniLBBbIKLvcUveybkX5VRxFpBtXgeCVttYeKiV1aoqA6wm753RQSrEm3EsnQehuCAUF6RV57/y/L7CBs5WjIcZGFwcTobiglBcEIoLQnFBKC7Kj5RNboS3XXO7le5WHoqw4uBrPGTOI3lPFndGtw/eS2MPME9j3YGIyLg4sD8unx6wVdUe6IeCyVyF51nA7wcoJ7CZ2uN5BjDwto9jW6tLP5UGLJx1PjJZin+hvoVjsNceWK5N/gOUYwoqI3UGxgAAAABJRU5ErkJggg=="
            alt=""
          />
          <span>{{ $t("闪兑") }}</span>
        </div>
      </div>
    </div>

    <div>
      <div class="asset-list">
        <uni-view
          data-v-43c57eaa=""
          class="list"
          v-for="(item, index) in filteredList"
          :key="index"
        >
          <uni-view data-v-43c57eaa="" class="list-h">
            <div data-v-43c57eaa="" style="color: rgb(50, 160, 50)">
              <span>{{ item.name }}</span>
            </div>
            <div v-if="item.usable">
              <van-icon name="arrow" />
            </div>
          </uni-view>
          <uni-view data-v-43c57eaa="" class="list-item">
            <uni-view data-v-43c57eaa="" class="list-b">
              <uni-view data-v-43c57eaa="" class="list-b-t">{{
                $t("可用")
              }}</uni-view>
              <div data-v-43c57eaa="">
                <span>{{ item.usable.toFixed(2) }} </span>
              </div>
            </uni-view>
            <uni-view data-v-43c57eaa="" class="list-b">
              <uni-view data-v-43c57eaa="" class="list-b-t">{{
                $t("锁仓")
              }}</uni-view>
              <div data-v-43c57eaa="" class="lock">
                <span>{{ item.lock_amount.toFixed(2) }}</span>
              </div>
            </uni-view>
            <uni-view data-v-43c57eaa="" class="list-b"
              ><uni-view data-v-43c57eaa="" class="list-b-t">{{
                $t("冻结")
              }}</uni-view>
              <div data-v-43c57eaa="">
                <span>{{
                  (item.frozenAmount + item.freeze_amount).toFixed(2)
                }}</span>
              </div>
            </uni-view>
            <!-- <uni-view data-v-43c57eaa="" class="list-b">
              <uni-view data-v-43c57eaa="" class="list-b-t">
                待释放资产
              </uni-view>
              <div data-v-43c57eaa="">
                <span>0.00000</span>
              </div>
            </uni-view> -->
            <!-- <uni-view data-v-43c57eaa="" class="list-b">
              <uni-view data-v-43c57eaa="" class="list-b-t">
                折合USDT
              </uni-view>
              <div data-v-43c57eaa="">
                <span>61900836.50564</span>
              </div>
            </uni-view>  -->
          </uni-view>
          <uni-view data-v-43c57eaa="" class="kline"></uni-view>
        </uni-view>
      </div>
    </div>
  </div>
</template>

<script>

import AsSets from "@/components/assetsCenter/assets"
import OverView from "@/components/assetsCenter/overview"
import Contract from "@/components/assetsCenter/contract"
import Financial from "@/components/assetsCenter/financial"
import Axios from "@/API/assets"
import AsSets from "@/components/assetsCenter/assets";
import OverView from "@/components/assetsCenter/overview";
import Contract from "@/components/assetsCenter/contract";
import Financial from "@/components/assetsCenter/financial";
import Axios from "@/API/assets";
import { _getAllWallet } from "@/API/fund.api";
export default {
  name: "assets-index",
  components: {
    AsSets,
    OverView,
    Contract,
    Financial
    Financial,
  },
  data() {
    return {
      type: 'left', //left 从左往右 right 从有王座
      value_bb: "",
      type: "left", //left 从左往右 right 从有王座
      list: [],
      filteredList: [],
      timer: null,
      tab: 0,
      index: 0, // 每个组件的二级tab
     eyetel: false,
      eyetel: false,
      funds: {},
      typeList: [
        {
          type: this.$t('总览'),
          type: this.$t("总览"),
        },
        {
          type: this.$t('现货账户'),
          type: this.$t("现货账户"),
        },
        {
          type: this.$t('合约'),

          type: this.$t("合约"),
        },
        {
          type: this.$t('理财'),
          type: this.$t("理财"),
        },
      ]
    }
      ],
    };
  },
  mounted() {
    this.getList();
  },
  watch: {
    value_bb(newVal) {
      this.filterList(newVal);
    },
  },
  methods: {
    filterList(searchText) {
      if (!searchText) {
        this.filteredList = [...this.list];
        return;
      }
      const lowerCaseSearch = searchText.toLowerCase();
      this.filteredList = this.list.filter(
        (item) =>
          item.name.toLowerCase().indexOf(lowerCaseSearch) !== -1 ||
          (item.symbol &&
            item.symbol.toLowerCase().indexOf(lowerCaseSearch) !== -1)
      );
    },
    getList() {
      _getAllWallet().then((res) => {
        let list = res.extends;
        this.list = [...list].sort(this.compare("usdt", "up"));
        this.filteredList = [...this.list]; // 初始化filteredList
      });
    },
    withdrawBtn() {
      this.$router.push({
        path: "/withdraw/withdrawPage",
      });
    },
    compare(p, type) {
      //这是比较函数
      return function (m, n) {
        console.log(m);
        var a = m[p];
        var b = n[p];
        if (a == b) {
          return;
        }
        if (type == "up") {
          return b - a; //升序
        } else if (type == "down") {
          return a - b; //降序
        } else {
          return a - b;
        }
      };
    },
    goRouter(parmas) {
      if (parmas === "/exchange/exchangeHistory") {
        this.$router.push({ path: parmas, query: { type: 0 } });
      } else {
        this.$router.push(parmas);
      }
    },
    onTabs(val) {
      if (this.tab < val) {
        this.type = 'right'
        this.type = "right";
      } else {
        this.type = 'left'
        this.type = "left";
      }
      console.log(val)
      this.tab = val
      console.log(val);
      this.tab = val;
    },
    getAssets() {
      Axios.GetAllAssets().then((res) => {
        const { code, data } = res
        const { code, data } = res;
        if (code) {
          //console.log('总资产数据',data)
          this.funds = data
          this.funds = data;
        }
      })
      });
    },
  },
  created() {
    this.getAssets()
    this.getAssets();
    this.timer = setInterval(() => {
      this.getAssets()
    }, 5000)
    if (Object.hasOwnProperty.call(this.$route.query, 'tab')) {
      this.tab = this.$route.query.tab / 1
      this.index = this.$route.query.index ? this.$route.query.index * 1 : 0
      this.getAssets();
    }, 5000);
    if (Object.hasOwnProperty.call(this.$route.query, "tab")) {
      this.tab = this.$route.query.tab / 1;
      this.index = this.$route.query.index ? this.$route.query.index * 1 : 0;
    }
  },
  changeEyes() {
    this.eyetel = !this.eyetel;
  },
  activated() {
    clearInterval(this.timer)
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.getAssets()
    }, 5000)
    this.index = 0
      this.getAssets();
    }, 5000);
    this.index = 0;
  },
  deactivated() {
    clearInterval(this.timer)
    this.timer = null
    clearInterval(this.timer);
    this.timer = null;
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  }
}
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss" scoped>
   .price_box_img{
      width: 3.375rem;
   }
   .price_box{
          font-size: 1.625rem;
         margin-bottom: .875rem;
      display: flex;
      color:#Fff;
   }
   .price{
      padding: 2rem 2rem 2.375rem;
          margin: 2rem 2rem;
          border-radius: 1.125rem;
          background: #2b64fb;
   }
.price_box_img {
  width: 3.375rem;
}
.price-top {
  .price_box.price_box-text {
    font-size: 3.2rem;
    @include themify() {
      color: themed("text_color");
    }
  }
  .price_box-tit {
    color: hsla(0, 0%, 100%, 0.7);
  }
}
.price_box {
  font-size: 2.2rem;
  margin-bottom: 1.4rem;
  display: flex;
  justify-content: center;
}
.price {
  background-image: url("bg.png");
  background-size: 100% 100%;
  padding: 2rem 2rem 2.375rem;
  margin: 2.5rem 2rem 5rem 2rem;
  border-radius: 1.125rem;
  // background: #2b64fb;
}
.assetsCenter {
  width: 100%;
  box-sizing: border-box;
  padding-top: 4.1rem;
}

.active_color {
@@ -176,7 +375,7 @@

.left-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0)
  transform: translate3d(100%, 0, 0);
}

.right-enter {
@@ -186,6 +385,187 @@

.right-leave {
  opacity: 0;
  transform: translate3d(-100%, 0, 0)
  transform: translate3d(-100%, 0, 0);
}

.btn-box > div {
  width: 234px;
  height: 80px;
  background: #2b64fb;
  border-radius: 12px;
  padding: 20px 15px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8.8px;
  font-size: 26.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  @include themify() {
    background: themed("tab_background");
  }
  padding: 10px;
  margin: 10px;
  margin-top: 0px;
  padding-top: 0px;

  .word-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 40px;
      height: 40px;
      margin-right: 22px;
    }

    span {
      font-size: 26.5px;
      @include themify() {
        color: themed("text_color");
      }
    }
  }
}

.price-bot {
  display: flex;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  padding: 12px;
  &-wrp {
    // display: flex;
  }
  &-tit {
    text-align: center;
    font-size: 2rem;
    @include themify() {
      color: themed("text_color1");
    }
  }
  &-text {
    font-weight: 500;
    color: #fb7171;
    font-size: 3.2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    //  @include themify() {
    //         color: themed("text_color1");
    //       }
  }
}

.asset-list {
  width: 100%;
  background: #212121;
  border-radius: 3rem 3rem 0 0;
  padding: 2.7rem;
  box-sizing: border-box;
  @include themify() {
    color: themed("text_color");
  }
  .list {
    background: #212121;
    box-sizing: border-box;
    margin-bottom: 0.22rem;
    padding: 0.06rem;
    box-sizing: border-box;
    position: relative;
  }
  .list-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    span {
      font-size: 2.7rem;
      font-weight: 700;
      //   color: #fff;
    }
  }
  .u-icon--right {
    flex-direction: row;
    align-items: center;
  }
  .u-icon {
    display: flex;
    align-items: center;
  }

  .list-item {
    display: flex;
    flex-wrap: wrap;
  }
  .list-b {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
    width: 14rem;
    padding-right: 1.4rem;
    margin-right: 1.4rem;
    box-sizing: border-box;
    border-right: 1px solid rgba(60, 58, 58, 0.2);
    span {
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
    }
  }
  .list-b-t {
    color: hsla(0, 0%, 100%, 0.7);
  }

  .kline {
    width: 46rem;
    height: 0.22rem;
    background: rgba(60, 58, 58, 0.6);
    position: absolute;
    bottom: -0.6rem;
    left: 0;
    margin-bottom: 3rem;
  }
}

.btnGroup {
  margin-bottom: 2.2rem;
  padding: 0 1rem;
}

.search-wrp {
  margin: 2rem 0;
  :deep(.van-search .van-cell) {
    height: 6rem;
    font-size: 2rem;
    display: flex;
    align-items: center;
  }
}

:deep(.van-search__content) {
  background-color: #212121;
  border: 1px solid #686767;
  border-radius: 4.6rem;
}
:deep(.van-field__control) {
  color: #fff;
}

.assets-list {
  margin-bottom: 70px;
}

.assets-list > div {
  display: flex;
}

.assets-list > div:nth-child(2) div:nth-child(1) {
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 700;
}
</style>