页面修改
This commit is contained in:
@@ -6,12 +6,11 @@
|
||||
<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>
|
||||
@@ -23,19 +22,27 @@
|
||||
<!-- 统计数据区域 -->
|
||||
<view class="stats-section">
|
||||
<view class="stats-card">
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">12</text>
|
||||
<text class="stat-label">我的项目</text>
|
||||
<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">
|
||||
<text class="stat-value">8</text>
|
||||
<text class="stat-label">记录数</text>
|
||||
<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">
|
||||
<text class="stat-value">8</text>
|
||||
<text class="stat-label">学员数</text>
|
||||
<view class="stat-item" >
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">8</text>
|
||||
<text class="stat-label">学员数</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -44,45 +51,60 @@
|
||||
<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 class="menu-icon-bg project-icon-bg">
|
||||
<u-icon name="list" size="28" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-title">项目管理</text>
|
||||
<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="18" color="#ccc"></u-icon>
|
||||
<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 academy-icon">
|
||||
<u-icon name="grid" size="26" color="#fff"></u-icon>
|
||||
<view class="menu-icon-bg academy-icon-bg">
|
||||
<u-icon name="grid" size="28" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-title">学员管理</text>
|
||||
<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="18" color="#ccc"></u-icon>
|
||||
<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 analysis-icon">
|
||||
<u-icon name="order" size="26" color="#fff"></u-icon>
|
||||
<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">
|
||||
<text class="menu-title">数据分析</text>
|
||||
<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="18" color="#ccc"></u-icon>
|
||||
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -102,7 +124,7 @@
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -138,7 +160,7 @@
|
||||
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);
|
||||
0 4rpx 12rpx rgba(24, 144, 255, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -250,39 +272,78 @@
|
||||
|
||||
.stats-card {
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
border-radius: 28rpx;
|
||||
padding: 36rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
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;
|
||||
gap: 8rpx;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.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-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-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%);
|
||||
}
|
||||
}
|
||||
@@ -294,108 +355,159 @@
|
||||
|
||||
.menu-card {
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 10rpx 0;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
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: 32rpx 30rpx;
|
||||
transition: all 0.25s ease;
|
||||
padding: 36rpx 32rpx;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(24, 144, 255, 0.05) 0%, transparent 100%);
|
||||
background: linear-gradient(90deg, rgba(24, 144, 255, 0.06) 0%, transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #fafafa;
|
||||
|
||||
&::after {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 20rpx;
|
||||
.menu-icon-bg {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 22rpx;
|
||||
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;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&.project-icon {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6rpx;
|
||||
right: 6rpx;
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.academy-icon {
|
||||
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
||||
&.project-icon-bg {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
|
||||
}
|
||||
|
||||
&.analysis-icon {
|
||||
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
|
||||
&.academy-icon-bg {
|
||||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 50%, #389e0d 100%);
|
||||
}
|
||||
|
||||
&.settings-icon {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
&.analysis-icon-bg {
|
||||
background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
|
||||
}
|
||||
|
||||
&.about-icon {
|
||||
background: linear-gradient(135deg, #722ed1 0%, #531dab 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-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 6rpx;
|
||||
display: block;
|
||||
.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;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
&.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 {
|
||||
transition: transform 0.3s ease;
|
||||
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 {
|
||||
transform: scale(0.95);
|
||||
.menu-icon-bg {
|
||||
transform: scale(0.92) translateY(2rpx);
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
transform: translateX(6rpx);
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1rpx;
|
||||
background: linear-gradient(90deg, transparent 0%, #f0f0f0 20%, #f0f0f0 80%, transparent 100%);
|
||||
margin: 0 30rpx;
|
||||
background: linear-gradient(90deg, transparent 0%, #f0f0f0 15%, #f0f0f0 85%, transparent 100%);
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user