NSG_PORTAL_V2/components/dynamic-page/page-component/templates/components/Podcast.vue

<script setup lang="ts">
import AudioPlayer from './AudioPlayer.vue'
</script>
<template>
  <div class="banner">
    <div class="banner__background" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
      <div class="banner__overlay"></div>
      <Wrap class="banner__content">
        <div class="banner__inner">
          <div class="article">
            <div class="article__image-container">
              <div class="article__image-wrapper" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
                <img src="https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg" alt="" class="article__image" />
              </div>
            </div>
            <div class="article__content">
              <div class="article__header">
                <div class="article__header-text">
                  <h1 class="article__title">Podcast Truyện ngắn: Như cơi đựng trầu</h1>
                  <time class="article__date">T2, 29 Th01 2024 16:57</time>
                </div>
              </div>
              <div class="article__intro">
                <div class="article__intro-text">Tình cảm vợ chồng êm ấm 12 năm, tối nay được định đoạt bằng tờ giấy vô hồn, vốn là người dễ xúc động nên trong lúc viết, Ngân Thương để mấy giọt nước mắt rơi xuống làm đôi chỗ bị nhòe đi.</div>
              </div>
              <div class="article__audio">
                <AudioPlayer />
              </div>
            </div>
          </div>
        </div>
      </Wrap>
    </div>
  </div>
</template>
<style scoped lang="scss">
.banner {
  &__background {
    width: 100%;
    height: 60px;
    background-size: cover;
    @media (min-width: 768px) {
      height: 25rem;
    }

    position: relative;
    background-position: center;
  }

  &__overlay {
    position: absolute;
    inset: 0;
    background-color: black;
    opacity: 0.8;
    z-index: 1;
  }

  &__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__inner {
    width: 100%;
    height: 40px;

    @media (min-width: 768px) {
      height: 80px;
    }

    position: absolute;
    inset: 0;
    z-index: 2;
    .article {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      width: 100%;

      &__image-container {
        grid-column: span 3;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 15rem;
        min-width: 100px;
        @media (min-width: 768px) {
          height: 20rem;
          margin: 0 2rem;
        }
        margin: 0 0.5rem;
      }

      &__image-wrapper {
        height: 10rem;
        @media (min-width: 768px) {
          height: 15rem;
        }
        width: 100%;
        border-radius: 1.5rem 0 0 1.5rem;
        padding: 0.5rem;
        overflow: hidden;
        position: relative;
        background-size: cover;
        z-index: 1;

        &::after {
          content: "";
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: #000;
          opacity: 0.3;
          position: absolute;
          z-index: 2;
        }
      }

      &__image {
        position: relative;
        z-index: 3;
        height: 10rem;
        @media (min-width: 768px) {
          height: 15rem;
        }
        width: 100%;
        object-fit: contain;
      }

      &__content {
        grid-column: span 7;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        position: relative;
      }

      &__header {
        grid-column: span 12;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        margin-top: 2rem;

        &-text {
          grid-column: span 11;
        }
      }

      &__subtitle {
        font-size: 14px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.6);
      }

      &__title {
        font-size: 19px;
        color: #fff;
        font-weight: bold;
        font-family: "SFD";
      }

      &__date {
        margin-top: 0.125rem;
        font-size: 14px;
        color: #fff;
      }

      &__intro {
        grid-column: span 12;
        margin-bottom: 1rem;
        display: none;
        @media (min-width: 768px) {
          display: block;
        }
      }

      &__intro-text {
        text-align: left;
        font-size: 16px;
        color: #fff;
        font-family: "SFD";
      }

      &__audio {
        grid-column: span 10;
      }
    }
  }
}
</style>