update home charts ui and tabbar ui

sleep/colorui/components/cu-custom.vue

@@ -64,6 +64,8 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.cuIcon-back {
+	color: #ffffff;
+}
 </style>

sleep/pages/home/index.vue

@@ -166,7 +166,7 @@
 
 				</view>
 
-				<view class="flex-col space-y-40 home-data">
+				<!-- <view class="flex-col space-y-40 home-data">
 					<view class="flex-row group_6 equal-division">
 						<view class="flex-row group_7 space-x-6 home-data-item equal-division-item">
 							<view class="flex-col shrink-0 self-stretch group_9 space-y-20">
@@ -196,9 +196,47 @@
 							<text class="self-start font_7 text_15">次/分</text>
 						</view>
 					</view>
-				</view>
+				</view> -->
 
-        <view class="cu-card article">
+		<view class="flex-row home-data space-x-6">
+		  <view class="flex-col flex-auto home-data-left">
+		    <view class="flex-row space-x-4 home-data-left-title">
+		      <image
+		        class="shrink-0 image_10"
+				src="../../static/home/homeIconHeart.png"
+		      />
+		      <text class="font_1 text_14">心率</text>
+		    </view>
+		    <text class="self-start font_5 text_15">{{ pjxl }}</text>
+		    <text class="self-start font_6 text_16">次/分</text>
+		  </view>
+		  <view class="flex-col justify-start shrink-0 relative home-data-chart content">
+			<view class="echarts-wrap">
+			  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="xinlvRefChart" @onInit="onInit1"></mpvue-echarts>
+			</view>
+		  </view>
+		</view>
+		
+		<view class="flex-row home-data space-x-6">
+		  <view class="flex-col flex-auto home-data-left">
+		    <view class="flex-row space-x-4 home-data-left-title">
+		      <image
+		        class="shrink-0 image_10"
+				src="../../static/home/homeIconBreath.png"
+		      />
+		      <text class="font_1 text_14">呼吸</text>
+		    </view>
+		    <text class="self-start font_5 text_15">{{ pjhx }}</text>
+		    <text class="self-start font_6 text_16">次/分</text>
+		  </view>
+		  <view class="flex-col justify-start shrink-0 relative home-data-chart content">
+			<view class="echarts-wrap">
+			  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="xinlvRefChart" @onInit="onInit2"></mpvue-echarts>
+			</view>
+		  </view>
+		</view>
+		
+        <!-- <view class="cu-card article">
           <view class="cu-item shadow chartsBgColor">
             <view class="title"><view class="text-cut text-lg text-gray">心率 <text class="text-green margin-left">{{ pjxl }} 分钟/次</text></view></view>
             <view class="content">
@@ -218,7 +256,7 @@
               </view>
             </view>
           </view>
-        </view>
+        </view> -->
 
 				<view class="flex-col home-alert space-y-4">
 					<view class="flex-row items-center space-x-4 home-alert-header">
@@ -605,7 +643,7 @@ export default {
 @import "../../colorui/animation.css";
 .echarts-wrap {
   width: 100%;
-  height: 150px;
+  height: 100px;
   /*padding: 10upx;*/
   margin-bottom: 0.3rem
 }
@@ -1008,8 +1046,12 @@ export default {
 	}
 
 	.home-data {
+		background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
 		margin: 0rem 1.25rem;
 		padding: 1rem 0rem;
+		border-radius: 1rem;
+		padding: 1rem;
+		margin-top: 1rem;
 
 		.home-data-item {
 			padding: 1rem 0rem;
@@ -1158,7 +1200,7 @@ export default {
       }
     }
     .home-alert {
-      margin: 0 1.25rem;
+      margin: 1rem 1.25rem 0 1.25rem;
       padding: 1rem 0.88rem 0.13rem;
       background-color: #0233c6cc;
       border-radius: 1rem;
@@ -1196,4 +1238,107 @@ export default {
     }
   }
 }
+.home-data {
+  margin-top: 3.5rem;
+  overflow-x: hidden;
+  .home-data-left {
+    .space-x-4 {
+      & > view:not(:first-child),
+      & > text:not(:first-child),
+      & > image:not(:first-child) {
+        margin-left: 0.25rem;
+      }
+      .image_10 {
+        width: 1.13rem;
+        height: 1.06rem;
+      }
+      .font_1 {
+        font-size: 1.13rem;
+        font-family: PingFangSC;
+        line-height: 1.03rem;
+        color: #ffffff;
+      }
+      .text_14 {
+        line-height: 1rem;
+      }
+    }
+    .home-data-left-title {
+    }
+    .font_5 {
+      font-size: 2.5rem;
+      font-family: PingFangSC;
+      line-height: 1.81rem;
+      color: #ffffff;
+    }
+    .text_15 {
+      margin-top: 1.25rem;
+    }
+    .font_6 {
+      font-size: 0.75rem;
+      font-family: PingFangSC;
+      line-height: 0.69rem;
+      color: #ffffff80;
+    }
+    .text_16 {
+      margin-top: 0.75rem;
+    }
+  }
+  .home-data-chart {
+    overflow-x: hidden;
+    width: 17.19rem;
+    .group_10 {
+      padding-left: 2.06rem;
+      padding-bottom: 2.25rem;
+      overflow-x: hidden;
+      .image_11 {
+        width: 8.75rem;
+        height: 3.44rem;
+      }
+      .image_12 {
+        width: 7.06rem;
+        height: 3.38rem;
+      }
+      .image_13 {
+        width: 10rem;
+        height: 3.44rem;
+      }
+      .pos_8 {
+        position: absolute;
+        left: 0;
+        bottom: 0.063rem;
+      }
+      .image_14 {
+        width: 6.06rem;
+        height: 3.44rem;
+      }
+      .pos_10 {
+        position: absolute;
+        right: 1.25rem;
+        bottom: 0;
+      }
+      .pos_9 {
+        position: absolute;
+        left: 0;
+        top: 2.31rem;
+      }
+    }
+    .section_9 {
+      background-color: #ffffff1a;
+      width: 15.94rem;
+      height: 0.063rem;
+    }
+    .pos_11 {
+      position: absolute;
+      left: 0;
+      top: 5.5rem;
+    }
+  }
+}
+.space-x-6 {
+  & > view:not(:first-child),
+  & > text:not(:first-child),
+  & > image:not(:first-child) {
+    margin-left: 0.38rem;
+  }
+}
 </style>