Browse Source

update detail style

dayu 1 năm trước cách đây
mục cha
commit
6bd1f256f5
2 tập tin đã thay đổi với 61 bổ sung27 xóa
  1. 51 22
      sleep/pages/detail/detail.vue
  2. 10 5
      sleep/pages/shareUser/shareUser.vue

+ 51 - 22
sleep/pages/detail/detail.vue

@@ -44,7 +44,7 @@
 									<view class="text-middle-tab">前天 暂无</view>
 								</view>
 								<image 
-									src="../../static/report/reportIconMove.png"
+									src="../../static/report/reportAlertBg.png"
 									class="self-end image-middle-tab"
 									/>
 							</view>
@@ -72,7 +72,7 @@
 							<div class="title-post-tab">健康小知识</div>
 							<image 
 								class="image-post-tab"
-								src="../../static/home/homeIconGift.png"
+								src="../../static/report/reportAlertBg.png"
 								/>
 							<div class="content-post-tab">
 								提高睡眠效率的方法
@@ -92,6 +92,8 @@
 							<view class="subtile-tab-detail self-end">平均心率61次/分</view>
 						</view>
 						
+						<view class="charts-sleep-item"></view>
+						
 						<view class="data-sleep-item">
 							<view class="date-sleep-item">2023.06.12</view>
 							<view class="flex-row justify-between">
@@ -142,7 +144,7 @@
 							<div class="title-post-tab">健康小知识</div>
 							<image 
 								class="image-post-tab"
-								src="../../static/home/homeIconGift.png"
+								src="../../static/report/reportAlertBg.png"
 								/>
 							<div class="content-post-tab">
 								提高睡眠效率的方法
@@ -171,7 +173,7 @@
 									<view class="text-middle-tab">前天 暂无</view>
 								</view>
 								<image 
-									src="../../static/report/reportIconMove.png"
+									src="../../static/report/reportAlertBg.png"
 									class="self-end image-middle-tab"
 									/>
 							</view>							
@@ -199,7 +201,7 @@
 									<text class="subtitle-sleep-condition">入睡后:0次</text>
 								</view>
 								<image
-									src="../../static/report/reportIconMove.png"
+									src="../../static/report/reportAlertBg.png"
 									class="image-sleep-condition self-baseline"
 									/>
 							</view>
@@ -227,7 +229,7 @@
 									<text class="subtitle-sleep-condition">入睡后:0次</text>
 								</view>
 								<image
-									src="../../static/report/reportIconMove.png"
+									src="../../static/report/reportAlertBg.png"
 									class="image-sleep-condition self-baseline"
 									/>
 							</view>
@@ -253,7 +255,7 @@
 							<div class="title-post-tab">健康小知识</div>
 							<image 
 								class="image-post-tab"
-								src="../../static/home/homeIconGift.png"
+								src="../../static/report/reportAlertBg.png"
 								/>
 							<div class="content-post-tab">
 								提高睡眠效率的方法
@@ -273,6 +275,8 @@
 							<view class="subtile-tab-detail self-end">平均心率61次/分</view>
 						</view>
 						
+						<view class="charts-sleep-item"></view>
+						
 						<view class="data-sleep-item">
 							<view class="date-sleep-item">2023.06.12</view>
 							<view class="flex-row justify-between">
@@ -320,7 +324,7 @@
 							<div class="title-post-tab">健康小知识</div>
 							<image 
 								class="image-post-tab"
-								src="../../static/home/homeIconGift.png"
+								src="../../static/report/reportAlertBg.png"
 								/>
 							<div class="content-post-tab">
 								提高睡眠效率的方法
@@ -340,6 +344,10 @@
 							<view class="subtile-tab-detail self-end">平均呼吸率12次/分</view>
 						</view>
 						
+						<view class="charts-sleep-item">
+							
+						</view>
+						
 						<view class="data-sleep-item">
 							<view class="date-sleep-item">2023.06.12</view>
 							<view class="flex-row justify-between">
@@ -387,7 +395,7 @@
 							<div class="title-post-tab">健康小知识</div>
 							<image 
 								class="image-post-tab"
-								src="../../static/home/homeIconGift.png"
+								src="../../static/report/reportAlertBg.png"
 								/>
 							<div class="content-post-tab">
 								提高睡眠效率的方法
@@ -402,8 +410,9 @@
 				<scroll-view v-if="childPageViewItemIndex == 5" scroll-y="true" :style="{height: swiperHeight+'px'}">
 					
 					<view class="tab-detail">
-						<view class="title-tab-detail">打鼾</view>
+						<view class="title-tab-detail">异常状况</view>
 						
+						<view class="charts-sleep-item"></view>
 						
 						<view class="flex-col data-tab-detail">
 							<view class="justify-between header-data-tab flex-row">
@@ -417,7 +426,7 @@
 									<view class="text-middle-tab">前天 暂无</view>
 								</view>
 								<image 
-									src="../../static/report/reportIconMove.png"
+									src="../../static/report/reportAlertBg.png"
 									class="self-end image-middle-tab"
 									/>
 							</view>							
@@ -443,7 +452,7 @@
 							<div class="title-post-tab">健康小知识</div>
 							<image 
 								class="image-post-tab"
-								src="../../static/home/homeIconGift.png"
+								src="../../static/report/reportAlertBg.png"
 								/>
 							<div class="content-post-tab">
 								提高睡眠效率的方法
@@ -576,17 +585,27 @@
 		
 		.item-sleep-condition {
 			.title-sleep-condition {
-				font-size: 18px;
+				font-size: 16px;
+				line-height: 20px;
 			}
 			.subtitle-sleep-condition {
-				font-size: 13px;
+				font-size: 11px;
+				line-height: 20px;
 			}
 		}
 		.image-sleep-condition {
-			height: 80px;
-			width: 80px;
+			height: 60px;
+			width: 60px;
 		}
 	}
+	.charts-sleep-item {
+		background: #0233C699;
+		backdrop-filter: blur(20px);
+		border-radius: 15px;
+		padding: 10px;
+		margin-top: 10px;
+		height: 100px;
+	}
 	
 	.data-sleep-item {
 		background: #0233C699;
@@ -594,6 +613,7 @@
 		border-radius: 15px;
 		padding: 10px;
 		margin-top: 10px;
+		font-size: 13px;
 		
 		.date-sleep-item {
 			margin-bottom: 7px;
@@ -630,7 +650,7 @@
 			background: #0233C699;
 			backdrop-filter: blur(20px);
 			border-radius: 15px;
-			margin-top: 5px;
+			margin-top: 10px;
 			padding: 15px 10px;
 			
 			.header-data-tab {
@@ -645,35 +665,42 @@
 					width: 100px;
 					height: 30px;
 				}
+				.text-middle-tab {
+					line-height: 25px;
+				}
 			}
 			.footer-tab-detail {
 				padding-top: 10px;
+				font-size: 13px;
 			}
 		}
 		.tip-tab-detail  {
 			margin-top: 30px;
 			
 			.image-tip-tab {
-				width: 110px;
-				height: 110px;
+				width: 100px;
+				height: 100px;
 				margin-right: 10px;
 			}
 			.text-tip-tab {
-				border: 1px solid #ffffff;
+				border: 1px solid #ffffff7d;
 				border-radius: 5px;
 				padding: 10px;
 				
 				.title-tip-tab {
-					font-size: 20px;
+					font-size: 17px;
 					font-weight: 500;
 					display: block;
 					text-align: center;
 					margin-bottom: 3px;
 				}
+				.content-tip-tab {
+					font-size: 13px;
+				}
 			}
 		}
 		.post-tab-detail {
-			margin-top: 30px;
+			margin-top: 40px;
 			padding-bottom: 100px;
 			
 			.title-post-tab {
@@ -687,6 +714,8 @@
 			}
 			.content-post-tab {
 				margin-top: 10px;
+				line-height: 28px;
+				font-size: 15px;
 			}
 		}
 	}

+ 10 - 5
sleep/pages/shareUser/shareUser.vue

@@ -185,13 +185,18 @@ import {addByMobile} from "../../api/vitalSignsLook";
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
+  
   .section {
-    background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
-    background-size: contain;
-    background-repeat: repeat;
+    // background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
+    background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png");
+	background-size: cover;
+    background-repeat: no-repeat;
+	height: 100%;
+	
     .section_2 {
-      padding-bottom: 1.25rem;
       background-image: linear-gradient(180deg, #1e1ef7e3 0%, #1dbff59c 100%);
+	  height: 100%;
+	  
       .section_3 {
         padding: 1.13rem 0.44rem 0.38rem;
         background-color: #ffffff4d;
@@ -379,7 +384,7 @@ import {addByMobile} from "../../api/vitalSignsLook";
       & > view:not(:first-child),
       & > text:not(:first-child),
       & > image:not(:first-child) {
-        margin-top: 26.31rem;
+        margin-top: 5rem;
       }
     }
   }