fix

+.index-page {
+  .index-cover {
+    position: relative;
+    .cover-arrow {
+      position: absolute;
+      right: 0;
+      left: calc(50% - 30rpx);
+      bottom: 1%;
+    }
+  }
+  .index-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.25rem;
+    padding: 1rem 0 0.25rem;
+    background-color: #f9f9f9;
+  }
+  .index-list {
+    background-color: #f9f9f9; overflow: auto;
+  }
+}
 .slide-box {
 .slide-box {
   height: 15rem;
   height: 15rem;
   .slide-image {
   .slide-image {
@@ -7,7 +28,7 @@
 }
 }
 
 
 .bg-gradient {
 .bg-gradient {
-  background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
+  background: linear-gradient(#b3ddc9, #b3ddc9) no-repeat;
   /*调整下划线的宽度占百分之百  高度是3px */
   /*调整下划线的宽度占百分之百  高度是3px */
   background-size: 100% 1vw;
   background-size: 100% 1vw;
   /* 调整下划线的起始位置 左侧是0 上边是1.15em */
   /* 调整下划线的起始位置 左侧是0 上边是1.15em */
@@ -25,7 +46,7 @@
     left: 0;
     left: 0;
     width: 100%;
     width: 100%;
     height: 1.1rem;
     height: 1.1rem;
-    border-bottom: 4rpx solid #B3DDC9;
+    border-bottom: 4rpx solid #b3ddc9;
   }
   }
 }
 }
 
 

 <!--
 <!--
  * @Date: 2022-09-19 14:11:06
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-19 14:35:59
+ * @LastEditTime: 2023-12-20 10:44:15
  * @FilePath: /meihuaApp/src/pages/index/index.vue
  * @FilePath: /meihuaApp/src/pages/index/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
 <template>
 <template>
-  <view>
+  <view class="index-page">
     <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="onScroll" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
     <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="onScroll" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
-      <view style="position: relative;">
+      <view class="index-cover">
         <image :style="coverStyle" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/banner1@2x.png" />
         <image :style="coverStyle" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/banner1@2x.png" />
-        <!-- <div class="arrow-down" @tap="onArrowDown">
-          <image style="width: 2rem; height: 2rem;" :src="arrowDownImg"/>
-        </div> -->
-        <view @tap="onArrowDown" style="position: absolute; right: 0; left: calc(50% - 30rpx); bottom: 1%;">
+        <view @tap="onArrowDown" class="cover-arrow">
           <IconFont color="#f9f9f9" size="30" name="joy-smile" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
           <IconFont color="#f9f9f9" size="30" name="joy-smile" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
         </view>
         </view>
       </view>
       </view>
-      <view style="text-align: center; font-weight: bold; font-size: 1.25rem; padding: 1rem 0 0.25rem; background-color: #f9f9f9;">热门推荐</view>
-      <view style="background-color: #f9f9f9; overflow: auto;">
-        <room-card v-for="(item, index) in 5" :key="index"></room-card>
+      <view class="index-title">热门推荐</view>
+      <view class="index-list">
+        <room-card v-for="(item, index) in 5" :key="index" />
       </view>
       </view>
     </scroll-view>
     </scroll-view>
     <view style="height: 6rem;"></view>
     <view style="height: 6rem;"></view>
@@ -32,11 +29,8 @@ import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
 import { IconFont } from '@nutui/icons-vue-taro';
 import { ref } from 'vue';
 import { ref } from 'vue';
 import roomCard from '@/components/roomCard.vue'
 import roomCard from '@/components/roomCard.vue'
-import arrowDownImg from '@/assets/images/arrow-down.png'
-// import icon_no_join_recommend from '@/images/icon/no-tuijian@2x.png'
-// import icon_banner from '@/images/icon/banner@2x.png'
+// import arrowDownImg from '@/assets/images/arrow-down.png'
 import navBar from '@/components/navBar.vue'
 import navBar from '@/components/navBar.vue'
-// import { useDidShow } from '@/hooks/life'
 import { useDidShow } from '@tarojs/taro'
 import { useDidShow } from '@tarojs/taro'
 // TAG: 模拟onShow事件
 // TAG: 模拟onShow事件
 useDidShow(() => {
 useDidShow(() => {
@@ -142,11 +136,6 @@ export default {
       this.scrollTop = 0; // 重置scrollTop，让按钮能再往下滚动
       this.scrollTop = 0; // 重置scrollTop，让按钮能再往下滚动
     },
     },
     onScrollToLower () {
     onScrollToLower () {
-      // if(!this.flag){
-      //   return
-      // }
-      // this.flag = false;
-      // this.getList();
       console.warn('onScrollToLower');
       console.warn('onScrollToLower');
     },
     },
     async onArrowDown () {
     async onArrowDown () {