iot-bedroom-environment-controller/微信小程序源码/iot-home/pages/homeControl/homeContril.wxss

/* 页面容器 */
page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* tab容器 */
.van-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* tab内容容器 */
.van-tabs__content {
    flex: 1;
    overflow: hidden;
}

/* tab项 */
.van-tab__pane {
    height: 100%;
    overflow: hidden;
}

/* 滚动容器 */
.tab-scroll {
    height: 100%;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/*.grid-item {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    height: 120rpx; !* 固定高度让 square 生效 *!*/
/*}*/

.slider-container {
    margin: 20px 0;
}

.slider-btn {
    width: 40px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #1989fa;
    border-radius: 100px;
}

/* 闹钟时间选择器样式 */
.alarm-cell-right {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.alarm-time {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
}

.time-text {
    font-size: 28rpx;
    color: #323233;
    font-weight: 500;
}

/* 时间选择器样式 */
.time-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #ebedf0;
}

.time-picker-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #323233;
}

.time-picker-view {
    height: 400rpx;
    text-align: center;
}

.picker-column-item {
    line-height: 80rpx;
    font-size: 32rpx;
    color: #323233;
}

.time-picker-btn {
    margin: 24rpx 32rpx 32rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background-color: #1989fa;
    color: #fff;
    font-size: 32rpx;
    border-radius: 8rpx;
}

/* 时间段设置样式 */
.period-group {
    margin-top: 24rpx;
}

.period-cell-right {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.period-time-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16rpx;
}

.period-time-label {
    font-size: 24rpx;
    color: #969799;
}

.period-time-value {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 8rpx 16rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #323233;
    min-width: 100rpx;
    justify-content: center;
}

/* 下发按钮样式 */
.period-action-cell {
    padding: 16rpx 32rpx !important;
}

.period-action-cell .van-cell__value {
    display: flex;
    justify-content: center;
}

/* 温度阈值设置样式 */
.threshold-group {
    margin-top: 24rpx;
}

.threshold-value {
    display: flex;
    align-items: center;
}

.threshold-temp {
    font-size: 32rpx;
    font-weight: 500;
    color: #ee0a24;
    margin-right: 8rpx;
}

/* 滑块样式 */
.slider-container {
    margin: 20px 32rpx;
}

.slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #969799;
}

/* 温度阈值下发按钮样式 */
.threshold-action-cell {
    padding: 16rpx 32rpx !important;
    margin-top: 32rpx;
}

.threshold-action-cell .van-cell__value {
    display: flex;
    justify-content: center;
}