将已售放到价格旁边

src/components/reserve/RoomList.vue

@@ -22,18 +22,33 @@
                             </template>
                         </view>
                         <view class="flex justify-between items-end">
-                            <price-format color="#FF5951" class="m-r-10" :first-size="34" :second-size="26"
+                            <view class="flex items-center">
-                                :subscript-size="26" :price="item.price" weight="500"></price-format>
+                                <view class="flex items-center mr-14rpx">
+                                    <price-format color="#FF5951" :first-size="34" :second-size="26" :subscript-size="26" :price="item.price" weight="500"></price-format>
+                                    <view class="text-[#6A6363] text-22rpx leading-30rpx mt-8rpx">/小时</view>
+                                </view>
+                                <view class="text-[#6A6363] text-22rpx leading-30rpx mt-8rpx">已售 {{ item.sold > 10 ? '10+' :  item.sold }}</view>
+                            </view>
+
                             <view class="absolute top-50rpx right-0" v-if="isUseCoupon">
                                 <wd-radio checked-color="#4C9F44" size='large' shape="dot" :value="index"></wd-radio>
                             </view>
+
                             <view v-if="!isUseCoupon">
-                                <view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.sold > 10 ? '10+' :  item.sold }}</view>
                                 <view 
                                     class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" 
                                     @click="RoomList.handleToPage(ReserveServiceCategory.ReserveRoom, item.store_id, item.id, item.price)">
                                         预定
                                 </view>
+                                <!-- 预定状态 -->
+                                <!-- <view class="flex flex-col justify-center items-center w-108rpx" @click="RoomList.handleToPage(ReserveServiceCategory.ReserveRoom, item.store_id, item.id, item.price)">
+                                    <view class="font-bold text-26rpx leading-36rpx text-[#4C9F44] h-40rpx wait1-border">空闲中</view>
+                                    <view class="bg-[#4C9F44] font-400 text-26rpx text-[#fff] h-40rpx wait2-border">预定</view>
+                                </view> -->
+
+                                <!-- <view class="w-108rpx h-52rpx leading-52rpx border-2rpx border-solid border-[#F29747] rounded-8rpx text-[#F29747] font-bold text-26rpx text-center">使用中</view> -->
+                                <!-- <view class="w-108rpx h-52rpx leading-52rpx border-2rpx border-solid border-[#FF5951] rounded-8rpx text-[#FF5951] font-bold text-26rpx text-center">维护中</view> -->
+                                <!-- <view class="font-400 text-22rpx text-[#6A6363] leading-32rpx w-104rpx text-center mt-8rpx">推荐1-5人</view> -->
                             </view>
                         </view>
                     </view>
@@ -196,3 +211,20 @@
 <script lang="ts">
     export default {}
 </script>
+
+<style lang="scss">
+    .wait1-border {
+        border: 2rpx solid #4C9F44;
+        text-align: center;
+        border-radius: 8rpx 8rpx 0rpx 0rpx;
+        width: 108rpx;
+    }
+
+    .wait2-border {
+        border: 2rpx solid #4C9F44;
+        width: 108rpx;
+        text-align: center;
+        border-radius: 0rpx 0rpx 8rpx 8rpx;
+    }
+
+</style>