<template>
  <div class="content-container">
    <div v-for="(item, index) in list" :key="index" class="content-item">
      <img :src="item.url" height="238" />
      <div class="detail">{{ item.name }}</div>
    </div>
  </div>
</template>
<!-- @/assets/img/Frame690(2).png -->
<script setup lang="ts">
defineProps({
  list: {
    type: Array,
    default: () => []
  } as any
})
</script>

<style lang="scss" scoped>
.content-container {
  display: flex;
  flex-wrap: wrap;
  margin: -12px;

  .content-item {
    flex: 0 0 calc(33.333% - 24px);
    margin: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
      min-height: 238px;
      border-radius: 12px 12px 0px 0px;
      display: block; /* 将图片设置为块级元素 */
      max-width: 100%; /* 保证图片在其父元素内部自适应大小 */
      height: auto; /* 保持图片的宽高比 */
    }
    .detail {
      height: 42px;
      line-height: 42px;
      background: linear-gradient(90deg, #177cfa 0%, #177cfa 100%);
      border-radius: 0px 0px 12px 12px;
      color: #ffffff;
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
