最新状态
This commit is contained in:
@@ -1,19 +1,401 @@
|
||||
<template>
|
||||
<view>
|
||||
</view>
|
||||
<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">
|
||||
<u-icon name="phone" size="14" color="rgba(255,255,255,0.7)"></u-icon>
|
||||
<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">
|
||||
<text class="stat-value">12</text>
|
||||
<text class="stat-label">我的项目</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">8</text>
|
||||
<text class="stat-label">记录数</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">8</text>
|
||||
<text class="stat-label">学员数</text>
|
||||
</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 project-icon">
|
||||
<u-icon name="list" size="26" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-title">项目管理</text>
|
||||
<text class="menu-desc">管理训练项目和设置</text>
|
||||
</view>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-divider"></view>
|
||||
|
||||
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/student')">
|
||||
<view class="menu-icon academy-icon">
|
||||
<u-icon name="grid" size="26" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-title">学员管理</text>
|
||||
<text class="menu-desc">管理学员信息和课程</text>
|
||||
</view>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-divider"></view>
|
||||
|
||||
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/analyze')" >
|
||||
<view class="menu-icon analysis-icon">
|
||||
<u-icon name="order" size="26" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-title">数据分析</text>
|
||||
<text class="menu-desc">查看训练数据和统计</text>
|
||||
</view>
|
||||
<view class="menu-arrow">
|
||||
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow,onLoad } from "@dcloudio/uni-app";
|
||||
onLoad(() => {
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app"
|
||||
import { Service } from '@/Service/Service'
|
||||
|
||||
});
|
||||
onLoad(() => {
|
||||
|
||||
onShow(() => {
|
||||
})
|
||||
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 跳转到设置
|
||||
const goToSettings = () => {
|
||||
Service.Msg('系统设置功能开发中')
|
||||
}
|
||||
|
||||
// 跳转到关于
|
||||
const goToAbout = () => {
|
||||
Service.Msg('关于我们功能开发中')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<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%, #36cfc9 50%, #096dd9 100%);
|
||||
border-radius: 28rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 12rpx 32rpx rgba(24, 144, 255, 0.35),
|
||||
0 4rpx 12rpx rgba(24, 144, 255, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60%;
|
||||
right: -40%;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -40%;
|
||||
left: -20%;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 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: 24rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能菜单区域 */
|
||||
.menu-section,
|
||||
.settings-section {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.menu-card {
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 10rpx 0;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 30rpx;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(24, 144, 255, 0.05) 0%, transparent 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #fafafa;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&.project-icon {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
}
|
||||
|
||||
&.academy-icon {
|
||||
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
||||
}
|
||||
|
||||
&.analysis-icon {
|
||||
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
|
||||
}
|
||||
|
||||
&.settings-icon {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
}
|
||||
|
||||
&.about-icon {
|
||||
background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
|
||||
.menu-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
.menu-icon {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
transform: translateX(6rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1rpx;
|
||||
background: linear-gradient(90deg, transparent 0%, #f0f0f0 20%, #f0f0f0 80%, transparent 100%);
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user