/* 表格容器 */ .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: 170rpx; /* 固定宽度 */ height: 100rpx; padding: 10rpx; text-align: center; font-size: 28rpx; color: #030803; /* 表头文字颜色 */ border-right: 1rpx solid #ddd; white-space: normal; overflow: hidden; word-wrap: break-word; word-break: break-all; } /* 表格行样式 */ .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; } /* 单选框样式 */ .radio { display: inline-block; margin-right: 10px; /* 单选框之间的间隔 */ } /* 单选框选中时的样式 */ .radio-checked { color: #1AAD19; /* 微信小程序主题色 */ } /* 单选框未选中时的样式 */ .radio-unchecked { color: #ccc; /* 灰色表示未选中 */ } /* 按钮通用样式 */ .button-container button { width: 50%; /* 按钮宽度100%,占满容器宽度 */ height: 50px; /* 按钮高度 */ line-height: 50px; /* 行高与按钮高度一致,使文本垂直居中 */ background-color: #1AAD19; /* 微信绿 */ color: white; /* 文字颜色为白色 */ border-radius: 5px; /* 圆角边框 */ font-size: 16px; /* 字体大小 */ margin-top: 20px; } /* 按钮点击效果 */ .button-container button:active { background-color: #179B16; /* 点击时背景颜色变深 */ } /* 下拉框容器样式 */ .picker-container { display: flex; align-items: center; justify-content: space-between; font-size: 16px; /* 字体大小 */ color: #333; /* 字体颜色 */ padding: 8px 12px; /* 内边距 */ background-color: #fff; /* 背景颜色 */ border: 1px solid #ddd; /* 边框 */ border-radius: 4px; /* 圆角边框 */ width: 200px; /* 固定宽度 */ margin-left: auto; /* 自动左边距 */ margin-right: auto; /* 自动右边距 */ box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */ } /* 下拉框样式 */ .picker { flex-grow: 1; /* 使下拉框占据剩余空间 */ text-align: left; /* 文字左对齐 */ } /* 三角形样式 */ .picker-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #333; /* 三角形颜色 */ margin-left: 10px; /* 与下拉框文本的间隔 */ } /* 下拉框标题样式 */ .picker-title { font-size: 16px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ color: #333; /* 字体颜色 */ margin-bottom: 10px; /* 与下拉框之间的间隔 */ text-align: center; /* 文字居中 */ padding: 8px 0; /* 上下内边距 */ background-color: #f0f0f0; /* 背景颜色 */ border: 1px solid #ddd; /* 边框 */ border-radius: 4px; /* 圆角边框 */ width: 200px; /* 固定宽度 */ margin-left: auto; /* 自动左边距 */ margin-right: auto; /* 自动右边距 */ box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */ }