512 lines
11 KiB
Vue
512 lines
11 KiB
Vue
<template>
|
|
<view class="user-container">
|
|
<!-- 用户信息卡片 -->
|
|
<view class="user-card">
|
|
<view class="user-avatar">
|
|
<view class="avatar-circle">
|
|
<u-icon name="account" size="52" color="#fff"></u-icon>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="user-info">
|
|
<text class="user-nickname">游泳爱好者</text>
|
|
<view class="user-phone-wrapper">
|
|
<text class="user-phone">138****8888</text>
|
|
</view>
|
|
</view>
|
|
<view @click="Service.GoPage('/pages/userFunc/set')" class="user-edit">
|
|
<u-icon name="edit-pen" size="20" color="rgba(255,255,255,0.8)"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计数据区域 -->
|
|
<view class="stats-section">
|
|
<view class="stats-card">
|
|
<view class="stat-item" >
|
|
|
|
<view class="stat-info">
|
|
<text class="stat-value">12</text>
|
|
<text class="stat-label">我的项目</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item" >
|
|
|
|
<view class="stat-info">
|
|
<text class="stat-value">8</text>
|
|
<text class="stat-label">记录数</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item" >
|
|
<view class="stat-info">
|
|
<text class="stat-value">8</text>
|
|
<text class="stat-label">学员数</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能菜单区域 -->
|
|
<view class="menu-section">
|
|
<view class="menu-card">
|
|
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/projectList')">
|
|
<view class="menu-icon-bg project-icon-bg">
|
|
<u-icon name="list" size="28" color="#fff"></u-icon>
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="menu-header">
|
|
<text class="menu-title">项目管理</text>
|
|
<view class="menu-tag project-tag">
|
|
<text class="tag-text">常用</text>
|
|
</view>
|
|
</view>
|
|
<text class="menu-desc">管理训练项目和设置</text>
|
|
</view>
|
|
<view class="menu-arrow">
|
|
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menu-divider"></view>
|
|
|
|
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/student')">
|
|
<view class="menu-icon-bg academy-icon-bg">
|
|
<u-icon name="grid" size="28" color="#fff"></u-icon>
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="menu-header">
|
|
<text class="menu-title">学员管理</text>
|
|
<view class="menu-tag academy-tag">
|
|
<text class="tag-text">核心</text>
|
|
</view>
|
|
</view>
|
|
<text class="menu-desc">管理学员信息和课程</text>
|
|
</view>
|
|
<view class="menu-arrow">
|
|
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menu-divider"></view>
|
|
|
|
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/analyze')">
|
|
<view class="menu-icon-bg analysis-icon-bg">
|
|
<u-icon name="order" size="28" color="#fff"></u-icon>
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="menu-header">
|
|
<text class="menu-title">数据分析</text>
|
|
<view class="menu-tag analysis-tag">
|
|
<text class="tag-text">智能</text>
|
|
</view>
|
|
</view>
|
|
<text class="menu-desc">查看训练数据和统计</text>
|
|
</view>
|
|
<view class="menu-arrow">
|
|
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad } from "@dcloudio/uni-app"
|
|
import { Service } from '@/Service/Service'
|
|
|
|
onLoad(() => {
|
|
|
|
})
|
|
|
|
onShow(() => {
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 跳转到设置
|
|
const goToSettings = () => {
|
|
Service.Msg('系统设置功能开发中')
|
|
}
|
|
|
|
// 跳转到关于
|
|
const goToAbout = () => {
|
|
Service.Msg('关于我们功能开发中')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.user-container {
|
|
padding: 20rpx;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
/* 用户信息卡片 */
|
|
.user-card {
|
|
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
border-radius: 28rpx;
|
|
padding: 40rpx 30rpx;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.25);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -40%;
|
|
right: -30%;
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
left: -20%;
|
|
width: 250rpx;
|
|
height: 250rpx;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.user-avatar {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.avatar-circle {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 5rpx solid rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(20rpx);
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.avatar-badge {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 3rpx solid #fff;
|
|
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.4);
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.user-nickname {
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 14rpx;
|
|
display: block;
|
|
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.user-phone-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
|
|
.user-phone {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-edit {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
backdrop-filter: blur(10rpx);
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* 统计数据区域 */
|
|
.stats-section {
|
|
margin-bottom: 24rpx;
|
|
|
|
.stats-card {
|
|
background-color: #fff;
|
|
border-radius: 28rpx;
|
|
padding: 36rpx 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.stat-icon-bg {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
|
|
|
|
&.project-stat {
|
|
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
|
}
|
|
|
|
&.record-stat {
|
|
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
|
|
}
|
|
|
|
&.student-stat {
|
|
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
|
}
|
|
}
|
|
|
|
.stat-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 42rpx;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #333 0%, #666 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 1rpx;
|
|
height: 80rpx;
|
|
background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%);
|
|
}
|
|
}
|
|
|
|
/* 功能菜单区域 */
|
|
.menu-section,
|
|
.settings-section {
|
|
margin-bottom: 24rpx;
|
|
|
|
.menu-card {
|
|
background-color: #fff;
|
|
border-radius: 28rpx;
|
|
padding: 8rpx 0;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 36rpx 32rpx;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, rgba(24, 144, 255, 0.06) 0%, transparent 50%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:active {
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-icon-bg {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 24rpx;
|
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 6rpx;
|
|
right: 6rpx;
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.project-icon-bg {
|
|
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
|
|
}
|
|
|
|
&.academy-icon-bg {
|
|
background: linear-gradient(135deg, #52c41a 0%, #73d13d 50%, #389e0d 100%);
|
|
}
|
|
|
|
&.analysis-icon-bg {
|
|
background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
|
|
}
|
|
|
|
&.settings-icon-bg {
|
|
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
|
|
}
|
|
|
|
&.about-icon-bg {
|
|
background: linear-gradient(135deg, #722ed1 0%, #9254de 50%, #531dab 100%);
|
|
}
|
|
}
|
|
|
|
.menu-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.menu-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.menu-title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-tag {
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
|
|
&.project-tag {
|
|
background: linear-gradient(135deg, rgba(24, 144, 255, 0.12) 0%, rgba(24, 144, 255, 0.08) 100%);
|
|
color: #1890ff;
|
|
}
|
|
|
|
&.academy-tag {
|
|
background: linear-gradient(135deg, rgba(82, 196, 26, 0.12) 0%, rgba(82, 196, 26, 0.08) 100%);
|
|
color: #52c41a;
|
|
}
|
|
|
|
&.analysis-tag {
|
|
background: linear-gradient(135deg, rgba(250, 173, 20, 0.12) 0%, rgba(250, 173, 20, 0.08) 100%);
|
|
color: #faad14;
|
|
}
|
|
|
|
.tag-text {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.menu-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.menu-arrow {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.menu-item:active {
|
|
.menu-icon-bg {
|
|
transform: scale(0.92) translateY(2rpx);
|
|
}
|
|
|
|
.menu-arrow {
|
|
background: rgba(24, 144, 255, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.menu-divider {
|
|
height: 1rpx;
|
|
background: linear-gradient(90deg, transparent 0%, #f0f0f0 15%, #f0f0f0 85%, transparent 100%);
|
|
margin: 0 32rpx;
|
|
}
|
|
}
|
|
</style> |