uni_mattress/sleep/pages/my/monthReport/monthReport.vue

<template>
	<view class="report-container">
		<cu-custom bgColor="#000000"><view slot="content" style="color: #FFFFFF">月报告</view></cu-custom>
		
		<view class="month-report-header self-center items-center">
			<view class="flex-row header-date self-center">
				<image class="image_1"
					src="../../static/report/reportIconLeft.png"
				/>
				<text class="text_1">2020-08</text>
				<image class="image_2"
					src="../../static/report/reportIconRight.png"
				/>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="睡眠习惯" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="睡眠效率" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="安稳度" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="心脏系统" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="呼吸系统" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				
			};
		},
		onReady: function() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.report-container {
	background-color: #000000;
	padding-bottom: 2rem;
	
	.month-report {
		margin-top: 1rem;
		
		.block-month-report {
			margin: 0 1.25rem;
			opacity: 0.8;
			background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
			border-radius: 0.5rem;
			height: 7.81rem;
			
			.header-block-report {
				
			}
			.chart-block-report {
				
			}
		}
	}
	.month-report-header {
		padding: 0.5rem 1.2rem;
		background-color: #7e5a9d4d;
		border-radius: 1rem;
		-webkit-backdrop-filter: blur(0.31rem);
		backdrop-filter: blur(0.31rem);
		height: 2rem;
		width: fit-content;
		margin: 0 auto;
		text-align: center;
		
		.header-date {
			// display: inline-block;
		}
		.text_1 {
			color: #ffffff;
		}
		.image_1 {
			width: 0.63rem;
			height: 0.94rem;
		}
		.image_2 {
			width: 0.63rem;
			height: 0.94rem;
		}
	}
}	

// 	.report-sleep {
// 		position: absolute;
// 		top: 3rem;
// 		width: 100%;
// 		padding: 0.3rem;
		
// 		.item-sleep {
			
// 			.item-sleep-title {
// 				font-size: 14px;
// 				font-weight: 400;
// 				letter-spacing: 0px;
// 				line-height: 14px;
// 				color: rgba(155, 151, 188, 1);
// 				text-align: left;
// 				vertical-align: top;
// 			}
// 			.item-sleep-desc {
// 				font-size: 12px;
// 				font-weight: 400;
// 				letter-spacing: 0px;
// 				line-height: 12px;
// 				color: rgba(255, 255, 255, 1);
// 				text-align: left;
// 				vertical-align: top;
// 				margin-top: 5px;
// 			}
// 		}
// 	}
// 	.report-charts {
// 		margin-top: 0.5rem;
// 	}
// 	.bottom-btns {
// 		position: absolute;
// 		bottom: 10px;
		
// 		.bottom-btn {
// 			font-size: 16px;
// 			font-weight: 500;
// 			letter-spacing: 0px;
// 			line-height: 30px;
// 			color: #ffffff;
// 			text-align: center;
// 			width: 98px;
// 			height: 30px;
// 			border-radius: 14.5px;
// 			margin: 10px;
// 		}
// 		.btn_1 {
// 			background: linear-gradient(90deg, rgba(44, 37, 247, 0.6) 0%, rgba(6, 21, 153, 1) 100%);
// 		}
// 		.btn_2 {
// 			background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);
// 		}
// 	}
// 	.report-container {
// 		background-color: #ffffff;
// 		padding-bottom: 50px;
// 	}
// 	.report-data-sum {
// 		margin: 1rem;
// 		padding-top: 2.5rem;
// 		color: #ffffff;
		
// 		.icon-data-sum {
// 			width: 40px;
// 			height: 40px;
// 		}
// 		.text-data-sum {
// 			margin-left: 6px;
// 			text-align: left;
			
// 			.title-data-sum {
// 				width: 100%;
// 				font-size: 12px;
// 				line-height: 12px;
// 				font-weight: 400;
// 				margin-bottom: 2px;
// 			}
// 			.font_4 {
// 				font-size: 24px;
// 				line-height: 24px;
// 				height: 24px;
// 			}
// 			.font_5 {
// 				font-size: 14px;
// 				line-height: 24px;	
// 			}
// 		}
// 	}
	
// 	.page {
// 	  background-color: #ffffff;
// 	  width: 100%;
// 	  overflow-y: auto;
// 	  overflow-x: hidden;
// 	  height: 100%;
	  
// 	  .group {
// 	    overflow-y: auto;
// 	    .group_3 {
// 	      padding: 0rem 0 0.25rem;
// 	      .group_8 {
// 	        padding: 0 1.25rem;
// 	        .report_leave_bed {
// 	          .section_10 {
// 	            opacity: 0.8;
// 	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
// 	            border-radius: 0.5rem;
// 	            height: 7.81rem;
// 	          }
// 	          .pos_2 {
// 	            position: absolute;
// 	            left: 0.63rem;
// 	            right: 0.53rem;
// 	            top: 0.63rem;
// 	            .space-x-12 {
// 	              & > view:not(:first-child),
// 	              & > text:not(:first-child),
// 	              & > image:not(:first-child) {
// 	                margin-left: 0.75rem;
// 	              }
// 	            }
// 	          }
// 	          .pos_3 {
// 	            position: absolute;
// 	            left: 0.66rem;
// 	            right: 0.63rem;
// 	            top: 3.56rem;
// 	          }
// 	          .pos_10 {
// 	            position: absolute;
// 	            right: 0.66rem;
// 	            top: 6.69rem;
// 	          }
// 	        }
// 	        .report_move {
// 	          .section_20 {
// 	            opacity: 0.8;
// 	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
// 	            border-radius: 0.5rem;
// 	            height: 9.19rem;
// 	          }
// 	          .pos_11 {
// 	            position: absolute;
// 	            left: 0.63rem;
// 	            right: 0.53rem;
// 	            top: 0.63rem;
// 	          }
// 	          .space-x-2 {
// 	            & > view:not(:first-child),
// 	            & > text:not(:first-child),
// 	            & > image:not(:first-child) {
// 	              margin-left: 0.13rem;
// 	            }
// 	            .group_10 {
// 	              width: 1.34rem;
// 	            }
// 	            .section_21 {
// 	              width: 2.28rem;
// 	              height: 4.16rem;
// 	              border: solid 0.031rem #4a315e;
// 	            }
// 	            .section_23 {
// 	              width: 2.22rem;
// 	              height: 4.16rem;
// 	              border: solid 0.031rem #4a315e;
// 	            }
// 	            .view_4 {
// 	              margin-left: 2.13rem;
// 	            }
// 	            .section_24 {
// 	              width: 2.34rem;
// 	              height: 4.16rem;
// 	              border: solid 0.031rem #4a315e;
// 	            }
// 	            .view_5 {
// 	              margin-left: 2.25rem;
// 	            }
// 	            .view_6 {
// 	              margin-left: 2.13rem;
// 	            }
// 	            .pos_14 {
// 	              position: absolute;
// 	              left: 2.25rem;
// 	              top: 0;
// 	            }
// 	            .pos_16 {
// 	              position: absolute;
// 	              right: 4.44rem;
// 	              top: 0;
// 	            }
// 	            .pos_15 {
// 	              position: absolute;
// 	              left: 6.63rem;
// 	              top: 0;
// 	            }
// 	            .pos_17 {
// 	              position: absolute;
// 	              right: 0;
// 	              top: 0;
// 	            }
// 	            .pos_18 {
// 	              position: absolute;
// 	              left: 0;
// 	              right: 0;
// 	              top: 50%;
// 	              transform: translateY(-50%);
// 	            }
// 	            .pos_13 {
// 	              position: absolute;
// 	              left: 0;
// 	              right: 0;
// 	              top: 0;
// 	            }
// 	            .image_10 {
// 	              width: 17.88rem;
// 	              height: 2.75rem;
// 	            }
// 	            .pos_19 {
// 	              position: absolute;
// 	              left: 0;
// 	              right: 0;
// 	              bottom: 0;
// 	            }
// 	          }
// 	          .pos_12 {
// 	            position: absolute;
// 	            left: 0.91rem;
// 	            right: 0.63rem;
// 	            top: 3.56rem;
// 	          }
// 	          .pos_20 {
// 	            position: absolute;
// 	            right: 0.66rem;
// 	            top: 8.06rem;
// 	          }
// 	        }
// 	        .image_8 {
// 	          border-radius: 50%;
// 	          width: 2rem;
// 	          height: 2rem;
// 	        }
// 	        .font_3 {
// 	          font-size: 1rem;
// 	          font-family: PingFangSC;
// 	          line-height: 0.94rem;
// 	          color: #ffffff;
// 	        }
// 	        .space-x-6 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 0.38rem;
// 	          }
// 	          .font_5 {
// 	            font-size: 1.13rem;
// 	            font-family: PingFangSC;
// 	            line-height: 0.81rem;
// 	            color: #ffffff;
// 	          }
// 	        }
// 	        .space-y-12 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-top: 0.75rem;
// 	          }
// 	        }
// 	        .font_7 {
// 	          font-size: 0.75rem;
// 	          font-family: PingFangSC;
// 	          line-height: 0.69rem;
// 	          color: #9b97bc;
// 	        }
// 	        .group_9 {
// 	          width: 18.63rem;
// 	          .font_8 {
// 	            font-size: 0.56rem;
// 	            font-family: PingFangSC;
// 	            line-height: 0.41rem;
// 	            color: #a5b6ca;
// 	          }
// 	        }
// 	        .report_heart {
// 	          .section_25 {
// 	            opacity: 0.8;
// 	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
// 	            border-radius: 0.5rem;
// 	            height: 12.19rem;
// 	          }
// 	          .space-x-9 {
// 	            & > view:not(:first-child),
// 	            & > text:not(:first-child),
// 	            & > image:not(:first-child) {
// 	              margin-left: 0.56rem;
// 	            }
// 	          }
// 	          .pos_21 {
// 	            position: absolute;
// 	            left: 0.63rem;
// 	            top: 0.63rem;
// 	          }
// 	          .group_12 {
// 	            width: 17.88rem;
// 	            .text_11 {
// 	              color: #6b6b6b;
// 	            }
// 	            .space-x-48 {
// 	              & > view:not(:first-child),
// 	              & > text:not(:first-child),
// 	              & > image:not(:first-child) {
// 	                margin-left: 3rem;
// 	              }
// 	            }
// 	          }
// 	          .pos_22 {
// 	            position: absolute;
// 	            right: 0.59rem;
// 	            top: 3.66rem;
// 	          }
// 	        }
// 	        .space-x-4 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 0.25rem;
// 	          }
// 	          .section_11 {
// 	            width: 2.28rem;
// 	            height: 2.78rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .section_14 {
// 	            width: 2.16rem;
// 	            height: 2.78rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .view_2 {
// 	            margin-left: 2.13rem;
// 	          }
// 	          .image_9 {
// 	            margin-left: 2.38rem;
// 	            width: 2.34rem;
// 	            height: 2.78rem;
// 	          }
// 	          .section_13 {
// 	            width: 2.22rem;
// 	            height: 2.78rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .view_3 {
// 	            margin-left: 2.06rem;
// 	          }
// 	          .pos_5 {
// 	            position: absolute;
// 	            left: 2.25rem;
// 	            top: 0;
// 	          }
// 	          .pos_7 {
// 	            position: absolute;
// 	            right: 4.44rem;
// 	            top: 0;
// 	          }
// 	          .section_15 {
// 	            width: 2.47rem;
// 	            height: 2.78rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .pos_6 {
// 	            position: absolute;
// 	            left: 6.56rem;
// 	            top: 0;
// 	          }
// 	          .pos_8 {
// 	            position: absolute;
// 	            right: 0;
// 	            top: 0;
// 	          }
// 	          .section_19 {
// 	            background-color: #44d7b6;
// 	            width: 0.5rem;
// 	            height: 0.94rem;
// 	          }
// 	          .pos_9 {
// 	            position: absolute;
// 	            left: 6.47rem;
// 	            top: 1.59rem;
// 	          }
// 	          .section_12 {
// 	            padding: 0.25rem 0;
// 	            border: solid 0.031rem #4a315e;
// 	            .section_16 {
// 	              background-color: #73e182;
// 	              width: 6.44rem;
// 	              height: 0.94rem;
// 	            }
// 	            .section_17 {
// 	              background-color: #73e182;
// 	              width: 3.94rem;
// 	              height: 0.94rem;
// 	            }
// 	            .section_18 {
// 	              background-color: #73e182;
// 	              width: 6.69rem;
// 	              height: 0.94rem;
// 	            }
// 	          }
// 	          .pos_4 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 0;
// 	          }
// 	          .section_26 {
// 	            width: 2.59rem;
// 	            height: 5.53rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .section_27 {
// 	            width: 2.53rem;
// 	            height: 5.53rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .section_29 {
// 	            width: 2.66rem;
// 	            height: 5.53rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .pos_25 {
// 	            position: absolute;
// 	            left: 2.56rem;
// 	            top: 0;
// 	          }
// 	          .pos_27 {
// 	            position: absolute;
// 	            right: 2.53rem;
// 	            top: 0;
// 	          }
// 	          .section_28 {
// 	            width: 2.72rem;
// 	            height: 5.53rem;
// 	            border: solid 0.031rem #4a315e;
// 	          }
// 	          .pos_26 {
// 	            position: absolute;
// 	            left: 50%;
// 	            top: 0;
// 	            transform: translateX(-50%);
// 	          }
// 	          .pos_29 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 2.75rem;
// 	          }
// 	          .pos_28 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 1.38rem;
// 	          }
// 	          .pos_24 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 0;
// 	          }
	        
// 	          .pos_31 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 2.88rem;
// 	          }
// 	          .pos_30 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 50%;
// 	            transform: translateY(-50%);
// 	          }
// 	        }
// 	        .section_22 {
// 	          width: 17.91rem;
// 	          height: 1.41rem;
// 	          border: solid 0.031rem #4a315e;
// 	        }
// 	        .report_breath {
// 	          .section_31 {
// 	            opacity: 0.8;
// 	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
// 	            border-radius: 0.5rem;
// 	            height: 34rem;
// 	          }
// 	          .pos_33 {
// 	            position: absolute;
// 	            left: 0.63rem;
// 	            top: 0.63rem;
// 	          }
// 	          .pos_34 {
// 	            position: absolute;
// 	            left: 0;
// 	            right: 0;
// 	            top: 2.63rem;
// 	            .group_15 {
// 	              padding: 1rem 0.5rem 0 1.25rem;
// 	              .group_2 {
// 	                padding-left: 1.25rem;
// 	                .text_12 {
// 	                  color: #606060;
// 	                }
// 	                .space-x-30 {
// 	                  & > view:not(:first-child),
// 	                  & > text:not(:first-child),
// 	                  & > image:not(:first-child) {
// 	                    margin-left: 1.88rem;
// 	                  }
// 	                }
// 	              }
// 	              .group_16 {
// 	                margin-top: 0.63rem;
// 	                .section_32 {
// 	                  width: 2.28rem;
// 	                  height: 5.53rem;
// 	                  border: solid 0.031rem #4a315e;
// 	                }
// 	                .section_34 {
// 	                  width: 2.22rem;
// 	                  height: 5.53rem;
// 	                  border: solid 0.031rem #4a315e;
// 	                }
// 	                .view_7 {
// 	                  margin-left: 2.13rem;
// 	                }
// 	                .section_36 {
// 	                  margin-left: 2.31rem;
// 	                  width: 2.34rem;
// 	                  height: 5.53rem;
// 	                  border: solid 0.031rem #4a315e;
// 	                }
// 	                .view_8 {
// 	                  margin-left: 2.13rem;
// 	                }
// 	                .pos_36 {
// 	                  position: absolute;
// 	                  left: 2.25rem;
// 	                  top: 0;
// 	                }
// 	                .pos_38 {
// 	                  position: absolute;
// 	                  right: 4.47rem;
// 	                  top: 0;
// 	                }
// 	                .section_35 {
// 	                  width: 2.41rem;
// 	                  height: 5.53rem;
// 	                  border: solid 0.031rem #4a315e;
// 	                }
// 	                .pos_37 {
// 	                  position: absolute;
// 	                  left: 6.63rem;
// 	                  top: 0;
// 	                }
// 	                .pos_39 {
// 	                  position: absolute;
// 	                  right: 0;
// 	                  top: 0;
// 	                }
// 	                .section_33 {
// 	                  width: 17.97rem;
// 	                  height: 1.41rem;
// 	                  border: solid 0.031rem #4a315e;
// 	                }
// 	                .pos_41 {
// 	                  position: absolute;
// 	                  left: 0;
// 	                  right: 0;
// 	                  top: 2.75rem;
// 	                }
// 	                .pos_40 {
// 	                  position: absolute;
// 	                  left: 0;
// 	                  right: 0;
// 	                  top: 1.38rem;
// 	                }
// 	                .pos_35 {
// 	                  position: absolute;
// 	                  left: 0;
// 	                  right: 0;
// 	                  top: 0;
// 	                }
	               
// 	                .pos_43 {
// 	                  position: absolute;
// 	                  left: 0;
// 	                  right: 0;
// 	                  top: 2.88rem;
// 	                }
// 	                .pos_42 {
// 	                  position: absolute;
// 	                  left: 0;
// 	                  right: 0.13rem;
// 	                  top: 50%;
// 	                  transform: translateY(-50%);
// 	                }
// 	              }
// 	              .group_17 {
// 	                padding: 0.38rem 0 1rem 0.5rem;
// 	              }
// 	            }
// 	            .list-divider {
// 	              margin: 0 0.63rem;
// 	              background-color: #523c65;
// 	              height: 0.063rem;
// 	            }
// 	          }
// 	        }
// 	        .group_11 {
// 	          width: 8.25rem;
// 	          .image_11 {
// 	            width: 1rem;
// 	            height: 1rem;
// 	          }
// 	        }
// 	        .space-x-10 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 0.63rem;
// 	          }
// 	        }
// 	        .font_10 {
// 	          font-size: 0.88rem;
// 	          font-family: PingFangSC;
// 	          line-height: 0.81rem;
// 	          color: #ffffff99;
// 	        }
// 	        .group_13 {
// 	          width: 0.97rem;
// 	          .font_11 {
// 	            font-size: 0.75rem;
// 	            font-family: PingFangSC;
// 	            line-height: 0.56rem;
// 	            color: #9b97bc;
// 	          }
// 	        }
// 	        .space-y-14 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-top: 0.88rem;
// 	          }
// 	        }
// 	        .divider {
// 	          background-image: repeating-linear-gradient(
// 	            90deg,
// 	            #e02020,
// 	            #e02020 0.35%,
// 	            transparent 0.35%,
// 	            transparent 1.047%
// 	          );
// 	          background-position: -0.031rem 0px;
// 	          height: 0.063rem;
// 	        }
// 	        .font_9 {
// 	          font-size: 0.56rem;
// 	          font-family: PingFangSC;
// 	          line-height: 0.41rem;
// 	          color: #9b97bc;
// 	        }
// 	      }
// 	      .space-y-10 {
// 	        & > view:not(:first-child),
// 	        & > text:not(:first-child),
// 	        & > image:not(:first-child) {
// 	          margin-top: 0.63rem;
// 	        }
// 	      }
// 	    }
// 	  }
// 	  .tab-bar {
// 	    padding: 0.25rem 3.38rem;
// 	    background-color: #167df2;
// 	    backdrop-filter: blur(0.63rem);
// 	    .group_26 {
// 	      height: 2.47rem;
// 	      .text_17 {
// 	        font-size: 0.69rem;
// 	        line-height: 0.63rem;
// 	      }
// 	    }
// 	    .space-y-2 {
// 	      & > view:not(:first-child),
// 	      & > text:not(:first-child),
// 	      & > image:not(:first-child) {
// 	        margin-top: 0.13rem;
// 	      }
// 	    }
// 	    .group_27 {
// 	      height: 2.5rem;
// 	      .text_18 {
// 	        font-size: 0.69rem;
// 	        line-height: 0.63rem;
// 	      }
// 	    }
// 	    .image_15 {
// 	      width: 1.69rem;
// 	      height: 1.69rem;
// 	    }
// 	    .font_12 {
// 	      font-size: 0.75rem;
// 	      font-family: PingFangSC;
// 	      line-height: 0.69rem;
// 	      color: #ffffffb3;
// 	    }
// 	  }
// 	  .font_6 {
// 	    font-size: 0.75rem;
// 	    font-family: PingFangSC;
// 	    line-height: 0.69rem;
// 	    color: #ffffff;
// 	  }
// 	}
// 	.page {
// 	  background-color: #000000;
// 	  width: 100%;
// 	  overflow-y: auto;
// 	  overflow-x: hidden;
// 	  height: 100%;
// 	  margin-bottom: 1rem;
	  
// 	  .report {
// 	    overflow-y: auto;
		
// 	    .report_header {
		  
// 		  .report-header-img {
// 			  width: 100%;
// 			  position: absolute;
// 			  top: -6rem;
// 		  }
// 	      .report_score {
// 			padding-top: 1rem;
// 			z-index: 100;
// 	        .report_period {
// 				margin-left: 1.2rem;
// 	        }
// 	        .report_score_data {
// 				.section_5 {
// 				  padding: 0.38rem 0.88rem;
// 				  background-color: #7e5a9d4d;
// 				  border-radius: 1rem 0px 0px 1rem;
// 				  backdrop-filter: blur(0.31rem);
// 				  width: 5.25rem;
// 				  height: 2rem;
// 				  .image_6 {
// 				    width: 1.5rem;
// 				    height: 1.31rem;
// 				  }
// 				  .text_5 {
// 				    line-height: 0.72rem;
// 				  }
// 				}
// 	          .space-x-76-reverse {
// 	            & > view:not(:last-child),
// 	            & > text:not(:last-child),
// 	            & > image:not(:last-child) {
// 	              margin-right: 4.75rem;
// 	            }
// 	            .text_4 {
// 	              color: #ffffff;
// 	              font-size: 1.5rem;
// 	              font-family: PingFangSC;
// 	              line-height: 1.38rem;
// 	            }
// 	          }
// 	          .text_6 {
// 	            margin-top: 1rem;
// 	            color: #ffffff;
// 	            font-size: 3.38rem;
// 	            font-family: PingFangSC;
// 	            line-height: 2.47rem;
// 	          }
// 	          .text_7 {
// 	            margin-top: 1.38rem;
// 	            line-height: 0.94rem;
// 	          }
// 	        }
// 	      }
// 	      .space-y-55 {
// 	        & > view:not(:first-child),
// 	        & > text:not(:first-child),
// 	        & > image:not(:first-child) {
// 	          margin-top: 3.44rem;
// 	        }
// 	      }
// 	    }
// 	    .report_analysis {
// 	      padding-top: 0.63rem;
// 		  z-index: 100;
// 	      .font_4 {
// 	        font-size: 1.13rem;
// 	        font-family: PingFangSC;
// 	        line-height: 0.81rem;
// 	        color: #ffffff;
// 	      }
// 	      .text_8 {
// 	        margin-left: 1.25rem;
// 	        line-height: 1.06rem;
// 	      }
// 		  .section_easy {
// 			margin: 0 1.25rem;
// 			padding: 0 0.88rem;
// 			height: 52px;
// 			opacity: 0.8;
// 			border-radius: 8px;
// 			background: linear-gradient(180deg, rgba(22, 125, 242, 1) 0%, rgba(52, 26, 75, 1) 100%);
			
// 			.image_7 {
// 				width: 32px;
// 				height: 32px;
// 			}
// 			.font_3 {
// 				font-size: 16px;
// 				color: #ffffff;
// 				font-weight: 400;
// 				margin-left: 9px;
// 			}
// 			.font_7 {
// 				color: rgba(255, 255, 255, 0.6);
// 				font-size: 16px;
// 				margin-right: 10px;
// 			}
// 			.font_4 {
// 				font-size: 18px;
// 				color: #ffffff;
// 				font-weight: 500;
// 			}
// 		  }
// 		  .section_efficiency {
// 			margin: 0 1.25rem;
// 		  	padding: 0 0.88rem;
// 		  	height: 52px;
// 		  	opacity: 0.8;
// 		  	border-radius: 8px;
// 		  	background: linear-gradient(180deg, rgba(22, 125, 242, 1) 0%, rgba(52, 26, 75, 1) 100%);
			
// 			.image_7 {
// 				width: 32px;
// 				height: 32px;
// 			}
// 			.font_3 {
// 				font-size: 16px;
// 				color: #ffffff;
// 				font-weight: 400;
// 				margin-left: 9px;
// 			}
// 			.font_4 {
// 				font-size: 18px;
// 				color: #ffffff;
// 				font-weight: 500;
// 			}
// 		  }
// 	      .report_analysis_data {
// 	        padding-top: 17.5rem;
			
// 	        .space-x-26 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 1.63rem;
// 	          }
// 	          .text_10 {
// 	            line-height: 1.5rem;
// 	            width: 8.5rem;
// 	          }
// 	          .section_9 {
// 	            margin-top: 1.75rem;
// 	            padding: 1.19rem 0.5rem 0.5rem 0.81rem;
// 	            background-color: #1751e6cc;
// 	            border-radius: 0.5rem 0.5rem 0 0;
// 	            height: 2.63rem;
// 	          }
// 	          .space-x-34 {
// 	            & > view:not(:first-child),
// 	            & > text:not(:first-child),
// 	            & > image:not(:first-child) {
// 	              margin-left: 2.13rem;
// 	            }
// 	          }
// 	        }
// 	        .equal-division {
// 	          padding: 0 0.88rem;
// 	          .equal-division-item {
// 	            padding: 0.25rem 0.38rem 0;
// 	            flex: 1 1 10.81rem;
// 	            .section_6 {
// 	              padding: 0.63rem 0.63rem 0.75rem;
// 	              background-color: #1751e6cc;
// 	              border-radius: 0.5rem;
// 	              .text_9 {
// 	                margin-left: 1.5rem;
// 	              }
// 	              .space-x-12 {
// 	                & > view:not(:first-child),
// 	                & > text:not(:first-child),
// 	                & > image:not(:first-child) {
// 	                  margin-left: 0.75rem;
// 	                }
// 	              }
// 	            }
// 	            .view {
// 	              margin-top: 0.63rem;
// 	            }
// 	            .group_7 {
// 				  margin-top: 0.63rem;
// 	              padding: 1.25rem 0.63rem 2rem;
// 				  background: url(../../static/report/reportAlertBg.png);
// 				  background-repeat: no-repeat;
// 				  background-size: cover;
// 				  border-radius: 0.5rem;
				  
// 				  .text_10 {
// 					  line-height: 1.4rem;
// 					  margin-top: 0.2rem;
// 				  }
// 	            }
				
// 	          }
// 	          .equal-division-item_2 {
// 	            padding: 0.25rem 0.38rem;
// 	            flex: 1 1 10.81rem;
// 	            .section_7 {
// 	              padding: 0.63rem 0.75rem 0.75rem;
// 	              background-color: #1751e6cc;
// 	              border-radius: 0.5rem;
// 	              .group_5 {
// 	                padding: 0 1.5rem;
// 	              }
// 	              .space-x-4 {
// 	                & > view:not(:first-child),
// 	                & > text:not(:first-child),
// 	                & > image:not(:first-child) {
// 	                  margin-left: 0.25rem;
// 	                }
// 	              }
// 	            }
// 	            .section_8 {
// 	              padding: 1.25rem 0.5rem 1.25rem 0.75rem;
// 	              background-color: #1751e6cc;
// 	              border-radius: 0.5rem;
// 	            }
// 	          }
// 	          .space-y-10 {
// 	            & > view:not(:first-child),
// 	            & > text:not(:first-child),
// 	            & > image:not(:first-child) {
// 	              margin-top: 0.63rem;
// 	            }
// 	          }
// 	          .space-y-12 {
// 	            & > view:not(:first-child),
// 	            & > text:not(:first-child),
// 	            & > image:not(:first-child) {
// 	              margin-top: 0.75rem;
// 	            }
// 	          }
// 	          .group_6 {
// 	            padding: 0 1.63rem;
// 	          }
// 	        }
// 	        .space-x-29 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 0.1rem;
// 	          }
// 	        }
// 	        .pos {
// 	          position: absolute;
// 	          left: 0;
// 	          right: 0;
// 	          top: 0;
// 	        }
// 	        .space-x-6 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 0.38rem;
// 	          }
// 	        }
// 	        .font_5 {
// 	          font-size: 0.75rem;
// 	          font-family: PingFangSC;
// 	          line-height: 0.69rem;
// 	          color: #ffffff;
// 	        }
// 	      }
// 	    }
// 	    .space-y-4 {
// 	      & > view:not(:first-child),
// 	      & > text:not(:first-child),
// 	      & > image:not(:first-child) {
// 	        margin-top: 0.5rem;
// 	      }
// 	    }
// 	    .font_2 {
// 	      font-size: 1rem;
// 	      font-family: PingFangSC;
// 	      line-height: 0.69rem;
// 	      color: #ffffff;
// 	    }
// 	    .space-x-8 {
// 	      & > view:not(:first-child),
// 	      & > text:not(:first-child),
// 	      & > image:not(:first-child) {
// 	        margin-left: 0.5rem;
// 	      }
// 	    }
// 	    .space-x-10 {
// 	      & > view:not(:first-child),
// 	      & > text:not(:first-child),
// 	      & > image:not(:first-child) {
// 	        margin-left: 0.63rem;
// 	      }
// 	      .section_3 {
// 	        padding: 0.5rem 0.63rem;
// 	        background-color: #7e5a9d4d;
// 	        border-radius: 1rem;
// 	        backdrop-filter: blur(0.31rem);
// 	        height: 2rem;
// 	        .space-x-24 {
// 	          & > view:not(:first-child),
// 	          & > text:not(:first-child),
// 	          & > image:not(:first-child) {
// 	            margin-left: 1.5rem;
// 	          }
// 	          .text_2 {
// 	            line-height: 0.72rem;
// 	          }
// 	        }
// 	        .image_4 {
// 	          width: 0.63rem;
// 	          height: 0.94rem;
// 	        }
// 	      }
// 	      .section_4 {
// 	        margin-right: 1.25rem;
// 	        padding: 0.75rem 0.63rem 0.5rem;
// 	        background-color: #7e5a9d4d;
// 	        border-radius: 1rem;
// 	        backdrop-filter: blur(0.31rem);
// 	        height: 2rem;
// 	        .text_3 {
// 	          line-height: 0.72rem;
// 	        }
// 	        .image_5 {
// 	          margin-right: 0.25rem;
// 	          width: 0.63rem;
// 	          height: 0.38rem;
// 	        }
// 	      }
// 	    }
// 	    .image_7 {
// 	      width: 0.88rem;
// 	      height: 0.88rem;
// 	    }
// 	    .font_3 {
// 	      font-size: 0.88rem;
// 	      font-family: PingFangSC;
// 	      line-height: 0.81rem;
// 	      color: #9b97bc;
// 	    }
// 	  }
// 	}
// .page {
//   background-color: #000000;
//   width: 100%;
//   overflow-y: auto;
//   overflow-x: hidden;
//   height: 100%;
  
//   .image-wrapper_2 {
//     padding-bottom: 0.38rem;
//     overflow-y: auto;
//     .header {
//       padding: 1rem 0.88rem 0.75rem;
//       background-color: #ffffff4d;
//       .space-x-6-reverse {
//         & > view:not(:last-child),
//         & > text:not(:last-child),
//         & > image:not(:last-child) {
//           margin-right: 0.38rem;
//         }
//         .image {
//           width: 1.06rem;
//           height: 0.69rem;
//         }
//         .image_2 {
//           width: 0.94rem;
//           height: 0.69rem;
//         }
//         .image_3 {
//           width: 1.5rem;
//           height: 0.72rem;
//         }
//       }
//       .text {
//         margin-top: 2rem;
//         color: #ffffff;
//         font-size: 1.16rem;
//         font-family: PingFangSC;
//         line-height: 1.06rem;
//       }
//       .section {
//         padding: 0.38rem 0.75rem;
//         background-color: #ffffff99;
//         border-radius: 1rem;
//         width: 5.44rem;
//         border: solid 0.031rem #00000014;
//         .image-wrapper {
//           width: 1.19rem;
//           .image_5 {
//             width: 1.19rem;
//             height: 0.44rem;
//           }
//           .image_4 {
//             width: 1.13rem;
//             height: 1.06rem;
//           }
//         }
//         .section_2 {
//           background-color: #00000033;
//           width: 0.063rem;
//           height: 1.16rem;
//         }
//       }
//       .space-x-11 {
//         & > view:not(:first-child),
//         & > text:not(:first-child),
//         & > image:not(:first-child) {
//           margin-left: 0.69rem;
//         }
//       }
//       .pos {
//         position: absolute;
//         right: 0.44rem;
//         top: 3.06rem;
//       }
//     }
//     .image_6 {
//       width: 23.44rem;
//       height: 41.69rem;
//     }
//   }
//   .tab-bar {
//     padding: 0.25rem 3.38rem;
//     background-color: #167df2;
//     backdrop-filter: blur(0.63rem);
//     .space-y-2 {
//       & > view:not(:first-child),
//       & > text:not(:first-child),
//       & > image:not(:first-child) {
//         margin-top: 0.13rem;
//       }
//       .image_7 {
//         width: 1.69rem;
//         height: 1.69rem;
//       }
//     }
//     .font_1 {
//       font-size: 0.69rem;
//       font-family: PingFangSC;
//       line-height: 0.63rem;
//       color: #ffffffb3;
//     }
//     .text_2 {
//       color: #cfcfcf;
//     }
//   }
// }
// @media screen and (max-width: 300px) {
// 	.page .report .report_header .report-header-img {
// 		top: -1.5rem;
// 	}
// }
</style>