slibra-official-web/components/news/card.vue

<script setup lang="ts">
import type { INewsItem } from "@/types/data";
const props = defineProps<{
  data: INewsItem
}>()
const openNewsPage = () => {
  window.open(props.data.content);
}
</script>

<template>
  <div
    class="
      news-item
      border-y-[1px] border-x-[0px] px-[10px] rounded-[0px] py-[10px] mb-[10px]
      md:border-x-[1px]
      md:rounded-[8px] md:px-[31px] md:py-[31px]  md:mb-[24px]
    "
    @click="openNewsPage"
  >
    <div class="
      img-card
      w-[120px] h-[87px] mr-[10px]
      md:w-[200px] md:h-[134px] md:mr-[0px]
    ">
      <img :src="data.photo" alt="">
    </div>
    <div class="
      content-card flex flex-col justify-between items-start h-[87px] 
      md:pr-[70px] md:pl-[30px] md:h-[134px] md:justify-start
      ">
      <h3 class="
        title text-[18px]
        md:text-[20px] h-[60px]
      ">
        {{ data.title }}
      </h3>
      <div class="hidden md:block">
        <p class="content">
          {{ data.brief }}
        </p>
      </div>
      <p class="block md:hidden phone-text-color">{{data.year}}-{{ data.month }}-{{data.day}}</p>
    </div>
    <div class="time-card hidden md:flex">
      <div class="time-box">
        <p class="month">{{data.month}}-{{data.day}}</p>
        <p class="year">{{data.year}}</p>
      </div>
      <BaseIcon name="icon-arrow-right" width="14" height="14" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.news-item {
  @include flex(x, start, between);
  align-items: center;
  border-style: solid;
  border-color: #F5F7FA;
  transition: all .5s ease .1s;
  cursor: pointer;

  &:hover {
    transform: scale(1.02);
    .content-card .title {
      color: $primary;
    }
  }

  .img-card {
    border-radius: 4px;
    background: #eee;
    overflow: hidden;

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

  .content-card {
    flex: 1;

    .phone-text-color {
      color: #797979;
    }

    .title {
      margin-bottom: 10px;
      font-weight: bold;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: $t-color-primary;
      transition: color .3s;
    }

    .content {
      font-size: 14px;
      line-height: 22px;
      color: #565E66;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  
  .time-card {
    align-items: center;
    justify-content: center;
    height: 100%;

    .time-box {
      width: 166px;
      padding: 0 18px 0 40px;
      border-left: 1px solid #F3F3F5;

      .month {
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        color: #565E66;
      }

      .year {
        line-height: 20px;
        color: #797979;
      }
    }
  }
}
</style>