1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

 src/views/Settings.vue

@@ -2,49 +2,54 @@
  <div class="settings-page">
    <!-- 标题栏 -->
    <div class="header">
      <span class="back-icon" @click="$router.back()">←</span>
      <Icon icon="solar:arrow-left-linear" class="back-icon" @click="$router.back()" />
      <h1 class="page-title">设置</h1>
    </div>

    <!-- 用户信息 -->
    <div class="user-section">
      <div class="user-avatar">⚪</div>
    <Card class="user-section">
      <div class="user-avatar">
        <Icon icon="solar:user-circle-bold" />
      </div>
      <div class="user-details">
        <div class="user-email">zj0***@gmail.com</div>
        <div class="user-id">
          <span>ID: e505...9b3a</span>
          <span class="copy-icon">📋</span>
          <Icon icon="solar:copy-bold" class="copy-icon" />
        </div>
      </div>
      <span class="arrow-icon">></span>
    </div>
      <Icon icon="solar:arrow-right-linear" class="arrow-icon" />
    </Card>

    <!-- 绑定交易所 -->
    <div class="bind-section">
    <Card class="bind-section">
      <div class="bind-content">
        <span>绑定 Bitget 交易所账号</span>
      </div>
      <button class="bind-btn">去绑定</button>
    </div>
      <AppButton variant="primary" size="small" class="bind-btn">去绑定</AppButton>
    </Card>

    <!-- 设置列表 -->
    <div class="settings-list">
      <div class="setting-item" v-for="item in settingsList" :key="item.id">
      <Card hoverable class="setting-item" v-for="item in settingsList" :key="item.id">
        <div class="setting-left">
          <span class="setting-icon">{{ item.icon }}</span>
          <span class="setting-text">{{ item.text }}</span>
        </div>
        <div class="setting-right">
          <span v-if="item.version" class="setting-version">{{ item.version }}</span>
          <span class="arrow-icon">></span>
          <Icon icon="solar:arrow-right-linear" class="arrow-icon" />
        </div>
      </div>
      </Card>
    </div>
  </div>
</template>

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

const settingsList = ref([
  { id: 1, icon: '①', text: '钱包安全' },
@@ -74,8 +79,10 @@
  gap: 16px;
  
  .back-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: $text-primary;
  }
  
  .page-title {
@@ -85,22 +92,26 @@
}

.user-section {
  margin: $spacing-lg;
  padding: $spacing-lg !important;
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
  border-bottom: 1px solid $border-light;
  gap: $spacing-md;
  
  .user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, $primary-blue 0%, $success-green 100%);
    border-radius: $radius-round;
    background: linear-gradient(135deg, $primary 0%, $success 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    
    svg {
      width: 30px;
      height: 30px;
    }
  }
  
  .user-details {
@@ -120,46 +131,42 @@
      color: $text-secondary;
      
      .copy-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
        color: $text-secondary;
      }
    }
  }
  
  .arrow-icon {
    color: $text-tertiary;
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
}

.bind-section {
  margin: 0 $spacing-lg $spacing-lg;
  padding: $spacing-lg !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid $border-light;
  
  .bind-content {
    font-size: $font-md;
  }
  
  .bind-btn {
    background: $primary-blue;
    color: white;
    border: none;
    border-radius: $radius-md;
    padding: 8px 16px;
    font-size: $font-sm;
    cursor: pointer;
    font-weight: 500;
  }
}

.settings-list {
  padding: 0 $spacing-lg;
  
  .setting-item {
    margin-bottom: $spacing-sm;
    padding: $spacing-lg !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid $border-light;
    
    .setting-left {
      display: flex;
@@ -189,9 +196,11 @@
      
      .arrow-icon {
        color: $text-tertiary;
        font-size: 18px;
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>