uni_mattress/sleep/pages/alertSetting/alertSetting.vue

<template>
	<view class="flex-col justify-start page">
	  <cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>
	  
	  <time-slot
	      ref="timeslot"
	      :title="'选择时间段'"
	      @confirm="confirmTime">
	  </time-slot>
		
	  <view class="flex-col justify-start section">
		  
	    <view class="flex-col section_2 space-y-32">
	      <view class="flex-col">
	        <text class="self-start font_1 text_2">心率异常提醒</text>
	        <view class="flex-col section_6 view space-y-10">
	          <view class="flex-row justify-between self-start equal-division">
	            <view class="flex-row items-end space-x-4 items-center">
				  <switch checked color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">短信提醒</text>
	            </view>
	            <view class="flex-row items-end space-x-4 items-center">
	              <switch color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">电话语音</text>
	            </view>
	          </view>
	          <view class="flex-col">
	            <view class="flex-row justify-between items-center list-item" :key="i" v-for="(item, i) in list1">
	              <text class="font_2 text_3">心率过速提醒值</text>
	              <view class="flex-row items-center group_3 space-x-6">
					<picker @change="bindHeartPickerChange" :value="index" :range="array">
						<view class="uni-input">
							<text class="font_3">{{array[index]}}</text>
							<text class="font_4">次/分钟</text>
							<image
							  class="shrink-0 image_7"
							  src="../../static/iconRight.png"
							/>
						</view>
					</picker>  
					  
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col group_5 space-y-14">
	        <text class="self-start font_1">呼吸率异常提醒</text>
	        <view class="flex-col section_6 space-y-10">
	          <view class="flex-row justify-between self-start equal-division">
	            <view class="flex-row items-end space-x-4 items-center">
	              <switch checked color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">短信提醒</text>
	            </view>
	            <view class="flex-row items-end space-x-4 items-center">
	              <switch checked color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">电话语音</text>
	            </view>
	          </view>
	          <view class="flex-col">
	            <view class="flex-row justify-between items-center list-item" :key="i" v-for="(item, i) in list2">
	              <text class="font_2 text_3">呼吸率过速提醒值</text>
	              <view class="flex-row items-center space-x-6">
	                <picker @change="bindBreathPickerChange" :value="index" :range="array">
	                	<view class="uni-input">
							<text class="font_3">{{array[index]}}</text>
							<text class="font_4">次/分钟</text>
							<image
							  class="shrink-0 image_7"
							  src="../../static/iconRight.png"
							/>
						</view>
	                </picker>
					
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col group_5">
	        <view class="flex-row items-center group_6 space-x-30">
	          <text class="font_1">离床预警提醒</text>
	          <text class="font_5 text_4">注：离床预警生效需要用户在床超过1小时。</text>
	        </view>
	        <view class="flex-col section_7 space-y-24">
	          <view class="flex-row justify-between self-start equal-division">
	            <view class="flex-row items-end space-x-4 items-center">
	              <switch checked color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">短信提醒</text>
	            </view>
	            <view class="flex-row items-end space-x-4 items-center">
	              <switch color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">电话语音</text>
	            </view>
	          </view>
	          <view class="flex-col group_7">
	            <view class="flex-row justify-between items-center group_8">
	              <text class="font_2 text_3">离床预警区间</text>
	              <view @click="handleTimeChoose" class="flex-row items-center group_9 space-x-20">
	                <text class="font_3">22:00 - 6:00</text>
	                <image
	                  class="shrink-0 image_7"
	                  src="../../static/iconRight.png"
	                />
	              </view>
	            </view>
	            <view class="flex-row justify-between items-center group_10">
	              <text class="font_2 text_3">离床未归提醒</text>
	              <view class="flex-row items-center group_11 space-x-8">
					<picker @change="bindBedPickerChange" :value="index" :range="array">
						<view class="uni-input">
							<text class="font_3">{{array[index]}}</text>
							<text class="font_4">分钟</text>
							<image
							  class="shrink-0 image_7"
							  src="../../static/iconRight.png"
							/>
						</view>
					</picker>    
					  
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col group_5 space-y-14">
	        <text class="self-start font_1">紧急求助开关</text>
	        <view class="flex-col justify-start items-start section_8">
	          <view class="flex-row space-x-6">
	            <view class="flex-row items-center equal-division-item space-x-4">
	              <switch checked color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">短信提醒</text>
	            </view>
	            <view class="flex-row items-center equal-division-item space-x-4">
	              <switch checked color="#1E09DE" style="transform:scale(0.7)"/>
	              <text class="font_2">电话语音</text>
	            </view>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col group_5 space-y-20">
	        <view class="flex-col space-y-12">
	          <text class="self-start font_1 text_5">语音短信提示手机号码设置</text>
	          <view class="flex-col space-y-4">
	            <text class="font_5 text_6">
	              注：设置提醒手机号需注册“小云睡眠”小程序领取短信语言套餐包，才能发送短信语音提醒。
	            </text>
	            <view class="flex-col section_9">
	              <view class="flex-row justify-between items-center list-item">
	                <text class="font_2 text_8">号码1</text>
	                <view class="flex-row items-center space-x-8">
	                  <input class="uni-input" placeholder-style="color:rgba(255, 255, 255, 0.5);text-align:right" type="number" placeholder="输入手机号码" />
	                </view>
	              </view>
	              <view class="flex-row justify-center items-center list-item space-x-6">
	                <image
	                  class="image_9"
	                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16878800827365047681.png"
	                />
	                <text class="font_2">添加手机号码</text>
	              </view>
	            </view>
	          </view>
	        </view>
	        <view class="flex-col justify-start items-center self-center button"><text class="text_9">保存设置</text></view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"

	export default {
		data() {
			return {
				value: 0,
				list1: [null, null],
				list2: [null, null],
				title: 'picker',
				array: ['90', '91', '92', '93', '94'],
				index: 0
			}
		},
		components: {
			timeSlot
		},
		methods: {
			handleInput() {
				this.$refs.inputDialog.open()
			},
			handleTimeChoose() {
				this.$refs.timeslot.open();
			},
			confirmTime(val) {
				
			},
			bindBreathPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.index = e.detail.value
			},
			bindHeartPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.index = e.detail.value
			},
			bindBedPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.index = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  
  .section{
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16878800827323657149.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .section_2 {
      padding-bottom: 1.25rem;
      background-image: linear-gradient(180deg, #1e1ef7f2 0%, #1dbff79c 100%);
      backdrop-filter: blur(0.19rem);
      .section_3 {
        padding: 1.13rem 0.44rem 0.38rem;
        background-color: #ffffff4d;
        .group {
          padding: 0 0.5rem;
          .image {
            width: 1.06rem;
            height: 0.69rem;
          }
          .image_2 {
            width: 0.94rem;
            height: 0.69rem;
          }
          .image_3 {
            width: 1.5rem;
            height: 0.72rem;
          }
        }
        .space-x-6-reverse {
          & > view:not(:last-child),
          & > text:not(:last-child),
          & > image:not(:last-child) {
            margin-right: 0.38rem;
          }
        }
        .group_2 {
          padding: 0.63rem 0 0.38rem;
          .text {
            font-size: 1.16rem;
            line-height: 1.06rem;
          }
          .section_4 {
            padding: 0.38rem 0.75rem;
            background-color: #ffffff99;
            border-radius: 1rem;
            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_5 {
              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;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .space-y-22 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 1.38rem;
        }
      }
      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.03rem;
        color: #ffffff;
      }
      .text_2 {
        margin-left: 1.25rem;
        margin-top: 1.38rem;
      }
      .section_6 {
        padding: 0.94rem 0.63rem 0.13rem;
        background-color: #ffffff33;
        border-radius: 1rem;
      }
      .view {
        margin: 0.88rem 1.25rem 0;
      }
      .space-y-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.63rem;
        }
      }
      .group_5 {
        padding: 0 1.25rem;
        .group_6 {
          padding-bottom: 0.88rem;
          .text_4 {
            line-height: 0.59rem;
          }
        }
        .space-x-30 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 0.3rem;
          }
        }
        .section_7 {
          padding: 0.94rem 0.63rem 0;
          background-color: #ffffff33;
          border-radius: 1rem;
          .group_7 {
            border-bottom: solid 0.063rem #ffffff1a;
            .group_8 {
              padding-bottom: 0.88rem;
              border-bottom: solid 0.063rem #ffffff1a;
              .group_9 {
                margin-right: 0.19rem;
              }
              .space-x-20 {
                & > view:not(:first-child),
                & > text:not(:first-child),
                & > image:not(:first-child) {
                  margin-left: 1.25rem;
                }
              }
            }
            .group_10 {
              padding: 0.88rem 0;
              .group_11 {
                margin-right: 0.19rem;
              }
            }
          }
        }
        .space-y-24 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 1.5rem;
          }
        }
        .section_8 {
          padding: 0.63rem 0;
          background-color: #ffffff33;
          border-radius: 1rem;
        }
        .space-y-12 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 0.75rem;
          }
          .text_5 {
            line-height: 1.06rem;
          }
          .space-y-4 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-top: 0.55rem;
            }
            .text_6 {
              line-height: 0.75rem;
            }
            .section_9 {
              padding: 0 0.63rem;
              background-color: #ffffff33;
              border-radius: 1rem;
            }
          }
        }
        .font_5 {
          font-size: 0.63rem;
          font-family: PingFangSC;
          color: #120399;
        }
        .space-x-8 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 0.5rem;
          }
          .text_7 {
            color: #ffffff80;
          }
          .image_8 {
            width: 1.13rem;
            height: 1.13rem;
          }
        }
        .button {
          padding: 0.5rem 0;
          background-image: linear-gradient(90deg, #5611f780 0%, #1e1ef7f2 100%);
          border-radius: 1rem;
          width: 8.69rem;
          .text_9 {
            color: #ffffff;
            font-size: 1rem;
            font-family: PingFangSC;
            line-height: 0.94rem;
          }
        }
      }
      .space-y-14 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.88rem;
        }
      }
      .equal-division {
        width: 12.5rem;
      }
      .font_2 {
        font-size: 0.88rem;
        font-family: PingFangSC;
        line-height: 0.81rem;
        color: #ffffff;
      }
      .text_3 {
        opacity: 0.8;
      }
      .font_3 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 0.81rem;
        color: #ffffff;
      }
      .image_7 {
        width: 0.38rem;
        height: 0.69rem;
      }
      .font_4 {
        font-size: 0.75rem;
        font-family: PingFangSC;
        line-height: 0.69rem;
        color: #ffffff;
      }
      .space-x-6 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.38rem;
        }
        .equal-division-item {
          padding: 0.25rem 0.63rem;
          width: 6.84rem;
        }
      }
      .space-x-4 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.25rem;
        }
      }
      .image_6 {
        width: 1.38rem;
        height: 0.88rem;
      }
      .space-y-20 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 1.25rem;
        }
      }
      .list-item {
        padding: 0.88rem 0;
        border-bottom: solid 0.063rem #ffffff1a;
        .group_3 {
          margin-right: 0.19rem;
        }
        .text_8 {
          line-height: 0.78rem;
        }
        .image_9 {
          width: 0.88rem;
          height: 0.88rem;
        }
      }
    }
    .space-y-32 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 2rem;
      }
    }
  }
}
@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}


</style>