修改弹框形式

hookehuyr
Commit 964c4e54f98053d635d76532b81c3c37a2bc06f6 964c4e54 1 parent fc413f34
Showing 3 changed files with 81 additions and 60 deletions
components.d.ts
src/pages/index/index.less
src/pages/index/index.vue
--- a/components.d.ts
View file @964c4e5
+++ b/components.d.ts
View file @964c4e5
@@ -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']
--- a/src/pages/index/index.less
View file @964c4e5
+++ b/src/pages/index/index.less
View file @964c4e5
@@ -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;
+    }
+  }
+}
--- a/src/pages/index/index.vue
View file @964c4e5
+++ b/src/pages/index/index.vue
View file @964c4e5
 <!--
  * @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,55 +24,58 @@
     </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%' }"
     >
-      <view class="notice-wrapper">
+    <div class="overlay-body">
-        <!-- <view style="text-align: center; margin-bottom: 1rem;">梅花岛的描述和入住须知</view> -->
+      <div class="overlay-content">
-        <view class="notice-content">
+        <view class="notice-wrapper">
-          <view class="title">本味略影</view>
+          <!-- <view style="text-align: center; margin-bottom: 1rem;">梅花岛的描述和入住须知</view> -->
-          <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，回归本味。</view>
+          <view class="notice-content">
-          <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
+            <view class="title">本味略影</view>
-          <view class="content mb-1" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
+            <view class="content" style="text-indent: 2rem;">外象多变，本心至简。人生百味，回归本味。</view>
+            <view class="content" style="text-indent: 2rem;">梅花岛本味山居，位于福建省三明市泰宁世界地质公园、世界自然遗产地核心景区大金湖中心。2022年动工，将岛上23幢夯土、砖彻或全木结构的旧民居进行适当修复，成为中国旧乡村改造为禅意民宿的优秀样板。山中景色四时不同，十里平湖美丽如画，空气清新，泉水清洌，可以感受大自然的静谧祥和，享受水天相接、与天地融为一体的自在惬意，完全地放松、放空、放下。</view>
+            <view class="content mb-1" style="text-indent: 2rem;">聆听安静，安顿身心，静候您。</view>
-          <view class="title">本味生活</view>
+            <view class="title">本味生活</view>
-          <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
+            <view class="content">1、提供三餐天然纯净素食（不含五辛）。</view>
-          <view class="content">2、古早作息方式，日出而作，日落而息。</view>
+            <view class="content">2、古早作息方式，日出而作，日落而息。</view>
-          <view class="content">3、正念、静心、慢生活。</view>
+            <view class="content">3、正念、静心、慢生活。</view>
-          <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
+            <view class="content mb-1">4、静心服务：健身气功八段锦，湖景茶室、咖啡室，可参与甘露别院静心茶会、别院巡礼等活动（该项看时间因缘）。</view>
-          <view class="title">入住须知</view>
+            <view class="title">入住须知</view>
-          <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
+            <view class="content">1、本味山居三面环水，为了您的安全，请远离水边，禁止戏水、垂钓、游泳、奔跑等。如有违反，自行承担后果。</view>
-          <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
+            <view class="content">2、为了防范火灾，禁止携带火种上岛，全岛禁烟。如需使用壁炉，请和工作人员联系，做到人走火息。</view>
-          <view class="content">3、本味山居周边有野生动物出没，禁止进入山居经营范围外的区域（详见提示牌）。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
+            <view class="content">3、本味山居周边有野生动物出没，禁止进入山居经营范围外的区域（详见提示牌）。夜间照明范围有限，慎勿外出行走。如有违反，自行承担后果。</view>
-          <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
+            <view class="content">4、山居远离喧嚣，倡导舒缓本味生活，禁止携带荤食、含酒精饮品、宠物，勿穿吊带、短裤、短裙、凉鞋、拖鞋等暴露衣装。</view>
-          <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
+            <view class="content">5、山居统一安排渡船上岛，为保证湖内通行安全，禁止私自雇船进出岛。如有违反，视为当天取消预订，山居不予办理入住。</view>
-          <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
+            <view class="content">6、岛内自然生态茂盛，蚊虫较多，尽量穿着长衣长裤、平底鞋。房间内备有风油精，如果出现过敏等严重症状，请及时和工作人员联系。</view>
-          <view class="content">7、工作时间：8：00-5：00，上岛时间：8：00-4：50。</view>
+            <view class="content">7、工作时间：8：00-5：00，上岛时间：8：00-4：50。</view>
-          <view class="content mb-1">此须知为入住本位山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
+            <view class="content mb-1">此须知为入住本位山居之前提，请预订前仔细阅读。若有预订，视为同意上述须知。</view>
-          <view class="title">配套设施</view>
+            <view class="title">配套设施</view>
-          <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
+            <view class="content">1、24小时热水供应，部分房间有空调、吊扇，部分区域Wi-Fi。</view>
-          <view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
+            <view class="content">2、独栋配有茶室、客厅、书房，部分独栋配有独立厨房、餐厅和院子。</view>
-          <view class="content">3、独栋二楼配有景观天窗。</view>
+            <view class="content">3、独栋二楼配有景观天窗。</view>
-          <view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
+            <view class="content">4、设有公共洗衣房（部分独栋配独立洗衣房）。</view>
-          <view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
+            <view class="content">5、公共区域有湖景餐厅、湖景咖啡屋。</view>
-          <view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
+            <view class="content">6、房内配有烧水壶、茶具、台灯、吹风机、衣架、拖鞋、洗发水、沐浴露。</view>
-          <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
+            <view class="content mb-1">7、岛上环保需要，牙膏、牙刷、毛巾、浴巾等私人用品请自带。</view>
-          <view class="title">入住人员</view>
+            <view class="title">入住人员</view>
-          <view class="content mb-1">需年满18周岁。</view>
+            <view class="content mb-1">需年满18周岁。</view>
-          <view class="title">取消规定</view>
+            <view class="title">取消规定</view>
-          <view class="content">取消或变更请及时联系我们。</view>
+            <view class="content">取消或变更请及时联系我们。</view>
-          <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
+            <view class="content">若入住前一天取消，扣除50%费用作为违约金。</view>
-          <view class="content">若入住当天取消，扣除100%费用。</view>
+            <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-button @tap="onCloseNotice" color="#6a4925" block type="primary" style="margin-top: 1rem;">关闭</nut-button>
+      </div>
-      </view>
+    </div>
-    </nut-popup>
+    </nut-overlay>
   </view>
 </template>