123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <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>
|