hookehuyr

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

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