；优化，添加组件库

pages/index/index.vue

@@ -79,35 +79,72 @@ const handleBook = (productId) => {
 </script>
 
 <template>
-  <view class="h-[100vh] bg-[#fff]">
+  <view class="h-[100vh] bg-[#fff] flex flex-col mx-[30rpx] items-center">
 	  
+	  <!-- title -->
+	  <view class="bg-[#fff] flex justify-between items-center w-full">
+	  	<view class="w-full flex items-center gap-[10px]">
+	  		
+	  		<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)]">
+			<u-icon name="level"></u-icon>
+			<text>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">
+		  		<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>
+			</view>
+		  </view>
+		  <!-- 日期 -->
+		  <view class="border border-solid border-[#cdcdcd] bg-[#fff] py-[2px] px-[4px] gap-[6px] flex">
+			  <u-icon name="clock"></u-icon>
+			  <text>42</text>
+			  <text>DAYS</text>		  	
+		  </view>
+	  	
+	  </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>
+		
+	  </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="border-[4px] border-solid border-theme rounded-full h-[220px] w-[220px]  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>
 	  <CustomTabBar />
   </view>
   
 </template>
 
-<style scoped lang="scss">
-:deep(.u-count-down__text) {
-  color: #ab002d !important;
-  font-size: 13px !important;
-}
+<style>
 
-.navigation {
-  border-bottom: 1px solid #f2f2f2;
-}
-
-.navi-title-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.line {
-  transition: 0.3s all;
-}
-
-.search {
-  :deep(.u-search) {
-    flex: 1;
-  }
-}
 </style>