1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

 src/views/Market.vue

@@ -3,10 +3,10 @@
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-input-wrapper">
        <span class="search-icon">🔍</span>
        <Icon icon="solar:magnifer-bold" class="search-icon" />
        <span class="search-placeholder">搜索代币/合约/股票/DApp</span>
      </div>
      <div class="search-scan">☐</div>
      <Icon icon="solar:qr-code-bold" class="search-scan" />
    </div>

    <!-- 主标签 -->
@@ -19,40 +19,40 @@
    <!-- 功能图标 -->
    <div class="feature-icons">
      <div class="feature-item">
        <div class="feature-icon blue">G</div>
        <Icon icon="solar:radar-bold" class="feature-icon blue" />
        <span>金狗雷达</span>
      </div>
      <div class="feature-item">
        <div class="feature-icon black">-</div>
        <Icon icon="solar:scanner-bold" class="feature-icon black" />
        <span>扫链</span>
      </div>
      <div class="feature-item">
        <div class="feature-icon blue">👁</div>
        <Icon icon="solar:eye-bold" class="feature-icon blue" />
        <span>监控</span>
      </div>
      <div class="feature-arrow">></div>
      <Icon icon="solar:arrow-right-linear" class="feature-arrow" />
    </div>

    <!-- 市场热度 -->
    <div class="market-hotness">
      <div class="section-title">市场热度</div>
      <div class="hotness-cards">
        <div class="hotness-card">
        <Card hoverable class="hotness-card">
          <div class="hotness-name">中文潮流</div>
          <div class="hotness-change up">+39.68%</div>
          <div class="hotness-volume">290.5K</div>
        </div>
        <div class="hotness-card">
        </Card>
        <Card hoverable class="hotness-card">
          <div class="hotness-name">日语文化</div>
          <div class="hotness-change up">+0.75%</div>
          <div class="hotness-volume">97.3K</div>
        </div>
        <div class="hotness-card">
        </Card>
        <Card hoverable class="hotness-card">
          <div class="hotness-name">鲸鱼</div>
          <div class="hotness-change up">+131.09%</div>
          <div class="hotness-volume">24.8K</div>
        </div>
        <div class="hotness-arrow">></div>
        </Card>
        <Icon icon="solar:arrow-right-linear" class="hotness-arrow" />
      </div>
    </div>

@@ -79,14 +79,14 @@
    </div>

    <!-- 提醒横幅 -->
    <div class="alert-banner">
    <Card class="alert-banner">
      <span>开启提醒,第一时间获取 Hot Picks 上新 开启</span>
      <span class="close-icon">×</span>
    </div>
      <Icon icon="solar:close-circle-bold" class="close-icon" />
    </Card>

    <!-- 代币列表 -->
    <div class="token-list">
      <div class="token-item" v-for="token in tokenData" :key="token.id">
      <Card hoverable class="token-item" v-for="token in tokenData" :key="token.id">
        <div class="token-left">
          <div class="token-icon">{{ token.icon }}</div>
          <div class="token-info">
@@ -107,8 +107,8 @@
            {{ token.change > 0 ? '+' : '' }}{{ token.change }}%
          </div>
        </div>
        <div class="token-arrow">></div>
      </div>
        <Icon icon="solar:arrow-right-linear" class="token-arrow" />
      </Card>
    </div>

    <!-- 底部导航 -->
@@ -118,7 +118,9 @@

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

const tokenData = ref([
  { id: 1, icon: '🐴', name: '我踏马来了', badge: '👍', badgeType: 'green', time: '7D', marketCap: '$702.53万', volume: '$2,501.02万', price: '$0.0070253', change: 203.63 },
@@ -153,6 +155,8 @@
    
    .search-icon {
      font-size: 16px;
      width: 16px;
      height: 16px;
    }
    
    .search-placeholder {
@@ -168,22 +172,32 @@
    align-items: center;
    justify-content: center;
    font-size: 18px;
    
    svg {
      width: 24px;
      height: 24px;
    }
  }
}

.main-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;
  
  .tab-item {
    font-size: $font-md;
    color: $text-secondary;
    padding: $spacing-xs $spacing-md;
    border-radius: $radius-pill;
    transition: all $transition-base;
    
    &.active {
      color: $text-primary;
      font-weight: 500;
      color: $primary;
      font-weight: 600;
      background: $primary-light;
    }
  }
}
@@ -191,8 +205,10 @@
.feature-icons {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 24px;
  padding: $spacing-lg;
  gap: $spacing-xxl;
  margin-bottom: $spacing-lg;
  background: $bg-tertiary;
  
  .feature-item {
    display: flex;
@@ -210,8 +226,13 @@
      color: white;
      font-weight: bold;
      
      svg {
        width: 24px;
        height: 24px;
      }
      
      &.blue {
        background: $primary-blue;
        background: $primary;
      }
      
      &.black {
@@ -228,6 +249,8 @@
  .feature-arrow {
    margin-left: auto;
    color: $text-tertiary;
    width: 18px;
    height: 18px;
  }
}

@@ -246,9 +269,9 @@
    overflow-x: auto;
    
    .hotness-card {
      background: $primary-light-blue;
      background: $primary-light;
      border-radius: $radius-lg;
      padding: 12px 16px;
      padding: $spacing-md $spacing-lg !important;
      min-width: 100px;
      
      .hotness-name {
@@ -277,64 +300,86 @@
      color: $text-tertiary;
      display: flex;
      align-items: center;
      width: 20px;
      height: 20px;
    }
  }
}

.secondary-nav {
  display: flex;
  padding: 12px 16px;
  gap: 16px;
  padding: $spacing-md $spacing-lg;
  gap: $spacing-lg;
  overflow-x: auto;
  border-bottom: 1px solid $border-light;
  margin-bottom: $spacing-sm;
  background: $bg-tertiary;
  
  .nav-item {
    font-size: $font-md;
    color: $text-secondary;
    white-space: nowrap;
    padding: $spacing-xs $spacing-md;
    border-radius: $radius-pill;
    transition: all $transition-base;
    
    &.active {
      color: $primary-blue;
      font-weight: 500;
      color: $primary;
      font-weight: 600;
      background: $primary-light;
    }
  }
}

.data-filters {
  display: flex;
  padding: 8px 16px;
  gap: 12px;
  padding: $spacing-sm $spacing-lg;
  gap: $spacing-md;
  font-size: $font-xs;
  color: $text-secondary;
  border-bottom: 1px solid $border-light;
  margin-bottom: $spacing-sm;
  background: $bg-tertiary;
  border-radius: $radius-md;
  
  .filter-item {
    flex: 1;
    text-align: center;
    padding: $spacing-xs;
    border-radius: $radius-sm;
    transition: all $transition-base;
    
    &:hover {
      background: $bg-card;
    }
  }
}

.alert-banner {
  background: $primary-light-blue;
  padding: 12px 16px;
  margin: 0 $spacing-lg $spacing-lg;
  padding: $spacing-md $spacing-lg !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-sm;
  color: $primary-blue;
  background: $primary-light;
  color: $primary;
  font-weight: 500;
  
  .close-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: $primary;
  }
}

.token-list {
  padding: 0 $spacing-lg;
  
  .token-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid $border-light;
    padding: $spacing-md $spacing-lg !important;
    margin-bottom: $spacing-sm;
    
    .token-left {
      display: flex;
@@ -370,11 +415,11 @@
            font-size: $font-xs;
            
            &.green {
              color: $success-green;
              color: $success;
            }
            
            &.yellow {
              color: $warning-orange;
              color: $warning;
            }
          }
          
@@ -418,7 +463,8 @@
    
    .token-arrow {
      color: $text-tertiary;
      font-size: 16px;
      width: 18px;
      height: 18px;
    }
  }
}