1

李凌

9 days ago 349c48e168b9f2580334422228acde7d1b21bede

 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 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>
      <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 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>
    </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()
@@ -116,55 +98,57 @@
</script>

<style lang="scss" >
@import "@/assets/init.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');
  }

  .left-leave-active,
  .right-leave-active {
    display: none;
    &.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-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>