hookehuyr

style(cycle-selection): 调整周期选择弹窗样式和布局

- 将周期说明移动到内容区域并添加样式
- 优化样式结构,减少嵌套层级
- 移除scoped限制使样式全局可用
......@@ -4,9 +4,9 @@
<div class="cycle-popup">
<div class="popup-header">
<h3>选择周期</h3>
<p>{{ cycle_note }}</p>
</div>
<div class="popup-content">
<p style="padding-top: 0.85rem; text-align: justify;">{{ cycle_note }}</p>
<van-radio-group v-model="selectedCycle">
<div v-for="cycle in cycleList" :key="cycle.id" class="cycle-item">
<van-radio :name="cycle.id">
......@@ -67,11 +67,11 @@ const setPopupSize = () => {
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) {
......@@ -84,13 +84,13 @@ const setPopupSize = () => {
// 大屏设备
maxWidth = 500;
}
popupElement.style.maxWidth = `${maxWidth}px`;
// 设置高度为屏幕的70%
const popupHeight = screenHeight * 0.7;
popupElement.style.height = `${popupHeight}px`;
// 计算内容区域高度
calculatePopupContentHeight();
}
......@@ -150,12 +150,12 @@ const getCycleList = async (form_code) => {
if (targetRoute) {
sessionStorage.removeItem('cycle_target_route');
const route = JSON.parse(targetRoute);
// 调试信息:检查不需要周期选择时的路由对象
console.log('不需要周期选择时的路由对象:', route);
console.log('不需要周期选择时的查询参数:', route.query);
console.log('不需要周期选择时的code参数:', route.query.code);
// 检查是否需要显示未完成表单弹框
checkUnfinishedForm(route);
} else {
......@@ -182,12 +182,12 @@ const confirmCycleSelection = () => {
x_cycle: selectedCycle.value,
cycle_selected: '1'
};
// 调试信息:检查route对象内容
console.log('周期选择后的路由对象:', route);
console.log('查询参数:', route.query);
console.log('code参数:', route.query.code);
// 清除临时存储
sessionStorage.removeItem('cycle_target_route');
......@@ -245,7 +245,7 @@ onMounted(() => {
console.error('缺少表单代码参数');
$router.replace('/');
}
// 监听窗口尺寸变化
window.addEventListener('resize', handleResize);
// 监听屏幕方向变化
......@@ -259,7 +259,7 @@ onUnmounted(() => {
});
</script>
<style lang="less" scoped>
<style lang="less">
.cycle-selection-page {
width: 100vw;
height: 100vh;
......@@ -267,86 +267,86 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
}
.cycle-popup {
width: 85vw;
height: 70vh;
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.cycle-popup {
width: 85vw;
height: 70vh;
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.popup-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
flex-shrink: 0;
.popup-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
flex-shrink: 0;
h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
}
}
.popup-content {
flex: 1;
overflow-y: auto;
padding: 0 20px;
min-height: 0;
}
.popup-content {
flex: 1;
overflow-y: auto;
padding: 0 20px;
min-height: 0;
}
.cycle-item {
padding: 15px 0;
border-bottom: 1px solid #f5f5f5;
.cycle-item {
padding: 15px 0;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
&:last-child {
border-bottom: none;
}
}
}
.cycle-info {
margin-left: 10px;
}
.cycle-info {
margin-left: 10px;
}
.cycle-title {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
.cycle-title {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
.cycle-time {
font-size: 14px;
color: #666;
line-height: 1.5;
.cycle-time {
font-size: 14px;
color: #666;
line-height: 1.5;
div {
margin-bottom: 4px;
div {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
&:last-child {
margin-bottom: 0;
}
}
}
}
.popup-footer {
padding: 20px;
border-top: 1px solid #eee;
flex-shrink: 0;
}
.popup-footer {
padding: 20px;
border-top: 1px solid #eee;
flex-shrink: 0;
}
.confirm-btn {
width: 100%;
height: 44px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
.confirm-btn {
width: 100%;
height: 44px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
}
}
</style>
......