From 6a39094090bb96721acd11941d84c84336faefd0 Mon Sep 17 00:00:00 2001
From: zj <1772600164@qq.com>
Date: Fri, 09 Jan 2026 18:59:24 +0800
Subject: [PATCH] 1

---
 src/views/Settings.vue |   81 ++++++++++++++++++++++------------------
 1 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 7167b11..ea4ebfe 100644
--- a/src/views/Settings.vue
+++ b/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>
+

--
Gitblit v1.9.3