uni_mattress/sleep/pages/home/index.vue

<template>
	<view class="flex-col justify-start home-container">
		<view class="container-bg"></view>
		<cu-custom bgColor="#fff"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>
		
		<view class="flex-col home-module space-y-20">
			
			<!-- no device added -->
			<view v-if="!deviceAdded">
				<view class="flex-col items-start home-header space-y-10">
					<text class="home-header-title">欢迎回来！</text>
					<text class="font_3 text_3 home-header-subtitle">我是小云，您的健康智慧管家。</text>
				</view>
				
				<view class="flex-row items-center home_add_devive space-x-10">
				  <image
				    class="image_4"
					src="../../static/home/homeIconAdd.png"
				  />
				  <text class="text_5">添加设备</text>
				</view>
				
				<view class="home-ad flex-col group_5 space-y-40">
					<view class="flex-col home-header space-y-6">
						<view class="flex-row items-center space-x-8">
							<text class="font_4 text_8">UU AI智能睡眠监测仪</text>
							<view class="flex-row items-center section_7">
								<text class="font_5 text_9">去看看</text>
								<image
									class="shrink-0 image_9"
									src="../../static/home/homeIconGO.png"
								/>
							</view>
						</view>
						
						<view class="flex-row items-center space-x-10">
							<text class="font_5 text_3 text_10">AI时代，全家人的睡眠健康顾问</text>
						</view>
					</view>			
				</view>
				
				<view class="flex-col">
				  <view class="flex-col group_5">		  
					<view class="flex-col home_blank_heart">
				      <view class="flex-row items-center group_7 space-x-4">
				        <image
				          class="image_6"
				          src="../../static/home/homeIconHeart.png"
				        />
				        <text class="font_1 text_9">心率</text>
				      </view>
				      <view class="flex-row justify-end items-start">
				        <view class="section_5 view"></view>
				        <text class="font_3 text_10">--</text>
				      </view>
				      <view class="flex-col group_8">
				        <text class="self-start font_4 text_11">次/分</text>
				        <view class="shrink-0 self-end section_5"></view>
				      </view>
				    </view>
					
				    <view class="flex-col home_blank_breath">
				      <view class="flex-row items-center group_10 space-x-4">
				        <image
				          class="image_7"
				          src="../../static/home/homeIconBreath.png"
				        />
				        <text class="font_1 text_12">呼吸</text>
				      </view>
				      <view class="flex-row justify-end items-start">
				        <view class="section_5 view_2"></view>
				        <text class="font_3 text_13">--</text>
				      </view>
				      <view class="flex-col group_8">
				        <text class="self-start font_4 text_11">次/分</text>
				        <view class="shrink-0 self-end section_5"></view>
				      </view>
				    </view>
					
				  </view>
				  
				  <view class="flex-row items-center home_blank_alert space-x-16">
				    <image
				      class="image_8"
				      src="../../static/home/homeIconGift.png"
				    />
				    <view class="flex-col items-start flex-auto space-y-4">
				      <text class="font_5">昨晚您的睡眠质量很好</text>
				      <text class="font_5">暂时没有预警信息</text>
				    </view>
				  </view>
				</view>
			</view>
			
			
			<!-- device added -->
			<view v-if="deviceAdded" class="flex-col">
				
				<view class="flex-col items-start home-header space-y-10">
					<text class="home-header-title">欢迎回来！</text>
					<text class="font_3 text_3 home-header-subtitle">我是小云，您的健康智慧管家。</text>
				</view>
				
				<!-- home device -->
				<view class="flex-col home-device space-y-15">
					<view class="flex-row home-device-header">
						<view class="flex-row justify-between flex-auto equal-division">
							<view class="flex-row equal-division-item space-x-4">
								<text class="font_3 text_5">场景</text>
								<text class="font_3">老人房</text>
							</view>
							<view class="flex-row equal-division-item space-x-14">
								<view class="flex-row space-x-4">
									<image class="shrink-0 image_6" src="../../static/home/homeIconWifi.png" />
									<text class="font_3">在线</text>
								</view>
								<view class="flex-row items-center space-x-6">
									<text class="font_3 text_6">45%</text>
									<image class="shrink-0 image_7" src="../../static/home/homeIconPower.png" />
								</view>
							</view>
						</view>
						
						<view class="flex-row items-center section_5 space-x-4">
							<image class="shrink-0 image_8"	src="../../static/home/homeIconChange.png"/>
							<text class="font_3">切换</text>
						</view>
					</view>
					
					<view class="flex-row justify-center self-center home-device-status space-x-8">
						<text class="font_4 text_7">当前状态</text>
						<text class="font_4">在床</text>
					</view>
					
					<view>
						<uni-steps :options="list1" :active="active" />
					</view>
					
					<view class="flex-row self-center items-center home-device-setting">
						<image 
							class="shrink-0 image_8"
							src="../../static/home/homeIconSet.png"
						/>
						<text>设置目标</text>
					</view>
				</view>
				
				<view class="home-report flex-col group_5 space-y-40">
					<view class="flex-col home-header space-y-6">
						<view class="flex-row items-center space-x-8">
							<text class="font_4 text_8">睡眠报告</text>
							<view class="flex-row items-center section_7">
								<text class="font_5 text_9">去看看</text>
								<image
									class="shrink-0 image_9"
									src="../../static/home/homeIconGO.png"
								/>
							</view>
						</view>
						
						<view class="flex-row items-center space-x-10">
							<text class="font_5 text_3 text_10">小云已为您生成最后一份睡眠报告</text>
							<text class="font_5 text_3 text_11">2021-08-24</text>
						</view>
					</view>
					
				</view>
				
				<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">
								<view class="flex-row items-center space-x-4">
									<image
										class="shrink-0 image_10"
										src="../../static/home/homeIconHeart.png"
									/>
									<text class="font_1">心率</text>
								</view>
								<text class="self-center font_6">73</text>
							</view>
							<text class="self-start font_7 text_14">次/分</text>
						</view>
	          
						<view class="flex-row justify-center group_8 space-x-6 home-data-item equal-division-item">
							<view class="flex-col space-y-20">
								<view class="flex-row space-x-4">
									<image
										class="shrink-0 image_4"
										src="../../static/home/homeIconBreath.png"
									/>
									<text class="font_1 text_12">呼吸</text>
								</view>
								<text class="self-center font_6 text_13">24</text>
							</view>
							<text class="self-start font_7 text_15">次/分</text>
						</view>
					</view>
				</view>
			
				<view class="flex-col home-alert space-y-4">
					<view @click="jumpToAlertSetting" class="flex-row items-center space-x-4 home-alert-header">
						<image
							class="image_10"
							src="../../static/home/homeIconHeart.png"
						/>
						<text class="font_1">实时预警</text>
					</view>
					
					<view @click="handleAlertSetting" class="flex-col home-alert-list">
						<view class="flex-row justify-between items-center list-item" :key="i" v-for="(item, i) in list_alerts">
							<view class="flex-row items-center space-x-6">
								<image
									class="shrink-0 image_11"
									src="../../static/home/homeIconAlert.png"
								/>
								<text class="font_8">心率警报</text>
								<text class="font_9 text_16">2:25</text>
							</view>
							
							<view class="flex-row items-baseline space-x-4">
								<text class="font_10">102</text>
								<text class="font_8">次/分</text>
							</view>
						</view>
					</view>
				</view>
			</view>
	  </view>
	  
	  <!-- <tab-bar currentPage="home" /> -->
	  
	</view>
</template>

<script>
export default {
	data() {
		return {
			deviceAdded: true,
			list_alerts: [null, null],
			active: 4,
			list1: [{
				title: '昨日就寝 11:24PM'
			}, {
				title: '就寝目标 11:00PM'
			}, {
				title: '起床目标 7:00AM'
			}, {
				title: '今日起床 7:14AM'
			}]
		};
	},
	created() {
		
	},
	computed: {
		
	},
	methods: {
		handleAlertSetting() {
			uni.navigateTo({
				url: "/pages/alertSetting/alertSetting"
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.equal-division {
		.equal-division-item {
			padding: 0.25rem 0.38rem 0;
			flex: 1 1 10.81rem;
		}
	}
	
	.home_add_devive {
	  margin-right: 1.25rem;
	  margin: 1rem;
	  padding: 3.75rem 0;
	  background-color: #0233c699;
	  border-radius: 1rem;
	  backdrop-filter: blur(0.63rem);
	  width: 20.94rem;
	  
	  .image_4 {
	    margin-left: 6.38rem;
	    width: 1.5rem;
	    height: 1.5rem;
	  }
	  .text_5 {
	    color: #ffffff;
	    font-size: 1.5rem;
	    font-family: PingFangSC;
	    line-height: 1.38rem;
	  }
	}
	.space-x-10 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 0.63rem;
	  }
	}
	
	.home_ad {
	  margin-left: 2.25rem;
	  background: url(../../static/home/homeBg2.png);
	  background-repeat: no-repeat;
	  background-size: contain;
	  
	  .text_6 {
	    padding: 0.13rem 0;
	    color: #ffffff;
	    font-size: 1rem;
	    font-family: PingFangSC;
	    line-height: 0.94rem;
	  }
	  .section_4 {
	    padding: 0.13rem 0.38rem;
	    background-image: linear-gradient(90deg, #2c25f799 0%, #061599 100%);
	    border-radius: 0.44rem;
	    width: 2.88rem;
	    height: 0.88rem;
	    .font_2 {
	      font-size: 0.69rem;
	      font-family: PingFangSC;
	      line-height: 0.63rem;
	      color: #ffffff;
	    }
	    .text_7 {
	      font-size: 0.63rem;
	      line-height: 0.56rem;
	    }
	    .image_5 {
	      width: 0.19rem;
	      height: 0.31rem;
	    }
	  }
	}
	.space-x-6 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 0.38rem;
	  }
	}
	
	.group_5 {
	  padding-left: 1rem;
	  padding-right: 1rem;
	  
	  .font_2 {
	    font-size: 0.69rem;
	    font-family: PingFangSC;
	    line-height: 0.63rem;
	    color: #ffffff;
	  }
	  .text_8 {
	    font-size: 0.63rem;
	    line-height: 0.59rem;
	    opacity: 0.6;
	  }
	  .home_blank_heart {
	    margin-top: 1rem;
		opacity: 1;
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(52, 26, 75, 1) 0%, rgba(22, 125, 242, 1) 100%);
		backdrop-filter: blur(20px);
		padding:1rem 0rem 2rem 1rem;
		
	    .group_7 {
	      padding-bottom: 1.13rem;
	      .image_6 {
	        width: 1.13rem;
	        height: 0.88rem;
	      }
	      .text_9 {
	        line-height: 1.03rem;
	      }
	    }
	    .view {
	      margin-right: -20.13rem;
	    }
	    .text_10 {
	      margin-right: 18.75rem;
	      margin-top: 1rem;
	    }
	  }
	  .home_blank_breath {
	    margin-top: 1rem;
	    opacity: 1;
	    border-radius: 16px;
	    background: linear-gradient(180deg, rgba(52, 26, 75, 1) 0%, rgba(22, 125, 242, 1) 100%);
	    backdrop-filter: blur(20px);
	    padding:1rem 0rem 2rem 1rem;
		
	    .group_10 {
	      padding-bottom: 1.25rem;
	      .image_7 {
	        width: 1.13rem;
	        height: 1.06rem;
	      }
	      .text_12 {
	        line-height: 1rem;
	      }
	    }
	    .view_2 {
	      margin-right: -20rem;
	    }
	    .text_13 {
	      margin-right: 18.63rem;
	      margin-top: 1rem;
	    }
	  }
	  .space-x-4 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 0.25rem;
	    }
	  }
	  .font_1 {
	    font-size: 1.13rem;
	    font-family: PingFangSC;
	    line-height: 1.06rem;
	    color: #ffffff;
	  }
	  .section_5 {
	    background-color: #ffffff1a;
	    width: 15.94rem;
	    height: 0.063rem;
	  }
	  .font_3 {
	    font-size: 2.5rem;
	    font-family: PingFangSC;
	    line-height: 0.19rem;
	    color: #ffffff;
	  }
	  .group_8 {
	    margin-top: 1.38rem;
	    padding-left: 0.63rem;
	    .font_4 {
	      font-size: 0.69rem;
	      font-family: PingFangSC;
	      line-height: 0.63rem;
	      color: #ffffff80;
	    }
	    .text_11 {
	      font-size: 0.75rem;
	      line-height: 0.69rem;
	    }
	  }
	}
	.home_blank_alert {
	  margin: 1rem 1.25rem 0;
	  padding: 0.94rem;
	  background-color: #02299ecc;
	  border-radius: 1rem;
	  .image_8 {
	    width: 7.06rem;
	    height: 4.94rem;
	  }
	  .space-y-4 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-top: 0.25rem;
	    }
	    .font_5 {
	      font-size: 0.88rem;
	      font-family: PingFangSC;
	      line-height: 1.06rem;
	      color: #167df2;
	    }
	  }
	}
	.space-x-16 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 1rem;
	  }
	}
	
	
.container-bg {
	position: fixed;
	left: -130px;
	top: -130px;
	width: 480px;
	height: 344px;
	opacity: 1;
	overflow: hidden;
	border-radius: 63px;
	-webkit-transform: rotate(-315deg);
	transform: rotate(-315deg);
	background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
}

.home-container {
  padding-bottom: 2rem;
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  
  .home-module {
    padding: 1.75rem 0 3.38rem;
    overflow-y: auto;
	z-index: 100;
	
    .home-header {
      padding: 0 1.25rem;
      .home-header-title {
        color: #ffffff;
        font-size: 1.25rem;
        font-family: PingFangSC;
        line-height: 1.16rem;
      }
	  .text_8 {
		  color: #ffffff;
		  opacity: 1;
	  }
      .text_3 {
        opacity: 0.6;
      }
      .home-header-subtitle {
        line-height: 0.72rem;
      }
      .space-x-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.63rem;
        }
        .text_10 {
          line-height: 0.59rem;
        }
        .text_11 {
          line-height: 0.47rem;
        }
      }
    }
    .space-y-10 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.63rem;
      }
    }

    .home-device {
      margin: 1rem 1.25rem;
      padding-bottom: 2rem;
      background-color: #0233c699;
      border-radius: 1rem;
      backdrop-filter: blur(0.63rem);
	  
	  .home-device-setting {
		  width: 70px;
		  height: 20px;
		  opacity: 1;
		  border-radius: 7px;
		  background: linear-gradient(90deg, rgba(255, 35, 247, 1) 0%, rgba(91, 30, 154, 1) 100%);
		  
		  .image_8 {
			  width: 10px;
			  height: 10px;
		  }
		  
		  font-size: 10px;
		  font-weight: 400;
		  line-height: 10px;
		  color: rgba(255, 255, 255, 1);
		  padding: 0.3rem;
	  }
      .home-device-header {
        background-color: #ffffff33;
        border-radius: 1rem 1rem 0px 0px;
        .equal-division {
          padding: 0 1rem;
          .equal-division-item {
            padding: 0.38rem 0;
            .text_5 {
              opacity: 0.5;
            }
          }
          .space-x-14 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 0.88rem;
            }
          }
        }
        .section_5 {
          padding: 0.38rem 0.5rem;
          background-image: linear-gradient(90deg, #2c25f799 0%, #061599 100%);
          border-radius: 0px 1rem 0px 0px;
          height: 1.5rem;
          .image_8 {
            width: 0.75rem;
            height: 0.75rem;
          }
        }
      }
      .home-device-status {
        padding: 0.25rem 0 0.25rem 0.25rem;
        background-color: #ffffff33;
        border-radius: 0.75rem;
        width: 7.88rem;
        .text_7 {
          opacity: 0.4;
        }
      }
    }
    .space-y-15 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.94rem;
      }
    }
    .font_3 {
      font-size: 0.75rem;
      font-family: PingFangSC;
      line-height: 0.69rem;
      color: #ffffff;
    }
	
    .home-report {
      margin: 0 1.25rem;
      padding: 1rem 0;
      background-image: url(../../static/home/homeReportBg.png);
      background-size: contain;
      background-repeat: no-repeat;
	  
      .space-y-6 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.38rem;
        }
      }
    }
	.home-ad {
		margin: 0 1.25rem;
		padding: 1rem 0;
		background-image: url(../../static/home/homeBg2.png);
		background-size: contain;
		background-repeat: no-repeat;
		
		.space-y-6 {
		  & > view:not(:first-child),
		  & > text:not(:first-child),
		  & > image:not(:first-child) {
		    margin-top: 0.38rem;
		  }
		}
	}
	
	.home-data {
		margin: 0rem 1.25rem;
		padding: 1rem 0rem;
		
		.home-data-item {
			padding: 1rem 0rem;
			margin: 0 0.3rem;
			opacity: 1;
			border-radius: 16px;
			background: linear-gradient(180deg, rgba(52, 26, 75, 0.65) 0%, rgba(22, 125, 242, 1) 100%);
			backdrop-filter: blur(20px);
		}
	}
	.group_6 {
	  overflow-x: hidden;
	  width: 100%;
	  
	  .group_7 {
	    overflow-x: hidden;
	    width: 10rem;
		
	    .group_9 {
	      margin-left: 2.25rem;
	    }
	    .text_14 {
	      margin-top: 3.5rem;
	    }
	  }
	  .group_8 {
	    width: 10rem;
		
	    .text_15 {
	      margin-top: 3.63rem;
	    }
	  }
	  .font_6 {
	    font-size: 3rem;
	    font-family: PingFangSC;
	    line-height: 2.19rem;
	    color: #ffffff;
	  }
	  .font_7 {
	    font-size: 0.75rem;
	    font-family: PingFangSC;
	    line-height: 0.69rem;
	    color: #ffffff80;
	  }
	}
    .space-y-40 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 2.5rem;
      }
    }
    .space-x-8 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.5rem;
      }
      .text_8 {
        padding: 0.13rem 0;
      }
      .section_7 {
        padding: 0.13rem 0.38rem;
        background-image: linear-gradient(90deg, #ff23f7 0%, #5b1e9a 100%);
        border-radius: 0.44rem;
        height: 0.88rem;
        .text_9 {
          line-height: 0.56rem;
        }
        .image_9 {
          width: 0.19rem;
          height: 0.31rem;
        }
      }
    }
    .font_4 {
      font-size: 1rem;
      font-family: PingFangSC;
      line-height: 0.94rem;
      color: #ffffff;
    }
    .font_5 {
      font-size: 0.63rem;
      font-family: PingFangSC;
      color: #ffffff;
    }
    .space-x-6 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.38rem;
      }
      .text_6 {
        line-height: 0.56rem;
      }
      .image_7 {
        width: 1.31rem;
        height: 0.69rem;
      }
      .image_11 {
        width: 1.13rem;
        height: 0.94rem;
      }
      .font_9 {
        font-size: 0.88rem;
        font-family: PingFangSC;
        line-height: 0.69rem;
        color: #167df2;
      }
      .text_16 {
        line-height: 0.63rem;
      }
    }
    .space-x-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.25rem;
      }
      .image_6 {
        width: 0.94rem;
        height: 0.75rem;
      }
      .image_10 {
        width: 1.13rem;
        height: 0.88rem;
      }
      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.03rem;
        color: #ffffff;
      }
      .image_4 {
        width: 1.13rem;
        height: 1.06rem;
      }
      .text_12 {
        line-height: 1rem;
      }
      .font_10 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 0.81rem;
        color: #ff465a;
      }
    }
    .home-alert {
      margin: 0 1.25rem;
      padding: 1rem 0.88rem 0.13rem;
      background-color: #0233c6cc;
      border-radius: 1rem;
      .home-alert-header {
      }
      .home-alert-list {
        .list-item {
          padding: 0.88rem 0;
          border-bottom: solid 0.063rem #ffffff1a;
        }
      }
    }
    .space-y-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.25rem;
      }
    }
    .font_8 {
      font-size: 0.88rem;
      font-family: PingFangSC;
      line-height: 0.81rem;
      color: #ffffff;
    }
  }
  .space-y-20 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 1.25rem;
    }
    .text_13 {
      line-height: 2.16rem;
    }
  }
}
</style>