zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 案例库样式整改

Browse Source
This commit is contained in:
Ironsp
2026-10-13 15:34:55 +08:00
parent f552dd370c
commit 5fa940e9ba
3 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/home/cpns/HomeCaseShowcase.vue
View File

@@ -33,9 +33,7 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
<template>
<section class="home-cases">
<div class="home-cases__head">
<h3 class="home-cases__title">
案例库精选
</h3>
<h3 class="home-cases__title">案例库精选</h3>
<div class="home-cases__tabs">
<button
v-for="cat in categories"
@@ -60,7 +58,12 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
@click="$router.push(`/cases/${item.id}`)"
>
<div class="home-cases__cover">
<img v-if="item.cover" v-lazy="item.cover" class="home-cases__img" :alt="item.title">
<img
v-if="item.cover"
v-lazy="item.cover"
class="home-cases__img"
:alt="item.title"
/>
<div v-else class="home-cases__img home-cases__img--placeholder" />
</div>
@@ -140,13 +143,13 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
}
&__grid {
display: flex;
gap: 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: @spacing-lg;
}
&__card {
overflow: hidden;
flex: 1 1 0;
min-width: 0;
min-height: 220px;
box-sizing: border-box;
@@ -155,7 +158,10 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
background: @white;
box-shadow: none;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
transition:
transform 0.2s,
box-shadow 0.2s,
border-color 0.2s;
&:hover {
border-color: @primary-color;
@@ -185,7 +191,7 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
}
&__body {
padding: 0 20px;
padding: 0 20px 10px 20px;
}
&__name {
@@ -201,7 +207,7 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0 @spacing-lg;
margin-top: 43px;
margin-top: 20px;
font-size: 13px;
line-height: 20px;
color: @home-body;