<template>
  <div class="image-item">

    <div class="info-tag">
      <el-tag size="small">大厅</el-tag>
      <el-tag size="small" style="margin-left: 3px;">大厅</el-tag>
      <el-tag size="small" style="margin-left: 3px;">大厅</el-tag>
    </div>
    
    <img class="image" src="https://picsum.photos/200/300" alt="">
    <div class="info">
      <div class="info-title">图片名称</div>
      <div class="info-date">2025-05-05 12:12:12</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageItem'
}
</script>

<style lang="scss" scoped>
  .image-item {
    border-radius: 10px;
    box-shadow: 0px 0px 8px #999999;
    overflow: hidden;

    .image {
      width: 100%;
      height: 200px;
    }

    .info {
      padding: 5px 10px 10px;

      .info-title {
        font-size: 18px;
      }

      .info-date {
        margin-top: 2px;
        font-size: 15px;
        color: #666666;
      }

      
    }

    .info-tag {
      margin-top: 4px;
      font-size: 16px;
      color: #409EFF;
      padding: 0 5px 4px;
      display: flex;
      justify-content: flex-end;
    }

  }
</style>