Browse Source

修改详情弹窗样式,使其非全屏显示,其他弹窗保持全屏

Boss3
Default User 1 month ago
parent
commit
97a98000c9
  1. 55
      supply.html

55
supply.html

@ -553,8 +553,39 @@
color: white;
}
/* 模态框 - 改为正常弹窗样式 */
/* 模态框 - 全屏样式 */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
display: none;
flex-direction: column;
z-index: 1000;
overflow: hidden;
}
.modal.active {
display: flex;
}
.modal-content {
background-color: white;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
border-radius: 0;
overflow: hidden;
box-shadow: none;
display: flex;
flex-direction: column;
}
/* 详情弹窗 - 非全屏样式 */
.detail-modal {
position: fixed;
top: 0;
left: 0;
@ -568,11 +599,11 @@
overflow: auto;
}
.modal.active {
.detail-modal.active {
display: flex;
}
.modal-content {
.detail-modal .modal-content {
background-color: white;
width: 90%;
max-width: 800px;
@ -633,6 +664,17 @@
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
/* 详情弹窗头部和底部样式 */
.detail-modal .modal-header {
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.detail-modal .modal-footer {
background-color: white;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
/* 修复select下拉框向上显示问题 */
select.form-select {
position: relative;
@ -641,7 +683,8 @@
/* 手机端响应式样式 */
@media (max-width: 768px) {
.modal-content {
/* 详情弹窗响应式样式 */
.detail-modal .modal-content {
width: 95%;
max-height: 95vh;
}
@ -2442,7 +2485,7 @@
</div>
<!-- 货源详情弹窗 -->
<div id="supplyDetailModal" class="modal">
<div id="supplyDetailModal" class="detail-modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">货源详情</h2>
@ -9287,7 +9330,7 @@
};
</script>
<!-- 货源详情弹窗 -->
<div id="supplyDetailModal" class="modal">
<div id="supplyDetailModal" class="detail-modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">货源详情</h2>

Loading…
Cancel
Save