0707-2320-01

.gitignore

@@ -1,4 +1,23 @@
-node_modules/
-unpackage/
-.hbuilderx/
 .DS_Store
+unpackage
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

pages/user/user.vue

@@ -1,31 +1,118 @@
 <template>
-	<view>
-		<view class="user-header">
-			<view class="header-bg"><image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/hero-grid.png" mode="widthFix"></image></view>
-			<cu-custom>
-				<block slot="content">我的</block>
-			</cu-custom>
-		</view>
+	<view>
+		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
+			<view class="user-header">
+				<view class="header-bg">
+					<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/hero-grid.png" mode="widthFix"></image>
+				</view>
+				<cu-custom :bgColor="scrollHeight>20?'bg-bluev-head':'none'">
+					<block slot="content">我的</block>
+				</cu-custom>
+				<view class="user-detail-body">
+					<view class="avatar"><image src="/static/rank/avatar.jpeg" mode="widthFix"></image></view>
+					<view class="detail-info">
+						<view class="name">我是庄小周</view>
+						<view class="desc">ID：234234234 <text class="cuIcon-copy"></text></view>
+					</view>
+					<view class="detail-status">
+						<!-- <view class="status-btn full"><text class="cuIcon-edit"></text>已签约</view> -->
+						<view class="status-btn"><text class="cuIcon-edit"></text>未签约</view>
+					</view>
+				</view>
+			</view>
+			<view class="user-body">
+				<view class="user-total">
+					<view class="total-item">
+						<view class="num">102</view>
+						<view class="name">完成任务</view>
+					</view>
+					<view class="total-item">
+						<view class="num">102</view>
+						<view class="name">收益(元)</view>
+					</view>
+					<view class="total-item">
+						<view class="num">102</view>
+						<view class="name">粉丝</view>
+					</view>
+					<view class="total-item">
+						<view class="num">10<text>%</text></view>
+						<view class="name">平均转化率</view>
+					</view>
+				</view>
+				<view class="user-level">
+					<view class="user-level-body">
+						<view class="level-top">
+							<view class="level-name">LV.3黄金达人</view>
+							<view class="level-more">查看等级 <text class="cuIcon-right"></text></view>
+						</view>
+						<view class="level-mid">距离下一等级还差119</view>
+						<view class="level-foot">
+							<view class="level-step">
+								<view class="success" style="width: 50%;"></view>
+							</view>
+							<view class="level-num"><text>181</text>/300</view>
+						</view>
+					</view>
+				</view>
+				<view class="user-menu-service">
+					<view class=""></view>
+				</view>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
+var app;
 export default {
-	data() {
-		
+	data() { 
+		return {
+			scrollHeight:0,
+		}
 	},
 	onLoad() {
-		
+		app = this;
 	},
 	methods: {
-		
+		pageScroll(event) {
+			var scrollHeight = event.detail.scrollTop;
+			app.scrollHeight = scrollHeight;
+		}
 	}
 }
 </script>
 
 <style lang="scss">
-page{background-color: #f8f8f8;}
-.user-header{position: relative;background: linear-gradient(180deg, #87e0ff 9.04%, rgba(207, 238, 248, 0.35) 62.55%, rgba(245, 245, 245, 0) 100%);height: 560rpx;}
-.user-header .header-bg{position: absolute;top: 0;left: 0;right: 0;z-index: 9999;}
-.user-header .header-bg image{width: 100%;}
+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 .header-bg image{width: 100%;}
+.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 .detail-info{margin-left: 20rpx;}
+.user-detail-body .detail-info .name{font-family: "bluevBold";color: #000;font-weight: 800;font-size: 28rpx;}
+.user-detail-body .detail-info .desc{color: #666;font-size: 22rpx;margin-top: 10rpx;}
+.user-detail-body .detail-status{margin-left: auto;margin-right: 0;} 
+.user-detail-body .detail-status .status-btn {font-size: 24rpx;padding: 10rpx 15rpx;border-radius: 40rpx;display: flex;align-items: center;gap: 10rpx;color: #7F8185;background-color: transparent;}
+.user-detail-body .detail-status .status-btn.full{background-color: #03BEFF;color: #fff;}
+
+.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 .total-item{min-width: 0%;display: flex;flex-direction: column;align-items: center;justify-content: 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-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;}
+
 </style>