<!-- 布展的列表项的卡片 -->
<template>
  <div class="display-card">
    <img src="@/assets/imgs/display1.png" width="100%" alt="" />
    <div class="display-desc">
      <div class="desc-title">
        <h4>{{ title }}</h4>
      </div>
      <div class="desc-content">
        {{ content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DisplayCard",
  props: {
    // 布展图片，为在线链接，先只展示静态图片
    img:{
      type:String,
      default:'',
    },
    // 布展标题
    title: {
      type: String,
      default: "",
    },
    // 布展详情内容，可能包含时间、地点、介绍等
    content: {
      type: String,
      default: '',
    },
  },
};
</script>

<style lang="scss" scoped>
.display-card{
  width: 100%;
  border-radius: 8px;
  margin-bottom: 32px;
  background-color: #fff;
  cursor: pointer;
  img{
    border-radius: 8px 8px 0 0;
  }
  .display-desc {
    padding: 0 16px 16px 16px;
    .desc-content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
