|
|
@@ -1,7 +1,81 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
-
|
|
|
- <h1>1111</h1>
|
|
|
+ <u-navbar back-text="我的"></u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <view class="data">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/photowoman.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ 夏奕琳
|
|
|
+ </view>
|
|
|
+ <view class="project">
|
|
|
+ 中国舞项目-芭蕾舞老师
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="edit">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riFill-mark-pen-fill@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 编辑资料
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="option">
|
|
|
+ <view class="option-item">
|
|
|
+ <view class="item-name">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-calendar-check-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 授课记录
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#b3b3b3"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="option-item">
|
|
|
+ <view class="item-name">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-question-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 帮助中心
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#b3b3b3"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="option-item">
|
|
|
+ <view class="item-name">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../../assets/img/riLine-logout-box-r-line@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 退出账号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-right" color="#b3b3b3"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -29,6 +103,95 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main{
|
|
|
+ padding: 68rpx 0 68rpx 32rpx;
|
|
|
+ .data{
|
|
|
+ display: flex;
|
|
|
+ .photo{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 50px;
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(35, 72, 75, 15);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infos{
|
|
|
+ margin-left: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .project{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit{
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 108px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ border-radius: 50px 0px 0px 50px;
|
|
|
+ background: linear-gradient(90deg, rgba(25,196,124,1) 0%,rgba(13,186,199,1) 51.8%,rgba(49,170,240,1) 100%);
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 2px 8px 12px 0px rgba(79, 226, 157, 15);
|
|
|
+ .icon{
|
|
|
+ margin-left: 32rpx;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .option{
|
|
|
+ margin-top: 48rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+ .option-item{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item-name{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ img{
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
</style>
|
