tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的-页前端切页面完成

Browse Source
This commit is contained in:
田岩
2025-06-16 20:11:48 +08:00
parent 900ee24f6c
commit adec5a0338
1 changed files with 282 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/me/index.vue
+282 -31
View File
@@ -1,46 +1,297 @@
<template>
<view class="main_div max_page">
<view class="empty_div">
<image class="img" src="/static/images/common/default_img.png"></image>
<view class="text">
页面建设中，敬请期待…
<nav-bar :is_seat="false"></nav-bar>
<view class="bg_div">
<image src="/static/images/me/bg.png" class="bg_img"></image>
<view class="user_data_div">
<!-- 用户个人信息 -->
<view class="personal_information">
<view class="profile">
<image class="img_100" src="/static/images/test/touxiang.png"></image>
</view>
<view class="personal_information_data">
<view class="name_sex_div">
<view class="name">
顾青裴
</view>
<view class="sex">
<!-- <image class="img_100" src="/static/images/me/man.png"></image> -->
<image class="img_100" src="/static/images/me/wuman.png"></image>
</view>
</view>
<view class="work_number_div">
工号：15688749934
</view>
<view class="fl1"></view>
</view>
</view>
<!-- 用户学习时间信息 -->
<view class="study_information">
<view class="item">
<view class="top">累计学习时长</view>
<view class="bottom">
<uv-count-to :startVal="15" :endVal="15" :useEasing="true" :decimals="1"></uv-count-to>h
</view>
</view>
<view class="item">
<view class="top">累计完成任务</view>
<view class="bottom">
<uv-count-to :startVal="24" :endVal="24" :useEasing="true"></uv-count-to>
</view>
</view>
<view class="item">
<view class="top">累计获得积分</view>
<view class="bottom">
<uv-count-to :startVal="125" :endVal="125" :useEasing="true"></uv-count-to>
</view>
</view>
</view>
</view>
</view>
<!-- 4个导航 -->
<view class="navigation_div">
<view class="group">
<view class="item">
<image class="icon" src="@/static/images/me/study.png"></image>
<view class="title">学习记录</view>
</view>
<view class="item">
<image class="icon" src="@/static/images/me/todo.png"></image>
<view class="title">待办任务</view>
</view>
<view class="item">
<image class="icon" src="@/static/images/me/examination.png"></image>
<view class="title">考试记录</view>
</view>
<view class="item">
<image class="icon" src="@/static/images/me/report.png"></image>
<view class="title">我的报告</view>
</view>
</view>
</view>
<view class="cell_div">
<uv-cell-group :border="false">
<uv-cell title='消息通知' :isLink="true"></uv-cell>
<uv-cell title='排行榜' :isLink="true"></uv-cell>
<uv-cell title='问答记录' :isLink="true"></uv-cell>
<uv-cell title='竞赛记录' :isLink="true" :clickable="false" :border="false"></uv-cell>
</uv-cell-group>
</view>
<view class="cell_div">
<uv-cell-group :border="false">
<uv-cell title='设置' :isLink="true"></uv-cell>
<uv-cell title='客服' :isLink="true"></uv-cell>
<uv-cell title='退出登录' :isLink="true" :clickable="false" :border="false"></uv-cell>
</uv-cell-group>
</view>
<tabbar-shadow></tabbar-shadow>
</view>
</template>
<script>
<script setup>
import {
ref,
computed
} from 'vue';
import {
onPullDownRefresh
} from '@dcloudio/uni-app'
onPullDownRefresh(() => {
console.log('下拉刷新');
// uni.stopPullDownRefresh();
})
</script>
<style scoped lang="scss">
.main_div{
background-color: #f9faff;
// background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
$bg-margin-left: 50rpx;
// 下方单元格
.cell_div {
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
background: #FFFFFF;
border-radius: 15rpx;
z-index: 101;
overflow: hidden;
// 为了让线缩进来24单位
:deep(.uv-line) {
width: calc(100% - 48rpx) !important;
margin: 0 24rpx !important;
}
:deep(.uv-cell__body) {
padding: 12px 15px;
}
}
.empty_div{
// margin-top: 40%;
// 快捷导航栏
.navigation_div {
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
padding: 24rpx 0 20rpx 0;
background-color: #FFFFFF;
border-radius: 23rpx;
display: flex;
flex-direction: column;
align-items: center;
//
.img{
width: 388rpx;
height: 335rpx;
justify-content: space-around;
z-index: 101;
.group {
display: flex;
justify-content: space-around;
}
.text{
margin-top: 20rpx;
height: 40rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 29rpx;
color: #4375C9;
line-height: 40rpx;
text-align: center;
font-style: normal;
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// background-color: red;
.icon {
width: 88rpx;
height: 86rpx;
}
.title {
margin-top: 10rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 25rpx;
color: #323E57;
line-height: 35rpx;
text-align: left;
font-style: normal;
}
}
}
.bg_div {
display: flex;
flex-direction: column;
position: relative;
padding: 0 $bg-margin-left;
z-index: 50;
.bg_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
height: 858rpx;
}
// 个人信息
.user_data_div {
margin-top: 158rpx;
background: linear-gradient(180deg, rgba(241, 245, 255, .5) 0%, #F6F9FE 50%, #FFFFFF 100%);
border-radius: 14rpx;
border: 2rpx solid #ffffff;
box-shadow: #F6F8FF 0 0 2rpx;
.personal_information {
padding: 20rpx 0 0 26rpx;
display: flex;
// 个人头像框框
.profile {
border-radius: 100%;
border: 2px solid #ffffff;
width: 108rpx;
height: 108rpx;
overflow: hidden;
}
// 头像右边的信息
.personal_information_data {
display: flex;
flex-direction: column;
margin-left: 26rpx;
// 上边的姓名性别盒子
.name_sex_div {
display: flex;
margin-top: 6rpx;
.name {
font-family: PingFangSC;
font-weight: 600;
font-size: 28rpx;
color: #000000;
line-height: 40rpx;
}
.sex {
margin-left: 10rpx;
width: 30rpx;
height: 30rpx;
}
}
.work_number_div {
font-family: PingFangSC;
font-weight: 400;
font-size: 25rpx;
color: #666666;
line-height: 38rpx;
text-align: left;
font-style: normal;
}
}
}
.study_information {
display: flex;
justify-content: space-around;
z-index: 20;
margin: 30rpx 50rpx;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.top {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 25rpx;
color: #666666;
line-height: 35rpx;
text-align: center;
font-style: normal;
}
.bottom {
margin-top: 5%;
font-weight: bold;
font-size: 50rpx;
color: #000000;
line-height: 58rpx;
text-align: left;
font-style: normal;
text-align: center;
// 数字滚动组件
:deep(.uv-count-num) {
font-weight: bold !important;
font-size: 50rpx !important;
color: #000000 !important;
}
}
}
}
}
}
.main_div {
display: flex;
flex-direction: column;
background-color: #F6F8FF;
}
</style>