346 lines
7.9 KiB
Vue
346 lines
7.9 KiB
Vue
<template>
|
||
<div class="user-container">
|
||
<!-- 顶部蓝色背景 -->
|
||
<div class="top-bg"></div>
|
||
|
||
<!-- 用户信息卡片 -->
|
||
<div class="user-card">
|
||
<!-- 用户信息 -->
|
||
<div class="user-info">
|
||
<img class="avatar" src="~/assets/images/avater2.png" />
|
||
<div class="login-info">
|
||
<div class="login-text">登录/注册</div>
|
||
<div class="login-desc">登录注册后享受更多精彩内容</div>
|
||
</div>
|
||
<!-- 设置图标 -->
|
||
<div class="setting-icon">⚙️</div>
|
||
</div>
|
||
|
||
<!-- 数据统计 -->
|
||
<div class="data-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-num">200</div>
|
||
<div class="stat-text">金币余额（元）</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-num">135</div>
|
||
<div class="stat-text">今日浏览量</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-num">370</div>
|
||
<div class="stat-text">今日收益（元）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 资源中心区域 -->
|
||
<div class="resource-section">
|
||
<div class="section-title">资源中心</div>
|
||
|
||
<div class="resource-grid">
|
||
<div class="resource-item">
|
||
<div class="resource-icon blue">
|
||
<img
|
||
src="~/assets/images/my_release.png"
|
||
alt=""
|
||
srcset=""
|
||
class="w-77rpx h-71rpx"
|
||
/>
|
||
</div>
|
||
<span class="resource-text">我的发布</span>
|
||
</div>
|
||
|
||
<div class="resource-item">
|
||
<div class="resource-icon blue">
|
||
<img
|
||
src="~/assets/images/my_download.png"
|
||
alt=""
|
||
srcset=""
|
||
class="w-98rpx h-68rpx"
|
||
/>
|
||
</div>
|
||
<span class="resource-text">我的下载</span>
|
||
</div>
|
||
|
||
<div class="resource-item">
|
||
<div class="resource-icon blue">
|
||
<img
|
||
src="~/assets/images/my_attention.png"
|
||
alt=""
|
||
srcset=""
|
||
class="w-76rpx h-77rpx"
|
||
/>
|
||
</div>
|
||
<span class="resource-text">我的关注</span>
|
||
</div>
|
||
|
||
<div class="resource-item">
|
||
<div class="resource-icon blue">
|
||
<img
|
||
src="~/assets/images/my_collect.png"
|
||
alt=""
|
||
srcset=""
|
||
class="w-64rpx h-73rpx"
|
||
/>
|
||
</div>
|
||
<span class="resource-text">我的收藏</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能列表 -->
|
||
<div class="function-list">
|
||
<!-- 安全中心 -->
|
||
<div class="function-item" @click="navigateTo('/mobile/safety')">
|
||
<div class="function-left">
|
||
<div class="function-icon orange">✅</div>
|
||
<span class="function-text">安全中心</span>
|
||
</div>
|
||
<span>›</span>
|
||
</div>
|
||
|
||
<!-- 消息中心 -->
|
||
<div class="function-item" @click="navigateTo('/mobile/message_notice')">
|
||
<div class="function-left">
|
||
<div class="function-icon blue">🔔</div>
|
||
<span class="function-text">消息中心</span>
|
||
</div>
|
||
<span>›</span>
|
||
</div>
|
||
|
||
<!-- 交易记录 -->
|
||
<div
|
||
class="function-item"
|
||
@click="navigateTo('/mobile/transaction_record')"
|
||
>
|
||
<div class="function-left">
|
||
<div class="function-icon green">🧾</div>
|
||
<span class="function-text">交易记录</span>
|
||
</div>
|
||
<span>›</span>
|
||
</div>
|
||
|
||
<!-- 关于我们 -->
|
||
<div class="function-item" @click="navigateTo('/mobile/about')">
|
||
<div class="function-left">
|
||
<div class="function-icon purple">ℹ️</div>
|
||
<span class="function-text">关于我们</span>
|
||
</div>
|
||
<span>›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
definePageMeta({ layout: 'm' })
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter()
|
||
function navigateTo(url: string) {
|
||
router.push(url)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 颜色变量
|
||
$primary-color: #0080ff;
|
||
$orange-color: #ff9500;
|
||
$green-color: #34c759;
|
||
$purple-color: #af52de;
|
||
$text-primary: #333;
|
||
$text-secondary: #999;
|
||
$bg-color: #f7f7f7;
|
||
$card-bg: #ffffff;
|
||
$border-color: #f5f5f5;
|
||
|
||
.user-container {
|
||
min-height: 100vh;
|
||
background-color: $bg-color;
|
||
position: relative;
|
||
padding-top: 127rpx;
|
||
|
||
// 顶部蓝色背景
|
||
.top-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 200rpx;
|
||
background-color: $primary-color;
|
||
z-index: 0;
|
||
}
|
||
|
||
// 用户信息卡片
|
||
.user-card {
|
||
position: relative;
|
||
margin: 0 20rpx;
|
||
padding: 30rpx;
|
||
background-color: $card-bg;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
z-index: 1;
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
margin-right: 20rpx;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.login-info {
|
||
flex: 1;
|
||
|
||
.login-text {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
color: $text-primary;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.login-desc {
|
||
font-size: 24rpx;
|
||
color: $text-secondary;
|
||
}
|
||
}
|
||
|
||
.setting-icon {
|
||
padding: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 数据统计
|
||
.data-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.stat-num {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
color: $text-primary;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.stat-text {
|
||
font-size: 24rpx;
|
||
color: $text-secondary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 资源中心
|
||
.resource-section {
|
||
margin: 20rpx;
|
||
padding: 30rpx;
|
||
background-color: $card-bg;
|
||
border-radius: 16rpx;
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: $text-primary;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.resource-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.resource-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 25%;
|
||
|
||
.resource-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
&.blue {
|
||
// background-color: $primary-color;
|
||
}
|
||
}
|
||
|
||
.resource-text {
|
||
font-size: 28rpx;
|
||
color: $text-primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 功能列表
|
||
.function-list {
|
||
margin: 20rpx;
|
||
background-color: $card-bg;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.function-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1px solid $border-color;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.function-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.function-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
|
||
&.orange {
|
||
background-color: $orange-color;
|
||
}
|
||
|
||
&.blue {
|
||
background-color: $primary-color;
|
||
}
|
||
|
||
&.green {
|
||
background-color: $green-color;
|
||
}
|
||
|
||
&.purple {
|
||
background-color: $purple-color;
|
||
}
|
||
}
|
||
|
||
.function-text {
|
||
font-size: 30rpx;
|
||
color: $text-primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|