2025-08-19 19:04:11 +08:00

759 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="help-center">
<!-- 刷新遮罩层 -->
<div v-if="isRefreshing" class="refresh-mask">
<div class="refresh-content">
<div class="loading-spinner"></div>
<div class="loading-text">正在加载...</div>
</div>
</div>
<div class="text-wrapper_2">
<span class="text_31">帮助中心</span>
<span class="text_32">问题一次性解决</span>
</div>
<div>
<div class="help-content">
<div class="group_3 flex-col">
<span class="text_19">帮助中心</span>
<div class="text-wrapper_3">
<!-- 分割线 -->
<div class="divider_2"></div>
</div>
<div class="box_3" :class="{ active: activeTab === 0 }" @click="handleTabChange(0)">
<div class="image-text_2 justify-between">
<img class="thumbnail_8" referrerpolicy="no-referrer"
:src="activeTab === 0 ? '/images/Help-center/SketchPngd9dfa413c705d7d7838aa04a1af69011abc78cfe7a9d0d31b5bfca3ed5a4c990.png' : '/images/Help-center/disposition.png'" />
<span class="text-group_2">账号问题</span>
</div>
</div>
<div class="box_3" :class="{ active: activeTab === 1 }" @click="handleTabChange(1)">
<div class="image-text_2 justify-between">
<img class="thumbnail_8" referrerpolicy="no-referrer"
:src="activeTab === 1 ? '/images/Help-center/Gc_24_line-Authentication(1).png@2x.png' : '/images/Help-center/SketchPng8c77f6b5914ca8b5148cb9e177fb5d7ad7b15bbad1eb5506086428c4b5243169.png'" />
<span class="text-group_2">认证证书</span>
</div>
</div>
<div class="box_3" :class="{ active: activeTab === 2 }" @click="handleTabChange(2)">
<div class="image-text_2 justify-between">
<img class="thumbnail_8" referrerpolicy="no-referrer"
:src="activeTab === 2 ? '/images/Help-center/course-active.png' : '/images/Help-center/SketchPng9eac41c079f953a4c9dd6e8ea78ccfedb8a08687a399dfa96c25967f42408792.png'" />
<span class="text-group_2">课程问题</span>
</div>
</div>
</div>
<div class="group_2 justify-between">
<div class="block_1 flex-col">
<span class="text_4" v-if="activeTab === 0">帐号问题</span>
<span class="text_4" v-else-if="activeTab === 1">认证证书</span>
<span class="text_4" v-else>课程问题</span>
<!-- 分割线 -->
<div class="divider_1"></div>
<div v-if="activeTab === 0">
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
</div>
<div v-else-if="activeTab === 1">
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何获取课程认证证书</span>
</div>
<span class="text_6">
完成课程所有学习内容并通过考核后可在课程详情页面申请认证证书认证证书通常在3-5个工作日内审核发放
</span>
</div>
<div v-else>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何购买课程</span>
</div>
<span class="text_6">
浏览课程详情页面点击"立即购买"按钮按照提示完成支付流程即可支持微信支付宝等多种支付方式
</span>
</div>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
<div class="section_1 justify-between">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="/images/Help-center/SketchPngcebb162be4c752de66c89f16a525f570b179222941fc1ebd59ee37257e634009.png" />
<span class="text_5">1.如何在线上注册账号</span>
</div>
<span class="text_6">
浏览器登录www.xuetangx.com打开网页后点击右上角登录按钮进行账号注册您也可以在微信小程序和app的登录界面进行注册
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue';
// 当前选中的tab索引
const activeTab = ref(0);
// 是否正在刷新
const isRefreshing = ref(false);
// tab切换处理函数
const handleTabChange = (index: number) => {
activeTab.value = index;
}
// 强制布局更新
const forceLayoutUpdate = () => {
// 强制重新计算布局
window.dispatchEvent(new Event('resize'));
}
// 检查自动刷新
const checkAutoRefresh = () => {
// 检查是否需要自动刷新页面
const needsRefresh = sessionStorage.getItem('helpCenterNeedsRefresh');
if (needsRefresh === 'true') {
console.log('检测到从其他页面进入帮助中心,开始无感知刷新');
sessionStorage.removeItem('helpCenterNeedsRefresh');
// 显示刷新动画
isRefreshing.value = true;
// 延迟刷新,让动画先显示
setTimeout(() => {
// 直接刷新页面
window.location.reload();
}, 300);
}
}
// 生命周期钩子
onMounted(() => {
// 检查是否需要自动刷新
checkAutoRefresh();
// 确保页面加载时样式正确应用
forceLayoutUpdate();
});
onActivated(() => {
// 检查是否需要自动刷新
checkAutoRefresh();
// 当组件被激活时(从其他页面返回),重新应用样式
forceLayoutUpdate();
});
</script>
<style scoped>
@font-face {
font-family: 'AlimamaShuHeiTiBold';
src: url('@/assets/fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype');
font-display: swap;
}
/* 刷新遮罩层样式 */
.refresh-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.refresh-content {
text-align: center;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #0088d1;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
color: #666;
font-size: 16px;
font-weight: 500;
}
.help-center {
min-height: 90vh;
background-color: #f5f5f5;
}
.text-wrapper_2 {
height: 163px;
background: url('/images/Help-center/help-center-bg.png') 100% no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
}
.text_31 {
width: 128px;
height: 28px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 32px;
font-family: 'AlimamaShuHeiTiBold';
font-weight: 700;
text-align: center;
white-space: nowrap;
margin: auto;
padding-top: 20px;
}
.text_32 {
width: 98px;
height: 17px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
margin: auto;
padding-bottom: 50px;
}
.text_19 {
width: 72px;
height: 24px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 21px 0 0 22px;
}
.box_3 {
width: 254px;
height: 54px;
line-height: 54px;
margin: 0 15px 0 15px;
}
.box_3.active {
background: url('/images/Help-center/01.jpg') 100% no-repeat;
background-size: 100% 100%;
}
.image-text_2 {
width: 98px;
height: 100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.thumbnail_8 {
width: 18px;
height: 18px;
}
.text-group_2 {
width: 72px;
height: 21px;
overflow-wrap: break-word;
color: rgba(153, 153, 153, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 21px;
}
.box_3.active .text-group_2 {
color: #0288D1;
}
.image-text_3 {
width: 98px;
height: 23px;
margin: 30px 0 0 85px;
}
.thumbnail_9 {
width: 19px;
height: 19px;
margin-top: 4px;
}
.group_3 {
padding-top: 20px;
background-color: white;
}
.text-group_3 {
width: 72px;
height: 21px;
overflow-wrap: break-word;
color: rgba(102, 102, 102, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 21px;
}
.thumbnail_10 {
width: 18px;
height: 20px;
margin-top: 3px;
}
.text-group_4 {
width: 72px;
height: 21px;
overflow-wrap: break-word;
color: rgba(102, 102, 102, 1);
font-size: 18px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 21px;
}
.block_1 {
padding-top: 20px;
width: 1093px;
height: 971px;
background: url('/images/Help-center/02.jpg') 100% no-repeat;
background-size: 100% 100%;
}
.text_4 {
width: 98px;
height: 24px;
margin: 33px 0 0 20px;
font-size: 18px;
}
.divider_1 {
margin: 15px auto;
margin-bottom: 0;
width: 94%;
height: 2px;
background-color: #F6F6F6;
}
.divider_2 {
margin: 20px auto;
margin-bottom: 0;
width: 88%;
height: 1px;
background-color: #F6F6F6;
}
.section_1 {
width: 196px;
height: 30px;
margin: 25px 0 10px 33px;
padding-top: 5px;
display: flex;
gap: 5px;
align-items: center;
}
.thumbnail_1 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_5 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_6 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 0 34px;
padding-bottom: 20px;
border-bottom: 2px dotted #E6E6E6;
}
.section_2 {
width: 196px;
height: 20px;
margin: 38px 0 0 33px;
}
.thumbnail_2 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_7 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_8 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 0 34px;
}
.section_3 {
width: 196px;
height: 20px;
margin: 38px 0 0 33px;
}
.thumbnail_3 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_9 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_10 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 0 34px;
}
.section_4 {
width: 196px;
height: 20px;
margin: 38px 0 0 33px;
}
.thumbnail_4 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_11 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_12 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 0 34px;
}
.section_5 {
width: 196px;
height: 20px;
margin: 38px 0 0 33px;
}
.thumbnail_5 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_13 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_14 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 0 34px;
}
.section_6 {
width: 196px;
height: 20px;
margin: 38px 0 0 33px;
}
.thumbnail_6 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_15 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_16 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 0 34px;
}
.section_7 {
width: 196px;
height: 20px;
margin: 38px 0 0 33px;
}
.thumbnail_7 {
width: 16px;
height: 18px;
margin-top: 2px;
}
.text_17 {
width: 174px;
height: 18px;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 18px;
}
.text_18 {
width: 933px;
height: 26px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 26px;
margin: 15px 0 224px 34px;
}
.help-content {
display: flex;
justify-content: center;
gap: 30px;
margin: 30px 0;
}
.text-wrapper_3 {
height: 25px;
}
</style>