style: 将固定像素单位改为视窗单位并优化图片路径
将高度单位从rpx改为vh,宽度从rpx改为vw以提高响应性 为图片URL添加质量优化参数
Showing
1 changed file
with
5 additions
and
5 deletions
| 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-08 10:20:38 | 4 | + * @LastEditTime: 2026-01-09 18:06:06 |
| 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"> |
| 10 | <view class="index-content"> | 10 | <view class="index-content"> |
| 11 | - <view style="height: 400rpx;"> | 11 | + <view style="height: 28vh;"> |
| 12 | <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true"> | 12 | <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true"> |
| 13 | <swiper-item> | 13 | <swiper-item> |
| 14 | - <image style="height: 400rpx; width: 750rpx;" src="https://cdn.ipadbiz.cn/xys/booking/banner.jpg" mode="aspectFill" /> | 14 | + <image style="height: 28vh; width: 100vw;" src="https://cdn.ipadbiz.cn/xys/booking/banner02.png?imageMogr2/thumbnail/500x/strip/quality/100" /> |
| 15 | </swiper-item> | 15 | </swiper-item> |
| 16 | </swiper> | 16 | </swiper> |
| 17 | </view> | 17 | </view> |
| ... | @@ -82,7 +82,7 @@ useShareAppMessage(() => { | ... | @@ -82,7 +82,7 @@ useShareAppMessage(() => { |
| 82 | .index-page { | 82 | .index-page { |
| 83 | position: relative; | 83 | position: relative; |
| 84 | min-height: 100vh; | 84 | min-height: 100vh; |
| 85 | - background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg'); | 85 | + background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50'); |
| 86 | background-repeat: no-repeat; | 86 | background-repeat: no-repeat; |
| 87 | background-position: center; | 87 | background-position: center; |
| 88 | background-size: cover; /* 确保背景覆盖 */ | 88 | background-size: cover; /* 确保背景覆盖 */ |
| ... | @@ -163,7 +163,7 @@ useShareAppMessage(() => { | ... | @@ -163,7 +163,7 @@ useShareAppMessage(() => { |
| 163 | bottom: 200rpx; | 163 | bottom: 200rpx; |
| 164 | height: 400rpx; | 164 | height: 400rpx; |
| 165 | width: 150rpx; | 165 | width: 150rpx; |
| 166 | - background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png'); | 166 | + background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png?imageMogr2/thumbnail/50x/strip/quality/50'); |
| 167 | background-repeat: no-repeat; | 167 | background-repeat: no-repeat; |
| 168 | background-size: contain; | 168 | background-size: contain; |
| 169 | background-position: center; | 169 | background-position: center; | ... | ... |
-
Please register or login to post a comment