From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/views/cryptos/AssetsCenter/index.vue | 105 ++++++++++++++++++++++++++--------------------------
1 files changed, 52 insertions(+), 53 deletions(-)
diff --git a/src/views/cryptos/AssetsCenter/index.vue b/src/views/cryptos/AssetsCenter/index.vue
index 0771f53..660e5a1 100644
--- a/src/views/cryptos/AssetsCenter/index.vue
+++ b/src/views/cryptos/AssetsCenter/index.vue
@@ -2,23 +2,26 @@
<div id="cryptos">
<assets-head :title="$t('现货账户')" :back-func="backFunc">
</assets-head>
- <div class="pb-120 assetsCenter">
- <div class="flex justify-between mx-52 mt-31 box-border">
- <div class=" items-center text-center textColor1" v-for="(item, index) in typeList " :key="'type' + index"
- @click="onTabs(index)">
- <div class="type">{{ item.type }}</div>
+ <div class="funds-page pb-120">
+ <div class="funds-tabs-wrap">
+ <div class="funds-tabs">
+ <div
+ v-for="(item, index) in typeList"
+ :key="'type' + index"
+ class="funds-tab-item"
+ :class="{ active: tab === index }"
+ @click="onTabs(index)"
+ >
+ {{ item.type }}
+ </div>
</div>
</div>
- <div class="flex 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 class="funds-content">
+ <over-view v-if="tab === 0" :funds="funds" :key="'tab0'" />
+ <as-sets v-if="tab === 1" :funds="funds" :key="'tab1'" />
+ <contract v-if="tab === 2" :funds="funds" :index="index" :key="'tab2'" />
+ <financial v-if="tab === 3" :funds="funds" :index="index" :key="'tab3'" />
</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>
</div>
</div>
</template>
@@ -117,56 +120,52 @@
}
</script>
-<style lang="scss" >
-@import "@/assets/init.scss";
+<style lang="scss">
+@import '@/assets/init.scss';
#cryptos {
- .assetsCenter {
- width: 100%;
+ .funds-page {
+ min-height: 100vh;
box-sizing: border-box;
}
- .type {
- font-size: 36px;
- line-height: 24px;
+ .funds-tabs-wrap {
+ padding: 20px 32px 8px;
}
- .active_color {
- border-bottom: 5px solid $color_main ;
- border-radius: 2.208px;
+ .funds-tabs {
+ display: flex;
+ gap: 12px;
+ padding: 8px;
+ border-radius: 20px;
+ @include themify() {
+ background: themed('cont_background');
+ }
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
- .left-enter-active,
- .left-leave-active,
- .right-enter-active,
- .right-leave-active {
- will-change: transform;
- transition: all 500ms;
+ .funds-tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 18px 8px;
+ border-radius: 14px;
+ font-size: 26px;
+ line-height: 1.2;
+ transition: all 0.2s ease;
+ @include themify() {
+ color: themed('text_color1');
+ }
+
+ &.active {
+ color: #fff;
+ background: linear-gradient(135deg, #1a6dff 0%, #004aee 100%);
+ font-weight: 600;
+ box-shadow: 0 6px 16px rgba(0, 74, 238, 0.28);
+ }
}
- .left-leave-active,
- .right-leave-active {
- display: none;
- }
-
- .left-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
- }
-
- .left-leave {
- opacity: 0;
- transform: translate3d(100%, 0, 0)
- }
-
- .right-enter {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
- }
-
- .right-leave {
- opacity: 0;
- transform: translate3d(-100%, 0, 0)
+ .funds-content {
+ padding: 0 32px;
}
}
</style>
--
Gitblit v1.9.3