.irrigation-container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #f5f5f5;
|
padding: 20rpx;
|
box-sizing: border-box;
|
}
|
|
/* 顶部标签页样式 */
|
.tabs {
|
display: flex;
|
background-color: #fff;
|
border-radius: 12rpx;
|
margin-bottom: 20rpx;
|
overflow: hidden;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
position: relative;
|
}
|
|
.tab {
|
flex: 1;
|
text-align: center;
|
padding: 30rpx 0;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
transition: all 0.2s ease;
|
}
|
|
.tab-hover {
|
opacity: 0.8;
|
background-color: rgba(0, 0, 0, 0.03);
|
}
|
|
.tab:active {
|
opacity: 0.8;
|
background-color: rgba(0, 0, 0, 0.03);
|
}
|
|
.tab.active {
|
color: rgba(45, 139, 247, 1);
|
font-weight: bold;
|
}
|
|
.tab.active::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 50vw;
|
height: 6rpx;
|
background-color: rgba(45, 139, 247, 1);
|
border-radius: 3rpx;
|
}
|
|
/* 刷新按钮和分隔线 */
|
.refresh-header {
|
display: flex;
|
justify-content: flex-end;
|
padding: 10rpx 20rpx;
|
}
|
|
.refresh-button {
|
font-size: 28rpx;
|
color: #fff;
|
background-color: rgba(45, 139, 247, 1);
|
border: none;
|
border-radius: 5px;
|
padding: 10rpx 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.refresh-button:active {
|
background-color: #1a6fc7;
|
}
|
|
.divider {
|
height: 1rpx;
|
background-color: #e0e0e0;
|
margin: 10rpx 0;
|
}
|
|
/* 下拉刷新动画 */
|
.refresh-view {
|
text-align: center;
|
padding: 30rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.dot {
|
width: 20rpx;
|
height: 20rpx;
|
background-color: rgba(45, 139, 247, 1);
|
border-radius: 50%;
|
margin: 0 5px;
|
animation: blink 1.4s infinite both;
|
}
|
|
.dot:nth-child(2) {
|
animation-delay: 0.2s;
|
}
|
|
.dot:nth-child(3) {
|
animation-delay: 0.4s;
|
}
|
|
@keyframes blink {
|
0%, 80%, 100% {
|
opacity: 0;
|
}
|
40% {
|
opacity: 1;
|
}
|
}
|
|
/* scroll-view样式 */
|
.scroll-view {
|
flex: 1;
|
overflow-y: auto;
|
margin-bottom: 20rpx;
|
height: calc(100vh - 180rpx); /* 减去顶部标签页和底部按钮的高度 */
|
}
|
|
.scroll-bg {
|
padding: 10rpx 0;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 中间列表样式 */
|
.irrigation-list {
|
flex: 1;
|
background-color: transparent;
|
margin-bottom: 20rpx;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
padding: 0;
|
}
|
|
.list-title {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #333;
|
padding: 20rpx;
|
background-color: #f8f8f8;
|
border-bottom: 1rpx solid #eee;
|
}
|
|
.list-item {
|
padding: 30rpx;
|
padding-bottom: 90rpx;
|
position: relative;
|
background-color: #fff;
|
border-radius: 12rpx;
|
margin-bottom: 16rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.item-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10rpx;
|
margin-top: 10rpx;
|
}
|
|
.item-title {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.item-status {
|
font-size: 24rpx;
|
color: #999;
|
padding: 4rpx 12rpx;
|
border-radius: 20rpx;
|
|
display: flex;
|
align-items: center;
|
}
|
|
.status-icon {
|
width: 70rpx;
|
height: 70rpx;
|
|
}
|
|
.status-active {
|
color: #fff;
|
background-color: rgba(45, 139, 247, 1);
|
}
|
|
.status-draft {
|
color: #fff;
|
background-color: #999;
|
}
|
|
.status-published {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #00AD45;
|
background-color: rgba(0, 173, 69, 0.1);
|
}
|
|
.status-published-icon {
|
width: 34rpx;
|
height: 34rpx;
|
margin-right: 6rpx;
|
}
|
|
.item-info {
|
font-size: 24rpx;
|
color: #666;
|
margin-right: 160rpx;
|
}
|
|
.info-row {
|
display: flex;
|
margin-bottom: 8rpx;
|
align-items: flex-end; /* 添加底部对齐 */
|
}
|
|
/* 编号行样式 - 作为标题突出显示 */
|
.title-row {
|
margin-bottom: 10rpx;
|
}
|
|
.title-row .info-label,
|
.title-row .info-value {
|
font-size: 26rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.info-label {
|
color: #999;
|
width: 150rpx;
|
margin-right: 10rpx; /* 添加右侧间距 */
|
}
|
|
/* 为已灌溉时间和轮组添加特殊样式 */
|
.info-row.irrigated-row {
|
margin-top: 12rpx;
|
margin-bottom: 12rpx;
|
align-items: center !important; /* 强制垂直居中对齐 */
|
display: flex;
|
justify-content: flex-start; /* 水平方向起点对齐 */
|
height: 50rpx; /* 固定行高 */
|
}
|
|
.info-row.irrigated-row .info-label {
|
display: flex;
|
align-items: center;
|
height: 100%; /* 使用百分比高度 */
|
}
|
|
.info-value-time {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: rgb(42, 130, 228);
|
display: flex;
|
align-items: center;
|
height: 100%; /* 使用与info-label相同的高度 */
|
}
|
|
/* 空列表容器 */
|
.empty-list {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background-color: #fff;
|
border-radius: 12rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
width: 100%;
|
height: calc(100vh - 250rpx); /* 减去顶部标签页、底部按钮和内边距的高度 */
|
min-height: 500rpx;
|
}
|
|
.empty-icon {
|
width: 200rpx;
|
height: 200rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.empty-text {
|
font-size: 28rpx;
|
color: #999;
|
}
|
|
/* 底部按钮样式 */
|
.bottom-button {
|
padding: 20rpx 0;
|
}
|
|
.add-button {
|
background-color: rgba(45, 139, 247, 1);
|
color: #fff;
|
font-size: 32rpx;
|
border-radius: 12rpx;
|
width: 100%;
|
transition: all 0.2s ease;
|
}
|
|
.add-button-hover {
|
background-color: rgba(35, 110, 200, 1);
|
transform: scale(0.98);
|
}
|
|
.add-button:active {
|
background-color: rgba(35, 110, 200, 1);
|
transform: scale(0.98);
|
}
|
|
/* 列表项操作按钮 */
|
.item-actions {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
position: absolute;
|
bottom: 20rpx;
|
right: 30rpx;
|
z-index: 2;
|
}
|
|
.action-button {
|
font-size: 24rpx;
|
padding: 6rpx 20rpx;
|
margin-left: 16rpx;
|
border-radius: 30rpx;
|
background-color: #fff;
|
line-height: 1.5;
|
min-height: auto;
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
transition: all 0.2s ease;
|
}
|
|
.action-button-hover {
|
transform: scale(0.95);
|
box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.action-button:active {
|
transform: scale(0.95);
|
box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.publish-button {
|
color: rgba(45, 139, 247, 1);
|
border: 1rpx solid rgba(45, 139, 247, 1);
|
}
|
|
.publish-button-hover {
|
background-color: rgba(45, 139, 247, 0.1);
|
}
|
|
.publish-button:active {
|
background-color: rgba(45, 139, 247, 0.1);
|
}
|
|
.stop-button {
|
color: #f56c6c;
|
border: 1rpx solid #f56c6c;
|
}
|
|
.stop-button-hover {
|
background-color: rgba(245, 108, 108, 0.1);
|
}
|
|
.stop-button:active {
|
background-color: rgba(245, 108, 108, 0.1);
|
}
|
|
.execute-button {
|
color: rgba(45, 139, 247, 1);
|
border: 1rpx solid rgba(45, 139, 247, 1);
|
}
|
|
.execute-button-hover {
|
background-color: rgba(45, 139, 247, 0.1);
|
}
|
|
.execute-button:active {
|
background-color: rgba(45, 139, 247, 0.1);
|
}
|
