fix 房间详情完善

+.detail-page {
+  position: relative;
+  height: 100vh;
+  .detail-info-wrapper {
+    padding: 1rem;
+  }
+  .book-cal {
+    padding: 0 0.75rem;
+  }
+  .no-calendar-border {
+    width: 100%;
+    height: 1rpx;
+    background-color: rgb(244, 244, 244);
+  }
+  .detail-introduce-title {
+    padding: 1rem;
+    text-align: center;
+    font-weight: bold;
+  }
+  .detail-introduce-html {
+    padding: 0 1rem;
+  }
+  .book-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    height: 4rem;
+    padding: 30rpx 30rpx 20rpx 30rpx;
+    box-shadow: 0px -5px 4px 0px rgba(0, 0, 0, 0.07);
+    .book-price {
+      height: 2rem;
+      margin-left: 0.5rem;
+      display: flex;
+      align-items: center;
+    }
+    .book-btn {
+      background-color: #6a4925;
+      border-radius: 1.25rem;
+      padding: 0.25rem 0.5rem;
+      color: #fff;
+      text-align: center;
+      height: 2rem;
+      line-height: 2rem;
+    }
+  }
+}
 .nut-swiper-item {
   // line-height: 250px;
 }
@@ -5,6 +53,3 @@
   width: 100%;
   height: 100%;
 }
-.book-cal {
-  padding: 0 0.75rem;
-}

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-19 15:21:03
+ * @LastEditTime: 2023-12-20 11:19:46
  * @FilePath: /meihuaApp/src/pages/detail/index.vue
- * @Description: 文件描述
+ * @Description: 房间详情页面
 -->
 <template>
-  <view style="position: relative; height: 100vh;">
+  <view class="detail-page">
     <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
       <nut-swiper-item v-for="(item, index) in state.imgData" :key="index">
         <image @tap="showFn" style="width: 100%; height: 150px;" mode="aspectFill" :src="item.src" />
       </nut-swiper-item>
     </nut-swiper>
-    <view style="padding: 1rem;">
+    <view class="detail-info-wrapper">
       <view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view>
       <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
     </view>
-    <view vif="!showBook" style="width: 100%; height: 1rpx; background-color: rgb(244, 244, 244);"></view>
-    <view v-if="showBook" id="book-cal" class="book-cal">
+    <!-- 日历选择器 -->
+    <view v-if="showBook" class="book-cal">
       <calendar-select @on-dates-change="onDatesChange"></calendar-select>
     </view>
-    <view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view>
-    <view style="padding: 0 1rem;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem quibusdam nostrum numquam quaerat corporis totam similique expedita, omnis ratione aut magnam nihil. Modi repudiandae at minus enim beatae fugit. Modi.</view>
-    <view v-if="showBook" style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 30rpx 30rpx 20rpx 30rpx;box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.07);">
+    <view v-else class="no-calendar-border"></view>
+    <!-- END -->
+    <view class="detail-introduce-title">房间介绍</view>
+    <view class="detail-introduce-html">
+      <view id="taro_html" v-html="taro_html" class="taro_html"></view>
+    </view>
+    <view v-if="showBook" class="book-bar">
       <nut-row>
         <nut-col :span="18">
-          <view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
+          <view class="book-price">
             <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
             <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
           </view>
         </nut-col>
         <nut-col :span="6">
-          <view @tap="goToConfirm" style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">预定</view>
+          <view class="book-btn" @tap="goToConfirm">预定</view>
         </nut-col>
       </nut-row>
     </view>
@@ -41,8 +45,15 @@
 
 <script setup>
 import Taro from '@tarojs/taro'
-import { ref, computed, reactive } from "vue";
+import { ref, computed, reactive, onMounted } from "vue";
 import calendarSelect from '@/components/calendarSelect.vue'
+import { getCurrentPageParam } from "@/utils/weapp";
+
+onMounted(() => {
+  console.warn('id', getCurrentPageParam().id);
+});
+
+const taro_html = ref('<div>123</div>');
 
 // TODO: 到时候根据后端实际字段修改
 // const book_status = ref('已约满');