chore: initial import

pkgExplore/room_detail/components/RoomRules.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="section-panel" v-if="bookingRuleRows.length">
+    <view class="section-header">
+      <text class="section-title">{{ isRoomType ? t('bookingRules') : t('bookingInfo') }}</text>
+    </view>
+    <view class="rule-list">
+      <view v-for="item in bookingRuleRows" :key="item.label" class="rule-item tn-flex tn-flex-row-between tn-flex-col-center">
+        <view class="rule-left tn-flex tn-flex-col-center">
+          <text class="tn-icon-success-circle-fill rule-icon"></text>
+          <text class="rule-label">{{ item.label }}</text>
+        </view>
+        <text class="rule-value">{{ item.value }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    bookingRuleRows: {
+      type: Array,
+      default: () => []
+    },
+    isRoomType: {
+      type: Boolean,
+      default: true
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.section-panel {
+  background: #ffffff;
+  padding: 48rpx 32rpx;
+  margin: 0;
+  border-bottom: 1rpx solid #F2F3F5;
+}
+
+.section-header {
+  margin-bottom: 32rpx;
+}
+
+.section-title {
+  position: relative;
+  font-size: 36rpx;
+  font-weight: 800;
+  color: #1D2129;
+  letter-spacing: 2rpx;
+}
+
+.rule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.rule-item {
+  min-height: 80rpx;
+  padding: 0;
+  background: transparent;
+  border-bottom: 1rpx dashed #E5E6EB;
+}
+
+.rule-item:last-child {
+  border-bottom: none;
+}
+
+.rule-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.rule-icon {
+  margin-right: 16rpx;
+  font-size: 28rpx;
+  color: #1D2129;
+}
+
+.rule-label {
+  font-size: 26rpx;
+  color: #4E5969;
+}
+
+.rule-value {
+  margin-left: 20rpx;
+  font-size: 26rpx;
+  color: #1D2129;
+  font-weight: 700;
+}
+</style>