feat: 官网代码全量更新 (2026-04-18)

这个提交包含在:
wx
2026-04-18 15:13:28 +08:00
父节点 fcac8f88db
当前提交 f91ecbb093
共修改 135 个文件,包含 10307 行新增和 3349 行删除
+109 -33
查看文件
@@ -4,22 +4,15 @@
<div v-if="brand && images" class="footer-grid">
<!-- 品牌信息 -->
<div class="footer-brand">
<div class="footer-logo">
<img v-if="images?.logo?.main" :src="images.logo.main" alt="呼籁旅行" class="footer-logo-img" width="44" height="44" />
<div class="footer-logo-text">
<span class="logo-text">呼籁旅行</span>
<span class="logo-sub">HULAI TRAVEL</span>
<div class="footer-brand-main">
<div class="footer-logo">
<img v-if="images?.logo?.main" :src="images.logo.main" alt="呼籁旅行" class="footer-logo-img" width="44" height="44" />
<div class="footer-logo-text">
<span class="logo-text">呼籁旅行</span>
<span class="logo-sub">HULAI TRAVEL</span>
</div>
</div>
</div>
<p class="footer-desc">{{ brand?.slogan?.functional }}</p>
<div class="footer-qr-list">
<CommonQRCodeBlock
v-for="ch in qrChannels"
:key="ch.type"
:image="ch.qrImage"
:label="ch.label"
size="small"
/>
<p class="footer-desc">{{ brand?.slogan?.functional }}</p>
</div>
</div>
@@ -32,11 +25,22 @@
</li>
</ul>
</div>
<!-- 二维码区(桌面端独立列,手机端嵌入品牌区下方) -->
<div v-if="qrChannels.length" class="footer-qr-list">
<CommonQRCodeBlock
v-for="ch in qrChannels"
:key="ch.type"
:image="ch.qrImage"
:label="ch.label"
size="small"
/>
</div>
</div>
<!-- 底部信息 -->
<div class="footer-bottom">
<p class="footer-company">旅行服务:内蒙古呼籁国际旅行社有限公司</p>
<p v-if="brand?.serviceEntity" class="footer-company">旅行服务:{{ brand.serviceEntity }}</p>
<p class="footer-legal">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="footer-icp-link">{{ brand?.icp }}</a>
<span class="footer-divider">|</span>
@@ -84,19 +88,72 @@ const qrChannels = computed(() => (contact.value?.channels || []).filter(c => c.
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: @space-xl;
// 手机端:品牌区占满一行,三个导航组 3 列并排,二维码单独一行
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'brand brand brand'
'nav1 nav2 nav3'
'qr qr qr';
gap: @space-lg @space-md;
.respond-md({
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: @space-xl;
// 桌面端:品牌 | 3 列导航 | 二维码,布局紧凑
grid-template-columns: 1.3fr 1fr 1fr 1fr auto;
grid-template-areas: 'brand nav1 nav2 nav3 qr';
gap: @space-2xl;
align-items: start;
});
}
.footer-qr-list {
grid-area: qr;
display: flex;
gap: @space-md;
flex-shrink: 0;
// 手机端二维码缩到 64px
@media (max-width: 767px) {
:deep(.qr-image) {
width: 64px;
height: 64px;
}
}
.respond-md({
gap: @space-lg;
});
}
.footer-brand {
margin-bottom: @space-lg;
grid-area: brand;
margin-bottom: 0;
// 手机端:logo + 文字 + 二维码横向排列,节省高度
display: flex;
align-items: flex-start;
gap: @space-md;
flex-wrap: wrap;
.respond-md({
// 桌面端:品牌信息紧凑堆叠(logo + slogan),二维码移到右侧独立列
display: block;
margin-bottom: 0;
});
}
.footer-brand-main {
flex: 1;
min-width: 0;
.respond-md({
flex: none;
width: 100%;
});
}
.footer-nav-group:nth-child(2) { grid-area: nav1; }
.footer-nav-group:nth-child(3) { grid-area: nav2; }
.footer-nav-group:nth-child(4) { grid-area: nav3; }
.footer-logo {
display: flex;
align-items: center;
@@ -105,10 +162,15 @@ const qrChannels = computed(() => (contact.value?.channels || []).filter(c => c.
}
.footer-logo-img {
width: 44px;
height: 44px;
width: 36px;
height: 36px;
border-radius: 6px;
flex-shrink: 0;
.respond-md({
width: 44px;
height: 44px;
});
}
.footer-logo-text {
@@ -129,35 +191,49 @@ const qrChannels = computed(() => (contact.value?.channels || []).filter(c => c.
}
.footer-desc {
font-size: @font-size-sm;
margin-bottom: @space-lg;
font-size: 12px;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.6);
}
line-height: 1.6;
.footer-qr-list {
display: flex;
gap: @space-lg;
.respond-md({
font-size: @font-size-sm;
margin-bottom: 0;
});
}
.footer-nav-title {
font-size: @font-size-base;
font-size: @font-size-sm;
font-weight: @font-weight-medium;
color: #fff;
margin-bottom: @space-md;
margin-bottom: @space-sm;
.respond-md({
font-size: @font-size-base;
margin-bottom: @space-md;
});
}
.footer-nav-list {
display: flex;
flex-direction: column;
gap: @space-sm;
gap: 6px;
.respond-md({
gap: @space-sm;
});
}
.footer-nav-link {
font-size: @font-size-sm;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color @transition-fast;
.respond-md({
font-size: @font-size-sm;
});
&:hover {
color: #fff;
}
+16 -12
查看文件
@@ -175,9 +175,10 @@ watch(() => route.path, () => {
}
.nav-arrow {
font-size: 10px;
margin-left: 2px;
opacity: 0.5;
font-size: 13px;
margin-left: 4px;
opacity: 0.85;
color: @color-primary;
transition: transform @transition-fast;
.has-dropdown:hover & {
@@ -256,9 +257,10 @@ watch(() => route.path, () => {
}
.nav-arrow {
font-size: 10px;
margin-left: 2px;
opacity: 0.5;
font-size: 13px;
margin-left: 4px;
opacity: 0.85;
color: @color-primary;
transition: transform @transition-fast;
.has-dropdown:hover & {
@@ -337,9 +339,10 @@ watch(() => route.path, () => {
}
.nav-arrow {
font-size: 10px;
margin-left: 2px;
opacity: 0.5;
font-size: 13px;
margin-left: 4px;
opacity: 0.85;
color: @color-primary;
transition: transform @transition-fast;
.has-dropdown:hover & {
@@ -418,9 +421,10 @@ watch(() => route.path, () => {
}
.nav-arrow {
font-size: 10px;
margin-left: 2px;
opacity: 0.5;
font-size: 13px;
margin-left: 4px;
opacity: 0.85;
color: @color-primary;
transition: transform @transition-fast;
.has-dropdown:hover & {