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">
......@@ -259,7 +259,7 @@ onUnmounted(() => {
});
</script>
<style lang="less" scoped>
<style lang="less">
.cycle-selection-page {
width: 100vw;
height: 100vh;
......@@ -267,9 +267,7 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
}
.cycle-popup {
.cycle-popup {
width: 85vw;
height: 70vh;
background: white;
......@@ -279,9 +277,9 @@ onUnmounted(() => {
overflow: hidden;
position: relative;
margin: 0 auto;
}
}
.popup-header {
.popup-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
......@@ -293,36 +291,36 @@ onUnmounted(() => {
font-weight: 600;
color: #333;
}
}
}
.popup-content {
.popup-content {
flex: 1;
overflow-y: auto;
padding: 0 20px;
min-height: 0;
}
}
.cycle-item {
.cycle-item {
padding: 15px 0;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
}
}
}
.cycle-info {
.cycle-info {
margin-left: 10px;
}
}
.cycle-title {
.cycle-title {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
}
.cycle-time {
.cycle-time {
font-size: 14px;
color: #666;
line-height: 1.5;
......@@ -334,19 +332,21 @@ onUnmounted(() => {
margin-bottom: 0;
}
}
}
}
.popup-footer {
.popup-footer {
padding: 20px;
border-top: 1px solid #eee;
flex-shrink: 0;
}
}
.confirm-btn {
.confirm-btn {
width: 100%;
height: 44px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
}
}
</style>
......