|
|
@@ -1,6 +1,208 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- mine
|
|
|
+ <view class="head">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/minePhoto.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ 用户191012
|
|
|
+ </view>
|
|
|
+ <view class="modification">
|
|
|
+ 点击修改个人信息
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="my-children">
|
|
|
+ <view class="top">
|
|
|
+ <view class="text">
|
|
|
+ 我的子女
|
|
|
+ </view>
|
|
|
+ <view class="add">
|
|
|
+ 添加
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="children">
|
|
|
+ <view class="check-box">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/photo2.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ 周梓轩
|
|
|
+ </view>
|
|
|
+ <view class="age">
|
|
|
+ 4岁1个月
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="radio">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="" />
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="check-box">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/zixuan.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ 王紫瑄
|
|
|
+ </view>
|
|
|
+ <view class="age">
|
|
|
+ 6岁7个月
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="radio">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="" />
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="class-times">
|
|
|
+ <view class="box">
|
|
|
+ <view class="times">
|
|
|
+ 36节
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 购买课次
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-line direction="col" color="rgba(232, 232, 232, 1)" length="80rpx" margin="auto 0"></u-line>
|
|
|
+ <view class="box">
|
|
|
+ <view class="times">
|
|
|
+ 4节
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 赠送课次
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="option-group">
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-user-smile-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 人脸信息采集
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ <view class="text">
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-smartphone-line@1x(1).png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 绑定手机
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ <view class="text">
|
|
|
+ 155****0000
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-file-edit-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 意见反馈
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-customer-service-2-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 联系我们
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ <view class="text">
|
|
|
+ 0716-8888888
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-spam-3-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 注销账号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ <view class="text">
|
|
|
+ 注销后无法恢复，请谨慎操作
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-logout-box-r-line@1x(1).png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 退出账号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="value">
|
|
|
+ <view class="text">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
<ParentsTabbar :current="3" ref="tabbarMain"></ParentsTabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -22,6 +224,179 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .head{
|
|
|
+ padding: 48rpx 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .photo{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ border: 4rpx solid rgba(255, 255, 255, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infos{
|
|
|
+ margin-left: 32rpx;
|
|
|
+ .name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .modification{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+.my-children{
|
|
|
+ margin: 0 32rpx;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: linear-gradient(90deg, rgba(13,186,199,1) 0%,rgba(37,209,146,1) 100%);
|
|
|
+ .top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .text{
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .add{
|
|
|
+ width: 120rpx;
|
|
|
+ line-height: 28px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(255, 174, 0, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .children{
|
|
|
+ margin-top: 12px;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ padding: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .check-box{
|
|
|
+ padding: 16rpx 40rpx 16rpx 16rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background-color: rgba(13, 186, 199, 0.1);
|
|
|
+ border: 1px solid rgba(13, 186, 199, 0.5);
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ .photo{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infos{
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+ .age{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .radio{
|
|
|
+ position: absolute;
|
|
|
+ bottom: -2rpx;
|
|
|
+ right: -8rpx;
|
|
|
+ /deep/.uni-radio-input{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: rgba(221, 241, 242, 1);
|
|
|
+ }
|
|
|
+ /deep/.uni-radio-input-checked{
|
|
|
+ background-color: #43C9D3 !important;
|
|
|
+ border-color:#43C9D3 !important ;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.class-times{
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 0;
|
|
|
+ margin: 12px 16px;
|
|
|
+
|
|
|
+ .box{
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ .times{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.option-group{
|
|
|
+ margin: 0 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-bottom: 1px solid rgba(244, 244, 244, 1);
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 28rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
</style>
|
