slibra-official-web/components/BaseImgCard.vue

<script setup lang="ts">

import type { INewsItem } from "@/types/data";

defineProps<{
  data: INewsItem[],
  type: string
}>();

const jumpNewsPage = (item: INewsItem) => {
  window.open(item.content);
}

</script>

<template>
  <section class="base-card-container">
    <div class="grid grid-cols-1 md:grid-cols-3  gap-y-[10px] md:gap-[24px]">
      <div class="card-item" v-for="(item, index) in data" :key="index" data-aos="fade-up"
        :data-aos-delay="(index + 1) * 100">
        <div class="img-wrap" @click="jumpNewsPage(item)">
          <!-- @/assets/image/carbo/img-lca-02.png -->
          <img :src="item.photo" alt="">
        </div>
        <div :class="['text-wrap', { 'time-wrap': type === 'news' }]">
          <p class="time" v-if="type">{{ item.time }}</p>
          <p class="title font-bold" @click="jumpNewsPage(item)">{{ item.title }}</p>
          <p class="desc" v-if="!type">{{ item.desc }}</p>
          <p class="text" v-if="type">{{ item.source }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.base-card-container {

  .card-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 8px 30px 0px #C3D6E93D;
    transition: all 0.3s;

    &:hover {
      .title {
        color: #2A68FF;
      }
    }

    .img-wrap {
      height: 258px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        transition: all 0.3s;
      }
    }

    .text-wrap,
    .time-wrap {
      position: relative;
      height: 188px;
      padding: 18px 28px;
      margin-top: -55px;
      border-radius: 8px 8px 0px 0px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #FFFFFF 13.49%, #FFFFFF 100%);

      .time {
        font-size: 16px;
        line-height: 26px;
        color: #797979;
      }

      .title {
        text-align: left;
        font-size: 22px;
        line-height: 36px;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        cursor: pointer;
      }

      .desc,
      .text {
        font-size: 16px;
        line-height: 28px;
        text-align: justify;
        color: #565F83;
      }

      .text {
        font-size: 18px;
      }
    }

    .time-wrap {
      height: auto;

      .title {
        padding: 4px 0;
      }
    }

    &:hover {
      img {
        scale: 1.05;
      }
    }
  }
}
</style>