/* 确保搜索框和新增按钮固定在顶部 */ .top { position: sticky; /* 使搜索框在页面滚动时固定 */ top: 0; /* 固定在顶部 */ z-index: 100; /* 确保在表格之上 */ background-color: #f7f7f7; /* 背景色 */ padding: 2% 0; /* 上下内边距 */ } .topsearch { width: 90%; margin-left: 5%; display: flex; align-items: center; justify-content: space-between; /* 确保搜索框和按钮分开 */ } .frame { background-color: white; width: 75%; border-radius: 20rpx; 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: 10rpx; /* 增加按钮的上内边距 */ display: flex; justify-content: center; margin-top: 10rpx; /* 新增按钮的上边距 */ } /* 新增按钮 */ .add-btn { padding: 5px 12px; background-color: #007aff; color: #fff; border-radius: 4px; font-size: 14px; } /* 表格容器 */ .table-container { width: 100%; overflow-x: auto; /* 启用横向滚动 */ background-color: #fff; border: 1rpx solid #ddd; margin-top: 20rpx; /* 添加上边距,确保不会和顶部元素重叠 */ white-space: nowrap; /* 禁止换行 */ } /* 表头样式 */ .table-header { display: flex; width: max-content; background-color: #FFD700; font-weight: bold; border-bottom: 1rpx solid #ddd; z-index: 99; /* 确保表头高于表格内容 */ } /* 表格单元格样式 */ .table-cell { flex: none; width: 250rpx; padding: 10rpx; text-align: center; font-size: 28rpx; color: #333; border-right: 1rpx solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 表格内容样式 */ .table-body { display: flex; flex-direction: column; width: max-content; } .table-row { display: flex; } .table-row:nth-child(odd) { background-color: #f9f9f9; } .table-row:nth-child(even) { background-color: #ffffff; } /* 模态框背景 */ .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: 8px; width: 90%; max-width: 400px; /* 最大宽度 */ max-height: 80vh; /* 最大高度,留出一些空间以便滚动条显示 */ overflow-y: auto; /* 垂直方向溢出时显示滚动条 */ overflow-x: hidden; /* 隐藏水平滚动条 */ } /* 每个选项项 */ .modal-item { text-align: center; /* 每个项的文本居中 */ font-size: 32rpx; /* 字体大小 */ padding: 20rpx 0; /* 内边距 */ border-top: 1rpx solid #eee; /* 上边框为浅灰色 */ cursor: pointer; /* 鼠标悬停时显示为手指 */ transition: background-color 0.2s; /* 添加鼠标悬停的平滑过渡 */ } /* 第一项不显示上边框 */ .modal-item:first-child { border-top: none; } /* 提交按钮样式 */ .submit-btn { background-color: #4CAF50; /* 绿色背景 */ color: white; /* 白色字体 */ border: none; /* 去掉边框 */ padding: 10rpx 20rpx; /* 内边距 */ font-size: 32rpx; /* 字体大小 */ border-radius: 8rpx; /* 圆角 */ cursor: pointer; /* 鼠标悬停时显示为手指 */ transition: background-color 0.3s ease; /* 背景色变化平滑过渡 */ } /* 提交按钮悬停效果 */ .submit-btn:hover { background-color: #45a049; /* 悬停时变为更深的绿色 */ } /* 取消按钮样式 */ .cancel-btn { background-color: #e74c3c; /* 红色背景 */ color: white; /* 白色字体 */ border: none; /* 去掉边框 */ padding: 10rpx 20rpx; /* 内边距 */ font-size: 32rpx; /* 字体大小 */ border-radius: 8rpx; /* 圆角 */ cursor: pointer; /* 鼠标悬停时显示为手指 */ transition: background-color 0.3s ease; /* 背景色变化平滑过渡 */ } /* 取消按钮悬停效果 */ .cancel-btn:hover { background-color: #c0392b; /* 悬停时变为更深的红色 */ } /* 新增数据弹窗的按钮容器 */ .modal-content { display: flex; flex-direction: column; /* 默认垂直方向布局 */ align-items: center; /* 居中对齐内容 */ } /* 按钮容器 */ .button-container { display: flex; /* 使用 flexbox 布局 */ justify-content: space-between; /* 按钮之间均匀分布 */ width: 100%; /* 按钮容器宽度为 100% */ margin-top: 20rpx; /* 上边距 */ } /* 每个按钮样式 */ .submit-btn, .cancel-btn { flex: 1; /* 使按钮宽度相等 */ margin: 0 10rpx; /* 按钮间隔 */ } .picker-placeholder { flex-grow: 1; color: #888; margin-right: 10px; } .picker { flex-shrink: 0; width: 100px; /* 根据需要调整宽度 */ } /* 选择器容器样式 */ .picker-container { display: flex; align-items: center; margin-bottom: 15px; } /* 选择器文本样式 */ .picker-container text { margin-right: 10px; } /* 按钮悬停效果 */ .submit-btn:hover, .cancel-btn:hover { opacity: 0.8; } /* 输入字段样式 */ .input-field { width: 100%; padding: 10rpx; font-size: 28rpx; color: #333; border: none; border-bottom: 1px solid #ddd; } /* 输入字段聚焦时的样式 */ .input-field:focus { border-color: #007bff; /* 聚焦时边框颜色 */ outline: none; /* 去除默认的聚焦轮廓 */ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 聚焦时的阴影效果 */ } /* 输入字段禁用时的样式 */ .input-field:disabled { background-color: #e9ecef; /* 背景色 */ opacity: 0.65; /* 不透明度 */ cursor: not-allowed; /* 禁用时的鼠标样式 */ } /* 输入字段的占位符样式 */ .input-field::placeholder { color: #6c757d; /* 占位符文本颜色 */ font-style: italic; /* 斜体 */ } /* 输入字段的动画效果 */ .input-field:active, .input-field:focus { transition: all 0.15s ease-in-out; } /* 输入字段的响应式设计 */ @media (max-width: 768px) { .input-field { font-size: 14px; /* 在小屏幕上减小字体大小 */ } } /* 页面标题样式 */ .page-section-title { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; }