我的u币

pages/my/myub.vue

@@ -1,6 +1,63 @@
 <template>
-	 <view>
-		 
+	 <view style="background: #F9F9F9;">
+		 <view class="ubtop" style="background-color: #fff;">
+		 	<view class="ub-heard">
+		 		我的u币
+				<image src="../../static/images/wenhao.png" mode=""></image>
+		 	</view>
+			<view class="top-content">
+				<view>367</view>
+				统计时间：2022–10-14
+			</view>
+		 </view>
+		 <view class="ub-list">
+			 <text>2022年9月</text>
+		 	<view class="list-info">
+		 		<view class="info-left">
+		 			<view>试听学习 10 分钟</view>
+					2022-09-20  14:38
+		 		</view>
+				<view class="info-right">
+					+10
+				</view>
+		 	</view>
+			<view class="list-info">
+				<view class="info-left">
+					<view>试听学习 10 分钟</view>
+					2022-09-20  14:38
+				</view>
+				<view class="info-right">
+					+10
+				</view>
+			</view>
+			<view class="list-info">
+				<view class="info-left">
+					<view>试听学习 10 分钟</view>
+					2022-09-20  14:38
+				</view>
+				<view class="info-right">
+					+10
+				</view>
+			</view>
+			<view class="list-info">
+				<view class="info-left">
+					<view>试听学习 10 分钟</view>
+					2022-09-20  14:38
+				</view>
+				<view class="info-right">
+					+10
+				</view>
+			</view>
+			<view class="list-info">
+				<view class="info-left">
+					<view>试听学习 10 分钟</view>
+					2022-09-20  14:38
+				</view>
+				<view class="info-right">
+					+10
+				</view>
+			</view>
+		 </view>
 	 </view>
 </template>
 
@@ -8,5 +65,74 @@
 </script>
 
 <style lang="scss" scoped>
-	
+	.ub-list{
+		height: 100%;
+		padding: 32upx 36upx;
+		background-color: #fff;
+		text{
+			font-size: 44upx;
+			font-weight: 500;
+			color: #333333;
+			
+		}
+		.list-info{
+			display: flex;
+			padding-top: 40upx ;
+			padding-bottom: 32upx;
+			border-bottom: 1px solid rgba(153,153,153,0.1);
+			.info-left{
+				flex: 1;
+				font-size: 24upx;
+				color: #999999;
+				font-weight: 400;
+				view{
+					font-size: 28upx;
+					color: #333333;
+					font-weight: 500;
+					padding-bottom: 16upx;
+				}
+			}
+			.info-right{
+				width: 90upx;
+				text-align: right;
+				padding-top: 20upx;
+			}
+		}
+	}
+	.ubtop{
+		width: 100%;
+		height: 392upx;
+		padding-bottom: 20upx;
+		background-image: url(../../static/images/ubbgimg.png);
+		background-repeat: no-repeat;
+		background-size: 100%;
+		.ub-heard{
+			text-align: center;
+			color: #FFFFFF;
+			font-weight: 500;
+			padding-top: 98upx;
+			font-size: 36upx;
+			position: relative;
+			image{
+				width: 40upx;
+				height: 40upx;
+				right: 36upx;
+				position: absolute;
+				// vertical-align: middle;
+				
+			}
+		}
+		.top-content{
+			width: 100%;
+			text-align: center;
+			font-size: 24upx;
+			font-weight: 400;
+			color: #FFFFFF;
+			view{
+				color: #FFFFFF;
+				font-weight: 600;
+				font-size: 84upx;
+			}
+		}
+	}
 </style>

pages/my/myubrules.vue

@@ -76,7 +76,7 @@
 	height: 484upx;
 	background-image: url(../../static/images/myubimg.png);
 	background-repeat: no-repeat;
-	background-size: 100% / 100%;
+	background-size: 100%;
 	padding-top: 245upx;
 	.ub-content{
 		background-color: #fff;