hookehuyr

feat(cycle-selection): 添加弹窗尺寸自适应功能并优化高度计算

- 新增setPopupSize函数实现弹窗宽度和最大宽度根据屏幕尺寸动态调整
- 优化calculatePopupContentHeight函数,减少padding值
- 添加窗口尺寸和方向变化的事件监听及清理
- 更新.env.development中的代理目标配置
###
# @Date: 2023-02-13 14:56:34
# @LastEditors: hookehuyr hookehuyr@gmail.com
# @LastEditTime: 2025-09-09 17:05:22
# @LastEditTime: 2025-09-09 17:56:45
# @FilePath: /data-table/.env.development
# @Description: 文件描述
###
......@@ -23,11 +23,11 @@ VITE_PIN =
# 反向代理服务器地址
# VITE_PROXY_TARGET = https://oa.anxinchashi.com/
VITE_PROXY_TARGET = http://oa-dev.onwall.cn
# VITE_PROXY_TARGET = http://oa-dev.onwall.cn
# VITE_PROXY_TARGET = http://oa.onwall.cn
# VITE_PROXY_TARGET = https://www.wxgzjs.cn/
# VITE_PROXY_TARGET = https://oa.baorongsi.com/
# VITE_PROXY_TARGET = https://oa.jcedu.org/
VITE_PROXY_TARGET = https://oa.jcedu.org/
# PC端地址
VITE_MOBILE_URL = http://localhost:5173/
......
......@@ -35,7 +35,7 @@
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getCycleListAPI } from '@/api/cycle';
import { styleColor } from '@/constant.js';
......@@ -59,6 +59,45 @@ const selectedCycle = ref('');
const cycle_note = ref('');
/**
* 动态设置弹框尺寸
*/
const setPopupSize = () => {
nextTick(() => {
const popupElement = document.querySelector('.cycle-popup');
if (popupElement) {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// 设置宽度为屏幕的85%
const popupWidth = screenWidth * 0.85;
popupElement.style.width = `${popupWidth}px`;
// 根据屏幕尺寸动态计算最大宽度
let maxWidth;
if (screenWidth <= 480) {
// 小屏设备
maxWidth = screenWidth * 0.9;
} else if (screenWidth <= 768) {
// 中等屏幕设备
maxWidth = 420;
} else {
// 大屏设备
maxWidth = 500;
}
popupElement.style.maxWidth = `${maxWidth}px`;
// 设置高度为屏幕的70%
const popupHeight = screenHeight * 0.7;
popupElement.style.height = `${popupHeight}px`;
// 计算内容区域高度
calculatePopupContentHeight();
}
});
};
/**
* 动态计算弹窗内容区域高度
*/
const calculatePopupContentHeight = () => {
......@@ -72,7 +111,7 @@ const calculatePopupContentHeight = () => {
const popupHeight = popupElement.offsetHeight;
const headerHeight = headerElement.offsetHeight;
const footerHeight = footerElement.offsetHeight;
const padding = 100; // 上下padding和margin的总和
const padding = 40; // 上下padding的总和
const contentHeight = popupHeight - headerHeight - footerHeight - padding;
contentElement.style.height = `${contentHeight}px`;
......@@ -81,6 +120,13 @@ const calculatePopupContentHeight = () => {
};
/**
* 窗口尺寸变化处理函数
*/
const handleResize = () => {
setPopupSize();
};
/**
* 获取周期列表
* @param {string} form_code 表单唯一标识
*/
......@@ -96,8 +142,8 @@ const getCycleList = async (form_code) => {
// 设置周期列表
cycleList.value = data.cycle_list;
cycle_note.value = data.cycle_note;
// 计算高度
calculatePopupContentHeight();
// 设置弹框尺寸
setPopupSize();
} else {
// 如果不需要周期选择,检查未完成表单后跳转到目标页面
const targetRoute = sessionStorage.getItem('cycle_target_route');
......@@ -192,6 +238,17 @@ onMounted(() => {
console.error('缺少表单代码参数');
$router.replace('/');
}
// 监听窗口尺寸变化
window.addEventListener('resize', handleResize);
// 监听屏幕方向变化
window.addEventListener('orientationchange', handleResize);
});
onUnmounted(() => {
// 清理事件监听器
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleResize);
});
</script>
......@@ -206,14 +263,15 @@ onMounted(() => {
}
.cycle-popup {
width: 100%;
max-width: 380px;
width: 85vw;
height: 70vh;
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.popup-header {
......