fix 完善房间组件显示

 <!--
 <!--
  * @Date: 2023-12-13 13:42:23
  * @Date: 2023-12-13 13:42:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-19 15:02:45
+ * @LastEditTime: 2023-12-20 10:57:44
  * @FilePath: /meihuaApp/src/components/roomCard.vue
  * @FilePath: /meihuaApp/src/components/roomCard.vue
- * @Description: 文件描述
+ * @Description: 房间详情组件
 -->
 -->
 <template>
 <template>
   <view class="room-card-component" @tap="handleTap">
   <view class="room-card-component" @tap="handleTap">
-    <image style="width: 100%; height: 10rem;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
-    <view style="padding: 0.5rem;">
+    <image class="room-cover" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
+    <view class="room-info">
       <nut-row>
       <nut-row>
-        <nut-col span="18">
+        <nut-col span="18" class="room-info-left">
           <view style="color: #0B0B0B; font-weight: bold;">非凡魅力豪华总统套房</view>
           <view style="color: #0B0B0B; font-weight: bold;">非凡魅力豪华总统套房</view>
           <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
           <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
         </nut-col>
         </nut-col>
-        <nut-col span="6">
+        <nut-col span="6" class="room-info-right">
           <view style="float: right; color: #EB2E2E; font-weight: bold; font-size: 1.1rem;">￥980</view>
           <view style="float: right; color: #EB2E2E; font-weight: bold; font-size: 1.1rem;">￥980</view>
           <view style="float: right; color: #7D7C7C; font-size: 0.8rem; text-decoration: line-through;">￥1280</view>
           <view style="float: right; color: #7D7C7C; font-size: 0.8rem; text-decoration: line-through;">￥1280</view>
         </nut-col>
         </nut-col>
       </nut-row>
       </nut-row>
     </view>
     </view>
-    <view style="width: 100%; height: 10rem; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5);">
-      <view style="position: absolute; left: calc(50% - 200rpx / 2); right: 0; top: 50rpx;">
-        <image style="width: 200rpx; height: 200rpx;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
+    <view class="room-status">
+      <view class="room-status-wrapper">
+        <image mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
       </view>
       </view>
     </view>
     </view>
   </view>
   </view>
@@ -41,12 +41,12 @@ const props = defineProps({
 
 
 const handleTap = () => {
 const handleTap = () => {
   Taro.navigateTo({
   Taro.navigateTo({
-    url: '../detail/index',
+    url: '../detail/index?id=123',
   })
   })
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {
-  console.warn(props.status);
+  console.warn('房间详情的状态属性', props.status);
 })
 })
 
 
 </script>
 </script>
@@ -60,12 +60,27 @@ onMounted(() => {
   border: 1px solid #f9f9f9;
   border: 1px solid #f9f9f9;
   border-radius: 0.5rem;
   border-radius: 0.5rem;
   overflow: hidden;
   overflow: hidden;
-}
-
-.room-card-component img {
-}
-
-.room-card-component.nut-row {
-  // padding: 0.5rem;
+  .room-cover {
+    width: 100%;
+    height: 10rem;
+  }
+  .room-info {
+    padding: 0.5rem;
+  }
+  .room-status {
+    width: 100%;
+    height: 10rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    .room-status-wrapper {
+      position: absolute; left: calc(50% - 200rpx / 2); right: 0; top: 50rpx;
+      image {
+        width: 200rpx;
+        height: 200rpx;
+      }
+    }
+  }
 }
 }
 </style>
 </style>