|
@@ -47,10 +47,10 @@ const isKioskDevice = ref(false)
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* 立式一体机模式下的常见问题列表
|
|
* 立式一体机模式下的常见问题列表
|
|
|
- * 从 global.commonProblem 派生,取前 5 条用于底部展示
|
|
|
|
|
|
|
+ * 从 global.commonProblem 派生,取前 4 条用于底部展示
|
|
|
*/
|
|
*/
|
|
|
const kioskFaqList = computed(() => {
|
|
const kioskFaqList = computed(() => {
|
|
|
- return global.commonProblem.slice(0, 5)
|
|
|
|
|
|
|
+ return global.commonProblem.slice(0, 4)
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const inputBox = ref<InstanceType<typeof SsInputBox> | null>(null)
|
|
const inputBox = ref<InstanceType<typeof SsInputBox> | null>(null)
|
|
@@ -258,10 +258,12 @@ watch(() => global.inputLine, () => {
|
|
|
|
|
|
|
|
<!-- 立式一体机对话模式:底部常见问题展示区 -->
|
|
<!-- 立式一体机对话模式:底部常见问题展示区 -->
|
|
|
<div v-if="global.spread && isKioskDevice" class="kiosk-bottom-faq">
|
|
<div v-if="global.spread && isKioskDevice" class="kiosk-bottom-faq">
|
|
|
- <div class="faq-title">热门问题</div>
|
|
|
|
|
- <div class="faq-list">
|
|
|
|
|
- <div v-for="(item, index) in kioskFaqList" :key="index" class="faq-item">
|
|
|
|
|
- {{ item.questionContent }}
|
|
|
|
|
|
|
+ <div class="faq-card">
|
|
|
|
|
+ <div class="faq-title">热门问题</div>
|
|
|
|
|
+ <div class="faq-list">
|
|
|
|
|
+ <div v-for="(item, index) in kioskFaqList" :key="index" class="faq-item">
|
|
|
|
|
+ {{ item.questionContent }}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -295,7 +297,8 @@ watch(() => global.inputLine, () => {
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <ss-footer @loaded="componentLoaded"/>
|
|
|
|
|
|
|
+ <!-- 立式一体机对话模式下隐藏 Footer,避免与底部 FAQ 区域重叠 -->
|
|
|
|
|
+ <ss-footer v-if="!(global.spread && isKioskDevice)" @loaded="componentLoaded"/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<ss-hotline ref="hotlineRef"/>
|
|
<ss-hotline ref="hotlineRef"/>
|
|
@@ -471,41 +474,45 @@ watch(() => global.inputLine, () => {
|
|
|
.kiosk-bottom-faq {
|
|
.kiosk-bottom-faq {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
height: 420px;
|
|
height: 420px;
|
|
|
- background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
|
|
|
|
|
- border-top: 1px solid #E5E7EB;
|
|
|
|
|
- padding: 2rem 0;
|
|
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ margin-top: -2rem;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
|
|
- .faq-title {
|
|
|
|
|
- font-size: 1.5rem;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- color: #101333;
|
|
|
|
|
- margin-bottom: 1.5rem;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .faq-list {
|
|
|
|
|
|
|
+ .faq-card {
|
|
|
width: var(--kiosk-content-width); /* 与顶部导航栏内容区域对齐 */
|
|
width: var(--kiosk-content-width); /* 与顶部导航栏内容区域对齐 */
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
- padding: 0;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- gap: 1rem;
|
|
|
|
|
-
|
|
|
|
|
- .faq-item {
|
|
|
|
|
- font-size: 1.125rem;
|
|
|
|
|
- color: #545764;
|
|
|
|
|
- line-height: 1.6;
|
|
|
|
|
- padding: 0.75rem 1rem;
|
|
|
|
|
- background: #ffffff;
|
|
|
|
|
- border-radius: 0.75rem;
|
|
|
|
|
- border: 1px solid #E5E7EB;
|
|
|
|
|
- /* 仅展示模式:不可点击 */
|
|
|
|
|
- cursor: default;
|
|
|
|
|
- transition: none;
|
|
|
|
|
|
|
+ padding: 2rem;
|
|
|
|
|
+ background: #ffffff; /* 白色卡片背景 */
|
|
|
|
|
+
|
|
|
|
|
+ .faq-title {
|
|
|
|
|
+ font-size: 1.75rem;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #101333;
|
|
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
|
|
+ text-align: left; /* 左对齐 */
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .faq-list {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 1rem;
|
|
|
|
|
+
|
|
|
|
|
+ .faq-item {
|
|
|
|
|
+ font-size: 1.25rem;
|
|
|
|
|
+ color: #545764;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ padding: 0.75rem 1rem;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ border-radius: 0.75rem;
|
|
|
|
|
+ border: 1px solid #D5D6D8;
|
|
|
|
|
+ /* 仅展示模式:不可点击 */
|
|
|
|
|
+ cursor: default;
|
|
|
|
|
+ transition: none;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -533,25 +540,44 @@ watch(() => global.inputLine, () => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 0.5rem;
|
|
gap: 0.5rem;
|
|
|
- padding: 0.75rem 1.5rem;
|
|
|
|
|
- background: #2942D4;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- border-radius: 0.75rem;
|
|
|
|
|
|
|
+ padding: 0.875rem 2.5rem;
|
|
|
|
|
+ border-radius: 3.125rem; /* 胶囊形状 */
|
|
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
|
|
+ background: linear-gradient(145deg, #d4ebf7, #b8daf0);
|
|
|
|
|
+ box-shadow:
|
|
|
|
|
+ -10px -10px 20px rgba(255, 255, 255, 0.8),
|
|
|
|
|
+ 10px 10px 20px rgba(176, 210, 232, 0.6),
|
|
|
|
|
+ inset 1px 1px 0px rgba(255, 255, 255, 1);
|
|
|
|
|
+ color: #5a8fb5;
|
|
|
font-size: 1.125rem;
|
|
font-size: 1.125rem;
|
|
|
- font-weight: 500;
|
|
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ letter-spacing: 0.125rem;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
|
- min-width: 120px;
|
|
|
|
|
- min-height: 60px;
|
|
|
|
|
|
|
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
|
|
|
|
|
+ min-width: 100px;
|
|
|
|
|
+ min-height: 50px;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
|
- background: #1e32a8;
|
|
|
|
|
- transform: scale(1.02);
|
|
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow:
|
|
|
|
|
+ -12px -12px 24px rgba(255, 255, 255, 0.9),
|
|
|
|
|
+ 12px 12px 24px rgba(176, 210, 232, 0.7),
|
|
|
|
|
+ inset 1px 1px 0px rgba(255, 255, 255, 1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: translateY(0);
|
|
|
|
|
+ background: #b8daf0;
|
|
|
|
|
+ box-shadow:
|
|
|
|
|
+ inset 6px 6px 12px rgba(176, 210, 232, 0.6),
|
|
|
|
|
+ inset -6px -6px 12px rgba(255, 255, 255, 0.8);
|
|
|
|
|
+ border: 1px solid transparent;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.back-icon {
|
|
.back-icon {
|
|
|
- font-size: 1.5rem;
|
|
|
|
|
|
|
+ font-size: 1.25rem;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -574,7 +600,6 @@ watch(() => global.inputLine, () => {
|
|
|
right: 0;
|
|
right: 0;
|
|
|
height: 100px; /* 从 120px 减小到 100px */
|
|
height: 100px; /* 从 120px 减小到 100px */
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
- border-bottom: 1px solid #E5E7EB;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -630,7 +655,7 @@ watch(() => global.inputLine, () => {
|
|
|
|
|
|
|
|
.service-title {
|
|
.service-title {
|
|
|
color: #101333;
|
|
color: #101333;
|
|
|
- font-size: 1rem;
|
|
|
|
|
|
|
+ font-size: 1.125rem; /* 1rem → 1.125rem */
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
line-height: 1.2;
|
|
line-height: 1.2;
|
|
|
}
|
|
}
|