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

<template>
  <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 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>