<template>
  <div class="content-container">
    <div v-for="(item, index) in list" :key="index" class="content-item" @click="change(item)">
      <img :src="baseURL + '/' + item?.FPICTURE" height="238" />
      <div class="detail nowrap-ellipsis" :title="item.FTITLE">{{ item.FTITLE }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'

defineProps({
  list: {
    type: Array,
    default: () => []
  } as any
})

const emits = defineEmits(['change'])

const change = (row: any) => {
  // console.log(row)
  emits('change', row)
}
</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;
    cursor: pointer;

    img {
      width: 100%;
      min-height: 238px;
      border-radius: 12px 12px 0px 0px;
      display: block; /* 将图片设置为块级元素 */
      max-width: 100%; /* 保证图片在其父元素内部自适应大小 */
    }
    .detail {
      width: calc(1316px / 3 - 16px);
      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;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
}
</style>
