|  |  |  | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | height: 100vh; | 
|---|
|  |  |  | background-color: #f5f5f5; | 
|---|
|  |  |  | padding: 20rpx; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 顶部标签页样式 */ | 
|---|
|  |  |  | /* 标签页样式 */ | 
|---|
|  |  |  | .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); | 
|---|
|  |  |  | padding: 20rpx 0; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | flex-shrink: 0; /* 防止被压缩 */ | 
|---|
|  |  |  | box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05); | 
|---|
|  |  |  | border-bottom: 1rpx solid #eaeaea; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | z-index: 10; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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); | 
|---|
|  |  |  | padding: 20rpx 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tab.active { | 
|---|
|  |  |  | color: rgba(45, 139, 247, 1); | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | color: #0052d9; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tab.active::after { | 
|---|
|  |  |  | 
|---|
|  |  |  | bottom: 0; | 
|---|
|  |  |  | left: 50%; | 
|---|
|  |  |  | transform: translateX(-50%); | 
|---|
|  |  |  | width: 50vw; | 
|---|
|  |  |  | height: 6rpx; | 
|---|
|  |  |  | background-color: rgba(45, 139, 247, 1); | 
|---|
|  |  |  | border-radius: 3rpx; | 
|---|
|  |  |  | width: 40rpx; | 
|---|
|  |  |  | height: 4rpx; | 
|---|
|  |  |  | background-color: #0052d9; | 
|---|
|  |  |  | border-radius: 2rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 刷新按钮和分隔线 */ | 
|---|
|  |  |  | .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); /* 减去顶部标签页和底部按钮的高度 */ | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | padding-bottom: 140rpx; /* 增加底部内边距,为按钮留出更多空间 */ | 
|---|
|  |  |  | background-color: #f5f5f5; /* 确保背景色与tabs不同 */ | 
|---|
|  |  |  | margin-top: 10rpx; /* 与顶部tab保持一点距离 */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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; | 
|---|
|  |  |  | padding-bottom: 40rpx; /* 添加底部内边距,防止最后一项被遮挡 */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 列表项样式 */ | 
|---|
|  |  |  | .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); | 
|---|
|  |  |  | border-radius: 16rpx; | 
|---|
|  |  |  | margin-bottom: 20rpx; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | box-shadow: 0 2rpx 12rpx 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; | 
|---|
|  |  |  | /* 状态标签样式 */ | 
|---|
|  |  |  | .status-tag { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | top: 20rpx; | 
|---|
|  |  |  | right: 20rpx; | 
|---|
|  |  |  | padding: 4rpx 16rpx; | 
|---|
|  |  |  | border-radius: 20rpx; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-icon { | 
|---|
|  |  |  | width: 70rpx; | 
|---|
|  |  |  | height: 70rpx; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-active { | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | background-color: rgba(45, 139, 247, 1); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-draft { | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | .status-tag.draft { | 
|---|
|  |  |  | background-color: #ff9d00; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-tag.published { | 
|---|
|  |  |  | background-color: #0052d9; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-tag.executing { | 
|---|
|  |  |  | background-color: #00a870; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-tag.completed { | 
|---|
|  |  |  | background-color: #999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-published { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | color: #00AD45; | 
|---|
|  |  |  | background-color: rgba(0, 173, 69, 0.1); | 
|---|
|  |  |  | /* 内容区域样式 */ | 
|---|
|  |  |  | .item-content { | 
|---|
|  |  |  | padding: 30rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status-published-icon { | 
|---|
|  |  |  | width: 34rpx; | 
|---|
|  |  |  | height: 34rpx; | 
|---|
|  |  |  | margin-right: 6rpx; | 
|---|
|  |  |  | /* 标题区域样式 */ | 
|---|
|  |  |  | .title-section { | 
|---|
|  |  |  | margin-bottom: 30rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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; | 
|---|
|  |  |  | .plan-title { | 
|---|
|  |  |  | font-size: 32rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | margin-bottom: 8rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .project-name { | 
|---|
|  |  |  | font-size: 26rpx; | 
|---|
|  |  |  | color: #666; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 信息区域样式 */ | 
|---|
|  |  |  | .info-section { | 
|---|
|  |  |  | margin-bottom: 30rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 信息网格 */ | 
|---|
|  |  |  | .info-grid { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: row; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | margin-top: 12rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: flex-start; | 
|---|
|  |  |  | /* 横向布局时占据一半宽度 */ | 
|---|
|  |  |  | width: 48%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 纵向布局的信息网格 */ | 
|---|
|  |  |  | .vertical-layout { | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | gap: 16rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .vertical-layout .info-item { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | margin-bottom: 16rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 历史列表特定样式 */ | 
|---|
|  |  |  | .history-grid { | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | gap: 20rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-icon { | 
|---|
|  |  |  | width: 40rpx; | 
|---|
|  |  |  | height: 40rpx; | 
|---|
|  |  |  | margin-right: 16rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-icon.duration-icon { | 
|---|
|  |  |  | width: 35rpx; | 
|---|
|  |  |  | height: 35rpx; | 
|---|
|  |  |  | margin-right: 16rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-icon image { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-content { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-label { | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  | width: 150rpx; | 
|---|
|  |  |  | margin-right: 10rpx; /* 添加右侧间距 */ | 
|---|
|  |  |  | margin-bottom: 4rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 为已灌溉时间和轮组添加特殊样式 */ | 
|---|
|  |  |  | .info-row.irrigated-row { | 
|---|
|  |  |  | margin-top: 12rpx; | 
|---|
|  |  |  | margin-bottom: 12rpx; | 
|---|
|  |  |  | align-items: center !important; /* 强制垂直居中对齐 */ | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: flex-start; /* 水平方向起点对齐 */ | 
|---|
|  |  |  | height: 50rpx; /* 固定行高 */ | 
|---|
|  |  |  | .info-value { | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-row.irrigated-row .info-label { | 
|---|
|  |  |  | /* 执行中状态额外信息样式 */ | 
|---|
|  |  |  | .executing-info { | 
|---|
|  |  |  | margin-top: 20rpx; | 
|---|
|  |  |  | padding-top: 20rpx; | 
|---|
|  |  |  | border-top: 1rpx solid #f5f5f5; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 操作按钮区域样式 */ | 
|---|
|  |  |  | .action-section { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: flex-end; | 
|---|
|  |  |  | gap: 20rpx; | 
|---|
|  |  |  | padding-top: 20rpx; | 
|---|
|  |  |  | border-top: 1rpx solid #f5f5f5; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | z-index: 1; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .action-buttons { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: flex-end; | 
|---|
|  |  |  | gap: 20rpx; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .action-button { | 
|---|
|  |  |  | display: inline-flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | height: 100%; /* 使用百分比高度 */ | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | gap: 8rpx; | 
|---|
|  |  |  | padding: 12rpx 24rpx; | 
|---|
|  |  |  | border-radius: 8rpx; | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | line-height: 1; | 
|---|
|  |  |  | min-width: 160rpx; | 
|---|
|  |  |  | height: 60rpx; | 
|---|
|  |  |  | margin: 0; | 
|---|
|  |  |  | background-color: #1890FF; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | border: none; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | z-index: 2; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info-value-time { | 
|---|
|  |  |  | font-size: 30rpx; | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | color: rgb(42, 130, 228); | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | height: 100%; /* 使用与info-label相同的高度 */ | 
|---|
|  |  |  | .action-button::after { | 
|---|
|  |  |  | display: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 空列表容器 */ | 
|---|
|  |  |  | .action-button image { | 
|---|
|  |  |  | width: 32rpx; | 
|---|
|  |  |  | height: 32rpx; | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .action-button text { | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .publish-button { | 
|---|
|  |  |  | background-color: #1890FF !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .stop-button { | 
|---|
|  |  |  | background-color: #ff4d4f !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .execute-button { | 
|---|
|  |  |  | background-color: #1890FF !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 空状态样式 */ | 
|---|
|  |  |  | .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; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | padding: 100rpx 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .empty-icon { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 底部按钮样式 */ | 
|---|
|  |  |  | .bottom-button { | 
|---|
|  |  |  | padding: 20rpx 0; | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | bottom: 0; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | right: 0; | 
|---|
|  |  |  | padding: 20rpx; | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05); | 
|---|
|  |  |  | z-index: 100; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | background-color: #1890FF; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | border-radius: 8rpx; | 
|---|
|  |  |  | font-size: 30rpx; | 
|---|
|  |  |  | padding: 5rpx 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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; | 
|---|
|  |  |  | .add-button image { | 
|---|
|  |  |  | width: 36rpx; | 
|---|
|  |  |  | height: 36rpx; | 
|---|
|  |  |  | margin-right: 8rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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; | 
|---|
|  |  |  | opacity: 0.8 !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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); | 
|---|
|  |  |  | opacity: 0.8 !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .execute-button-hover { | 
|---|
|  |  |  | background-color: rgba(45, 139, 247, 0.1); | 
|---|
|  |  |  | opacity: 0.8 !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .execute-button:active { | 
|---|
|  |  |  | background-color: rgba(45, 139, 247, 0.1); | 
|---|
|  |  |  | .add-button-hover { | 
|---|
|  |  |  | opacity: 0.8; | 
|---|
|  |  |  | } | 
|---|