131 行
3.1 KiB
Vue
131 行
3.1 KiB
Vue
<template>
|
|
<section class="section section--gray">
|
|
<div class="container">
|
|
<CommonSectionTitle :title="st('home.reviewHighlights', '客户怎么说')" :label="st('home.reviewHighlights', 'REVIEWS', 'label')" :subtitle="st('home.reviewHighlights', '来自真实家庭的旅行评价', 'subtitle')" />
|
|
<div class="review-grid">
|
|
<div v-for="r in reviews" :key="r.id" class="review-card">
|
|
<div class="review-quote-mark">"</div>
|
|
<blockquote class="review-text">{{ r.content }}</blockquote>
|
|
<div class="review-footer">
|
|
<div class="review-avatar">{{ r.nickname.charAt(0) }}</div>
|
|
<div class="review-info">
|
|
<span class="review-name">{{ r.nickname }}</span>
|
|
<span class="review-date">{{ r.travelDate }}</span>
|
|
</div>
|
|
</div>
|
|
<p class="review-product">{{ r.productVersion }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="review-more">
|
|
<CommonInternalLink to="/reviews" text="查看更多客户评价" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
reviews: { type: Array, required: true },
|
|
})
|
|
const st = await useSectionTitles()
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.review-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: @space-lg;
|
|
|
|
.respond-md({
|
|
grid-template-columns: repeat(2, 1fr);
|
|
});
|
|
|
|
.respond-lg({
|
|
grid-template-columns: repeat(3, 1fr);
|
|
});
|
|
}
|
|
|
|
.review-card {
|
|
background: @color-bg-white;
|
|
border-radius: @border-radius-lg;
|
|
padding: @space-xl;
|
|
border: 1px solid @color-border;
|
|
border-left: 3px solid @color-primary-lighter;
|
|
position: relative;
|
|
transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
|
|
|
|
&:hover {
|
|
box-shadow: @shadow-md;
|
|
transform: translateY(-3px);
|
|
border-left-color: @color-primary;
|
|
}
|
|
}
|
|
|
|
.review-quote-mark {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: 64px;
|
|
line-height: 1;
|
|
color: @color-primary-lighter;
|
|
margin-bottom: -@space-md;
|
|
user-select: none;
|
|
}
|
|
|
|
.review-text {
|
|
font-size: @font-size-base;
|
|
color: @color-text-secondary;
|
|
line-height: @line-height-relaxed;
|
|
margin-bottom: @space-lg;
|
|
.text-clamp(4);
|
|
}
|
|
|
|
.review-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: @space-md;
|
|
}
|
|
|
|
.review-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, @color-primary-bg, @color-primary-lighter);
|
|
color: @color-primary;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: @font-size-sm;
|
|
font-weight: @font-weight-bold;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.review-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.review-name {
|
|
font-size: @font-size-sm;
|
|
color: @color-text-primary;
|
|
font-weight: @font-weight-medium;
|
|
}
|
|
|
|
.review-date {
|
|
font-size: @font-size-xs;
|
|
color: @color-text-muted;
|
|
}
|
|
|
|
.review-product {
|
|
font-size: @font-size-xs;
|
|
color: @color-text-muted;
|
|
margin-top: @space-sm;
|
|
padding-top: @space-sm;
|
|
border-top: 1px solid @color-divider;
|
|
}
|
|
|
|
.review-more {
|
|
text-align: center;
|
|
margin-top: @space-2xl;
|
|
}
|
|
</style>
|