1

李凌

5 days ago 349c48e168b9f2580334422228acde7d1b21bede

 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>