|
|
|
@ -26,7 +26,7 @@ const viewDetails = () => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="case-card" data-aos="fade-up" :data-aos-delay="item.delay"> |
|
|
|
<div class="case-card" data-aos="fade-up" :data-aos-delay="item.delay" @click="viewDetails"> |
|
|
|
<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" /> |
|
|
|
@ -34,9 +34,6 @@ const viewDetails = () => { |
|
|
|
<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> |
|
|
|
@ -147,6 +144,7 @@ const viewDetails = () => { |
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
|
background: white; |
|
|
|
position: relative; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-10px); |
|
|
|
@ -199,21 +197,4 @@ const viewDetails = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.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> |