会议管理

apps/web-antd/src/views/property/roomBooking/conferenceReservations/index.vue

@@ -1,5 +1,87 @@
 <template>
-    <div>会议室预约</div>
+  <div>
+    <div class="card-box">
+      <div v-for="(item,index) in meetingList" :key="index" class="card-list">
+        <div><span class="card-title">{{ item.one }}</span><a-button class="card-button" type="primary">去预约</a-button></div>
+        <div>容纳人数: {{ item.two }}人</div>
+        <div>基础费用: {{ item.three }}元</div>
+        <div>基础服务: {{ item.four }}</div>
+        <div>基础服务: {{ item.five }}</div>
+      </div>
+    </div>
+  </div>
 </template>
-<script></script>
-<style lang="scss"></style>
+
+<script setup>
+import { ref } from 'vue'
+const meetingList = ref([
+  {
+    one: '10楼1002会议室',
+    two: 50,
+    three: 300,
+    four: '话筒、音响、大屏',
+    five: '开水、基础保洁'
+  },
+  {
+    one: '10楼1002会议室',
+    two: 50,
+    three: 300,
+    four: '话筒、音响、大屏',
+    five: '开水、基础保洁'
+  },
+  {
+    one: '10楼1002会议室',
+    two: 50,
+    three: 300,
+    four: '话筒、音响、大屏',
+    five: '开水、基础保洁'
+  },
+  {
+    one: '10楼1002会议室',
+    two: 50,
+    three: 300,
+    four: '话筒、音响、大屏',
+    five: '开水、基础保洁'
+  },
+])
+</script>
+
+<style lang="scss">
+.card-box{
+  width: 100%;
+  background-color: transparent;
+  padding: 30px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  border: none;
+
+  .card-list{
+    padding: 15px;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 10px;
+    position: relative;
+
+    .card-title{
+      font-size: 1.2vw;
+      font-weight: bold;
+    }
+    div:nth-child(1){
+      margin-bottom: 5px;
+    }
+    div{
+      line-height: 1.5vw;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+
+      .card-button{
+        right: 15px;
+        position: absolute;
+      }
+    }
+  }
+}
+</style>