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/Funds/index.vue | 160 ++++++++++++++++++++++++-----------------------------
1 files changed, 72 insertions(+), 88 deletions(-)
diff --git a/src/views/cryptos/Funds/index.vue b/src/views/cryptos/Funds/index.vue
index 58d8fad..3a23462 100644
--- a/src/views/cryptos/Funds/index.vue
+++ b/src/views/cryptos/Funds/index.vue
@@ -1,37 +1,39 @@
<template>
<div id="cryptos">
- <assets-head :title="$t('资金账户')" :back-func="backFunc">
- </assets-head>
- <div class="pb-120 assetsCenter px-12">
- <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>
+ <assets-head :title="$t('资金账户')" :back-func="backFunc" />
+ <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>
<script>
+import AsSets from '@/components/Transform/assetsCenter/assets.vue'
+import OverView from '@/components/Transform/assetsCenter/overview.vue'
+import Contract from '@/components/Transform/assetsCenter/contract.vue'
+import Financial from '@/components/Transform/assetsCenter/financial.vue'
+import { _getAllAssets } from '@/service/user.api.js'
-import AsSets from "@/components/Transform/assetsCenter/assets.vue"
-import OverView from "@/components/Transform/assetsCenter/overview.vue"
-import Contract from "@/components/Transform/assetsCenter/contract.vue"
-import Financial from "@/components/Transform/assetsCenter/financial.vue"
-import { _getAllAssets } from "@/service/user.api.js";
export default {
- name: "assets-index",
+ name: 'assets-index',
components: {
AsSets,
OverView,
@@ -40,26 +42,14 @@
},
data() {
return {
- type: 'left', //left 从左往右 right 从有王座
- list: [],
- timer: null,
tab: 0,
- index: 0, // 每个组件的二级tab
+ index: 0,
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('理财') }
]
}
},
@@ -67,25 +57,17 @@
backFunc() {
this.$router.push({
path: '/quotes/index',
- query: {
- tabActive: 1
- }
+ query: { tabActive: 1 }
})
},
onTabs(val) {
- if (this.tab < val) {
- this.type = 'right'
- } else {
- this.type = 'left'
- }
- console.log(val)
this.tab = val
},
getAssets() {
_getAllAssets().then((data) => {
this.funds = data
})
- },
+ }
},
created() {
this.getAssets()
@@ -115,56 +97,58 @@
}
</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;
+ position: sticky;
+ top: 96px;
+ z-index: 10;
+ @include themify() {
+ background: themed('main_background');
+ }
}
- .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