530 lines
10 KiB
Plaintext
530 lines
10 KiB
Plaintext
/**index.wxss**/
|
||
page {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%);
|
||
padding: 0;
|
||
margin: 0;
|
||
/* 页面整体底部预留安全区域，避免内容被遮挡 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 自定义导航栏容器 */
|
||
.custom-nav {
|
||
width: 100%;
|
||
background: #FFF;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
box-shadow: 0 1rpx 0 rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 标题栏区域 */
|
||
.title-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
|
||
|
||
/* 水位状态颜色 */
|
||
.water-level-1 {
|
||
color: #07c160;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.water-level-0 {
|
||
color: #ee0a24;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 空值样式 */
|
||
.empty-value {
|
||
color: #a8b2b8 !important;
|
||
}
|
||
|
||
.scrollarea {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
/* 滚动区域底部预留更多空间，避免内容贴底 */
|
||
padding-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
/* 为自定义导航栏预留顶部空间 */
|
||
padding-top: var(--navBarHeight);
|
||
}
|
||
|
||
.container {
|
||
padding: 0 24rpx;
|
||
background: transparent;
|
||
min-height: 100%; /* 替换100vh，避免高度溢出 */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
/* 新增：容器上下留白，优化整体呼吸感 */
|
||
padding-top: 16rpx;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
/* 区域样式 - 统一间距（微调间距，更协调） */
|
||
.section {
|
||
margin-bottom: 40rpx; /* 原36rpx，微调增加呼吸感 */
|
||
padding: 0 16rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 0 18rpx; /* 原28rpx 0 20rpx，微调更紧凑 */
|
||
margin-bottom: 12rpx; /* 原8rpx，增加标题与内容间距 */
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-left: 14rpx;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
.setting-btn {
|
||
margin-left: auto;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
padding: 0 28rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
/* 新增：按钮最小宽度，避免文字挤压 */
|
||
min-width: 120rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 数据卡片 - 统一尺寸 */
|
||
.cell-title-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.data-label {
|
||
font-size: 30rpx;
|
||
color: #8a92a0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.data-value {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
font-feature-settings: "tnum";
|
||
letter-spacing: -0.5rpx;
|
||
}
|
||
|
||
.mode-cell {
|
||
margin-top: 32rpx; /* 原28rpx，微调间距 */
|
||
width: 100%;
|
||
}
|
||
|
||
/* 控制按钮网格 - 优化尺寸和间距（更协调） */
|
||
.control-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32rpx; /* 原28rpx，增加按钮间距 */
|
||
padding: 24rpx 8rpx 32rpx; /* 原28rpx 8rpx，上下间距微调 */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.control-grid .control-btn:nth-child(3) {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.control-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14rpx;
|
||
border-radius: 28rpx;
|
||
padding: 52rpx 24rpx; /* 原56rpx，微调内边距 */
|
||
margin: 0;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
letter-spacing: 0.5rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border: none;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 190rpx; /* 原200rpx，微调高度更协调 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.control-btn::after {
|
||
display: none;
|
||
}
|
||
|
||
.control-btn:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.control-btn[type="primary"] {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #ffffff;
|
||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.control-btn[type="info"] {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
color: #ffffff;
|
||
box-shadow: 0 8rpx 24rpx rgba(79, 172, 254, 0.3);
|
||
}
|
||
|
||
.refresh-btn {
|
||
background: #ffffff !important;
|
||
color: #2c3e50 !important;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04) !important;
|
||
border: 2rpx solid #e8ecf1;
|
||
}
|
||
|
||
.refresh-btn:active {
|
||
background: #f5f7fa !important;
|
||
}
|
||
|
||
/* 模式切换单元格 */
|
||
.mode-switch-cell {
|
||
margin-top: 16rpx; /* 原8rpx，增加与按钮区间距 */
|
||
width: 100%;
|
||
}
|
||
|
||
/* 设置弹窗 - 全屏宽度优化（核心：安全区域适配） */
|
||
.settings-popup {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
background: #ffffff;
|
||
border-radius: 36rpx 36rpx 0 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
/* 新增：弹窗底部预留安全区域 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 36rpx 32rpx 32rpx; /* 原40rpx 32rpx 36rpx，微调更紧凑 */
|
||
border-bottom: 1rpx solid #f0f2f5;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.popup-content {
|
||
flex: 1;
|
||
padding: 0 32rpx;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
/* 新增：内容区上下留白，避免贴边 */
|
||
padding-top: 8rpx;
|
||
padding-bottom: 16rpx;
|
||
}
|
||
|
||
.setting-section {
|
||
padding: 36rpx 0; /* 原40rpx 0，微调间距 */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.setting-section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 32rpx; /* 原36rpx，微调间距 */
|
||
}
|
||
|
||
.setting-section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.setting-value {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #667eea;
|
||
}
|
||
|
||
.add-time-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
border-radius: 14rpx;
|
||
padding: 0 28rpx;
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
font-size: 26rpx;
|
||
/* 新增：按钮最小宽度，避免文字挤压 */
|
||
min-width: 100rpx;
|
||
}
|
||
|
||
/* 时间列表 */
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 72rpx 0; /* 原80rpx 0，微调间距 */
|
||
color: #a8b2b8;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.time-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 28rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.time-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 32rpx; /* 原36rpx 32rpx，微调内边距 */
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 42rpx;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.time-actions {
|
||
display: flex;
|
||
gap: 48rpx; /* 原52rpx，微调图标间距 */
|
||
}
|
||
|
||
/* 滑块标记 */
|
||
.slider-marks {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 28rpx 0 0;
|
||
color: #a8b2b8;
|
||
font-size: 26rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 弹窗底部（核心：安全区域适配） */
|
||
.popup-footer {
|
||
padding: 32rpx 32rpx;
|
||
/* 优化：安全区域计算更精准，避免被手机底部遮挡 */
|
||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||
border-top: 1rpx solid #f0f2f5;
|
||
background: #ffffff;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.save-btn {
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
height: 96rpx; /* 原100rpx，微调高度更协调 */
|
||
line-height: 96rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border: none;
|
||
}
|
||
|
||
.save-btn::after {
|
||
display: none;
|
||
}
|
||
|
||
/* 底部留白（核心优化：适配安全区域，确保不被手机底部遮挡） */
|
||
.bottom-spacer {
|
||
/* 原120rpx，优化为：基础高度 + 安全区域，适配不同手机 */
|
||
height: calc(120rpx + env(safe-area-inset-bottom));
|
||
/* 新增：确保留白区域可点击，不影响交互 */
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 优化 van 组件样式 - 统一宽度和内边距 */
|
||
::v-deep .van-cell-group {
|
||
border-radius: 28rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
/* 新增：单元格组上下留白，避免贴边 */
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
::v-deep .van-cell {
|
||
padding: 30rpx 36rpx; /* 原32rpx 36rpx，微调内边距 */
|
||
background: #ffffff;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
::v-deep .van-cell::after {
|
||
left: 36rpx;
|
||
right: 36rpx;
|
||
}
|
||
|
||
/* 优化 van-switch */
|
||
::v-deep .van-switch {
|
||
background-color: #e8ecf1;
|
||
width: 64rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
::v-deep .van-switch--on {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
/* 优化 van-notice-bar */
|
||
::v-deep .van-notice-bar {
|
||
margin: 20rpx 16rpx 28rpx; /* 原24rpx 16rpx，增加底部间距 */
|
||
border-radius: 20rpx;
|
||
padding: 24rpx 36rpx;
|
||
width: calc(100% - 32rpx);
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 优化 van-stepper */
|
||
::v-deep .van-stepper {
|
||
border-radius: 14rpx;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
/* 新增：步进器上下留白 */
|
||
margin: 8rpx 0;
|
||
}
|
||
|
||
::v-deep .van-stepper__minus,
|
||
::v-deep .van-stepper__plus {
|
||
background: #f5f7fa;
|
||
border: none;
|
||
color: #2c3e50;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
::v-deep .van-stepper__input {
|
||
background: #ffffff;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
font-size: 32rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
/* 优化 van-slider */
|
||
::v-deep .van-slider {
|
||
height: 60rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep .van-slider__bar {
|
||
height: 8rpx;
|
||
background: #e8ecf1;
|
||
}
|
||
|
||
::v-deep .van-slider__button {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
/* 优化 van-tag */
|
||
::v-deep .van-tag {
|
||
font-size: 28rpx;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 12rpx;
|
||
/* 新增：标签最小宽度，避免文字挤压 */
|
||
min-width: 80rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep .van-tag--success {
|
||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||
border: none;
|
||
}
|
||
|
||
::v-deep .van-tag--primary {
|
||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
||
border: none;
|
||
}
|
||
|
||
/* 优化 van-divider */
|
||
::v-deep .van-divider {
|
||
margin: 32rpx 16rpx; /* 原36rpx 16rpx，微调间距 */
|
||
border-color: #e8ecf1;
|
||
width: calc(100% - 32rpx);
|
||
}
|
||
|
||
/* 动画优化 */
|
||
.section {
|
||
animation: fadeIn 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.control-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.2),
|
||
transparent
|
||
);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.control-btn:active::before {
|
||
left: 100%;
|
||
} |