优化
This commit is contained in:
Wxp
parent
6e1ad5ea07
commit
699c0e733c
@ -281,7 +281,7 @@ const router = createRouter({
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, _from, next) => {
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 设置页面标题
|
||||
if (to.meta.title) {
|
||||
document.title = `${to.meta.title} - 在线学习平台`
|
||||
@ -298,6 +298,22 @@ router.beforeEach((to, _from, next) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊处理：检测从其他页面进入积分中心
|
||||
if (to.name === 'LearningCenter') {
|
||||
// 如果是从其他页面进入积分中心，设置自动刷新标记
|
||||
if (from.name && from.name !== 'LearningCenter') {
|
||||
sessionStorage.setItem('learningCenterNeedsRefresh', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊处理：检测从其他页面进入帮助中心
|
||||
if (to.name === 'HelpCenter') {
|
||||
// 如果是从其他页面进入帮助中心，设置自动刷新标记
|
||||
if (from.name && from.name !== 'HelpCenter') {
|
||||
sessionStorage.setItem('helpCenterNeedsRefresh', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
|
||||
@ -1677,7 +1677,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 10px 0;
|
||||
background: #F5F7FA;
|
||||
/* background: #F5F7FA; */
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<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>
|
||||
@ -133,6 +141,22 @@
|
||||
<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>
|
||||
@ -144,18 +168,117 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
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>
|
||||
/* 刷新遮罩层样式 */
|
||||
.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;
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<div class="page flex-col justify-between">
|
||||
<!-- 刷新遮罩层 -->
|
||||
<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="box_3 flex-col">
|
||||
<div class="text-wrapper_1 flex-col">
|
||||
<span class="text_13">积分中心</span>
|
||||
@ -234,13 +242,17 @@
|
||||
|
||||
<!-- 规则说明 -->
|
||||
<div v-if="currentView === 'rules'" class="rules-container">
|
||||
<div class="rules-header">
|
||||
<h2>积分规则</h2>
|
||||
<!-- <button class="back-btn" @click="switchToHome">返回</button> -->
|
||||
</div>
|
||||
<div class="rule-section">
|
||||
<h4>一. 如何领取智点</h4>
|
||||
<p>完成新手任务或日常任务和进行每日签到等各种任务可获得相应智点。完成积分任务后，点击领取智点自动到账，由于数据可能存在延迟，若未及时到账，可等几分钟后重新进入页面查看，若依旧无法领取，可联系客服反馈。</p>
|
||||
</div>
|
||||
<div class="rule-section">
|
||||
<h4>二. 兑换说明</h4>
|
||||
<p>智点可以在报名“AI伴学”课程时进行抵扣解锁课程。</p>
|
||||
<p>智点可以在报名"AI伴学"课程时进行抵扣解锁课程。</p>
|
||||
</div>
|
||||
<div class="rule-section">
|
||||
<h4>三. 积分失效</h4>
|
||||
@ -257,6 +269,7 @@
|
||||
<span>时间</span>
|
||||
<span class="dropdown-arrow">▼</span>
|
||||
</div>
|
||||
<!-- <button class="back-btn" @click="switchToHome">返回</button> -->
|
||||
</div>
|
||||
<div class="details-table">
|
||||
<div class="table-header">
|
||||
@ -283,6 +296,7 @@ export default {
|
||||
return {
|
||||
constants: {},
|
||||
currentView: 'home', // 当前显示的视图：'home', 'rules', 'details'
|
||||
isRefreshing: false, // 是否正在刷新
|
||||
pointsDetails: [
|
||||
{
|
||||
description: '新手大礼包',
|
||||
@ -322,6 +336,24 @@ export default {
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 检查是否需要自动刷新
|
||||
this.checkAutoRefresh();
|
||||
|
||||
// 确保页面加载时样式正确应用
|
||||
this.$nextTick(() => {
|
||||
this.forceLayoutUpdate();
|
||||
});
|
||||
},
|
||||
activated() {
|
||||
// 检查是否需要自动刷新
|
||||
this.checkAutoRefresh();
|
||||
|
||||
// 当组件被激活时（从其他页面返回），重新应用样式
|
||||
this.$nextTick(() => {
|
||||
this.forceLayoutUpdate();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
switchToRules() {
|
||||
this.currentView = 'rules';
|
||||
@ -331,6 +363,29 @@ export default {
|
||||
},
|
||||
switchToHome() {
|
||||
this.currentView = 'home';
|
||||
},
|
||||
forceLayoutUpdate() {
|
||||
// 强制重新计算布局
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
// 确保所有元素都正确渲染
|
||||
this.$forceUpdate();
|
||||
},
|
||||
checkAutoRefresh() {
|
||||
// 检查是否需要自动刷新页面
|
||||
const needsRefresh = sessionStorage.getItem('learningCenterNeedsRefresh');
|
||||
if (needsRefresh === 'true') {
|
||||
console.log('检测到从其他页面进入积分中心，开始无感知刷新');
|
||||
sessionStorage.removeItem('learningCenterNeedsRefresh');
|
||||
|
||||
// 显示刷新动画
|
||||
this.isRefreshing = true;
|
||||
|
||||
// 延迟刷新，让动画先显示
|
||||
setTimeout(() => {
|
||||
// 直接刷新页面
|
||||
window.location.reload();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -417,27 +472,27 @@ button:active {
|
||||
/* background-color: rgba(255, 255, 255, 1); */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 2047px;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.box_1 {
|
||||
box-shadow: 0px 2px 13px 0px rgba(229, 229, 229, 0.5);
|
||||
height: 70px;
|
||||
width: 1920px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box_2 {
|
||||
height: 70px;
|
||||
width: 1920px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group_1 {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: url(../assets/img/SketchPng6e7499038fe50878492d829d9775b9aa2d5a385bae4c040e1ffdffdfa031d668.png) 0px 0px no-repeat;
|
||||
background-size: 1920px 85px;
|
||||
background-size: cover;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
|
||||
@ -707,15 +762,16 @@ button:active {
|
||||
|
||||
.box_3 {
|
||||
width: 100%;
|
||||
height: 1977px;
|
||||
min-height: 100vh;
|
||||
background: url(../assets/img/SketchPngc62587e39aa1180cde132cca80f0c79f9e16c87b1ad383fbb1c657fc8cc9d70a.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.text-wrapper_1 {
|
||||
background-image: url(../assets/img/eb01161fa49749e0a0ea087fb6f07ac2_mergeImage.png);
|
||||
width: 100%;
|
||||
height: 163px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.text_13 {
|
||||
@ -729,7 +785,7 @@ button:active {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: 39px;
|
||||
margin: 51px 0 0 796px;
|
||||
margin: 51px auto 0;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
@ -742,13 +798,18 @@ button:active {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: 20px;
|
||||
margin: 12px 0 41px 748px;
|
||||
margin: 12px auto 41px;
|
||||
}
|
||||
|
||||
.box_4 {
|
||||
width: 1420px;
|
||||
height: 152px;
|
||||
margin: 35px 0 0 130px;
|
||||
width: 90%;
|
||||
max-width: 1420px;
|
||||
height: auto;
|
||||
min-height: 152px;
|
||||
margin: 35px auto 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.section_1 {
|
||||
@ -757,6 +818,7 @@ button:active {
|
||||
height: 152px;
|
||||
border: 2px solid rgba(255, 255, 255, 1);
|
||||
width: 432px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group_5 {
|
||||
@ -851,6 +913,8 @@ button:active {
|
||||
width: 964px;
|
||||
height: 152px;
|
||||
border: 2px solid rgba(255, 255, 255, 1);
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.text_19 {
|
||||
@ -1100,10 +1164,12 @@ button:active {
|
||||
.box_6 {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
width: 1420px;
|
||||
height: 152px;
|
||||
width: 90%;
|
||||
max-width: 1420px;
|
||||
height: auto;
|
||||
min-height: 152px;
|
||||
border: 2px solid rgba(255, 255, 255, 1);
|
||||
margin: 24px 0 0 130px;
|
||||
margin: 24px auto 0;
|
||||
}
|
||||
|
||||
.text-wrapper_2 {
|
||||
@ -1199,10 +1265,12 @@ button:active {
|
||||
.box_8 {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
width: 1420px;
|
||||
height: 1106px;
|
||||
width: 90%;
|
||||
max-width: 1420px;
|
||||
height: auto;
|
||||
min-height: 1106px;
|
||||
border: 2px solid rgba(255, 255, 255, 1);
|
||||
margin: 24px 0 0 130px;
|
||||
margin: 24px auto 160px;
|
||||
}
|
||||
|
||||
.text_33 {
|
||||
@ -2403,4 +2471,109 @@ button:active {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.box_4 {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section_1,
|
||||
.section_2 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box_6,
|
||||
.box_8 {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.text_13 {
|
||||
font-size: 24px;
|
||||
margin: 30px auto 0;
|
||||
}
|
||||
|
||||
.text_14 {
|
||||
font-size: 12px;
|
||||
margin: 8px auto 20px;
|
||||
}
|
||||
|
||||
.box_4,
|
||||
.box_6,
|
||||
.box_8 {
|
||||
width: 98%;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.section_1,
|
||||
.section_2 {
|
||||
height: auto;
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 刷新遮罩层样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.page {
|
||||
/* background-color: rgba(255, 255, 255, 1); */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user