<template>
|
<div class="settings-page">
|
<!-- 标题栏 -->
|
<div class="header">
|
<Icon icon="solar:arrow-left-linear" class="back-icon" @click="$router.back()" />
|
<h1 class="page-title">设置</h1>
|
</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>
|
<Icon icon="solar:copy-bold" class="copy-icon" />
|
</div>
|
</div>
|
<Icon icon="solar:arrow-right-linear" class="arrow-icon" />
|
</Card>
|
|
<!-- 绑定交易所 -->
|
<Card class="bind-section">
|
<div class="bind-content">
|
<span>绑定 Bitget 交易所账号</span>
|
</div>
|
<AppButton variant="primary" size="small" class="bind-btn">去绑定</AppButton>
|
</Card>
|
|
<!-- 设置列表 -->
|
<div class="settings-list">
|
<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>
|
<Icon icon="solar:arrow-right-linear" class="arrow-icon" />
|
</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: '钱包安全' },
|
{ 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 {
|
width: 24px;
|
height: 24px;
|
cursor: pointer;
|
color: $text-primary;
|
}
|
|
.page-title {
|
font-size: $font-xxl;
|
font-weight: 500;
|
}
|
}
|
|
.user-section {
|
margin: $spacing-lg;
|
padding: $spacing-lg !important;
|
display: flex;
|
align-items: center;
|
gap: $spacing-md;
|
|
.user-avatar {
|
width: 60px;
|
height: 60px;
|
border-radius: $radius-round;
|
background: linear-gradient(135deg, $primary 0%, $success 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
|
svg {
|
width: 30px;
|
height: 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 {
|
width: 16px;
|
height: 16px;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.arrow-icon {
|
color: $text-tertiary;
|
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;
|
|
.bind-content {
|
font-size: $font-md;
|
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;
|
|
.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;
|
width: 18px;
|
height: 18px;
|
}
|
}
|
}
|
}
|
</style>
|
