update dtp页面自适应修改

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

@@ -32,6 +32,19 @@
 	outline: none; /* 移除轮廓 */
 	transition: all 0.3s ease; /* 过渡动画 */
 }
+.styled-input.edit_inputs1 {
+	/*display: block; /* 使其独占一行 */
+	width: 400px; /* 宽度为容器宽度 */
+	height: 30px;
+	padding: 6px; /* 内边距 */
+	font-size: 14px; /* 字体大小 */
+	color: #333; /* 字体颜色 */
+	/*background-color: #fff; !* 背景颜色 *!*/
+	border: 1px solid #ccc; /* 边框 */
+	border-radius: 4px; /* 圆角边框 */
+	outline: none; /* 移除轮廓 */
+	transition: all 0.3s ease; /* 过渡动画 */
+}
 .customize-form-group .styled-input.edit_inputs {
 	/*display: block; /* 使其独占一行 */
 	width: 480px; /* 宽度为容器宽度 */
@@ -219,12 +232,116 @@ li {
 /* 小屏幕设备 */
 @media (max-width: 768px) {
 	.customize-form-group {
-		flex-basis: 40%; /* 在小屏幕设备上，每个表单项占据整行 */
+		display: block; /* 取消 flex 布局，改为块级元素 */
+		margin-bottom: 1em; /* 增加底部外边距 */
+	}
+	.customize-form-group.edit {
+		display: block; /* 取消 flex 布局，改为块级元素 */
+		margin-bottom: 1em; /* 增加底部外边距 */
+	}
+	.mySelectClass {
+		width:285px !important;
+	}
+	.customize-form-group .styled-input.edit_inputs {
+		/*display: block; !* 使其独占一行 *!*/
+		width:285px; /* 宽度为容器宽度 */
+		height: 30px;
+		padding: 6px; /* 内边距 */
+		font-size: 14px; /* 字体大小 */
+		color: #333; /* 字体颜色 */
+		/*background-color: #fff; !* 背景颜色 *!*/
+		border: 1px solid #ccc; /* 边框 */
+		border-radius: 4px; /* 圆角边框 */
+		outline: none; /* 移除轮廓 */
+		transition: all 0.3s ease; /* 过渡动画 */
+	}
+	.customize-form-group label {
+		width: 100%; /* 标签占据整行 */
+		text-align: left; /* 文本左对齐 */
+		margin-bottom: 0.5em; /* 标签和输入框之间的间距 */
+	}
+
+	.customize-form-group .styled-input,
+	.customize-form-group .time-input {
+		width: 85%; /* 输入框占据整行 */
+		white-space: normal; /* 允许换行 */
+		word-break: break-all; /* 长单词或 URL 地址换行 */
+	}
+
+	.customize-search-form {
+		display: block; /* 取消 flex 布局，改为块级元素 */
+		margin-bottom: 1em; /* 增加底部外边距 */
+	}
+
+	.query-condition-container {
+		display: block; /* 取消 flex 布局，改为块级元素 */
+		align-items: flex-start; /* 对齐方式调整为左对齐 */
+	}
+
+	.query-condition-title {
+		width: 100%; /* 查询条件标题占据整行 */
+		margin-bottom: 0.5em; /* 增加底部外边距 */
+	}
+
+	.query-buttons {
+		display: block; /* 取消 flex 布局，改为块级元素 */
+		text-align: left; /* 查询按钮左对齐 */
+		margin-top: 1em; /* 增加顶部外边距 */
 	}
-	.customize-search-form{
-		flex-basis: 40%;!important; /* 在小屏幕设备上，每个表单项占据整行 */
-		margin-bottom: 1px;
+	.textareas{
+		width: 100%!important;
 	}
+	.styled-input.short {
+		/*display: block; /* 使其独占一行 */
+		width: 20%; /* 宽度为容器宽度 */
+		height: 30px;
+		padding: 6px; /* 内边距 */
+		font-size: 14px; /* 字体大小 */
+		color: #333; /* 字体颜色 */
+		/*background-color: #fff; !* 背景颜色 *!*/
+		border: 1px solid #ccc; /* 边框 */
+		border-radius: 4px; /* 圆角边框 */
+		outline: none; /* 移除轮廓 */
+		transition: all 0.3s ease; /* 过渡动画 */
+	}
+	.styled-input.edit_inputs1 {
+		/*display: block; /* 使其独占一行 */
+		width: 57%; /* 宽度为容器宽度 */
+		height: 30px;
+		padding: 6px; /* 内边距 */
+		font-size: 14px; /* 字体大小 */
+		color: #333; /* 字体颜色 */
+		/*background-color: #fff; !* 背景颜色 *!*/
+		border: 1px solid #ccc; /* 边框 */
+		border-radius: 4px; /* 圆角边框 */
+		outline: none; /* 移除轮廓 */
+		transition: all 0.3s ease; /* 过渡动画 */
+	}
+	.input-groups {
+		display: block; /* 改变为块级元素 */
+		overflow-x: auto; /* 允许水平滚动 */
+		flex-wrap: wrap; /* 允许内容换行 */
+		white-space: normal; /* 允许文字换行 */
+		overflow: visible; /* 不隐藏多余部分 */
+		text-overflow: clip; /* 不显示省略号 */
+		width: 100%; /* 宽度为100% */
+		height: auto; /* 高度自动调整 */
+		transform: none; /* 移除向上移动 */
+		vertical-align: baseline; /* 默认对齐方式 */
+	}
+}
+
+/* 固定表格布局 */
+.fixed-layout-table {
+	table-layout: fixed; /* 固定表格布局 */
+}
+
+.fixed-layout-table td, .fixed-layout-table th {
+	min-width: 120px; /* 设置最小宽度 */
+	width: 140px; /* 设置最小宽度 */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 /* 查询条件容器 */

health-admin/src/main/resources/templates/dtp/archives/archivesEdit.html

@@ -29,9 +29,7 @@
                         <div class="tab-content">
                             <!-- 需要隐藏的div -->
                             <div id="tab-1" class="tab-pane active">
-                                <div class="col-sm-12 search-collapse" >
-                                    <div class="row">
-                                    <form class="customize-search-form" id="form-server-edit1" >
+                                        <form class="customize-search-form" id="form-server-edit1" >
                                         <input type="hidden" id="id" name="id" th:value="${id}">
                                         <div class="customize-form-group edit">
                                             <label class="control-label is-required">姓名：</label>
@@ -64,7 +62,7 @@
                                         <div class="customize-form-group edit">
                                             <label >证件号码：</label>
                                             <input name="documentType" placeholder="证件类型" class="styled-input short" type="text"  th:value="${documentType}" disabled="true">
-                                            <input name="documentNumber" placeholder="请输入证件号码" class="styled-input edit_inputs" style="width: 400px"  type="text" maxlength="30" th:value="${documentNumber}" disabled="true">
+                                            <input name="documentNumber" placeholder="请输入证件号码" class="styled-input edit_inputs1" type="text" maxlength="30" th:value="${documentNumber}" disabled="true">
                                             <span class="span_line" readonly></span>
                                         </div>
                                         <div class="customize-form-group edit">
@@ -99,7 +97,7 @@
                                         </div>
                                         <div class="customize-form-group edit">
                                             <label >籍贯：</label>
-                                            <select name="nativePlace" style="width: 480px" class="styled-input edit_inputs" th:with="type=${@dict.getType('sys_select_dtp_ysfw_jg')}" >
+                                            <select name="nativePlace" class="styled-input edit_inputs" th:with="type=${@dict.getType('sys_select_dtp_ysfw_jg')}" >
                                                 <option value="">请选择</option>
                                                 <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                                         th:selected="${dict.dictLabel}==${nativePlace}"></option>
@@ -160,13 +158,11 @@
                                         </div>
                                         <div class="customize-form-group edit">
                                             <label >上翻状态：</label>
-                                            <input name="flipStatus"  id="flipStatus" style="width: 480px; border: none" type="text"
-                                                   th:value="${flipStatus == 1 ? '已上翻' : (flipStatus == 2 ? '未上翻' : '')}" readonly>
+                                            <input name="flipStatus" class="styled-input edit_inputs" id="flipStatus" style="border: none" type="text"
+                                                   th:value="${flipStatus == 1 ? '已上翻' : (flipStatus == 2 ? '未上翻' : '')}" disabled readonly>
                                             <a href="#" onclick="" style="width: 66px;">&nbsp;&nbsp;解绑</a>
                                         </div>
                                     </form>
-                                </div>
-                            </div>
                             </div>
                             <div id="tab-2" class="tab-pane">
                              <form class="form-horizontal" id="form-server-edit">
@@ -357,9 +353,13 @@
                                                 </div>
                                                 <span class="status"></span>
                                             </div>
+                                        </div>
+                                        <div class="customize-search-form">
                                             <div class="customize-form-group edit">
                                                 <label>伴随症状：</label>
-                                                <textarea id="accompanyingSymptoms" style="width: 480px;height: 30px" name="accompanyingSymptoms" th:text="${accompanyingSymptoms}" placeholder="伴随症状..." rows="1.9" cols="112" ></textarea>
+                                                <textarea id="accompanyingSymptoms" name="accompanyingSymptoms" class="styled-input edit_inputs textareas"
+                                                          style="width: auto;height: 140px ;border: 1px solid ;"
+                                                          th:text="${accompanyingSymptoms}" placeholder="伴随症状..." rows="1.9" cols="112" ></textarea>
                                                 <span class="status"></span>
                                             </div>
                                         </div>
@@ -410,11 +410,7 @@
                                            </div>
                                            <div class="customize-form-group edit">
                                                <label>传染病史描述：</label>
-                                               <input name="infectiousDiseaseHistoryDescription" style="width: 480px;" placeholder="传染病史描述" class="styled-input edit_inputs" type="text"  th:value="${infectiousDiseaseHistoryDescription}">
-                                           </div>
-                                           <div class="customize-form-group edit">
-                                               <label>过敏史：</label>
-                                               <textarea id="allergyHistory" style="width: 480px;"  name="allergyHistory" placeholder="这里可以输入过敏史..." rows="1.9" cols="112" th:text="${allergyHistory}"></textarea>
+                                               <input name="infectiousDiseaseHistoryDescription" placeholder="传染病史描述" class="styled-input edit_inputs" type="text"  th:value="${infectiousDiseaseHistoryDescription}">
                                            </div>
                                            <div class="customize-form-group edit">
                                                <label>既往药物不良反应史：</label>
@@ -426,25 +422,35 @@
                                                  <input type="radio" class="form-check-radio" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}" th:checked="${dict.dictLabel}==${hasSurgicalTraumaHistory}"  name="hasSurgicalTraumaHistory" id="hasSurgicalTraumaHistory">
                                            </div>
                                        </div>
+                                       <div class="customize-search-form">
+                                           <div class="customize-form-group edit">
+                                               <div class="customize-form-group edit">
+                                                   <label>过敏史：</label>
+                                                   <textarea id="allergyHistory" name="allergyHistory" placeholder="这里可以输入过敏史..." class="styled-input edit_inputs textareas"
+                                                             style="width: auto;height: 140px ;border: 1px solid ;" rows="1.9" cols="112" th:text="${allergyHistory}"></textarea>
+                                               </div>
+                                           </div>
+                                       </div>
                                      </div>
                                        <div class="customize-search-form">
                                            <div class="customize-form-group edit">
-                                               <span style="width: 120px;position: absolute; top: 25px; left: 0;  ">家族史：</span>
-                                               <span class="status"></span>
-                                                   <table id="familyHistoryTable" style="width: 480px;">
+                                               <div style="/*display: flex;*/">
+                                               <label style="width: auto;">家族史:</label>
+                                                   <button type="button"  data-toggle="modal" data-target="#myModal" class="btn-primary">新增</button>
+                                                   <table id="familyHistoryTable" style="width: 340px;">
                                                        <thead>
                                                        <tr>
                                                            <th>序号</th>
                                                            <th>疾病</th>
                                                            <th>家庭成员</th>
                                                            <th>操作</th>
-                                                           <th><button type="button"  data-toggle="modal" data-target="#myModal" class="btn-primary">新增</button></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="familyHistoryTableBody">
                                                        <!-- 表格行将在这里动态添加 -->
                                                        </tbody>
                                                    </table>
+                                               </div>
                                                    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <form class="form-horizontal" id="form-jzs-add">
@@ -489,9 +495,9 @@
                                          <strong>治疗手段</strong>
                                          <div class="customize-search-form">
                                              <div class="customize-form-group edit">
-                                                 <div style="display: flex;">
-                                                     <label>多个治疗方案原因描述:</label>
-                                                     <textarea id="multipleTreatmentReasonsDescription" style="width: auto;height: 140px ;border: 2px solid ;"
+                                                 <div style="/*display: flex;*/">
+                                                     <label style="width: auto;">多个治疗方案原因描述:</label>
+                                                     <textarea id="multipleTreatmentReasonsDescription" class="styled-input edit_inputs textareas" style="width: auto;height: 140px ;border: 1px solid ;"
                                                                name="multipleTreatmentReasonsDescription" placeholder="治疗方案原因描述"
                                                                rows="5" cols="185" th:text="${multipleTreatmentReasonsDescription}"></textarea>
                                                  </div>
@@ -504,16 +510,16 @@
                                          <strong>用药情况 </strong>
                                          <div class="customize-search-form">
                                              <div class="customize-form-group edit">
-                                                 <div style="display: flex;">
-                                                     <label>当前用药情况:</label>
-                                                     <table id="yyqkTable" style="width: 480px;">
+                                                 <div style="/*display: flex;*/">
+                                                     <label style="width: auto;">当前用药情况:</label>
+                                                     <button type="button"  data-toggle="modal" data-target="#myModal2" class="btn-primary">新增</button>
+                                                     <table id="yyqkTable" style="width: 340px;">
                                                          <thead>
                                                          <tr>
                                                              <th>序号</th>
                                                              <th>用药情况</th>
                                                              <th>用药类型</th>
                                                              <th>操作</th>
-                                                             <th><button type="button"  data-toggle="modal" data-target="#myModal2" class="btn-primary">新增</button></th>
                                                          </tr>
                                                          </thead>
                                                          <tbody id="yyqkTableBody">
@@ -564,17 +570,17 @@
                                          <strong>其他信息</strong>
                                          <div class="customize-search-form">
                                              <div class="customize-form-group edit">
-                                                 <div style="display: flex;">
-                                                     <label>联系人：</label>
-                                                     <table id="relationTable"  style="width: 580px;">
+                                                 <div style="/*display: flex;*/">
+                                                     <label style="width: auto;">联系人：</label>
+                                                     <button type="button"  data-toggle="modal" data-target="#myModal3" class="btn-primary">新增</button>
+                                                     <table id="relationTable"  style="width: 310px;">
                                                          <thead>
                                                          <tr>
                                                              <th>序号</th>
-                                                             <th>联系人电话</th>
-                                                             <th>联系人姓名</th>
-                                                             <th>联系人关系</th>
+                                                             <th>电话</th>
+                                                             <th>姓名</th>
+                                                             <th>关系</th>
                                                              <th>操作</th>
-                                                             <th><button type="button"  data-toggle="modal" data-target="#myModal3" class="btn-primary">新增</button></th>
                                                          </tr>
                                                          </thead>
                                                          <tbody id="relationTableBody">