Browse Source

refactor(CaseItem): 移除详情按钮并添加卡片点击事件

将查看详情功能从按钮移至整个卡片点击事件,简化交互方式并移除冗余按钮样式代码
master
主管理员 3 weeks ago
parent
commit
10b7c444cd
1 changed files with 2 additions and 21 deletions
  1. +2
    -21
      src/components/cases/CaseItem.vue

+ 2
- 21
src/components/cases/CaseItem.vue View File

@ -26,7 +26,7 @@ const viewDetails = () => {
</script> </script>
<template> <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 class="case-image">
<div v-if="showCategory" class="category-tag">{{ item.categoryName }}</div> <div v-if="showCategory" class="category-tag">{{ item.categoryName }}</div>
<img :src="item.imageUrl && item.imageUrl.split(',')[0]" :alt="item.title" /> <img :src="item.imageUrl && item.imageUrl.split(',')[0]" :alt="item.title" />
@ -34,9 +34,6 @@ const viewDetails = () => {
<div class="case-content"> <div class="case-content">
<h3>{{ item.title }}</h3> <h3>{{ item.title }}</h3>
<p>{{ item.description }}</p> <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>
</div> </div>
</template> </template>
@ -147,6 +144,7 @@ const viewDetails = () => {
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
background: white; background: white;
position: relative; position: relative;
cursor: pointer;
&:hover { &:hover {
transform: translateY(-10px); 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> </style>

Loading…
Cancel
Save