page { background: #F8F9FA; } .content { width: 100vw; display: flex; flex-direction: column; padding: 30rpx; position: relative; box-sizing: border-box; } .see-aico-info { width: 630rpx; height: 84rpx; padding: 0 30rpx; background: #FFFFFF; box-shadow: 20rpx 8rpx 20rpx 0rpx rgba(219, 225, 231, 0.2); border-radius: 12rpx 12rpx 12rpx 12rpx; } .flex-level-center { display: flex; /*水平居中*/ justify-content: center; } .flex-vertical-center { display: flex; /*垂直居中*/ align-items: center; } .flex-column{ display: flex; flex-direction: column; } .flex-space-between { display: flex; justify-content: space-between; } .see-aico-item { display: flex; flex: 1; height: 100%; } .see-aico-img { width: 36rpx; height: 36rpx; margin-right: 12rpx; } .see-aico-text { height: 36rpx; font-weight: 400; font-size: 30rpx; color: #333333; line-height: 36rpx; text-align: left; font-style: normal; text-transform: none; align-items: center; } .data-box { width: 100%; } .start-see-aico { margin-top: 440rpx; width: 436rpx; height: 144rpx; background: #FFFFFF; box-shadow: 0rpx 8rpx 48rpx 0rpx #E3E4E5; border-radius: 40rpx 40rpx 40rpx 40rpx; border: 4rpx solid #F6F9FD; } .in-see-aico { width: 100%; } .in-see-aico-prompt { display: flex; margin: 40rpx 0; } .in-see-aico-img { width: 60rpx; height: 60rpx; margin-right: 16rpx; animation: rotate 2s linear infinite; } .in-see-aico-list { width: 100%; background: #FFFFFF; box-shadow: 20rpx 8rpx 20rpx 0rpx rgba(219, 225, 231, 0.2); border-radius: 12rpx 12rpx 12rpx 12rpx; margin-bottom: 16rpx; box-sizing: border-box; padding: 0 30rpx; } .input-img { height: 30rpx; width: 30rpx; margin-right: 16rpx; } .bindNotesInput { height: 40rpx; width: 100%; font-weight: 400; font-size: 26rpx; color: #888888; line-height: 40rpx; text-align: left; font-style: normal; text-transform: none; } .in-see-aico-list-tbm { padding-top: 20rpx; padding-bottom: 20rpx; } .device-name { font-weight: 400; font-size: 32rpx; color: #333333; line-height: 36rpx; text-align: left; font-style: normal; text-transform: none; margin-right: 20rpx; } .device-status-img { width: 32rpx; height: 32rpx; } .in-see-aico-btn { width: 116rpx; height: 56rpx; background: #FFFFFF; border-radius: 8rpx 8rpx 8rpx 8rpx; font-weight: 400; font-size: 28rpx; line-height: 36rpx; text-align: left; font-style: normal; text-transform: none; } .in-see-aico-submit { width: 630rpx; height: 90rpx; border-radius: 292rpx 292rpx 292rpx 292rpx; font-weight: 400; font-size: 32rpx; color: #FFFFFF; line-height: 42rpx; text-align: center; font-style: normal; text-transform: none; margin: 40rpx auto 0; } .c-888 { color: #888888; border: 1rpx solid #888888; } .c-F76666 { color: #F76666; border: 1rpx solid #F76666; } .c-3AA { color: #0BC3AA; border: 1rpx solid #0BC3AA; } /* 定义一个旋转动画 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .in-see-aico-prompt-box { width: 408rpx; } .in-see-aico-prompt-title { font-weight: 400; font-size: 32rpx; color: #333333; line-height: 48rpx; text-align: left; font-style: normal; text-transform: none; } .in-see-aico-prompt-text { font-weight: 400; font-size: 24rpx; color: #888888; line-height: 36rpx; text-align: left; font-style: normal; text-transform: none; } .start-img { width: 72rpx; height: 72rpx; margin-right: 30rpx; } .start-text { width: 144rpx; height: 36rpx; font-weight: 400; font-size: 36rpx; color: #0BC3AA; line-height: 36rpx; text-align: left; font-style: normal; text-transform: none; } .end-see-aico-prompt-title { font-weight: 400; font-size: 32rpx; color: #666666; line-height: 48rpx; text-align: left; font-style: normal; text-transform: none; } .end-see-aico-img { width: 60rpx; height: 60rpx; margin-right: 20rpx; } .end-see-aico-list-tbm-1 { padding-top: 40rpx; padding-bottom: 40rpx; } .end-see-aico-list-tbm-2 { padding-top: 24rpx; padding-bottom: 24rpx; width: 100%; } .end-see-aico-item { width: 100%; font-weight: 400; font-size: 30rpx; color: #333333; line-height: 40rpx; text-align: left; font-style: normal; text-transform: none; } .see-aico-d-count { font-size: 36rpx; color: #333333; line-height: 40rpx; } .normal-d-count { font-size: 36rpx; color: #0BC3AA; line-height: 40rpx; } .abnormal-d-count { font-size: 36rpx; color: #F76666; line-height: 40rpx; } .mb36 { margin-bottom: 36rpx; } .end-see-aico-btn-box { margin-top: 80rpx; } .end-see-aico-btn-1{ width: 330rpx; height: 80rpx; background: linear-gradient( 315deg, #0ABCA4 0%, rgba(11,195,170,0.8) 100%); border-radius: 292rpx 292rpx 292rpx 292rpx; } .end-see-aico-btn-color-1{ background: linear-gradient( 315deg, #0ABCA4 0%, rgba(11,195,170,0.8) 100%); } .end-see-aico-btn-color-2{ background: linear-gradient( 315deg, #FF6C2E 0%, #FF9B71 100%); } .end-see-aico-btn{ width: 330rpx; height: 80rpx; border-radius: 292rpx 292rpx 292rpx 292rpx; font-weight: 400; font-size: 30rpx; color: #FFFFFF; line-height: 42rpx; text-align: center; font-style: normal; text-transform: none; } .popup-box-1{ width: 572rpx; height: 352rpx; padding: 0 40rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; box-sizing: border-box; } .popup-box-2{ width: 572rpx; height: 352rpx; padding: 0 62rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; box-sizing: border-box; } .popup-title-1{ font-weight: 400; font-size: 32rpx; color: #333333; line-height: 40rpx; text-align: center; font-style: normal; text-transform: none; } .popup-text-1{ color: #777777; margin: 40rpx 0; text-align: center; text-overflow: ellipsis; } .popup-btn-1{ width: 236rpx; height: 72rpx; border-radius: 292rpx 292rpx 292rpx 292rpx; font-weight: 400; font-size: 28rpx; color: #FFFFFF; line-height: 40rpx; text-align: center; font-style: normal; text-transform: none; } .popup-btn-2{ width: 276rpx; height: 72rpx; border-radius: 292rpx 292rpx 292rpx 292rpx; font-weight: 400; font-size: 28rpx; color: #FFFFFF; line-height: 40rpx; text-align: center; font-style: normal; text-transform: none; } .popup-abnormal-img { height: 48rpx; width: 48rpx; margin-right: 16rpx; }