我的-页前端切页面完成
This commit is contained in:
田岩
+282
-31
@@ -1,46 +1,297 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="main_div max_page">
|
<view class="main_div max_page">
|
||||||
<view class="empty_div">
|
<nav-bar :is_seat="false"></nav-bar>
|
||||||
<image class="img" src="/static/images/common/default_img.png"></image>
|
|
||||||
<view class="text">
|
<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>
|
||||||
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
computed
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onPullDownRefresh
|
||||||
|
} from '@dcloudio/uni-app'
|
||||||
|
onPullDownRefresh(() => {
|
||||||
|
console.log('下拉刷新');
|
||||||
|
// uni.stopPullDownRefresh();
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.main_div{
|
$bg-margin-left: 50rpx;
|
||||||
background-color: #f9faff;
|
|
||||||
// background-color: red;
|
// 下方单元格
|
||||||
display: flex;
|
.cell_div {
|
||||||
flex-direction: column;
|
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||||||
align-items: center;
|
background: #FFFFFF;
|
||||||
justify-content: space-around;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
justify-content: space-around;
|
||||||
//
|
z-index: 101;
|
||||||
.img{
|
|
||||||
width: 388rpx;
|
.group {
|
||||||
height: 335rpx;
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
.text{
|
|
||||||
|
.item {
|
||||||
margin-top: 20rpx;
|
display: flex;
|
||||||
height: 40rpx;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
font-family: PingFangSC, PingFang SC;
|
align-items: center;
|
||||||
font-weight: 400;
|
|
||||||
font-size: 29rpx;
|
// background-color: red;
|
||||||
color: #4375C9;
|
.icon {
|
||||||
line-height: 40rpx;
|
width: 88rpx;
|
||||||
text-align: center;
|
height: 86rpx;
|
||||||
font-style: normal;
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
Reference in New Issue
Block a user