|
@@ -77,3 +77,88 @@ li {
|
|
|
/*padding: 1px; !* 内边距 *!*/
|
|
|
text-align: left; /* 文本居中 */
|
|
|
}
|
|
|
+
|
|
|
+/*---------页面查询表单自适应 样式-------------*/
|
|
|
+.customize-search-form {
|
|
|
+ display: flex; /* 使用 Flexbox 布局 */
|
|
|
+ flex-direction: row; /* 主轴方向为从左到右 */
|
|
|
+ flex-wrap: wrap; /* 允许子元素在必要时换行 */
|
|
|
+ align-items: center; /* 在交叉轴上居中对齐子元素 */
|
|
|
+ gap: 1em; /* 子元素之间的间隔 */
|
|
|
+ max-width: 100%; /* 最大宽度为100%,防止超出父容器 */
|
|
|
+ padding: 5px 1px 1px 1px; /* 上 右 下 左的内边距 */
|
|
|
+ box-sizing: border-box; /* 包括边框和内边距在内的宽度计算 */
|
|
|
+ position: relative; /* 添加相对定位,用于绝对定位的子元素 */
|
|
|
+}
|
|
|
+
|
|
|
+.customize-form-group-container {
|
|
|
+ display: flex; /* 使用 Flexbox 布局 */
|
|
|
+ flex-wrap: wrap; /* 允许子元素换行 */
|
|
|
+ align-items: center; /* 垂直居中对齐子元素 */
|
|
|
+ gap: 0.1em; /* 子元素之间的间隙 */
|
|
|
+}
|
|
|
+
|
|
|
+.customize-form-group {
|
|
|
+ display: flex; /* 使用 Flexbox 布局 */
|
|
|
+ align-items: end; /* 垂直居中对齐子元素 */
|
|
|
+ flex-basis: calc(5% - 0.5em); /* 计算每个子元素的基础大小,减去一定的间隔 */
|
|
|
+ margin-bottom: 1em; /* 每个子元素底部的外边距 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 控制输入框前面的label 标签显示的内容 */
|
|
|
+.customize-form-group label {
|
|
|
+ width: 150px; /* 标签的宽度 */
|
|
|
+ text-align: right; /* 文本右对齐 */
|
|
|
+ margin-right: 0.5em; /* 标签右侧的外边距 */
|
|
|
+}
|
|
|
+
|
|
|
+.customize-form-group .styled-input,
|
|
|
+.customize-form-group .time-input {
|
|
|
+ flex-grow: 1; /* 输入框可以扩展以填充可用空间 */
|
|
|
+ padding: 0.5em; /* 输入框内部的填充 */
|
|
|
+ border: 1px solid #ccc; /* 输入框的边框 */
|
|
|
+ border-radius: 4px; /* 输入框的圆角 */
|
|
|
+}
|
|
|
+
|
|
|
+.customize-form-group-container .select-time {
|
|
|
+ flex-basis: calc(5% - 0.5em); /* 时间选择框的基础宽度,计算后减去一定的间隔 */
|
|
|
+}
|
|
|
+
|
|
|
+.customize-form-group-container .select-time label {
|
|
|
+ margin-right: 1em; /* 时间选择框标签右侧的外边距 */
|
|
|
+}
|
|
|
+
|
|
|
+.customize-form-group-container .select-time .time-input {
|
|
|
+ width: 90px; /* 时间输入框的宽度 */
|
|
|
+ /*margin-right: 0.5em;*/ /* 可选的右侧内边距 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 小屏幕设备 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .customize-form-group {
|
|
|
+ flex-basis: 40%; /* 在小屏幕设备上,每个表单项占据整行 */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 查询条件容器 */
|
|
|
+.query-condition-container {
|
|
|
+ display: flex; /* 使用 Flexbox 布局 */
|
|
|
+ align-items: center; /* 在交叉轴上居中对齐子元素 */
|
|
|
+ border-bottom: 1px solid #ccc; /* 底部边框 */
|
|
|
+ padding-bottom: 0.5em; /* 底部内边距,使边框上方有一些空间 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 查询条件标题 */
|
|
|
+.query-condition-title {
|
|
|
+ flex: 1; /* 占据剩余空间,使文本靠左 */
|
|
|
+ text-align: left; /* 文本左对齐 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 查询按钮容器 */
|
|
|
+.query-buttons {
|
|
|
+ flex: 1; /* 占据剩余空间,使按钮靠右 */
|
|
|
+ display: flex; /* 使用 Flexbox 布局 */
|
|
|
+ justify-content: flex-end; /* 在主轴上靠右对齐子元素 */
|
|
|
+ margin-top: 0.2em; /* 顶部外边距 */
|
|
|
+}
|
|
|
+/*---------页面查询表单自适应 样式-------------*/
|