You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.1 KiB
130 lines
3.1 KiB
.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;
|
|
} |