You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
5.0 KiB
219 lines
5.0 KiB
<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>
|