140 行
3.1 KiB
Vue
140 行
3.1 KiB
Vue
<template>
|
|
<section class="wechat-cta" :class="`wechat-cta--${bg}`">
|
|
<div class="container">
|
|
<div class="wechat-cta-inner">
|
|
<div class="wechat-cta-text">
|
|
<h2 class="wechat-cta-title">{{ title }}</h2>
|
|
<p class="wechat-cta-desc">{{ description }}</p>
|
|
<div v-if="links && links.length" class="wechat-cta-links">
|
|
<NuxtLink
|
|
v-for="link in links"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="wechat-cta-link"
|
|
>
|
|
{{ link.text }} →
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="wechat-cta-qr">
|
|
<img :src="qrSrc" alt="定制师微信二维码" class="wechat-cta-qrimg" />
|
|
<span class="wechat-cta-qrlabel">扫码添加定制师微信</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: { type: String, default: '想聊聊行程？扫码找定制师' },
|
|
description: { type: String, default: '添加微信，定制师根据你的家庭情况和假期安排，1对1推荐合适的行程方案。' },
|
|
links: { type: Array, default: () => [] },
|
|
bg: { type: String, default: 'light' },
|
|
})
|
|
const qrSrc = '/images/contact/qrcode-wechat.jpg'
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.wechat-cta {
|
|
.section-padding();
|
|
}
|
|
|
|
.wechat-cta--light {
|
|
background: @color-bg-gray;
|
|
}
|
|
|
|
.wechat-cta--white {
|
|
background: #fff;
|
|
}
|
|
|
|
.wechat-cta--green {
|
|
background: linear-gradient(135deg, @color-primary-dark 0%, @color-primary 100%);
|
|
|
|
.wechat-cta-title {
|
|
color: #fff;
|
|
&::after { display: none; }
|
|
}
|
|
.wechat-cta-desc { color: rgba(255, 255, 255, 0.85); }
|
|
.wechat-cta-link { color: rgba(255, 255, 255, 0.9); &:hover { color: #fff; } }
|
|
.wechat-cta-qrlabel { color: rgba(255, 255, 255, 0.8); }
|
|
}
|
|
|
|
.wechat-cta-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: @space-2xl;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
|
|
@media (max-width: 640px) {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: @space-lg;
|
|
}
|
|
}
|
|
|
|
.wechat-cta-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.wechat-cta-title {
|
|
font-size: @font-size-xl;
|
|
font-weight: @font-weight-bold;
|
|
color: @color-text-primary;
|
|
margin-bottom: @space-sm;
|
|
|
|
&::after { display: none; }
|
|
}
|
|
|
|
.wechat-cta-desc {
|
|
font-size: @font-size-base;
|
|
line-height: @line-height-relaxed;
|
|
color: @color-text-secondary;
|
|
}
|
|
|
|
.wechat-cta-links {
|
|
margin-top: @space-md;
|
|
display: flex;
|
|
gap: @space-md;
|
|
|
|
@media (max-width: 640px) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.wechat-cta-link {
|
|
font-size: @font-size-sm;
|
|
color: @color-primary;
|
|
text-decoration: none;
|
|
font-weight: @font-weight-medium;
|
|
|
|
&:hover {
|
|
color: @color-primary-dark;
|
|
}
|
|
}
|
|
|
|
.wechat-cta-qr {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: @space-xs;
|
|
}
|
|
|
|
.wechat-cta-qrimg {
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: @border-radius-sm;
|
|
background: #fff;
|
|
object-fit: contain;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.wechat-cta-qrlabel {
|
|
font-size: @font-size-xs;
|
|
color: @color-text-muted;
|
|
}
|
|
</style>
|