.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 让元素从容器的顶部开始对齐 */
  align-items: center;
  height: 100vh;
  background-color: #f5f8f9;
  padding-top:20rpx;
}

.text-cell {
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: relative; /* 为子元素设置相对定位 */
  padding: 10rpx; /* 内边距 */
}

.total {
  font-size: 36rpx; /* 字体大小 */
  font-weight: bold;
  margin-bottom: 10rpx; /* 下边距 */
}

.icon {
  width: 54rpx; /* 图标大小 */
  height: 54rpx; /* 图标大小 */
  position: absolute; /* 绝对定位图标 */
  right: 60rpx; /* 居右显示于 container 的右侧 */
  top: 10rpx;
}

.table-container {
  width: 85%;
  max-height: 100vh; /* 设置最大高度 */
  overflow-y: auto; /* 允许竖直滚动 */
  border-radius: 20rpx; /* 圆角 */
}

.table-header {
  display: flex; /* 横向布局 */
  background-color: #4095e5; /* 表头背景 */
  font-weight: bold;
  color: white; /* 表头文字颜色 */
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-cell {
  flex: 1; /* 平均分配宽度 */
  padding: 10rpx; /* 内边距 */
  text-align: center; /* 中心对齐 */
}

.table-content {
  max-height: 90vh; /* 内容区的最大高度，比容器小，以保证有空间进行滚动 */
}

.table-row {
  display: flex; /* 横向布局 */
  border-bottom: 1rpx solid #e0e0e0; /* 下边框 */
}

.row-cell {
  flex: 1; /* 平均分配宽度 */
  padding: 15rpx; /* 内边距 */
  text-align: center; /* 中心对齐 */
}

/* 弹窗 */
.modal {
  position: fixed; /* 绝对定位以覆盖整个视口 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 1000; /* 在最上层 */
}

.modal-content {
  display: flex; /* 水平布局 */
  align-items: center; /* 垂直居中 */
  background-color: #ffffff; /* 背景颜色 */
  border-radius: 20rpx; /* 圆角 */
  padding: 20rpx; /* 内边距 */
  width: 80%; /* 可调节宽度 */
  max-width: 500rpx; /* 最大宽度 */
  border: 2rpx solid #4095e5; /* 边框颜色 */
}

.modal-background{
  position: absolute; /* 绝对定位的背景 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.search-input {
  flex: 1; /* 输入框占据剩余空间 */
  border: none; /* 去掉边框 */
  font-size: 32rpx; /* 字体大小 */
  padding: 10rpx; /* 内边距 */
}

.search-button {
  background: transparent; /* 透明背景 */
  border: none; /* 去掉边框 */
  padding: 0; /* 去掉内边距 */
  margin-left: 10rpx; /* 控制按钮与输入框的间距 */
  display: flex; /* 为了方便图标在按钮中居中显示 */
  align-items: center; /* 垂直居中 */
}

.search-icon {
  width: 36rpx; /* 图标大小 */
  height: 36rpx; /* 图标大小 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
}

.modal-text{
  padding: 15rpx;
  font-weight: bold;
  font-size: 36rpx;
}