647 lines
11 KiB
Plaintext
647 lines
11 KiB
Plaintext
.nav-box {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
position: relative;
|
|
/* position: fixed; */
|
|
z-index: 2;
|
|
}
|
|
|
|
.nav-box .nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-box .nav-bar .nav-bar-left,
|
|
.nav-box .nav-bar .nav-bar-right {
|
|
padding: 0 20rpx;
|
|
min-width: 36rpx;
|
|
}
|
|
|
|
.nav-box .nav-bar .nav-bar-left van-icon {
|
|
vertical-align: sub;
|
|
color: #333333;
|
|
}
|
|
|
|
.nav-box .nav-bar .nav-bar-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.nav-box .nav-bar-title {
|
|
color: red;
|
|
margin-left: -20rpx;
|
|
}
|
|
|
|
|
|
.water-filter {
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.top {
|
|
background-color: #FFFFFF;
|
|
|
|
}
|
|
|
|
/* 位置定位 */
|
|
.positioning {
|
|
display: flex;
|
|
margin-left: 24rpx;
|
|
padding-top: 40rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 64rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.positioning-left {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.positioning-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.positioning-icon-left {
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
}
|
|
|
|
.positioning-text {
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 9rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.positioning-icon-right {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
/* 净化前后数值 */
|
|
.purification-value {
|
|
display: flex;
|
|
margin-left: 114rpx;
|
|
}
|
|
|
|
.purification-value-left {
|
|
display: inline;
|
|
width: 210rpx;
|
|
height: 250rpx;
|
|
}
|
|
|
|
.purification-value-right {
|
|
margin-left: 116rpx;
|
|
}
|
|
|
|
.purification-value-icon {
|
|
width: 210rpx;
|
|
height: 250rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.purification-value-text {
|
|
position: absolute;
|
|
margin: 60rpx 42rpx 0 41rpx;
|
|
}
|
|
|
|
.puri-text {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #FFFFFF;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.tds {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tds-value {
|
|
font-size: 50rpx;
|
|
}
|
|
|
|
/* 净化前后水质 */
|
|
.water-quality {
|
|
margin-left: 80rpx;
|
|
margin-top: 23rpx;
|
|
}
|
|
|
|
.water-quality2 {
|
|
display: flex;
|
|
margin: 0 80rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.water-quality2 .water-quality-left {
|
|
flex: 1;
|
|
display: flex;
|
|
text-align: center;
|
|
height: auto;
|
|
background: transparent;
|
|
}
|
|
|
|
.water-quality2 .water-quality-text {
|
|
width: 150rpx;
|
|
height: 50rpx;
|
|
background: #fff;
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
color: #2583FF;
|
|
display: block;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.water-quality-left {
|
|
display: inline;
|
|
width: 265rpx;
|
|
height: 50rpx;
|
|
padding: 10rpx 38rpx 10rpx 30rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(to right, #2583FF1a, #2583FF);
|
|
}
|
|
|
|
.water-quality-text {
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 我的设备 */
|
|
.my-device {
|
|
background-color: #FFFFFF;
|
|
/* margin: 0 24rpx 0 20rpx; */
|
|
/* padding-bottom: 30rpx; */
|
|
}
|
|
|
|
.mydevice {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
margin-bottom: 23rpx;
|
|
}
|
|
|
|
.text-color {
|
|
color: #999999;
|
|
}
|
|
|
|
.replayBtn {
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #2887ff;
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.day-num2 {
|
|
color: #ff0000da;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin: 0 7rpx 0 8rpx;
|
|
}
|
|
|
|
.device-info {
|
|
margin: 0 24rpx 0 20rpx;
|
|
}
|
|
|
|
.info-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.device-name {
|
|
font-size: 36rpx;
|
|
color: #222222;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.device-state {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.switch-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.switch-text {
|
|
margin-right: 31rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.wifi-text {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.text-size {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.wifi-icon {
|
|
width: 30rpx;
|
|
height: 22rpx;
|
|
}
|
|
|
|
.info-bottom {
|
|
display: flex;
|
|
margin-top: 22rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.device-id {
|
|
color: #2583FF;
|
|
/* display: inline; */
|
|
}
|
|
|
|
.service-day {
|
|
/* display: inline; */
|
|
/* float: right; */
|
|
}
|
|
|
|
.day-num {
|
|
color: #2583FF;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin: 0 7rpx 0 8rpx;
|
|
}
|
|
|
|
.day {
|
|
color: #222222;
|
|
}
|
|
|
|
/* 购买滤芯和报修记录 */
|
|
.van-row {
|
|
padding: 0 20rpx !important;
|
|
}
|
|
|
|
.van-col {
|
|
display: flex;
|
|
background-color: #FFF0ED;
|
|
height: 150rpx;
|
|
border-radius: 30rpx;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.purchase {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-left: 68rpx;
|
|
}
|
|
|
|
/* 功能列表 */
|
|
.van-grid {
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.van-icon__image {
|
|
width: 100rpx !important;
|
|
height: 100rpx !important;
|
|
}
|
|
|
|
.van-icon--image {
|
|
width: 100rpx !important;
|
|
height: 100rpx !important;
|
|
}
|
|
|
|
|
|
.van-grid-item__text {
|
|
font-size: 26rpx !important;
|
|
color: #222222 !important;
|
|
}
|
|
|
|
/* 滤芯寿命 */
|
|
.lifetime {
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 30rpx 20rpx;
|
|
}
|
|
|
|
.lifetime-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
|
|
.lifetime-prompt {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.lifetime-progress {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.progress-name {
|
|
white-space: nowrap;
|
|
/* width: 24%; */
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.van-progress {
|
|
width: 100%;
|
|
margin-right: 19rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.progress {
|
|
color: #000000;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.contral3 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.equi-contral-right2 {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
/* 用水量 */
|
|
.water-consumption {
|
|
background-color: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
padding: 30rpx 24rpx 0 20rpx;
|
|
}
|
|
|
|
.water-consumption-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.row-index--van-row {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.van-col--8 {
|
|
display: inline;
|
|
height: 130rpx !important;
|
|
width: 220rpx !important;
|
|
margin-right: 5rpx;
|
|
}
|
|
|
|
.water-consumption-col-name {
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
color: #000000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-top: 12rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.water-consumption-col-num {
|
|
text-align: center;
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
color: #2583FF;
|
|
}
|
|
|
|
.water-consumption-col-num-size {
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 600rpx;
|
|
padding-bottom: 100rpx;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.container canvas {
|
|
position: absolute;
|
|
right: -100vw;
|
|
top: 0;
|
|
}
|
|
|
|
#mychart-bar {
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
}
|
|
|
|
.chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 300px;
|
|
}
|
|
|
|
.bar {
|
|
width: 20px;
|
|
margin: 0 5px;
|
|
background-color: blue;
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.water-consumption-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
margin: 0 24rpx;
|
|
}
|
|
|
|
.water-consumption-col {
|
|
width: 220rpx;
|
|
height: 112rpx;
|
|
background: linear-gradient(180deg, #F0F4FF 0%, #DEE7FF 100%);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.water-consumption-row .col2 {
|
|
background: linear-gradient(180deg, #FFFBD8 0%, #FFEBB8 100%);
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.water-consumption-row .col3 {
|
|
background: linear-gradient(180deg, #ECECEC 0%, #E5E4E4 100%);
|
|
}
|
|
|
|
.water-consumption-col .water-consumption-col-name {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.water-consumption-col .water-consumption-col-num {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #2583FF;
|
|
}
|
|
|
|
.equi-contral {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.equi-contral2 .equi-contral-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.equi-contral2 .equi-contral-right .equi-contral-right-btn2 {
|
|
margin-top: 0;
|
|
width: 335rpx;
|
|
}
|
|
|
|
.equi-contral2 .equi-contral-right .equi-contral-right-btn1 {
|
|
margin-top: 0;
|
|
width: 335rpx;
|
|
}
|
|
|
|
.equi-contral-left {
|
|
position: relative;
|
|
width: 345rpx;
|
|
height: 320rpx;
|
|
background: #FFF0ED;
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
box-sizing: border-box;
|
|
padding-top: 58rpx;
|
|
padding-left: 28rpx;
|
|
}
|
|
|
|
.equi-contral-left #img1 {
|
|
width: 219.21rpx;
|
|
height: 175rpx;
|
|
position: absolute;
|
|
left: 116rpx;
|
|
bottom: 5rpx;
|
|
}
|
|
|
|
.equi-contral-left #img2 {
|
|
width: 119rpx;
|
|
height: 95rpx;
|
|
position: absolute;
|
|
bottom: 32rpx;
|
|
left: 180rpx;
|
|
}
|
|
|
|
.van-grid-item__text text {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.equi-contral-right {
|
|
/* justify-content: center !important; */
|
|
}
|
|
|
|
.equi-contral-right-btn1 {
|
|
width: 345rpx;
|
|
height: 150rpx;
|
|
background: linear-gradient(180deg, #FFFBD8 0%, #FFEBB8 100%);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.equi-contral-right-btn1 image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.equi-contral-right-btn2 {
|
|
width: 345rpx;
|
|
height: 150rpx;
|
|
background: linear-gradient(180deg, #ECECEC 0%, #E5E4E4 100%);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin-top: 23rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.equi-contral-right-btn2 image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
|
|
.foot-fixed {
|
|
z-index: 999999999999 !important;
|
|
}
|
|
|
|
.btnDevice {
|
|
width: 650rpx;
|
|
height: 80rpx;
|
|
background: #2583FF;
|
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
margin-top: 300rpx;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.deleteBtn {
|
|
width: 710rpx;
|
|
height: 100rpx;
|
|
background-color: #dd0000;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
margin-top: 40rpx;
|
|
} |