其他人改的版本

李凌

2025-10-15 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65

 src/views/my/assets.vue

@@ -1,174 +1,288 @@
<template>
    <div class="assets main_background text_color">
        <!-- <div class="assets_title">{{ $t('总资产估值') }}</div>
        <div class="assets_money font-bold mt-5 flex justify-start items-end">
            {{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
                (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
  <div class="assets main_background text_color">
    <!-- <div class="assets_title">{{ $t('总资产估值') }}</div>
    <div class="assets_money font-bold mt-5 flex justify-start items-end">
        {{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
            (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}

            <div class="pricing_jj ml-5">
                {{ pricing }}
            </div>
            <van-dropdown-menu>
                <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
                    <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
                </van-dropdown-item>
            </van-dropdown-menu>
        <div class="pricing_jj ml-5">
            {{ pricing }}
        </div>
        <div class="assets_revenue mt-5">
            <span>{{ $t('ProfitDay') }}</span>
            {{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit_today ?
                (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
                '--' }}
        </div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
                <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
            </van-dropdown-item>
        </van-dropdown-menu>
    </div>
    <div class="assets_revenue mt-5">
        <span>{{ $t('ProfitDay') }}</span>
        {{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit_today ?
            (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
            '--' }}
    </div>

        <div class="tabbers flex justify-between mt-20 pl-1 pr-1">
            <div class="item" v-for="item in tabList" :key="item.key" @click="toPage(item.path)">
                <img style="width: 100px;" :src="item.icon" alt="">
                <div class="mt-3 text-center">{{ item.name }}</div>
            </div>
        </div>

        <van-collapse v-model="activeNames" class="mt-10">
            <van-collapse-item :title="$t('分布')" name="1">
                <div class="percentage flex just-between items-center">
                    <div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
                    </div>
                    <div class="flex-1">
                    </div>
                </div>
                <div class="assets_item flex justify-start items-center mt-14 font-bold">
                    <div class="icon" style="background-color: #8A90FE;"></div>
                    <span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
                    <span class="mr-5">{{ assetObj.capital }}</span>
                    <van-icon name="arrow" />
                </div>
                <div class="assets_item flex justify-start items-center mt-14 font-bold">
                    <div class="icon" style="background-color: #f7b600;"></div>
                    <span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
                    <span class="mr-5">{{ assetObj.contract }}</span>
                    <van-icon name="arrow" />
                </div>
            </van-collapse-item>
        </van-collapse>

        <div class="assets_item flex font-bold justify-between items-center mt-14 mb-10">
            <span>{{ $t('资产') }}</span>
            <van-icon name="exchange" size="3rem" />
        </div>

        <div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetList"
            :key="item.id">
            <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" />

            <span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>

            <div class="mr-3">
                <div class="text-right" v-if="item.symbol == 'btc'">
                    {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
                </div>
                <div class="text-right" v-else-if="item.symbol == 'eth'">
                    {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
                </div>
                <div class="text-right" v-else-if="item.symbol == 'usdt'">
                    {{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
                </div>
                <div class="text-right" v-else>
                    {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
                </div>
                <div class="assets_item_light text-right">
                    ≈{{ currency.currency_symbol }}
                    {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
                </div>
            </div>
        </div> -->

        <van-nav-bar>
            <template #left>
                <div class="assets_tabs flex justify-start items-center textColor1">
                    <div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
                        @click="activeHead = i.key">
                        {{ i.name }}
                    </div>
                </div>
            </template>
            <template #right v-if="activeHead != 0">
                <van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
            </template>
        </van-nav-bar>

        <div class="assets_content">
            <template v-if="activeHead == 0">
                <div class="assets_1">
                    {{ $t('总资产估值') }}
                </div>
                <div class="assets_money mt-5 flex justify-start items-end">
                    {{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
                        (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}

                    <div class="pricing_jj ml-5">
                        {{ pricing }}
                    </div>
                    <van-dropdown-menu style="position: relative;top: .5rem;">
                        <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
                            <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
                        </van-dropdown-item>
                    </van-dropdown-menu>
                </div>
            </template>

            <template v-else-if="activeHead == 1">
                <div class="assets_1">
                    {{ $t('资金账户') }}
                </div>
                <div class="assets_money mt-5 flex justify-start items-end">
                    ${{ assetObj.capital }}
                    <span>USD</span>
                </div>
                <div class="assets_2 flex justify-around items-center">
                    <div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
                        <img :src="i.icon" alt="" v-if="theme == 'light'">
                        <img :src="i.icon2" alt="" v-else>
                        <div>{{ i.name }}</div>
                    </div>
                </div>

                <div class="assets_3">
                    <div class="assets_3_head flex justify-between items-center">
                        <span>{{ $t('名称') }}</span>
                        <span>{{ $t('volumn') }}</span>
                    </div>
                    <div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
                        <div class="flex justify-start items-center">
                            <img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`" />
                            <span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
                        </div>
                        <div>
                            <p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
                            <p>≈{{ currency.currency_symbol }}
                                {{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
                        </div>
                    </div>
                </div>
            </template>

            <template v-else-if="activeHead == 2">
                <div class="assets_1">
                    {{ $t('交易账户') }}
                </div>
                <div class="flex justify-between items-center">
                    <div class="assets_money mt-5 flex justify-start items-end">
                        ${{ assetObj.contract }}
                        <span>USD</span>
                    </div>
                    <div class="assets_4" @click="toPage('/my/transfer')">
                        <img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
                        <img :src="tabList[2].icon2" alt="" v-else>
                        <p>{{ $t('划转') }}</p>
                    </div>
                </div>
            </template>
    <div class="tabbers flex justify-between mt-20 pl-1 pr-1">
        <div class="item" v-for="item in tabList" :key="item.key" @click="toPage(item.path)">
            <img style="width: 100px;" :src="item.icon" alt="">
            <div class="mt-3 text-center">{{ item.name }}</div>
        </div>
    </div>

    <van-collapse v-model="activeNames" class="mt-10">
        <van-collapse-item :title="$t('分布')" name="1">
            <div class="percentage flex just-between items-center">
                <div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
                </div>
                <div class="flex-1">
                </div>
            </div>
            <div class="assets_item flex justify-start items-center mt-14 font-bold">
                <div class="icon" style="background-color: #8A90FE;"></div>
                <span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
                <span class="mr-5">{{ assetObj.capital }}</span>
                <van-icon name="arrow" />
            </div>
            <div class="assets_item flex justify-start items-center mt-14 font-bold">
                <div class="icon" style="background-color: #f7b600;"></div>
                <span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
                <span class="mr-5">{{ assetObj.contract }}</span>
                <van-icon name="arrow" />
            </div>
        </van-collapse-item>
    </van-collapse>

    <div class="assets_item flex font-bold justify-between items-center mt-14 mb-10">
        <span>{{ $t('资产') }}</span>
        <van-icon name="exchange" size="3rem" />
    </div>

    <div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetList"
        :key="item.id">
        <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" />

        <span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>

        <div class="mr-3">
            <div class="text-right" v-if="item.symbol == 'btc'">
                {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
            </div>
            <div class="text-right" v-else-if="item.symbol == 'eth'">
                {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
            </div>
            <div class="text-right" v-else-if="item.symbol == 'usdt'">
                {{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
            </div>
            <div class="text-right" v-else>
                {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
            </div>
            <div class="assets_item_light text-right">
                ≈{{ currency.currency_symbol }}
                {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
            </div>
        </div>
    </div> -->

    <van-nav-bar>
      <template #left>
        <div class="assets_tabs flex justify-start items-center textColor1">
          <div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
            @click="activeHead = i.key">
            {{ i.name }}
          </div>
        </div>
      </template>
      <template #right>
        <van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
      </template>
    </van-nav-bar>

    <div class="assets_content">
      <template v-if="activeHead == 0">
        <div class="assets_1">
          {{ $t('总资产估值') }}
        </div>
        <div class="assets_money mt-5 flex justify-start items-end">
          {{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
            (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
          <!--  -->
          <div class="pricing_jj ml-5">
            {{ pricing }}
          </div>
          <van-dropdown-menu style="position: relative;top: .5rem;">
            <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
              <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
      </template>
    </div>


    <van-nav-bar>
      <template #left>
        <div class="assets_tabs flex justify-start items-center textColor1">
          <div v-for="i in headList1" :key="i" :class="i.key == activeHead1 ? 'textColor' : ''"
            @click="activeHead1 = i.key">
            {{ i.name }}
          </div>
        </div>
      </template>
    </van-nav-bar>

    <div class="assets_content1">
      <template v-if="activeHead1 == 1">
        <div class="assets_1">
          {{ $t('资金账户') }}
        </div>
        <div class="assets_money mt-5 flex justify-start items-end">
          ${{ assetObj.capital }}
          <span>USD</span>
        </div>
        <div class="assets_2 flex justify-around items-center">
          <div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
            <img :src="i.icon" alt="" v-if="theme == 'light'">
            <img :src="i.icon2" alt="" v-else>
            <div>{{ i.name }}</div>
          </div>
        </div>

        <div class="assets_3">
          <div class="assets_3_head flex justify-between items-center">
            <span>{{ $t('名称') }}</span>
            <span>{{ $t('volumn') }}</span>
          </div>
          <div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
            <div class="flex justify-start items-center">
              <img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`" />
              <span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
            </div>
            <div>
              <p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
              <p>≈{{ currency.currency_symbol }}
                {{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
            </div>
          </div>
        </div>
      </template>

      <template v-else-if="activeHead1 == 2">
        <div class="assets_1">
          {{ $t('交易账户') }}
        </div>
        <div class="flex justify-between items-center">
          <div class="assets_money mt-5 flex justify-start items-end">
            ${{ assetObj.contract }}
            <span>USD</span>
          </div>
          <div class="assets_4" @click="toPage('/my/transfer')">
            <img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
            <img :src="tabList[2].icon2" alt="" v-else>
            <p>{{ $t('划转') }}</p>
          </div>
        </div>
      </template>
    </div>

  </div>

  <!-- <van-nav-bar>
           <template #left>
             <div class="assets_tabs flex justify-start items-center textColor1">
               <div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
                    @click="activeHead = i.key">
                 {{ i.name }}
               </div>
             </div>
           </template>
           <template #right v-if="activeHead != 0">
             <van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
           </template>
         </van-nav-bar> -->

  <!-- <div class="flex-centerY"
         style="position: sticky;top: 0px;left: 0;height: 55px;width: 100%;background: white;z-index: 999;border-bottom: #f1f1f1 1px solid;padding: 0 20px">
      <div @click="showType=2" class="tab-item flex-center" :class="{'tab-item-select':showType==2}">
        {{ $t('总资产估值') }}
      </div>
      <div @click="showType=1" class="tab-item flex-center" :class="{'tab-item-select':showType==1}">
        {{ $t('资金账户') }}
      </div>
      <div @click="showType=3" class="tab-item flex-center" :class="{'tab-item-select':showType==3}">
        {{ $t('交易账户') }}
      </div>
    </div>
    <div class="assets_content">
      <div v-if="showType==2">
        <div class="assets_1">
          {{ $t('总资产估值') }}
        </div>
        <div class="assets_money mt-5 flex justify-start items-end">
          {{ currency.currency_symbol }}{{
            forexAssets?.money_contract ?
                (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00'
          }}

          <div class="pricing_jj ml-5">
            {{ pricing }}
          </div>
          <van-dropdown-menu style="position: relative;top: .5rem;">
            <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
              <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
      </div>
      <div v-if="showType==3">
        <div class="assets_1">
          {{ $t('交易账户') }}
        </div>
        <div class="flex justify-between items-center">
          <div class="assets_money mt-5 flex justify-start items-end">
            ${{ assetObj.contract }}
            <span>USD</span>
          </div>
          <div class="assets_4" @click="toPage('/my/transfer')">
            <img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
            <img :src="tabList[2].icon2" alt="" v-else>
            <p>{{ $t('划转') }}</p>
          </div>
        </div>
      </div>
      <div v-if="showType==1">
        <div class="assets_1">
          {{ $t('资金账户') }}
        </div>
        <div class="assets_money mt-5 flex justify-start items-end">
          ${{ assetObj.capital }}
          <span>USD</span>
        </div>
        <div class="assets_2 flex justify-around items-center">
          <div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
            <img :src="i.icon" alt="" v-if="theme == 'light'">
            <img :src="i.icon2" alt="" v-else>
            <div>{{ i.name }}</div>
          </div>
        </div>
      </div>
      <div class="assets_3">
        <div class="assets_3_head flex justify-between items-center">
          <span>{{ $t('名称') }}</span>
          <span>{{ $t('volumn') }}</span>
        </div>
        <div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
          <div class="flex justify-start items-center">
            <img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`"/>
            <span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
          </div>
          <div>
            <p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
            <p>≈{{ currency.currency_symbol }}
              {{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script setup>
@@ -180,7 +294,7 @@
import store from '@/store/store'
import { useStore } from "vuex"
import {
    _getContractBySymbolType
  _getContractBySymbolType
} from "@/service/etf.api";
import { SET_CURRENCY } from "@/store/const.store";
import { _getassets } from "@/service/user.api.js";
@@ -191,45 +305,52 @@
const { t } = useI18n()
const activeNames = ref(['1'])
const { dispatch } = useStore();
const showType = ref(2)
const theme = ref(store.state.vant.theme) // 当前主题模式,白天(light)或夜间(dark)

const tabList = [
    {
        key: 1, name: t('充值'), icon: new URL(`@/assets/theme/white/image/assets/recharge.png`, import.meta.url),
        icon2: new URL(`@/assets/theme/dark/image/assets/recharge.png`, import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true'
    },
    {
        key: 2, name: t('提现'), icon: new URL(`@/assets/theme/white/image/assets/withdrawal.png`, import.meta.url),
        icon2: new URL(`@/assets/theme/dark/image/assets/withdrawal.png`, import.meta.url), path: '/cryptos/Withdraw/withdrawPage'
    },
    {
        key: 3, name: t('划转'), icon: new URL(`@/assets/theme/white/image/assets/transfer.png`, import.meta.url),
        icon2: new URL(`@/assets/theme/dark/image/assets/transfer.png`, import.meta.url), path: '/my/transfer'
    },
    // { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
  {
    key: 1,
    name: t('充值'),
    icon: new URL(`@/assets/theme/white/image/assets/recharge.png`, import.meta.url),
    icon2: new URL(`@/assets/theme/dark/image/assets/recharge.png`, import.meta.url),
    path: '/cryptos/recharge/rechargeList?isForeign=true'
  },
  {
    key: 2,
    name: t('提现'),
    icon: new URL(`@/assets/theme/white/image/assets/withdrawal.png`, import.meta.url),
    icon2: new URL(`@/assets/theme/dark/image/assets/withdrawal.png`, import.meta.url),
    path: '/cryptos/Withdraw/withdrawPage'
  },
  {
    key: 3, name: t('划转'), icon: new URL(`@/assets/theme/white/image/assets/transfer.png`, import.meta.url),
    icon2: new URL(`@/assets/theme/dark/image/assets/transfer.png`, import.meta.url), path: '/my/transfer'
  },
  // { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
]

// 计价切换
const pricing = ref('')
const pricingList = [
    { text: 'USD', value: 'USD', key: 'USD_in' },
    { text: 'EUR', value: 'EUR', key: 'EUR_in' },
    { text: 'JPY', value: 'JPY', key: 'JPY_in' },
  { text: 'USD', value: 'USD', key: 'USD_in' },
  { text: 'EUR', value: 'EUR', key: 'EUR_in' },
  { text: 'JPY', value: 'JPY', key: 'JPY_in' },
]
const changePricing = (e) => {
    let item = pricingList.find((item) => item.value == e)
  let item = pricingList.find((item) => item.value == e)

    _exchangerateuserconfig({ rateId: item.key }).then((res) => {
        dispatch(`home/${SET_CURRENCY}`)
        getCurrency()
        getContractBySymbolType()
    })
  _exchangerateuserconfig({ rateId: item.key }).then((res) => {
    dispatch(`home/${SET_CURRENCY}`)
    getCurrency()
    getContractBySymbolType()
  })
}

// 跳转页面
const toPage = (path) => {
    if (!path) return
    router.push(path)
  if (!path) return
  router.push(path)
}

// 资产信息获取
@@ -238,36 +359,36 @@
const symbolType = ref('cryptos') //默认etf

const getCurrency = async () => {
    _getExchangeRate({
        token: store.state.user.userInfo.token
    }).then(res => {
        currency.value = res
        pricing.value = res.currency
    }).catch(err => Promise.reject(err))
  _getExchangeRate({
    token: store.state.user.userInfo.token
  }).then(res => {
    currency.value = res
    pricing.value = res.currency
  }).catch(err => Promise.reject(err))
}
const getContractBySymbolType = () => {
    _getContractBySymbolType(symbolType.value)
        .then(res => {
            forexAssets.value = res
        })
  _getContractBySymbolType(symbolType.value)
    .then(res => {
      forexAssets.value = res
    })
}
const assetObj = ref({})
const getassets = () => { // 获取资产
    _getassets().then(res => {
        assetObj.value = res
    })
  _getassets().then(res => {
    assetObj.value = res
  })
}

// 获取资产列表
const assetList = ref([])
const getList = () => {
    _getAllWallet({
        symbolType: 'cryptos'
    }).then((res) => {
        assetList.value = res.extends
        console.log("资产列表", assetList.value);
  _getAllWallet({
    symbolType: 'cryptos'
  }).then((res) => {
    assetList.value = res.extends
    console.log("资产列表", assetList.value);

    });
  });
}

getList()
@@ -278,208 +399,234 @@
// 头部切换项
const activeHead = ref(0)
const headList = [
    { name: t('总资产估值'), key: 0 },
    { name: t('资金账户'), key: 1 },
    { name: t('交易账户'), key: 2 },
  { name: t('总资产估值'), key: 0 },
  // { name: t('资金账户'), key: 1 },
  // { name: t('交易账户'), key: 2 },
]
// 中部切换项
const activeHead1 = ref(1)
const headList1 = [
  { name: t('资金账户'), key: 1 },
  { name: t('交易账户'), key: 2 },
]

</script>

<style lang="scss" scoped>
.tab-item {
  height: 100%;
  font-size: 16px;
  color: #999;

  margin-right: 10px;
}

.tab-item-select {
  color: #111;
}

.assets {
    min-height: 100vh;
  min-height: 100vh;
  font-size: 1.4rem;

  ::v-deep .van-nav-bar {
    border-bottom: $divi_line solid 1px;
  }

  justify-content: space-around;

  .assets_tabs {
    font-size: 2rem;

    &>div {
      margin-right: 2rem;
    }
  }

  .assets_content,
  .assets_content1 {
    padding: 16px 16px;
  }

  .assets_content {
    @include themify() {
      border-bottom: themed("divi_line") solid 1px;
    }
  }

  .assets_1 {
    font-size: 1.5rem;
  }

  .assets_2 {
    margin-top: 3rem;
    font-size: 1.4rem;

    ::v-deep .van-nav-bar {
        border-bottom: $divi_line solid 1px;
    &>div {
      text-align: center;

      img {
        height: 2.4rem;
        margin: 0 auto .4rem;
      }
    }
  }

  .assets_3 {
    margin-top: 3rem;

    .assets_3_item {
      margin-bottom: 3.2rem;

      p {
        text-align: end;
      }

      img {
        width: 3.6rem;
      }
    }

    justify-content: space-around;
    .assets_3_head {
      border-bottom: $divi_line solid 1px;
      margin-bottom: 1.7rem;
    }
  }

    .assets_tabs {
        font-size: 2rem;
  .assets_4 {
    padding-right: 2rem;

        &>div {
            margin-right: 2rem;
        }
    img {
      height: 2.4rem;
    }
  }

  :deep(.van-cell) {
    padding-left: 0;
    padding-right: 0;
  }

  :deep(.van-cell:after) {
    display: none;
  }

  :deep(.van-collapse-item__content) {
    padding-left: 0;
    padding-right: 0;
  }

  :deep(.van-cell__title) {
    font-size: 2.1rem;
    font-weight: 600;
  }

  .assets_title {
    font-size: 2.1rem;
  }

  .assets_money {
    font-size: 3rem;

    .pricing_jj {
      font-size: 1.6rem;
      margin-right: -8px;
      position: relative;
      top: .5rem;
    }

    .assets_content {
        padding: 16px 16px 10rem;
    &>span {
      font-size: 1.6rem;
      margin-left: .6rem;
      position: relative;
      top: 0.5rem;
    }

    .assets_1 {
        font-size: 1.5rem;
    :deep(.van-dropdown-menu__bar) {
      height: auto;
      box-shadow: none;
    }

    .assets_2 {
        margin-top: 3rem;
        font-size: 1.4rem;

        &>div {
            text-align: center;

            img {
                height: 2.4rem;
                margin: 0 auto .4rem;
            }
        }
    :deep(.van-dropdown-menu__title--down:after) {
      margin-top: -14px !important;
    }

    .assets_3 {
        margin-top: 3rem;

        .assets_3_item {
            margin-bottom: 3.2rem;

            p {
                text-align: end;
            }

            img {
                width: 3.6rem;
            }
        }

        .assets_3_head {
            border-bottom: $divi_line solid 1px;
            margin-bottom: 1.7rem;
        }
    :deep(.van-dropdown-menu__title:after) {
      margin-top: -16px;
    }

    .assets_4 {
        padding-right: 2rem;

        img {
            height: 2.4rem;
        }
    :deep(.van-ellipsis) {
      display: none;
    }

    :deep(.van-cell) {
        padding-left: 0;
        padding-right: 0;
    :deep(.van-popup--top) {
      padding: 10px 20px;
      font-size: 2rem;
    }
  }

  .assets_revenue {
    font-size: 2rem;
    color: #646464;
    font-weight: 600;

    span {
      color: #6e6e6e;
      text-decoration: underline dotted;
      font-weight: 400;
    }
  }

  .tabbers {
    .item {
      $item_width: 8.3rem;
      width: $item_width;
      font-size: 1.8rem;
      color: $text_color4;

      img {
        height: $item_width;
        border-radius: 50%;
      }
    }
  }

  .percentage {
    div {
      height: 1rem;
      border-radius: 0.5rem;
    }

    :deep(.van-cell:after) {
        display: none;
    &>div:last-child {
      background: $bg_yellow;
    }

    :deep(.van-collapse-item__content) {
        padding-left: 0;
        padding-right: 0;
    &>div:first-child {
      background: #8A90FE;
      margin-right: 0.2rem;
    }
  }

  .assets_item {
    color: $text_color4;
    font-size: 2.1rem;

    .icon {
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 50%;
      background: $icon-bg;
    }

    :deep(.van-cell__title) {
        font-size: 2.1rem;
        font-weight: 600;
    img {
      width: 2.8rem;
      height: 2.8rem;
      border-radius: 50%;
    }

    .assets_title {
        font-size: 2.1rem;
    .assets_item_light {
      color: #9b9b9b;
      font-weight: 300;
    }

    .assets_money {
        font-size: 3rem;

        .pricing_jj {
            font-size: 1.6rem;
            margin-right: -8px;
            position: relative;
            top: .5rem;
        }

        &>span {
            font-size: 1.6rem;
            margin-left: .6rem;
            position: relative;
            top: 0.5rem;
        }

        :deep(.van-dropdown-menu__bar) {
            height: auto;
            box-shadow: none;
        }

        :deep(.van-dropdown-menu__title--down:after) {
            margin-top: -14px !important;
        }

        :deep(.van-dropdown-menu__title:after) {
            margin-top: -16px;
        }

        :deep(.van-ellipsis) {
            display: none;
        }

        :deep(.van-popup--top) {
            padding: 10px 20px;
            font-size: 2rem;
        }
    }

    .assets_revenue {
        font-size: 2rem;
        color: #646464;
        font-weight: 600;

        span {
            color: #6e6e6e;
            text-decoration: underline dotted;
            font-weight: 400;
        }
    }

    .tabbers {
        .item {
            $item_width: 8.3rem;
            width: $item_width;
            font-size: 1.8rem;
            color: $text_color4;

            img {
                height: $item_width;
                border-radius: 50%;
            }
        }
    }

    .percentage {
        div {
            height: 1rem;
            border-radius: 0.5rem;
        }

        &>div:last-child {
            background: $bg_yellow;
        }

        &>div:first-child {
            background: #8A90FE;
            margin-right: 0.2rem;
        }
    }

    .assets_item {
        color: $text_color4;
        font-size: 2.1rem;

        .icon {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 50%;
            background: $icon-bg;
        }

        img {
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 50%;
        }

        .assets_item_light {
            color: #9b9b9b;
            font-weight: 300;
        }
    }
  }
}
</style>
</style>