hanhai-official-website/src/components/cases/CaseItem.vue

<script setup>
// 接收案例项数据作为props
const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    // 是否显示分类标签
    showCategory: {
        type: Boolean,
        default: true
    },
    // 按钮类型："link"链接样式 或 "button"按钮样式
    buttonType: {
        type: String,
        default: 'link' // 'link' 或 'button'
    }
});

// 点击查看详情事件
const emit = defineEmits(['view-details']);

const viewDetails = () => {
    emit('view-details', props.item.id);
};
</script>

<template>
    <div class="case-card" data-aos="fade-up" :data-aos-delay="item.delay">
        <div class="case-image">
            <div v-if="showCategory" class="category-tag">{{ item.categoryName }}</div>
            <img :src="item.imageUrl && item.imageUrl.split(',')[0]" :alt="item.title" />
        </div>
        <div class="case-content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <!-- 根据buttonType渲染不同的按钮样式 -->
            <a v-if="buttonType === 'link'" href="#" class="btn-link" @click.prevent="viewDetails">查看详情</a>
            <button v-else class="btn-details" @click="viewDetails">查看详情</button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
/* 导入全局SCSS变量 */
@use '../../assets/scss/main.scss' as *;
// .case-card {
//     background: white;
//     border-radius: 8px;
//     overflow: hidden;
//     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
//     transition: transform 0.3s ease, box-shadow 0.3s ease;

//     &:hover {
//         transform: translateY(-10px);
//         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

//         .case-image img {
//             transform: scale(1.05);
//         }
//     }

//     .case-image {
//         position: relative;

//         img {
//             width: 100%;
//             height: 300px;
//             object-fit: cover;
//             transition: transform 0.5s ease;
//         }

//         .category-tag {
//             position: absolute;
//             top: 15px;
//             right: 15px;
//             background-color: rgba(52, 152, 219, 0.9);
//             color: white;
//             padding: 6px 12px;
//             border-radius: 4px;
//             font-size: 0.8rem;
//             font-weight: 600;
//             z-index: 2;
//         }
//     }

//     .case-content {
//         padding: 25px;

//         h3 {
//             font-size: 1.5rem;
//             margin-bottom: 15px;
//             color: #2c3e50;
//         }

//         p {
//             color: #7f8c8d;
//             margin-bottom: 20px;
//         }
//     }
// }

// .btn-link {
//     color: #3498db;
//     text-decoration: none;
//     font-weight: 600;
//     position: relative;
//     cursor: pointer;

//     &:after {
//         content: '';
//         position: absolute;
//         width: 0;
//         height: 2px;
//         bottom: -5px;
//         left: 0;
//         background-color: #3498db;
//         transition: width 0.3s ease;
//     }

//     &:hover {
//         &:after {
//             width: 100%;
//         }
//     }
// }

// .btn-details {
//     background-color: #3498db;
//     color: white;
//     border: none;
//     padding: 10px 20px;
//     border-radius: 4px;
//     font-weight: 600;
//     cursor: pointer;
//     transition: background-color 0.3s ease;

//     &:hover {
//         background-color: #2980b9;
//     }
// }

.case-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: $shadow-sm;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
    position: relative;

    &:hover {
        transform: translateY(-10px);
        box-shadow: $shadow-lg;

        .case-image img {
            transform: scale(1.05);
        }
    }

    .case-image {
        position: relative;
        overflow: hidden;

        img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
    }

    .category-tag {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba($primary-color, 0.8);
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        z-index: 1;
    }

    .case-content {
        padding: 25px;
        background: white;

        h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: $text-color;
        }

        p {
            color: $text-light;
            margin-bottom: 15px;
            line-height: 1.6;
        }
    }
}

.btn-details {
    display: inline-block;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid $primary-color;
    color: $primary-color;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        background: $primary-color;
        color: white;
    }
}
</style>