1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

 src/views/Trade.vue

@@ -7,8 +7,8 @@
      <span class="tab-item">股票</span>
      <span class="tab-item red-dot">股票</span>
      <div class="tab-right">
        <span class="tab-icon">?</span>
        <span class="tab-icon">☰</span>
        <Icon icon="solar:question-circle-bold" class="tab-icon" />
        <Icon icon="solar:hamburger-menu-bold" class="tab-icon" />
      </div>
    </div>

@@ -39,7 +39,7 @@
      </div>

      <!-- 互换按钮 -->
      <div class="swap-icon">⇅</div>
      <Icon icon="solar:swap-bold" class="swap-icon" />

      <!-- 下方输入 -->
      <div class="trade-input bottom">
@@ -60,7 +60,7 @@

    <!-- 交易按钮 -->
    <div class="trade-button-wrapper">
      <button class="trade-button">交易</button>
      <AppButton variant="primary" size="large" full-width class="trade-button">交易</AppButton>
    </div>

    <!-- 底部信息 -->
@@ -75,7 +75,10 @@
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import BottomNav from '@/components/BottomNav.vue'
import Card from '@/components/Card.vue'
import AppButton from '@/components/Button.vue'
</script>

<style lang="scss" scoped>
@@ -90,9 +93,10 @@
.main-tabs {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 24px;
  border-bottom: 1px solid $border-light;
  padding: $spacing-md $spacing-lg;
  gap: $spacing-xxl;
  margin-bottom: $spacing-lg;
  background: $bg-tertiary;
  
  .tab-item {
    font-size: $font-md;
@@ -111,7 +115,7 @@
      right: -8px;
      width: 6px;
      height: 6px;
      background: $error-red;
      background: $error;
      border-radius: 50%;
    }
  }
@@ -134,40 +138,35 @@

.sub-tabs {
  display: flex;
  padding: 12px 16px;
  gap: 24px;
  border-bottom: 1px solid $border-light;
  padding: $spacing-md $spacing-lg;
  gap: $spacing-xxl;
  margin-bottom: $spacing-lg;
  background: $bg-tertiary;
  
  .sub-tab-item {
    font-size: $font-md;
    color: $text-secondary;
    position: relative;
    padding: $spacing-xs $spacing-md;
    border-radius: $radius-pill;
    transition: all $transition-base;
    
    &.active {
      color: $primary-blue;
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 0;
        right: 0;
        height: 2px;
        background: $primary-blue;
      }
      color: $primary;
      font-weight: 600;
      background: $primary-light;
    }
  }
}

.trade-area {
  padding: 24px 16px;
  padding: $spacing-xxl $spacing-lg;
  
  .trade-input {
    background: $bg-secondary;
    background: $bg-card;
    border-radius: $radius-lg;
    padding: 20px;
    margin-bottom: 16px;
    padding: $spacing-xl;
    margin-bottom: $spacing-lg;
    box-shadow: $card-shadow;
    
    &.top {
      margin-bottom: 8px;
@@ -206,7 +205,7 @@
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: $primary-blue;
          background: $primary;
          color: white;
          display: flex;
          align-items: center;
@@ -214,7 +213,7 @@
          font-weight: bold;
          
          &.usdt {
            background: $success-green;
            background: $success;
          }
        }
        
@@ -238,7 +237,7 @@
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: $primary-blue;
        background: $primary;
        color: white;
        border: none;
        display: flex;
@@ -251,44 +250,38 @@
  }
  
  .swap-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: $bg-dark;
    width: 48px;
    height: 48px;
    border-radius: $radius-round;
    background: $primary;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -20px auto;
    margin: -24px auto;
    position: relative;
    z-index: 1;
    font-size: 20px;
    cursor: pointer;
    box-shadow: $button-shadow;
    
    svg {
      width: 24px;
      height: 24px;
    }
  }
}

.trade-button-wrapper {
  padding: 0 16px 16px;
  
  .trade-button {
    width: 100%;
    background: $primary-blue;
    color: white;
    border: none;
    border-radius: $radius-lg;
    padding: 16px;
    font-size: $font-lg;
    font-weight: 500;
    cursor: pointer;
  }
  padding: 0 $spacing-lg $spacing-lg;
}

.bottom-info {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  padding: $spacing-md $spacing-lg;
  font-size: $font-sm;
  color: $text-secondary;
  border-top: 1px solid $border-light;
  background: $bg-tertiary;
  margin-top: $spacing-lg;
}
</style>