wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加移动端页面组件和图片资源

Browse Source
This commit is contained in:
wangqiao
2025-09-03 17:06:39 +08:00
parent 7f2edb91e4
commit b1d2378cec
37 changed files with 2426 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
pages/mobile/user/index.vue Normal file
View File

@ -0,0 +1,345 @@
<template>
<div class="user-container">
<!-- 顶部蓝色背景 -->
<div class="top-bg"></div>
<!-- 用户信息卡片 -->
<div class="user-card">
<!-- 用户信息 -->
<div class="user-info">
<img class="avatar" src="/static/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="@/static/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="@/static/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="@/static/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="@/static/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>