|
@@ -55,10 +55,64 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="user-menu-service">
|
|
<view class="user-menu-service">
|
|
|
- <view class=""></view>
|
|
|
|
|
|
|
+ <view class="title">我的服务</view>
|
|
|
|
|
+ <view class="service-body">
|
|
|
|
|
+ <view class="service-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/task.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">我的任务</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="service-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/income.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">我的收益</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="service-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/certify.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">达人认证</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="service-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/service-bind.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">帐号绑定</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="user-menu-normal" v-for="(item,indx) in 2" :key="indx">
|
|
|
|
|
+ <view class="title">常用功能</view>
|
|
|
|
|
+ <view class="normal-body">
|
|
|
|
|
+ <view class="normal-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/common-favorite.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">我的收藏</view>
|
|
|
|
|
+ <view class="more"><text class="cuIcon-right"></text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="normal-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/common-history.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">浏览记录</view>
|
|
|
|
|
+ <view class="more"><text class="cuIcon-right"></text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="normal-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/common-cooperate.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">商务合作</view>
|
|
|
|
|
+ <view class="more"><text class="cuIcon-right"></text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="normal-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/common-leader.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">成为团长</view>
|
|
|
|
|
+ <view class="more"><text class="cuIcon-right"></text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="normal-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/common-address.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">收货地址</view>
|
|
|
|
|
+ <view class="more"><text class="cuIcon-right"></text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="normal-item">
|
|
|
|
|
+ <view class="icon"><image src="/static/mine/setting.png" mode="widthFix"></image></view>
|
|
|
|
|
+ <view class="name">设置</view>
|
|
|
|
|
+ <view class="more"><text class="cuIcon-right"></text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
|
|
+ <halfLogin ref="loginCom"></halfLogin>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -84,19 +138,20 @@ export default {
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
page{background-color: #f8f8f8;}
|
|
page{background-color: #f8f8f8;}
|
|
|
-.user-body .user-level-body .level-foot{display: flex;align-items: center;justify-content: space-between;gap: 20rpx;}
|
|
|
|
|
-.user-body .user-level-body .level-foot .level-step{background-color: #E4E4E4;height: 10rpx;flex: 1;border-radius: 10rpx;}
|
|
|
|
|
-.user-body .user-level-body .level-foot .level-step .success{background-color: #87E0FF;height: 10rpx;border-radius: 10rpx;}
|
|
|
|
|
-.user-body .user-level-body .level-foot .level-num{color: #999;font-size: 22rpx;}
|
|
|
|
|
-.user-body .user-level-body .level-foot .level-num text{color: #666;}
|
|
|
|
|
-.user-body .user-level-body .level-mid{margin: 10rpx 0;font-size: 22rpx;color: #8C8C8C;}
|
|
|
|
|
-.user-body .user-level-body .level-top{display: flex;align-items: center;justify-content: space-between;}
|
|
|
|
|
-.user-body .user-level-body .level-top .level-name{color: #000;font-weight: 800;font-family: "bluevBold";font-size: 30rpx;}
|
|
|
|
|
-.user-body .user-level-body .level-top .level-more{color: #666;font-size: 22rpx;}
|
|
|
|
|
|
|
|
|
|
-.user-header{position: relative;background: linear-gradient(180deg, #87e0ff 10%, #CFEEF858 55%, #f8f8f8 100%);}
|
|
|
|
|
-.user-header .header-bg{position: absolute;top: 0;left: 0;right: 0;z-index: 9998;}
|
|
|
|
|
|
|
+.user-header{position: relative;background: linear-gradient(180deg, #87e0ff 10%, rgba(207, 238, 248, 0.35) 69.55%, rgba(245, 245, 245, 0) 100%);overflow: hidden;}
|
|
|
|
|
+.user-header .header-bg{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: -304rpx;
|
|
|
|
|
+ top: -278rpx;
|
|
|
|
|
+ width: 1266rpx;
|
|
|
|
|
+ height: 608rpx;
|
|
|
|
|
+ opacity: 0.4;
|
|
|
|
|
+ mix-blend-mode: multiply;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+}
|
|
|
.user-header .header-bg image{width: 100%;}
|
|
.user-header .header-bg image{width: 100%;}
|
|
|
|
|
+
|
|
|
.user-detail-body{margin: 20rpx;display: flex;align-items: center;position: relative;z-index: 9999;}
|
|
.user-detail-body{margin: 20rpx;display: flex;align-items: center;position: relative;z-index: 9999;}
|
|
|
.user-detail-body .avatar image{width: 100rpx;height: 100rpx;border-radius: 100%;}
|
|
.user-detail-body .avatar image{width: 100rpx;height: 100rpx;border-radius: 100%;}
|
|
|
.user-detail-body .detail-info{margin-left: 20rpx;}
|
|
.user-detail-body .detail-info{margin-left: 20rpx;}
|
|
@@ -108,11 +163,36 @@ page{background-color: #f8f8f8;}
|
|
|
|
|
|
|
|
.user-body{margin: 20rpx;}
|
|
.user-body{margin: 20rpx;}
|
|
|
.user-body .user-total{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;flex-direction: row;}
|
|
.user-body .user-total{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;flex-direction: row;}
|
|
|
-.user-body .user-total .total-item{min-width: 0%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
|
|
|
|
|
|
|
+.user-body .user-total .total-item{min-width: 0%;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1;}
|
|
|
.user-body .user-total .total-item .num{color: #212226;font-size: 36rpx;font-weight: 800;line-height: 1.1;text-align: center;}
|
|
.user-body .user-total .total-item .num{color: #212226;font-size: 36rpx;font-weight: 800;line-height: 1.1;text-align: center;}
|
|
|
.user-body .user-total .total-item .name{color: rgba(21, 21, 21, 0.45);font-size: 22rpx;line-height: 1.2;text-align: center;margin-top: 10rpx;}
|
|
.user-body .user-total .total-item .name{color: rgba(21, 21, 21, 0.45);font-size: 22rpx;line-height: 1.2;text-align: center;margin-top: 10rpx;}
|
|
|
|
|
|
|
|
.user-body .user-level{background: linear-gradient(0deg, #f0fbff 0%, #b0e9ff 100%);padding: 2rpx;box-sizing: border-box;border-radius: 24rpx;margin: 20rpx 0;}
|
|
.user-body .user-level{background: linear-gradient(0deg, #f0fbff 0%, #b0e9ff 100%);padding: 2rpx;box-sizing: border-box;border-radius: 24rpx;margin: 20rpx 0;}
|
|
|
.user-body .user-level-body{padding: 28rpx 28rpx 32rpx;border-radius: 22rpx;background: linear-gradient(180deg, #def6ff 0%, #eefaff 52%, #ffffff 100%);box-sizing: border-box;}
|
|
.user-body .user-level-body{padding: 28rpx 28rpx 32rpx;border-radius: 22rpx;background: linear-gradient(180deg, #def6ff 0%, #eefaff 52%, #ffffff 100%);box-sizing: border-box;}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+.user-body .user-menu-normal{background-color: #fff;border-radius: 20rpx;padding: 28rpx;margin-bottom: 20rpx;}
|
|
|
|
|
+.user-body .user-menu-normal .title{font-size: 32rpx;color: #000;font-weight: 800;line-height: 2;}
|
|
|
|
|
+.user-body .normal-body{}
|
|
|
|
|
+.user-body .normal-body .normal-item{display: flex;align-items: center;gap: 20rpx;height: 80rpx;line-height: 80rpx;}
|
|
|
|
|
+.user-body .normal-body .normal-item:last-child{border-bottom: 0;}
|
|
|
|
|
+.user-body .normal-body .normal-item .name{font-size: 28rpx;color: #000;}
|
|
|
|
|
+.user-body .normal-body .normal-item .icon {display: flex;align-items: center;justify-content: center;}
|
|
|
|
|
+.user-body .normal-body .normal-item .icon image{width: 48rpx;height: 48rpx;}
|
|
|
|
|
+.user-body .normal-body .normal-item .more{margin-left: auto;margin-right: 0;color: rgba(0, 0,0 ,.2);}
|
|
|
|
|
+
|
|
|
|
|
+.user-body .user-menu-service{background-color: #fff;border-radius: 20rpx;padding: 28rpx;margin-bottom: 20rpx;}
|
|
|
|
|
+.user-body .user-menu-service .title{font-size: 32rpx;color: #000;font-weight: 800;line-height: 2;}
|
|
|
|
|
+.user-body .user-menu-service .service-body{display: flex;align-items: flex-start;justify-content: space-between;margin-top: 20rpx;}
|
|
|
|
|
+.user-body .user-menu-service .service-body .icon image{width: 72rpx;height: 72rpx;}
|
|
|
|
|
+.user-body .user-menu-service .service-body .name{color: #212226;font-size: 28rpx;margin-top: 10rpx;}
|
|
|
|
|
+.user-body .user-menu-service .service-body .service-item{display: flex;align-items: center;flex-direction: column;}
|
|
|
|
|
+.user-body .user-level-body .level-foot{display: flex;align-items: center;justify-content: space-between;gap: 20rpx;}
|
|
|
|
|
+.user-body .user-level-body .level-foot .level-step{background-color: #E4E4E4;height: 10rpx;flex: 1;border-radius: 10rpx;}
|
|
|
|
|
+.user-body .user-level-body .level-foot .level-step .success{background-color: #87E0FF;height: 10rpx;border-radius: 10rpx;}
|
|
|
|
|
+.user-body .user-level-body .level-foot .level-num{color: #999;font-size: 22rpx;}
|
|
|
|
|
+.user-body .user-level-body .level-foot .level-num text{color: #666;}
|
|
|
|
|
+.user-body .user-level-body .level-mid{margin: 10rpx 0;font-size: 22rpx;color: #8C8C8C;}
|
|
|
|
|
+.user-body .user-level-body .level-top{display: flex;align-items: center;justify-content: space-between;}
|
|
|
|
|
+.user-body .user-level-body .level-top .level-name{color: #000;font-weight: 800;font-family: "bluevBold";font-size: 30rpx;}
|
|
|
|
|
+.user-body .user-level-body .level-top .level-more{color: #666;font-size: 22rpx;}
|
|
|
</style>
|
|
</style>
|