/* miniprogram/pages/someData/index.wxss */ page{ color: #ffffff; } .wave-box{ width: 500rpx; height: 500rpx; border-radius: 50%; box-shadow: 0 0 10rpx 5rpx #31f1ff; margin: 20rpx auto; position: relative; z-index: 99; overflow: hidden; /* background-color: rgb(197, 253, 236); */ background-image:linear-gradient(120deg, gray , deepskyblue); } .wave-cover{ width: 250%; height: 250%; position: absolute; left: -60%; top:100%; } .wave-cover .a{ width: 100%; height: 100%; background-color: #85f7fb; position: absolute; z-index: 11; border-radius: 47% 49% 63% 60% / 60% 48%; animation: wave 8s linear infinite; } .wave-cover .b{ width: 95%; height: 95%; background-color: #d0f4ff; position: absolute; z-index: 10; border-radius: 42% 58% 43% 60% / 48% 35%; animation: wave 7s linear infinite; } .slot{ width: 100%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; display: flex; flex-direction: column; justify-content: center; align-items: center; } .big-icon{ width: 88rpx; height: 88rpx; } .temp,.humi{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .temp-title,.humi-title{ display: flex; align-items: center; } .hr{ width: 60%; height: 1rpx; background-color: #fff0f0; margin: 15rpx auto; } .sm-icon{ width: 44rpx; height: 44rpx; } .humi{ /* color: #666; */ } @keyframes wave{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* .info-card{ margin: 0 auto; width: 70vw; padding: 100rpx 15rpx 30rpx; border-radius: 25rpx; box-shadow: 0 0 10rpx 5rpx #ffffff; transform: translateY(-100rpx); background-image:linear-gradient(-120deg, skyblue , gray); } */ .mid-icon{ width: 66rpx; height: 66rpx; margin-right: 10rpx; } /* .card-title{ font-size: 42rpx; display: block; width: 60%; margin: 0 auto; text-align: center; border-bottom: #bfbfbf 1rpx solid; padding-bottom: 10rpx; } .card-body{ display: flex; flex-direction: column; padding: 30rpx 60rpx; } .card-item{ margin: 5rpx 0; padding: 10rpx 0; } */ .data-item{ width: 50vw; display: flex; justify-content: center; } .item-name{ display: flex; align-items: center; padding:10rpx 15rpx; width: 80%; box-shadow: 3rpx 3rpx 5rpx #eee; border-radius:10rpx ; margin: 15rpx 0; /* background-color: skyblue; */ background-color: rgb(87, 181, 204); } .long{ width: 100vw; } .l{ width: 90%; } .item-title{ font-size: 32rpx; } .bg{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; /* background-image: linear-gradient(120deg,rgb(119, 217, 255),#eee); */ background-image:linear-gradient(to bottom, #dbdbdb , rgb(94, 214, 253)); } .jiasudu{ display: flex; flex-direction: column; background-color: rgb(87, 181, 204); border-radius: 0 15rpx 15rpx 15rpx; padding: 30rpx; box-shadow: 3rpx 3rpx 3rpx #eee; } .jiasudu-item{ margin: 10rpx; display: block; padding: 5rpx; /* color: rgb(85, 85, 85); */ } .point{ display: inline-block; width: 15rpx; height: 15rpx; border-radius: 50%; background-color: #85f7fb; margin-right: 10rpx; } .data_one{ width: 100vw; /* padding: 30rpx; */ display: flex; flex-wrap: wrap; } .h{ width: 90%; margin: 0 auto; } .van-divider{ color: #ffffff !important; } .data_two{ width: 90%; margin: 0 auto; } .data{ width: 50%; display: flex; align-items: center; padding:10rpx 15rpx; border-bottom: 2rpx solid #eee; background-color: rgb(87, 181, 204); border-radius:15rpx 15rpx 0 0; box-shadow: 3rpx 3rpx 3rpx #eee; }