87 行
1.9 KiB
Vue
87 行
1.9 KiB
Vue
<template>
|
|
<section class="section">
|
|
<div class="container">
|
|
<CommonSectionTitle :title="story.title" align="left" />
|
|
<div class="story-layout">
|
|
<div class="story-content">
|
|
<template v-if="story.paragraphs">
|
|
<p v-for="(para, i) in story.paragraphs" :key="i" class="story-para">{{ para }}</p>
|
|
</template>
|
|
<p v-else>{{ story.content }}</p>
|
|
</div>
|
|
<div class="story-photo">
|
|
<div class="story-photo-card">
|
|
<img
|
|
:src="images.brandStory.photo"
|
|
alt="一家三口穿蒙古族传统服饰在草原上欢笑"
|
|
width="600"
|
|
height="400"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<p class="story-photo-caption">带孩子回到母亲的故乡</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import images from '~/data/images.json'
|
|
defineProps({ story: { type: Object, required: true } })
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.story-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: @space-xl;
|
|
align-items: center;
|
|
|
|
.respond-md({
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: @space-3xl;
|
|
});
|
|
}
|
|
|
|
.story-content {
|
|
p {
|
|
font-size: @font-size-md;
|
|
line-height: @line-height-loose;
|
|
color: @color-text-primary;
|
|
}
|
|
.story-para {
|
|
text-indent: 2em;
|
|
margin-bottom: @space-md;
|
|
&:last-child { margin-bottom: 0; }
|
|
}
|
|
}
|
|
|
|
.story-moment {
|
|
margin-top: @space-lg;
|
|
font-weight: @font-weight-medium;
|
|
}
|
|
|
|
.story-photo-card {
|
|
border-radius: @border-radius-lg;
|
|
overflow: hidden;
|
|
box-shadow: @shadow-lg;
|
|
|
|
img {
|
|
width: 100%;
|
|
display: block;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
object-position: center 35%;
|
|
}
|
|
}
|
|
|
|
.story-photo-caption {
|
|
text-align: center;
|
|
margin-top: @space-md;
|
|
font-size: @font-size-sm;
|
|
color: @color-text-muted;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
</style>
|