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

- 将周期说明移动到内容区域并添加样式 - 优化样式结构，减少嵌套层级 - 移除scoped限制使样式全局可用

style(cycle-selection): 调整周期选择弹窗样式和布局
- 将周期说明移动到内容区域并添加样式 - 优化样式结构，减少嵌套层级 - 移除scoped限制使样式全局可用
hookehuyr
Commit 3cbc4b7e3fd75c14ef8c9fbc7b05d5a64f1d05c2 3cbc4b7e 1 parent a1dfa620
Showing 1 changed file with 77 additions and 77 deletions
src/views/cycle-selection.vue
--- a/src/views/cycle-selection.vue
View file @3cbc4b7
+++ b/src/views/cycle-selection.vue
View file @3cbc4b7
@@ -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;
-.cycle-popup {
+    height: 70vh;
-  width: 85vw;
+    background: white;
-  height: 70vh;
+    border-radius: 12px;
-  background: white;
+    display: flex;
-  border-radius: 12px;
+    flex-direction: column;
-  display: flex;
+    overflow: hidden;
-  flex-direction: column;
+    position: relative;
-  overflow: hidden;
+    margin: 0 auto;
-  position: relative;
+  }
-  margin: 0 auto;
-}
-.popup-header {
+  .popup-header {
-  padding: 20px;
+    padding: 20px;
-  text-align: center;
+    text-align: center;
-  border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #eee;
-  flex-shrink: 0;
+    flex-shrink: 0;
-  h3 {
+    h3 {
-    margin: 0;
+      margin: 0;
-    font-size: 18px;
+      font-size: 18px;
-    font-weight: 600;
+      font-weight: 600;
-    color: #333;
+      color: #333;
+    }
   }
-}
-.popup-content {
+  .popup-content {
-  flex: 1;
+    flex: 1;
-  overflow-y: auto;
+    overflow-y: auto;
-  padding: 0 20px;
+    padding: 0 20px;
-  min-height: 0;
+    min-height: 0;
-}
+  }
-.cycle-item {
+  .cycle-item {
-  padding: 15px 0;
+    padding: 15px 0;
-  border-bottom: 1px solid #f5f5f5;
+    border-bottom: 1px solid #f5f5f5;
-  &:last-child {
+    &:last-child {
-    border-bottom: none;
+      border-bottom: none;
+    }
   }
-}
-.cycle-info {
+  .cycle-info {
-  margin-left: 10px;
+    margin-left: 10px;
-}
+  }
-.cycle-title {
+  .cycle-title {
-  font-size: 16px;
+    font-size: 16px;
-  font-weight: 500;
+    font-weight: 500;
-  color: #333;
+    color: #333;
-  margin-bottom: 8px;
+    margin-bottom: 8px;
-}
+  }
-.cycle-time {
+  .cycle-time {
-  font-size: 14px;
+    font-size: 14px;
-  color: #666;
+    color: #666;
-  line-height: 1.5;
+    line-height: 1.5;
-  div {
+    div {
-    margin-bottom: 4px;
+      margin-bottom: 4px;
-    &:last-child {
+      &:last-child {
-      margin-bottom: 0;
+        margin-bottom: 0;
+      }
     }
   }
-}
-.popup-footer {
+  .popup-footer {
-  padding: 20px;
+    padding: 20px;
-  border-top: 1px solid #eee;
+    border-top: 1px solid #eee;
-  flex-shrink: 0;
+    flex-shrink: 0;
-}
+  }
-.confirm-btn {
+  .confirm-btn {
-  width: 100%;
+    width: 100%;
-  height: 44px;
+    height: 44px;
-  border-radius: 8px;
+    border-radius: 8px;
-  font-size: 16px;
+    font-size: 16px;
-  font-weight: 500;
+    font-weight: 500;
+  }
 }
+
 </style>