From 63726d82009a7705520b1b38cb0f93a0cc448a75 Mon Sep 17 00:00:00 2001
From: yangyao <y236248250@163.com>
Date: Mon, 12 Jan 2026 19:06:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue | 100 +++++++++++++++++++++++++++++++++---------
 1 file changed, 80 insertions(+), 20 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 1cb7d58..0441e02 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -79,7 +79,7 @@ const handleBook = (productId) => {
 </script>
 
 <template>
-  <view class="h-[100vh] bg-[#fff] flex flex-col mx-[30rpx] items-center">
+  <view class=" bg-[#fff] flex flex-col mx-[30rpx] items-center">
 	  
 	  <!-- title -->
 	  <view class="bg-[#fff] flex justify-between items-center w-full">
@@ -88,26 +88,26 @@ const handleBook = (productId) => {
 	  		<text class="text-[#33333] text-[20px] font-bold" >Sweekar Alpha</text>
 			<u-icon name="level" color="#fff" class="bg-theme border-round-theme rounded-full"></u-icon>
 	  	</view>
-		<view class="w-[80px] border-round-theme border-[2px] rounded-full flex justify-center py-[6px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
+		<view class="w-[80px] border-round-theme border-[2px] rounded-full flex justify-center py-[3px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
 			<u-icon name="level"></u-icon>
-			<text>1205</text>
+			<text class="text-[13px]">1205</text>
 		</view>
 	  </view>
 	  <!-- row2 -->
 	  <view class="flex justify-between items-center mt-[15px] w-full">
 		  <!-- 状态 -->
-		  <view class=" bg-[#fff] border-solid border py-[6px] px-[10px] rounded-full flex items-center gap-[10px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
-		  	<view class="border-bottom-theme rounded-full flex justify-center items-center h-[40px] w-[40px] bg-theme">
+		  <view class=" bg-[#fff] border-solid border py-[6px] px-[6px] rounded-full flex items-center gap-[10px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]">
+		  	<view class="border-bottom-theme rounded-full flex justify-center items-center h-[30px] w-[30px] bg-theme">
 		  		<text class="text-[#fff]">5</text>
 		  	</view>
 			<view class="flex flex-col">
-				<text class="text-[13px]">STAGE</text>
-				<text class="text-[16px] font-bold">CHILDHOOD</text>
+				<text class="text-[10px]">STAGE</text>
+				<text class="text-[13px] font-bold">CHILDHOOD</text>
 			</view>
 		  </view>
 		  <!-- 日期 -->
-		  <view class="border border-solid border-[#cdcdcd] bg-[#fff] py-[2px] px-[4px] gap-[6px] flex">
-			  <u-icon name="clock"></u-icon>
+		  <view class="border border-solid border-[#cdcdcd] bg-[#fff] py-[2px] px-[4px] gap-[2px] flex items-center text-[10px]">
+			  <u-icon name="clock" size="10" bold=""></u-icon>
 			  <text>42</text>
 			  <text>DAYS</text>		  	
 		  </view>
@@ -115,31 +115,91 @@ const handleBook = (productId) => {
 	  </view>
 	  
 	  <!-- EXP -->
-	  <view class="flex  gap-[10px] mt-[15px] w-full ">
-	  	<text class="text-[12px]">EXP</text>
-		<view class="w-[150px]">
-			<uv-line-progress :percentage="60" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
+	  <view class="flex  items-center gap-[10px] mt-[20px] w-full ">
+	  	<text class="text-[8px]">EXP</text>
+		<view class="w-[100px]">
+			<uv-line-progress :percentage="30" height="6" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
 		</view>
 		
 	  </view>
 	  
 	  <!-- MODEL X -->
-	  <view class="border border-solid border-[#cdcdcd] rounded-full h-[280px] w-[280px] mt-[100px] p-[20px] flex justify-center items-center">
+	  <view class="relative border border-solid border-[#cdcdcd] bg-[#FBFAFA] rounded-full h-[220px] w-[220px] mt-[70px] mb-[20px] p-[10px] flex justify-center items-center">
 		  
 		  <!-- 中心圆圈 -->
-	  	<view class="border-[4px] border-solid border-theme rounded-full h-[220px] w-[220px]  p-[20px] flex justify-center items-center">
+	  	<view class="border-[3px] border-solid border-theme rounded-full h-[160px] bg-[#fff] w-[160px]  p-[20px] flex justify-center items-center">
 	  		<view class="flex flex-col justify-center items-center">
 	  			<u-icon name="star" size="80"></u-icon>
 				<text>MODEL X</text>
 	  		</view>
 	  	</view>
 		<!-- 交流栏 -->
-		<!-- <view class="w-[150px] h-[80px] border-[4px]" >
-			
-		</view> -->
-		
-		
+		<view class="absolute top-[-60px] right-[-30px] w-[120px] flex flex-col justify-center items-center px-[10px]  border border-solid border-theme bg-[#fff] rounded-t-lg rounded-br-lg h-[70px] border-[2px] shadow-[4px_4px_1px_0_rgba(0,0,0,1)]" >
+			<view class="text-[12px]">
+				Master,I missed you! Let's play together!
+			</view>
+		</view>
 	  </view>
+	  <uv-divider dashed="true"  class="w-full"></uv-divider>
+	  
+	  <!-- 四宫格 -->
+	  <view class="w-full p-[20px] flex flex-col gap-[10px]">
+		   <!-- 第一行 -->
+	  	<view class="w-full flex justify-between items-center gap-[10px]">
+			<!-- item -->
+	  		<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
+	  			<view class="flex  justify-between">
+	  				<text class="text-[12px] font-bold">HYNGER</text>
+					<u-icon name="star"></u-icon>
+	  			</view>
+				<text class="text-[18px] font-bold">72%</text>
+				<view class="w-full">
+					<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
+				</view>
+				
+	  		</view>
+			<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
+				<view class="flex  justify-between">
+					<text class="text-[12px] font-bold">HYNGER</text>
+					<u-icon name="star"></u-icon>
+				</view>
+				<text class="text-[18px] font-bold">72%</text>
+				<view class="w-full">
+					<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
+				</view>
+				
+			</view>
+	  	</view>
+		
+		<!-- 第二行 -->
+		<view class="w-full flex justify-between items-center gap-[10px]">
+			<!-- item -->
+			<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
+				<view class="flex  justify-between">
+					<text class="text-[12px] font-bold">HYNGER</text>
+					<u-icon name="star"></u-icon>
+				</view>
+				<text class="text-[18px] font-bold">72%</text>
+				<view class="w-full">
+					<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
+				</view>
+				
+			</view>
+			<view class="flex flex-col w-1/2 rounded-lg border border-solid border-[2px] border-theme p-[10px] gap-[10px]">
+				<view class="flex  justify-between">
+					<text class="text-[12px] font-bold">HYNGER</text>
+					<u-icon name="star"></u-icon>
+				</view>
+				<text class="text-[18px] font-bold">72%</text>
+				<view class="w-full">
+					<uv-line-progress :percentage="60" :height="8" activeColor="#333333" :showText="false" class="border-round-theme"></uv-line-progress>
+				</view>
+				
+			</view>
+		</view>
+	  </view>
+	  
+	  
 	  <CustomTabBar />
   </view>