/* 顶部固定区域 */ .top-container { position: sticky; top: 0; background-color: white; z-index: 100; /* 保证顶部元素位于表格之上 */ } .topsearch { width: 90%; margin-left: 5%; display: flex; align-items: center; justify-content: space-between; /* 确保搜索框和按钮分开 */ } .frame { background-color: white; width: 75%; border-radius: 1px; padding: 0 3%; } .frame > input { font-size: 24rpx; margin: 6rpx 0; } .topsearch > text { width: 10%; margin-left: 5%; color: #a8a7a7fa; } /* 新增按钮容器 */ .add-btn-container { position: sticky; top: 0; background-color: #fff; /* 背景色为白色 */ z-index: 101; /* 确保新增按钮高于表格 */ padding: 1rpx; /* 增加按钮的上内边距 */ display: flex; justify-content: center; margin-top: 1rpx; /* 新增按钮的上边距 */ } /* 新增按钮 */ .add-btn { padding: 1px 12px; background-color: #3EC01E; color: #fff; border-radius: 4px; font-size: 14px; } /* 表格容器 */ .table-container { width: 100%; overflow-x: auto; /* 启用横向滚动 */ white-space: nowrap; /* 禁止换行 */ background-color: #fff; border: 1rpx solid #ddd; margin-top: 10rpx; /* 添加上边距,确保不会和顶部元素重叠 */ white-space: nowrap; /* 禁止换行 */ } /* 表头样式 */ .table-header { display: flex; background-color: #61E054; /* 表头背景色 */ font-weight: bold; text-align: center; } /* 表格单元格样式 */ .table-cell { flex: none; width: 140rpx; /* 固定宽度 */ padding: 10rpx; text-align: center; font-size: 28rpx; color: #030803; /* 表头文字颜色 */ border-right: 1rpx solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 表格行样式 */ .table-row:nth-child(odd) { background-color: #E4FBE5; /* 奇数行背景色 */ } .table-row:nth-child(even) { background-color: #fff; /* 偶数行背景色 */ } /* 表格内容样式 */ .table-body { display: flex; flex-direction: column; width: max-content; } .table-row { display: flex; flex-direction: row; border-bottom: 1rpx solid #ddd; } /* 模态框背景 */ .modal { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ z-index: 1000; /* 确保弹窗在最上层 */ } /* 模态框内容 */ /* 编辑删除弹窗样式 */ .modal-content { background-color: #fff; /* 白色背景 */ padding: 20px; border-radius: 12rpx; width: 80%; /* 调整宽度,居中效果更好 */ max-width: 400px; /* 限制最大宽度 */ text-align: center; /* 居中对齐内容 */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */ animation: fadeIn 0.3s ease-in-out; /* 添加淡入动画 */ } /* 弹窗选项样式 */ .modal-item { padding: 20rpx; font-size: 16px; border-bottom: 1px solid #f1f1f1; /* 添加下边框分隔 */ color: #333; /* 设置字体颜色 */ cursor: pointer; /* 鼠标变成手型 */ } .modal-item:last-child { border-bottom: none; /* 去掉最后一项的下边框 */ } .modal-item:hover { background-color: #f9f9f9; /* 悬停时背景变浅 */ } /* 删除按钮特殊样式 */ .modal-item.delete { color: #e74c3c; /* 删除按钮红色字体 */ font-weight: bold; /* 加粗字体 */ } .modal-item.delete:hover { background-color: #fceaea; /* 删除按钮悬停时红色背景 */ } /* 取消按钮特殊样式 */ .modal-item.cancel { color: #666; /* 取消按钮灰色字体 */ } .modal-item.cancel:hover { background-color: #f4f4f4; /* 取消按钮悬停时浅灰背景 */ } /* 动画效果 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); /* 从顶部滑入 */ } to { opacity: 1; transform: translateY(0); } } /* 按钮容器样式 */ .button-container { display: flex; /* 使用 Flexbox 布局 */ justify-content: space-between; /* 按钮两端对齐 */ align-items: center; /* 垂直居中对齐 */ gap: 20rpx; /* 按钮之间的间距 */ margin-top: 20rpx; /* 上边距 */ } /* 提交按钮样式 */ .submit-btn { flex: 1; /* 均分空间 */ background-color: #4CAF50; /* 绿色背景 */ color: white; padding: 12rpx 0; font-size: 16px; text-align: center; border-radius: 8rpx; /* 圆角 */ cursor: pointer; border: none; /* 去除边框 */ } /* 取消按钮样式 */ .cancel-btn { flex: 1; /* 均分空间 */ background-color: #e74c3c; /* 红色背景 */ color: white; padding: 12rpx 0; font-size: 16px; text-align: center; border-radius: 8rpx; /* 圆角 */ cursor: pointer; border: none; /* 去除边框 */ } /* 按钮悬停效果 */ .submit-btn:hover { background-color: #45a049; /* 提交按钮悬停颜色 */ } .cancel-btn:hover { background-color: #c0392b; /* 取消按钮悬停颜色 */ }