ac90205395
覆盖最新版本代码，包含： - 新增品牌百科、公司百科页面及CMS管理 - 新增微信引导组件(WechatCTA) - 新增品牌/公司图片资源 - 全站组件/页面/数据/样式更新 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
122 行
2.3 KiB
Vue
122 行
2.3 KiB
Vue
<template>
|
||
<section class="section section--warm">
|
||
<div class="container">
|
||
<div class="story-layout">
|
||
<!-- 左侧：配图 -->
|
||
<div class="story-photo">
|
||
<div class="story-photo-card">
|
||
<img
|
||
:src="images?.brandStory?.photo"
|
||
alt="呼籁旅行创始人在呼伦贝尔草原"
|
||
width="600"
|
||
height="800"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：文字 -->
|
||
<div class="story-text">
|
||
<h2 class="story-title">{{ story.title }}</h2>
|
||
<div class="story-title-line" />
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
story: { type: Object, required: true },
|
||
images: { type: Object, default: () => ({}) },
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.story-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: @space-2xl;
|
||
|
||
.respond-lg({
|
||
grid-template-columns: 5fr 7fr;
|
||
gap: @space-3xl;
|
||
align-items: start;
|
||
});
|
||
}
|
||
|
||
// 配图
|
||
.story-photo {
|
||
.respond-lg({
|
||
position: sticky;
|
||
top: 100px;
|
||
});
|
||
}
|
||
|
||
.story-photo-card {
|
||
border-radius: @border-radius-lg;
|
||
overflow: hidden;
|
||
box-shadow: @shadow-lg;
|
||
|
||
img {
|
||
width: 100%;
|
||
display: block;
|
||
aspect-ratio: 3 / 4;
|
||
object-fit: cover;
|
||
object-position: center 30%;
|
||
|
||
.respond-lg({
|
||
aspect-ratio: 4 / 5;
|
||
});
|
||
}
|
||
}
|
||
|
||
// 文字
|
||
.story-text {
|
||
padding-top: @space-md;
|
||
}
|
||
|
||
.story-title {
|
||
font-size: @font-size-2xl;
|
||
font-weight: @font-weight-bold;
|
||
color: @color-text-primary;
|
||
margin: 0 0 @space-md;
|
||
line-height: @line-height-tight;
|
||
|
||
.respond-md({
|
||
font-size: @font-size-3xl;
|
||
});
|
||
}
|
||
|
||
.story-title-line {
|
||
width: 48px;
|
||
height: 3px;
|
||
background: @gradient-accent;
|
||
border-radius: 3px;
|
||
margin-bottom: @space-xl;
|
||
}
|
||
|
||
.story-content {
|
||
p {
|
||
font-size: @font-size-base;
|
||
line-height: 2;
|
||
color: @color-text-secondary;
|
||
}
|
||
|
||
.story-para {
|
||
text-indent: 2em;
|
||
margin-bottom: @space-lg;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|