feat: 官网代码全量更新 (2026-04-18)
这个提交包含在:
+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 & {
|
||||
|
||||
在新工单中引用
屏蔽一个用户