소스 검색

update css和js作用是 自适应 需要在表格中使用对应的样式和控制

bzd_lxf 6 달 전
부모
커밋
2fba0c7ddd

+ 85 - 0
health-admin/src/main/resources/static/health/css/input-styles.css

@@ -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; /* 顶部外边距 */
+}
+/*---------页面查询表单自适应 样式-------------*/

+ 1 - 1
health-admin/src/main/resources/static/health/css/ry-ui.css

@@ -826,7 +826,7 @@ label {
 
 /** 表格查询数据 **/
 .table-striped {
-	min-height: 75%;
+	min-height: 85%;
 }
 
 .table-striped .bootstrap-table, .table-striped .table-bordered {

+ 3 - 1
health-admin/src/main/resources/static/health/js/input-styles.js

@@ -18,7 +18,9 @@ document.addEventListener("DOMContentLoaded", function() {
         var initialValue = input.getAttribute('data-default-value') || ''; // 获取默认值,默认为空字符串
         input.addEventListener('change', function() {
             var currentValue = this.value;
-            if (currentValue !== '' && currentValue !== initialValue) {
+            console.log("初始值", initialValue,"输入的值",currentValue,"结果 ",currentValue !== initialValue)
+            if (currentValue !== '') {
+                this.classList.remove('changed');
                 // 当值改变时,添加一个类来标识
                 this.classList.add('changed');
                 initialValue = currentValue; // 更新初始值

+ 2 - 2
health-admin/src/main/resources/static/health/js/ry-ui.js

@@ -852,10 +852,10 @@ var table = {
                     url = "/404.html";
                 }
                 if ($.common.isEmpty(width)) {
-                    width = 800;
+                    width = 770;
                 }
                 if ($.common.isEmpty(height)) {
-                    height = ($(window).height() - 50);
+                    height = ($(window).height() - 200);
                 }
                 if ($.common.isEmpty(callback)) {
                     callback = function(index, layero) {