<template>
|
<div class="settings-page">
|
<!-- 标题栏 -->
|
<div class="header">
|
<span class="back-icon" @click="$router.back()">←</span>
|
<h1 class="page-title">设置</h1>
|
</div>
|
|
<!-- 用户信息 -->
|
<div class="user-section">
|
<div class="user-avatar">⚪</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>
|
</div>
|
</div>
|
<span class="arrow-icon">></span>
|
</div>
|
|
<!-- 绑定交易所 -->
|
<div class="bind-section">
|
<div class="bind-content">
|
<span>绑定 Bitget 交易所账号</span>
|
</div>
|
<button class="bind-btn">去绑定</button>
|
</div>
|
|
<!-- 设置列表 -->
|
<div class="settings-list">
|
<div 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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
|
const settingsList = ref([
|
{ id: 1, icon: '①', text: '钱包安全' },
|
{ id: 2, icon: '📖', text: '地址簿' },
|
{ id: 3, icon: '⚙️', text: '偏好设置' },
|
{ id: 4, icon: '◎', text: '高级设置' },
|
{ id: 5, icon: '🎁', text: '邀请中心' },
|
{ id: 6, icon: '🎧', text: '获取帮助' },
|
{ id: 7, icon: '🎓', text: '加密一点通' },
|
{ id: 8, icon: '◇', text: '加入众测' },
|
{ id: 9, icon: '①', text: '关于 Bitget Wallet', version: 'v 9.30.0' }
|
])
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/styles/variables.scss';
|
|
.settings-page {
|
background: $bg-primary;
|
min-height: 100vh;
|
}
|
|
.header {
|
display: flex;
|
align-items: center;
|
padding: 16px;
|
gap: 16px;
|
|
.back-icon {
|
font-size: 24px;
|
cursor: pointer;
|
}
|
|
.page-title {
|
font-size: $font-xxl;
|
font-weight: 500;
|
}
|
}
|
|
.user-section {
|
display: flex;
|
align-items: center;
|
padding: 16px;
|
gap: 12px;
|
border-bottom: 1px solid $border-light;
|
|
.user-avatar {
|
width: 60px;
|
height: 60px;
|
border-radius: 50%;
|
background: linear-gradient(135deg, $primary-blue 0%, $success-green 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-size: 30px;
|
}
|
|
.user-details {
|
flex: 1;
|
|
.user-email {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.user-id {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: $font-sm;
|
color: $text-secondary;
|
|
.copy-icon {
|
font-size: 16px;
|
}
|
}
|
}
|
|
.arrow-icon {
|
color: $text-tertiary;
|
font-size: 18px;
|
}
|
}
|
|
.bind-section {
|
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;
|
}
|
}
|
|
.settings-list {
|
.setting-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
border-bottom: 1px solid $border-light;
|
|
.setting-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
|
.setting-icon {
|
font-size: 20px;
|
width: 24px;
|
text-align: center;
|
}
|
|
.setting-text {
|
font-size: $font-md;
|
}
|
}
|
|
.setting-right {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
|
.setting-version {
|
font-size: $font-sm;
|
color: $text-secondary;
|
}
|
|
.arrow-icon {
|
color: $text-tertiary;
|
font-size: 18px;
|
}
|
}
|
}
|
}
|
</style>
|
