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

const activeNews = ref(1)
const news: News[] = [
  {
    title: '标题标题标题标题标题标题标题',
    content: [
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
    ],
  },
  {
    title: '标题标题标题标题标题标',
    content: [
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
    ],
  },
  {
    title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
    content: [
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
    ],
  },
  {
    title: '标题标题标题标题标题标题标题',
    content: [
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
    ],
  },
  {
    title: '标题标题标题标题标题标题标题',
    content: [
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
      '文案文案文案文案文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文文案文案文案文案文案文',
    ],
  },
].map((item, index) => ({ ...item, id: index + 1 }))
const currentNews = computed(() => news.find(item => item.id === activeNews.value))
</script>

<template>
  <div class="top">
    <div class="top-left">
      <div class="banner">
        <img
          src="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__"
          alt=""
        />
      </div>
    </div>
    <div class="top-right">
      <div class="card">
        <h2>督学服务图文介绍</h2>
        <div class="card-body">
          <div class="card-cover">
            <img
              src="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__"
              alt=""
            />
          </div>
          <div class="card-text">
            文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-left">
      <div class="news-list">
        <div
          v-for="item in news"
          :key="item.id"
          :class="{ 'news-item': true, active: activeNews === item.id }"
          @click="activeNews = item.id"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="bottom-right">
      <div v-if="currentNews" class="news-card">
        <div class="news-card-cover">
          <img
            src="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__"
            alt=""
          />
        </div>
        <div class="news-card-body">
          <h2>{{ currentNews.title }}</h2>
          <p v-for="(item, i) in currentNews.content" :key="i">{{ item }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.news-card-body {
  h2 {
    color: $font-color;
    font-size: 2.33vh;
    font-style: normal;
    font-weight: 400;
    line-height: 3.5vh;
  }

  p {
    color: #666;
    font-size: 2vh;
    font-style: normal;
    font-weight: 400;
    line-height: 3vh;
  }

  padding: 1vh;
  width: 440px + 12px * 2;
  height: 376px + 12px * 2;
  overflow: auto;
}

.news-card-cover {
  width: 1016px - 440px + 12px * 2;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.news-card {
  overflow: hidden;
  display: flex;
  width: 1016px;
  height: 34vh;
  border-radius: 1.33vh;
  border: 0.33vh solid #adadff;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
}

.card {
  h2 {
    font-family: $font-special, serif;
    font-size: 3vh;
    color: $font-color;
    font-style: normal;
    font-weight: 400;
    line-height: 4.5vh;
    padding: 1.33vh 0 0 24px;

    width: 456px;
    height: 7.17vh;
    border-radius: 1.67vh;

    background: linear-gradient(269deg, #c0c7f7 -122.89%, #ded3fb -23.29%, #e3e3ff 80.36%);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  }
}

.card-body {
  width: 456px;
  height: 42.17vh;
  border-radius: 1.33vh;
  padding: 1.17vh 8px 0.67vh;

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

.card-cover {
  height: 27.67vh;
  border-radius: 1.33vh 1.33vh 0 0;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card-text {
  padding: $space-2;

  color: $font-color;
  font-size: 2vh;
  font-style: normal;
  font-weight: 400;
  line-height: 3vh;
  height: 12.83vh;
  overflow: auto;
  background: linear-gradient(180deg, #fafafa 0%, #f9f5ff 100%);
  border-radius: 0 0 1.33vh 1.33vh;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: $space-1;
  width: 456px;
  height: 34vh;
  overflow: auto;

  color: $font-color;
  font-family: $font-special, serif;
  font-size: 2.67vh;
  font-style: normal;
  font-weight: 400;
  line-height: 4vh;
}

.news-item {
  padding: $space-2;
  border-radius: 1.33vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
  border: 0.33vh solid transparent;

  &.active {
    border-color: #adadff;
    background: linear-gradient(269deg, #e3e3ff 2.25%, #ded3fb 51.93%, #c0c7f7 99.65%), #fffef5;
  }
}

.banner {
  width: 1032px;
  height: 49.33vh;
  background: linear-gradient(180deg, rgba(241, 234, 250, 0.35) 0%, rgba(241, 241, 250, 0.35) 100%);
  border-radius: 1.67vh;
  padding: $space-1;

  img {
    border-radius: 1.67vh;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.top {
  display: flex;
}

.top-right {
  margin-left: $space-2;
}

.bottom {
  background: linear-gradient(180deg, rgba(241, 234, 250, 0.35) 0%, rgba(241, 241, 250, 0.35) 100%);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  padding: $space-1;
  display: flex;
  height: 35.33vh;
  margin-top: $space-2_h;
  border-radius: 1.33vh;
  overflow: hidden;
}

.bottom-right {
  margin-left: $space-2;
}
</style>
