修改弹框形式

@@ -18,10 +18,12 @@ declare module '@vue/runtime-core' {
     NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
     NutCol: typeof import('@nutui/nutui-taro')['Col']
     NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
+    NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
     NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
     NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
+    NutOverlay: typeof import('@nutui/nutui-taro')['Overlay']
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutPrice: typeof import('@nutui/nutui-taro')['Price']
     NutRadio: typeof import('@nutui/nutui-taro')['Radio']
@@ -29,7 +31,6 @@ declare module '@vue/runtime-core' {
     NutRow: typeof import('@nutui/nutui-taro')['Row']
     NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
     NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
-    NutTable: typeof import('@nutui/nutui-taro')['Table']
     NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
     NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
     NutTag: typeof import('@nutui/nutui-taro')['Tag']

@@ -18,23 +18,6 @@
   .index-list {
     background-color: #f9f9f9; overflow: auto;
   }
-
-  .notice-wrapper {
-    padding: 1rem;
-    .notice-content {
-      .title {
-        font-weight: bold;
-        text-align: center;
-        margin-bottom: 0.5rem;
-      }
-      .content {
-        margin-bottom: 0.5rem;
-      }
-      .mb-1 {
-        margin-bottom: 1rem !important;
-      }
-    }
-  }
 }
 .slide-box {
   height: 15rem;
@@ -95,3 +78,37 @@
 .fade-leave-to {
   opacity: 0;
 }
+
+.overlay-body {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.overlay-content {
+  display: flex;
+  width: 85%;
+  height: 80%;
+  background: #fff;
+  border-radius: 8px;
+  // align-items: center;
+  // justify-content: center;
+  overflow: scroll;
+}
+
+.notice-wrapper {
+  padding: 1rem;
+  .notice-content {
+    .title {
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 0.5rem;
+    }
+    .content {
+      margin-bottom: 0.5rem;
+    }
+    .mb-1 {
+      margin-bottom: 1rem !important;
+    }
+  }
+}

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-24 17:36:51
+ * @LastEditTime: 2024-05-24 19:23:29
  * @FilePath: /meihuaApp/src/pages/index/index.vue
  * @Description: 首页
 -->
@@ -24,11 +24,11 @@
     </scroll-view>
     <view style="height: 6rem;"></view>
     <nav-bar activated="index" />
-    <nut-popup
+    <nut-overlay
       v-model:visible="show_notice"
-      position="right"
-      :style="{ height: '100%' }"
     >
+    <div class="overlay-body">
+      <div class="overlay-content">
         <view class="notice-wrapper">
           <!-- <view style="text-align: center; margin-bottom: 1rem;">梅花岛的描述和入住须知</view> -->
           <view class="notice-content">
@@ -71,8 +71,11 @@
             <view class="content">若入住当天取消，扣除100%费用。</view>
           </view>
           <nut-button @tap="onCloseNotice" color="#6a4925" block type="primary" style="margin-top: 1rem;">关闭</nut-button>
+          <view style="height: 1rem;"></view>
         </view>
-    </nut-popup>
+      </div>
+    </div>
+    </nut-overlay>
   </view>
 </template>