hookehuyr

style(index): 调整离线状态下的页面背景样式

将离线状态的背景样式从默认状态中分离,通过动态类名控制
1 <!-- 1 <!--
2 * @Date: 2023-06-21 10:23:09 2 * @Date: 2023-06-21 10:23:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-13 15:47:00 4 + * @LastEditTime: 2026-01-13 15:51:31
5 * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue 5 * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
6 * @Description: 预约页首页 6 * @Description: 预约页首页
7 --> 7 -->
8 <template> 8 <template>
9 - <view class="index-page"> 9 + <view class="index-page" :class="{ 'is-offline': is_offline }">
10 <view v-if="is_offline" class="offline-banner mx-6 mt-4 rounded-xl px-4 py-3"> 10 <view v-if="is_offline" class="offline-banner mx-6 mt-4 rounded-xl px-4 py-3">
11 <view class="flex items-center"> 11 <view class="flex items-center">
12 <IconFont name="tips" size="18" /> 12 <IconFont name="tips" size="18" />
...@@ -110,14 +110,18 @@ useShareAppMessage(() => { ...@@ -110,14 +110,18 @@ useShareAppMessage(() => {
110 .index-page { 110 .index-page {
111 position: relative; 111 position: relative;
112 min-height: 100vh; 112 min-height: 100vh;
113 - background-color: #F3EEE3; 113 + background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50');
114 - background-image:
115 - linear-gradient(180deg, rgba(166, 121, 57, 0.10) 0%, rgba(255, 255, 255, 0.90) 60%, rgba(243, 238, 227, 1) 100%),
116 - url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50');
117 background-repeat: no-repeat; 114 background-repeat: no-repeat;
118 background-position: center; 115 background-position: center;
119 background-size: cover; /* 确保背景覆盖 */ 116 background-size: cover; /* 确保背景覆盖 */
120 117
118 + &.is-offline {
119 + background-color: #F3EEE3;
120 + background-image:
121 + linear-gradient(180deg, rgba(166, 121, 57, 0.10) 0%, rgba(255, 255, 255, 0.90) 60%, rgba(243, 238, 227, 1) 100%),
122 + url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50');
123 + }
124 +
121 .offline-banner { 125 .offline-banner {
122 position: absolute; 126 position: absolute;
123 top: 24rpx; 127 top: 24rpx;
......