<script setup lang="ts">
interface Case {
  id: number
  title: string
  content: string[]
  images: string[]
}

const cases: Case[] = Array(10)
  .fill({
    title: '标题标题标题标题标题标题标题',
    content: ['文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案'],
    images: [
      'https://s3-alpha-sig.figma.com/img/dd6a/dc59/91e7ee1e5e76bfb05eeded7afa6b953c?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=HetEVCCnk0nF1igsPG6VvFGAH5ibYuSJNn5cVjT~L0Gtl3a1nDE9xFvWi4dfTC1hK-pAe66GbLlgIS8mmSXV04L9JHY8BrRck2Ee6pWO2cG2W3fo1Yk21ufmLyLbFHDtU6Grc2FffEphBzxiV7FsT4REcjHkAiv03i4EUJdoQWk08Ivz~SX2ukxWtkFe22l7oGO4uUOdpKXS8rm065mpa0rtd4DD~MJLSVYQXZcE1N3u5Kf1LPPOaCh7v5us5ZmyeZOCGLljjZjW3-5hmGu2EtcRVUyK~ehO~3~UnAyHWoDfPtLq3Bt7Iq~N30f7nkn8wBXMzzClWpiEgBQv1dHx0Q__',
      'https://s3-alpha-sig.figma.com/img/dd6a/dc59/91e7ee1e5e76bfb05eeded7afa6b953c?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=HetEVCCnk0nF1igsPG6VvFGAH5ibYuSJNn5cVjT~L0Gtl3a1nDE9xFvWi4dfTC1hK-pAe66GbLlgIS8mmSXV04L9JHY8BrRck2Ee6pWO2cG2W3fo1Yk21ufmLyLbFHDtU6Grc2FffEphBzxiV7FsT4REcjHkAiv03i4EUJdoQWk08Ivz~SX2ukxWtkFe22l7oGO4uUOdpKXS8rm065mpa0rtd4DD~MJLSVYQXZcE1N3u5Kf1LPPOaCh7v5us5ZmyeZOCGLljjZjW3-5hmGu2EtcRVUyK~ehO~3~UnAyHWoDfPtLq3Bt7Iq~N30f7nkn8wBXMzzClWpiEgBQv1dHx0Q__',
      'https://s3-alpha-sig.figma.com/img/dd6a/dc59/91e7ee1e5e76bfb05eeded7afa6b953c?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=HetEVCCnk0nF1igsPG6VvFGAH5ibYuSJNn5cVjT~L0Gtl3a1nDE9xFvWi4dfTC1hK-pAe66GbLlgIS8mmSXV04L9JHY8BrRck2Ee6pWO2cG2W3fo1Yk21ufmLyLbFHDtU6Grc2FffEphBzxiV7FsT4REcjHkAiv03i4EUJdoQWk08Ivz~SX2ukxWtkFe22l7oGO4uUOdpKXS8rm065mpa0rtd4DD~MJLSVYQXZcE1N3u5Kf1LPPOaCh7v5us5ZmyeZOCGLljjZjW3-5hmGu2EtcRVUyK~ehO~3~UnAyHWoDfPtLq3Bt7Iq~N30f7nkn8wBXMzzClWpiEgBQv1dHx0Q__',
    ],
  })
  .map((item, index) => ({ ...item, id: index + 1 }))
</script>

<template>
  <div class="cases-list">
    <div v-for="item in cases" :key="item.id" class="card">
      <h2>{{ item.title }}</h2>
      <div class="card-body">
        <div class="card-body-inner">
          <p v-for="(content, index) in item.content" :key="index">{{ content }}</p>
          <div class="card-images">
            <img v-for="(img, index) in item.images" :key="index" :src="img" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cases-list {
  outline: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2vh;
  column-gap: $space-2;
  overflow-y: auto;
  height: calc(100vh - 136px);
  padding-bottom: $space-4_h;

  &::-webkit-scrollbar {
    width: 0;
  }
}

.card-images {
  display: flex;
  gap: 10px;
  width: 220px;
  height: 13.75vh;
  margin-top: $space-2_h;

  img {
    border-radius: $space-2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card-body {
  border-radius: $space-2;
  padding: $space-1;

  background: linear-gradient(
    180deg,
    rgba(241, 234, 250, 0.35) 65.43%,
    rgba(241, 241, 250, 0.35) 99.5%
  );
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.card-body-inner {
  padding: $space-2_h 24px;
  border-radius: 1.33vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);

  color: #666;
  font-size: 2.33vh;
  font-style: normal;
  font-weight: 400;
  line-height: 3.5vh;
}

.card {
  width: 744px;

  h2 {
    padding: $space-2_h $space-4;
    border-radius: 1.67vh;
    background: linear-gradient(269deg, #c0c7f7 -35.56%, #ded3fb 25.96%, #e3e3ff 89.99%);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    color: $font-color;
    font-family: $font-special, serif;
    font-size: 3vh;
    font-style: normal;
    font-weight: 400;
    line-height: 4.5vh;
  }
}
</style>
