hookehuyr

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

- 将周期说明移动到内容区域并添加样式
- 优化样式结构,减少嵌套层级
- 移除scoped限制使样式全局可用
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
4 <div class="cycle-popup"> 4 <div class="cycle-popup">
5 <div class="popup-header"> 5 <div class="popup-header">
6 <h3>选择周期</h3> 6 <h3>选择周期</h3>
7 - <p>{{ cycle_note }}</p>
8 </div> 7 </div>
9 <div class="popup-content"> 8 <div class="popup-content">
9 + <p style="padding-top: 0.85rem; text-align: justify;">{{ cycle_note }}</p>
10 <van-radio-group v-model="selectedCycle"> 10 <van-radio-group v-model="selectedCycle">
11 <div v-for="cycle in cycleList" :key="cycle.id" class="cycle-item"> 11 <div v-for="cycle in cycleList" :key="cycle.id" class="cycle-item">
12 <van-radio :name="cycle.id"> 12 <van-radio :name="cycle.id">
...@@ -259,7 +259,7 @@ onUnmounted(() => { ...@@ -259,7 +259,7 @@ onUnmounted(() => {
259 }); 259 });
260 </script> 260 </script>
261 261
262 -<style lang="less" scoped> 262 +<style lang="less">
263 .cycle-selection-page { 263 .cycle-selection-page {
264 width: 100vw; 264 width: 100vw;
265 height: 100vh; 265 height: 100vh;
...@@ -267,9 +267,7 @@ onUnmounted(() => { ...@@ -267,9 +267,7 @@ onUnmounted(() => {
267 display: flex; 267 display: flex;
268 align-items: center; 268 align-items: center;
269 justify-content: center; 269 justify-content: center;
270 -} 270 + .cycle-popup {
271 -
272 -.cycle-popup {
273 width: 85vw; 271 width: 85vw;
274 height: 70vh; 272 height: 70vh;
275 background: white; 273 background: white;
...@@ -279,9 +277,9 @@ onUnmounted(() => { ...@@ -279,9 +277,9 @@ onUnmounted(() => {
279 overflow: hidden; 277 overflow: hidden;
280 position: relative; 278 position: relative;
281 margin: 0 auto; 279 margin: 0 auto;
282 -} 280 + }
283 281
284 -.popup-header { 282 + .popup-header {
285 padding: 20px; 283 padding: 20px;
286 text-align: center; 284 text-align: center;
287 border-bottom: 1px solid #eee; 285 border-bottom: 1px solid #eee;
...@@ -293,36 +291,36 @@ onUnmounted(() => { ...@@ -293,36 +291,36 @@ onUnmounted(() => {
293 font-weight: 600; 291 font-weight: 600;
294 color: #333; 292 color: #333;
295 } 293 }
296 -} 294 + }
297 295
298 -.popup-content { 296 + .popup-content {
299 flex: 1; 297 flex: 1;
300 overflow-y: auto; 298 overflow-y: auto;
301 padding: 0 20px; 299 padding: 0 20px;
302 min-height: 0; 300 min-height: 0;
303 -} 301 + }
304 302
305 -.cycle-item { 303 + .cycle-item {
306 padding: 15px 0; 304 padding: 15px 0;
307 border-bottom: 1px solid #f5f5f5; 305 border-bottom: 1px solid #f5f5f5;
308 306
309 &:last-child { 307 &:last-child {
310 border-bottom: none; 308 border-bottom: none;
311 } 309 }
312 -} 310 + }
313 311
314 -.cycle-info { 312 + .cycle-info {
315 margin-left: 10px; 313 margin-left: 10px;
316 -} 314 + }
317 315
318 -.cycle-title { 316 + .cycle-title {
319 font-size: 16px; 317 font-size: 16px;
320 font-weight: 500; 318 font-weight: 500;
321 color: #333; 319 color: #333;
322 margin-bottom: 8px; 320 margin-bottom: 8px;
323 -} 321 + }
324 322
325 -.cycle-time { 323 + .cycle-time {
326 font-size: 14px; 324 font-size: 14px;
327 color: #666; 325 color: #666;
328 line-height: 1.5; 326 line-height: 1.5;
...@@ -334,19 +332,21 @@ onUnmounted(() => { ...@@ -334,19 +332,21 @@ onUnmounted(() => {
334 margin-bottom: 0; 332 margin-bottom: 0;
335 } 333 }
336 } 334 }
337 -} 335 + }
338 336
339 -.popup-footer { 337 + .popup-footer {
340 padding: 20px; 338 padding: 20px;
341 border-top: 1px solid #eee; 339 border-top: 1px solid #eee;
342 flex-shrink: 0; 340 flex-shrink: 0;
343 -} 341 + }
344 342
345 -.confirm-btn { 343 + .confirm-btn {
346 width: 100%; 344 width: 100%;
347 height: 44px; 345 height: 44px;
348 border-radius: 8px; 346 border-radius: 8px;
349 font-size: 16px; 347 font-size: 16px;
350 font-weight: 500; 348 font-weight: 500;
349 + }
351 } 350 }
351 +
352 </style> 352 </style>
......