9.11

李凌

2025-09-11 d5ff9af6bb6b1974f6e50c3330ea7d8e5ad9fa76

 src/views/my/assets.vue

@@ -1,5 +1,38 @@
<template>
    <div class="assets">
        <van-field v-model="value" :placeholder="$t('search')" class="assets_search" left-icon="search" />

        <div class="assets_1">
            <div class="price_box-tit">{{ $t('总资产估值') }}</div>

            <div class="price_box-text assets_money font-bold mt-5 flex justify-center 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>

            <div class="price-bot">
                <div>
                    <div class="price-bot-tit mb-3">{{ $t('ProfitDay') }}</div>
                    <div class="price-bot-text">
                        {{ currency.currency_symbol }}{{
                            forexAssets?.money_contract_profit_today ?
                                (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
                                '--' }}
                    </div>
                </div>
            </div>
        </div>


        <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 ?
@@ -30,7 +63,6 @@

        <van-collapse v-model="activeNames" class="mt-10">
            <van-collapse-item :title="$t('分布')" name="1">
                <!-- <div class="divider"></div> -->
                <div class="percentage flex just-between items-center">
                    <div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
                    </div>
@@ -181,14 +213,11 @@
getContractBySymbolType()
</script>


<style lang="scss" scoped>
.assets {
    min-height: 100vh;
    background: $mainbgWhiteColor;
    padding: 2.8rem 2rem 10rem 2rem;
    $assets_title_color: #9a9a9a;
    color: $assets_title_color;
    color: $text_color;

    :deep(.van-cell) {
        padding-left: 0;
@@ -209,12 +238,61 @@
        font-weight: 600;
    }

    .assets_search {
        background-color: $mainbgWhiteColor;
        width: 100%;
        border-radius: 2.5rem;
        padding: .5rem 2rem;
    }

    .assets_1 {
        background: url('@/assets/image/assets-center/as_bg.png');
        background-size: 100% 100%;
        padding: 2rem 2rem 2.375rem;
        margin: 2.5rem 0 5rem 0;
        border-radius: 1.125rem;

        .price_box-tit {
            font-size: 2.2rem;
            margin-bottom: 1.4rem;
            display: flex;
            justify-content: center;
        }

        .price_box-text {
            margin-bottom: 1.4rem;
            font-size: 3.2rem;
        }

        .price-bot {
            display: flex;
            justify-content: space-around;
            background: rgba(0, 0, 0, .4);
            border-radius: .75rem;
            padding: .75rem;

            .price-bot-tit {
                text-align: center;
                font-size: 2rem;
            }

            .price-bot-text {
                font-weight: 500;
                color: #fb7171;
                font-size: 3.2rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }

    .assets_title {
        font-size: 2.1rem;
    }

    .assets_money {
        color: $text_color4;
        color: $text_color3;
        font-size: 3.4rem;

        .pricing_jj {
@@ -247,11 +325,11 @@

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

        span {
            color: #6e6e6e;
            color: $text_color3;
            text-decoration: underline dotted;
            font-weight: 400;
        }
@@ -262,7 +340,7 @@
            $item_width: 8.3rem;
            width: $item_width;
            font-size: 1.8rem;
            color: $text_color4;
            color: $text_color3;

            img {
                height: $item_width;
@@ -270,12 +348,6 @@
            }
        }
    }

    // .divider {
    //     height: 1rem;
    //     border-radius: 0.5rem;
    //     background: $bg_yellow;
    // }

    .percentage {
        div {
@@ -294,7 +366,7 @@
    }

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

        .icon {
@@ -311,7 +383,7 @@
        }

        .assets_item_light {
            color: #9b9b9b;
            color: $text_color3;
            font-weight: 300;
        }
    }