8.10更新
This commit is contained in:
parent
9d430f08ab
commit
cff67aa2b5
@ -1,11 +1,10 @@
|
||||
.news-view-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
overflow-x: clip;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
color: #1f2937;
|
||||
padding: 0 12%;
|
||||
background:
|
||||
radial-gradient(circle at 78% 18%, rgba(236, 72, 153, 0.07) 0%, rgba(236, 72, 153, 0) 32%),
|
||||
radial-gradient(circle at 18% 16%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 36%),
|
||||
@ -13,17 +12,15 @@
|
||||
}
|
||||
|
||||
.news-shell {
|
||||
position: relative;
|
||||
// position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
// max-width: 1280px;
|
||||
// margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.orb {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
filter: blur(110px);
|
||||
@ -60,9 +57,9 @@
|
||||
}
|
||||
|
||||
.news-hero {
|
||||
position: relative;
|
||||
// position: relative;
|
||||
padding: 140px 0 72px;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
.news-hero::before {
|
||||
@ -98,6 +95,8 @@
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: left;
|
||||
margin: 0 ;
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
@ -201,9 +200,8 @@
|
||||
.news-featured,
|
||||
.news-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
@ -260,19 +258,11 @@
|
||||
|
||||
.news-featured-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.news-featured-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
|
||||
.news-featured-img,
|
||||
.news-item-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -295,8 +285,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
padding: 24px 40px;
|
||||
}
|
||||
|
||||
@ -501,22 +489,13 @@
|
||||
.news-hero {
|
||||
padding: 120px 0 56px;
|
||||
}
|
||||
|
||||
|
||||
.hero-title-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.news-featured-inner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.news-featured-img {
|
||||
width: 100%;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
border-radius: 20px;
|
||||
@ -527,11 +506,16 @@
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.news-featured-inner,
|
||||
.news-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.news-featured-img {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.news-featured-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ import 'xterm/css/xterm.css'
|
||||
// import 'lib-flexible/flexible'
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
import '@/assets/less/news/news.less'
|
||||
|
||||
import globalMixin from '@/mixin/globalMixin'; // 替换为实际的文件路径
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import store from '@/store'
|
||||
import { scheduleHomePageLayoutReset, resetHomePageLayout } from '@/utils/resetHomePageLayout'
|
||||
|
||||
const HOME_ROUTE_RE = /^\/(homePage|ncmatchHome)(\/|$)/
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
import GpuProduct from '@/views/product/productHome/capitalOnline/productItem/GpuProduct/index.vue'
|
||||
@ -2621,18 +2618,10 @@ const router = createRouter()
|
||||
|
||||
// 在beforeRouteLeave导航守卫中清空面包屑状态
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (HOME_ROUTE_RE.test(to.path) || HOME_ROUTE_RE.test(from.path)) {
|
||||
resetHomePageLayout()
|
||||
}
|
||||
// 清空面包屑状态的代码
|
||||
// store.commit('tagsView/resetBreadcrumbState');
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach((to) => {
|
||||
if (!HOME_ROUTE_RE.test(to.path)) return
|
||||
scheduleHomePageLayoutReset()
|
||||
window.setTimeout(() => scheduleHomePageLayoutReset(), 900)
|
||||
})
|
||||
|
||||
window.addEventListener('beforeunload', function() {
|
||||
// 清空面包屑状态的代码
|
||||
store.commit('tagsView/resetBreadcrumbState')
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
// 官网 shell：html/body 不滚动，仅 #homeOut 内部纵向滚动，彻底避免 SPA 跳转后 scrollLeft 残留
|
||||
|
||||
html.home-page-shell-active,
|
||||
body.home-page-shell-active {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
html.home-page-shell-active #app,
|
||||
body.home-page-shell-active #app {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.home-page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.home-page-shell > #topBox,
|
||||
.home-page-shell > #topBox.top-nav,
|
||||
#topBox.top-nav {
|
||||
flex: 0 0 auto;
|
||||
min-width: 0 !important;
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.home-page-shell #homeOut {
|
||||
flex: 1 1 auto;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
overscroll-behavior-x: none;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.home-page-shell .home-route-stage,
|
||||
.home-page-shell .home-router-view {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-page-shell .home-router-view > * {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-page-shell .train-page,
|
||||
.home-page-shell .agent-store-page,
|
||||
.home-page-shell .jd-homepage,
|
||||
.home-page-shell .product-service-page,
|
||||
.home-page-shell .news-view-page,
|
||||
.home-page-shell .about-page,
|
||||
.home-page-shell .home-main-page {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.home-page-shell .about-page,
|
||||
.home-page-shell .about-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-page-shell .grid-bg {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.home-page-shell .product-service-page.single-product-page {
|
||||
height: auto !important;
|
||||
min-height: calc(100vh - 82px);
|
||||
overflow-y: visible !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.home-page-shell .nav-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.home-page-shell .news-shell {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-page-shell .news-featured-inner {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.home-page-shell .news-featured-body {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-page-shell .news-featured,
|
||||
.home-page-shell .news-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.home-page-shell .footer {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -1,182 +0,0 @@
|
||||
const HOME_SHELL_CLASS = 'home-page-shell-active'
|
||||
const RESET_TARGETS = [
|
||||
'.home-page-shell',
|
||||
'#homeOut',
|
||||
'.home-route-stage',
|
||||
'.home-router-view'
|
||||
]
|
||||
|
||||
let scrollLockBound = false
|
||||
let homeOutObserver = null
|
||||
|
||||
function attachHomeOutScrollListener() {
|
||||
const homeOut = getHomeOut()
|
||||
if (!homeOut || homeOut.dataset.scrollLockBound === '1') return
|
||||
homeOut.dataset.scrollLockBound = '1'
|
||||
homeOut.addEventListener('scroll', lockHomeOutHorizontalScroll, { passive: true })
|
||||
}
|
||||
|
||||
export function enableHomePageBodyScroll() {
|
||||
document.documentElement.classList.add(HOME_SHELL_CLASS)
|
||||
document.body.classList.add(HOME_SHELL_CLASS)
|
||||
bindHomeOutScrollLock()
|
||||
bindHomeOutResizeObserver()
|
||||
attachHomeOutScrollListener()
|
||||
}
|
||||
|
||||
export function disableHomePageBodyScroll() {
|
||||
document.documentElement.classList.remove(HOME_SHELL_CLASS)
|
||||
document.body.classList.remove(HOME_SHELL_CLASS)
|
||||
if (homeOutObserver) {
|
||||
homeOutObserver.disconnect()
|
||||
homeOutObserver = null
|
||||
}
|
||||
}
|
||||
|
||||
function getHomeOut() {
|
||||
return document.getElementById('homeOut')
|
||||
}
|
||||
|
||||
function getHomeScroller() {
|
||||
return getHomeOut() || document.documentElement
|
||||
}
|
||||
|
||||
function clearInlineLayoutStyles(element) {
|
||||
if (!element || !element.style) return
|
||||
element.style.removeProperty('width')
|
||||
element.style.removeProperty('max-width')
|
||||
element.style.removeProperty('min-width')
|
||||
element.style.removeProperty('transform')
|
||||
element.style.removeProperty('margin-left')
|
||||
element.style.removeProperty('left')
|
||||
}
|
||||
|
||||
function resetElementScroll(element, resetVertical = true) {
|
||||
if (!element) return
|
||||
element.scrollLeft = 0
|
||||
if (resetVertical) {
|
||||
element.scrollTop = 0
|
||||
}
|
||||
}
|
||||
|
||||
function resetScrollableDescendants(root) {
|
||||
if (!root || !root.querySelectorAll) return
|
||||
root.querySelectorAll('*').forEach((element) => {
|
||||
if (element.scrollLeft) {
|
||||
element.scrollLeft = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function lockHomeOutHorizontalScroll() {
|
||||
const homeOut = getHomeOut()
|
||||
if (!homeOut) return
|
||||
|
||||
if (homeOut.scrollLeft !== 0) {
|
||||
homeOut.scrollLeft = 0
|
||||
}
|
||||
|
||||
resetElementScroll(document.documentElement, false)
|
||||
resetElementScroll(document.body, false)
|
||||
|
||||
if (window.scrollX !== 0) {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
export function resetHomePageLayout(resetVertical = true) {
|
||||
const homeOut = getHomeOut()
|
||||
|
||||
RESET_TARGETS.forEach((selector) => {
|
||||
document.querySelectorAll(selector).forEach((element) => {
|
||||
resetElementScroll(element, resetVertical)
|
||||
clearInlineLayoutStyles(element)
|
||||
})
|
||||
})
|
||||
|
||||
if (homeOut) {
|
||||
resetElementScroll(homeOut, resetVertical)
|
||||
clearInlineLayoutStyles(homeOut)
|
||||
resetScrollableDescendants(homeOut)
|
||||
}
|
||||
|
||||
resetElementScroll(document.documentElement, resetVertical)
|
||||
resetElementScroll(document.body, resetVertical)
|
||||
window.scrollTo(0, 0)
|
||||
lockHomeOutHorizontalScroll()
|
||||
}
|
||||
|
||||
export function scheduleHomePageLayoutReset(resetVertical = true) {
|
||||
attachHomeOutScrollListener()
|
||||
resetHomePageLayout(resetVertical)
|
||||
window.requestAnimationFrame(() => resetHomePageLayout(resetVertical))
|
||||
window.setTimeout(() => resetHomePageLayout(resetVertical), 0)
|
||||
window.setTimeout(() => resetHomePageLayout(resetVertical), 80)
|
||||
window.setTimeout(() => resetHomePageLayout(resetVertical), 200)
|
||||
window.setTimeout(() => resetHomePageLayout(resetVertical), 500)
|
||||
window.setTimeout(() => resetHomePageLayout(resetVertical), 900)
|
||||
}
|
||||
|
||||
export function scrollHomeSection(id, offset = 82) {
|
||||
const homeOut = getHomeOut()
|
||||
const element = document.getElementById(id)
|
||||
if (!element) return false
|
||||
|
||||
lockHomeOutHorizontalScroll()
|
||||
|
||||
if (homeOut) {
|
||||
const top = element.getBoundingClientRect().top - homeOut.getBoundingClientRect().top + homeOut.scrollTop - offset
|
||||
homeOut.scrollTo({
|
||||
left: 0,
|
||||
top: Math.max(top, 0),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
return true
|
||||
}
|
||||
|
||||
const top = element.getBoundingClientRect().top + window.pageYOffset - offset
|
||||
window.scrollTo({
|
||||
left: 0,
|
||||
top: Math.max(top, 0),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
return true
|
||||
}
|
||||
|
||||
export function bindHomeOutScrollLock() {
|
||||
if (scrollLockBound) return
|
||||
scrollLockBound = true
|
||||
|
||||
document.addEventListener('scroll', (event) => {
|
||||
if (!document.body.classList.contains(HOME_SHELL_CLASS)) return
|
||||
if (event.target === getHomeOut()) {
|
||||
lockHomeOutHorizontalScroll()
|
||||
}
|
||||
}, true)
|
||||
|
||||
window.addEventListener('resize', () => scheduleHomePageLayoutReset(true), { passive: true })
|
||||
}
|
||||
|
||||
export function bindHomeOutResizeObserver() {
|
||||
if (homeOutObserver || typeof ResizeObserver === 'undefined') return
|
||||
|
||||
homeOutObserver = new ResizeObserver(() => {
|
||||
if (!document.body.classList.contains(HOME_SHELL_CLASS)) return
|
||||
lockHomeOutHorizontalScroll()
|
||||
})
|
||||
|
||||
const observe = () => {
|
||||
const homeOut = getHomeOut()
|
||||
if (homeOut) homeOutObserver.observe(homeOut)
|
||||
}
|
||||
|
||||
observe()
|
||||
window.setTimeout(observe, 0)
|
||||
}
|
||||
|
||||
export const bindHomeHorizontalScrollLock = bindHomeOutScrollLock
|
||||
export const bindHomeOutHorizontalScrollLock = bindHomeOutScrollLock
|
||||
|
||||
export function getHomeScrollContainer() {
|
||||
return getHomeScroller()
|
||||
}
|
||||
@ -205,13 +205,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
|
||||
export default {
|
||||
name: 'HomeAbout',
|
||||
mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
methods: {
|
||||
moveCardGlow(event) {
|
||||
const card = event.currentTarget
|
||||
|
||||
@ -10,8 +10,10 @@
|
||||
}
|
||||
|
||||
.grid-bg {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
|
||||
|
||||
@ -87,7 +87,6 @@
|
||||
|
||||
<script>
|
||||
import Talk from '@/views/homePage/dialog/talk/index.vue'
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
|
||||
export default {
|
||||
name: 'AgentStore',
|
||||
@ -137,9 +136,6 @@ export default {
|
||||
return result
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
methods: {
|
||||
setMainTab(tab) {
|
||||
this.activeMainTab = tab
|
||||
|
||||
@ -259,7 +259,6 @@ import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
|
||||
import { setLocale } from '@/i18n'
|
||||
import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'
|
||||
import LoginDialog from '@/views/LoginDialog/LoginDialog.vue'
|
||||
import { scheduleHomePageLayoutReset, scrollHomeSection } from '@/utils/resetHomePageLayout'
|
||||
|
||||
const LOCALE_KEY = 'kboss-locale'
|
||||
const SUPPORTED_LOCALES = ['zh-CN', 'en-US']
|
||||
@ -462,18 +461,8 @@ export default Vue.extend({
|
||||
// =========================
|
||||
navigateTo(path) {
|
||||
this.closeProductPanelImmediate()
|
||||
this.blurActiveElement()
|
||||
if (this.$route.path === path) {
|
||||
scheduleHomePageLayoutReset()
|
||||
return
|
||||
}
|
||||
this.$router.push(path).then(() => {
|
||||
scheduleHomePageLayoutReset()
|
||||
}).catch(() => {})
|
||||
},
|
||||
blurActiveElement() {
|
||||
const active = document.activeElement
|
||||
if (active && typeof active.blur === 'function') active.blur()
|
||||
if (this.$route.path === path) return
|
||||
this.$router.push(path).catch(() => {})
|
||||
},
|
||||
goHome() {
|
||||
this.closeProductPanelImmediate()
|
||||
@ -482,16 +471,21 @@ export default Vue.extend({
|
||||
},
|
||||
goHomeAnchor(id) {
|
||||
this.closeProductPanelImmediate()
|
||||
this.blurActiveElement()
|
||||
const scrollToTarget = (attempt = 0) => {
|
||||
if (scrollHomeSection(id)) return
|
||||
const target = document.getElementById(id)
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
return true
|
||||
}
|
||||
if (attempt < 30) {
|
||||
window.setTimeout(() => scrollToTarget(attempt + 1), 100)
|
||||
}
|
||||
return false
|
||||
}
|
||||
const startScroll = () => window.setTimeout(() => scrollToTarget(), 120)
|
||||
if (this.$route.path.includes('/homePage/index')) {
|
||||
this.$nextTick(startScroll)
|
||||
this.$nextTick(() => {
|
||||
window.setTimeout(() => scrollToTarget(), 80)
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$router.push({ path: '/homePage/index', query: { anchor: id } }).catch(() => {})
|
||||
@ -501,8 +495,6 @@ export default Vue.extend({
|
||||
this.$router.push({
|
||||
path: '/homePage/tokenMarket',
|
||||
query: { category: 'TOKEN市集', single: '1' }
|
||||
}).then(() => {
|
||||
scheduleHomePageLayoutReset()
|
||||
}).catch(() => {})
|
||||
},
|
||||
async goYuanjing() {
|
||||
@ -929,19 +921,8 @@ export default Vue.extend({
|
||||
line-height: 82px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: #1e6fff;
|
||||
box-shadow: inset 0 -2px 0 #1e6fff;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #1e6fff;
|
||||
|
||||
@ -1,19 +1,12 @@
|
||||
<template>
|
||||
<div class="home-page-shell">
|
||||
<div id="homeOut" class="homeOut">
|
||||
<TopBox id="topBox"></TopBox>
|
||||
|
||||
<div id="homeOut" class="homeOut">
|
||||
<div class="home-route-stage">
|
||||
<div class="home-router-view">
|
||||
<router-view
|
||||
:key="$route.fullPath"
|
||||
@hook:mounted="handleChildRouteMounted"
|
||||
@hook:updated="handleChildRouteMounted"
|
||||
></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer-->
|
||||
<div class="footer">
|
||||
<div class="home-router-view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<!-- footer-->
|
||||
<div class="footer">
|
||||
<div class="footer-main">
|
||||
<div class="footer-brand-col">
|
||||
<img
|
||||
@ -103,20 +96,12 @@
|
||||
<!-- </span>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import TopBox from "@/views/homePage/components/topBox/index.vue";
|
||||
import {mapGetters, mapState} from "vuex";
|
||||
import '@/styles/home-page-shell.scss'
|
||||
import {
|
||||
disableHomePageBodyScroll,
|
||||
enableHomePageBodyScroll,
|
||||
scheduleHomePageLayoutReset,
|
||||
scrollHomeSection
|
||||
} from '@/utils/resetHomePageLayout'
|
||||
|
||||
export default Vue.extend({
|
||||
name: "indexLast",
|
||||
@ -263,39 +248,43 @@ export default Vue.extend({
|
||||
|
||||
},
|
||||
mounted() {
|
||||
enableHomePageBodyScroll()
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
beforeDestroy() {
|
||||
disableHomePageBodyScroll()
|
||||
this.scrollToRouteAnchor()
|
||||
},
|
||||
watch: {
|
||||
'$route.fullPath'() {
|
||||
scheduleHomePageLayoutReset()
|
||||
this.$nextTick(() => {
|
||||
const anchor = this.$route.query.anchor
|
||||
if (anchor && this.$route.path.includes('/homePage/index')) {
|
||||
window.setTimeout(() => {
|
||||
scrollHomeSection(anchor)
|
||||
}, 120)
|
||||
return
|
||||
}
|
||||
scheduleHomePageLayoutReset()
|
||||
if (this.scrollToRouteAnchor()) return
|
||||
this.scrollHomeToTop()
|
||||
window.setTimeout(this.scrollHomeToTop, 0)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChildRouteMounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
this.$nextTick(() => {
|
||||
scheduleHomePageLayoutReset()
|
||||
})
|
||||
scrollToRouteAnchor() {
|
||||
const anchor = this.$route.query.anchor
|
||||
if (!anchor || !this.$route.path.includes('/homePage/index')) return false
|
||||
window.setTimeout(() => {
|
||||
this.scrollToElementWithRetry(anchor)
|
||||
}, 120)
|
||||
return true
|
||||
},
|
||||
resetHomeLayout() {
|
||||
scheduleHomePageLayoutReset()
|
||||
scrollToElementWithRetry(id, attempt = 0) {
|
||||
const element = document.getElementById(id)
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
return true
|
||||
}
|
||||
if (attempt < 30) {
|
||||
window.setTimeout(() => this.scrollToElementWithRetry(id, attempt + 1), 100)
|
||||
}
|
||||
return false
|
||||
},
|
||||
scrollHomeToTop() {
|
||||
scheduleHomePageLayoutReset()
|
||||
const container = this.$el
|
||||
if (container) container.scrollTop = 0
|
||||
window.scrollTo(0, 0)
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.scrollTop = 0
|
||||
},
|
||||
goOut(url){
|
||||
window.open(url)
|
||||
@ -305,7 +294,13 @@ export default Vue.extend({
|
||||
this.$router.push(path)
|
||||
},
|
||||
scrollToElement(id) {
|
||||
scrollHomeSection(id)
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth', // 平滑滚动
|
||||
block: 'start', // 滚动到顶部对齐（可选：'start', 'center', 'end', 'nearest'）
|
||||
});
|
||||
}
|
||||
},
|
||||
clickBaseMenu(menu) {
|
||||
console.log("emnu", menu)
|
||||
@ -361,67 +356,46 @@ export default Vue.extend({
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.homeOut {
|
||||
flex: 1 1 auto;
|
||||
//padding-top: 60px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: auto !important;
|
||||
// background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%);
|
||||
}
|
||||
|
||||
.home-route-stage {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#topBox {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
#topBox{
|
||||
// height: 82px;
|
||||
background: transparent!important;
|
||||
background-color: transparent!important;
|
||||
box-shadow: none!important;
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
.home-router-view {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 38px 0 22px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background: #f1f3f7;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
width: 1400px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 38px;
|
||||
padding: 0 24px 32px;
|
||||
padding: 0 0 32px;
|
||||
border-bottom: 1px solid rgba(122, 130, 160, 0.22);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -560,8 +534,7 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.footer-record__text {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
width: 1400px;
|
||||
margin: 18px 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -174,7 +174,6 @@ import Vue from 'vue'
|
||||
import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch, reqHomepageProductCategory, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
|
||||
export default Vue.extend({
|
||||
name: "mainPage",
|
||||
@ -187,9 +186,6 @@ export default Vue.extend({
|
||||
created() {
|
||||
this.getHomepageProductCategory()
|
||||
},
|
||||
mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
boxLoading: false,
|
||||
|
||||
@ -570,9 +570,9 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-main-page {
|
||||
min-height: 100vh;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #f0f7ff !important;
|
||||
background-image: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%) !important;
|
||||
color: #111827;
|
||||
@ -642,7 +642,7 @@ body.dark-theme .bg-orb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 24px 96px;
|
||||
padding: 120px 5% 96px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
@ -756,7 +756,7 @@ body.dark-theme .bg-orb {
|
||||
|
||||
.ai-solution-section {
|
||||
position: relative;
|
||||
padding: 60px 24px 110px;
|
||||
padding: 60px 5% 110px;
|
||||
scroll-margin-top: 90px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
@ -1153,7 +1153,7 @@ body.dark-theme .bg-orb {
|
||||
|
||||
.case-section {
|
||||
position: relative;
|
||||
padding: 96px 24px 112px;
|
||||
padding: 96px 5% 112px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -1359,7 +1359,7 @@ body.dark-theme .bg-orb {
|
||||
|
||||
.news-section {
|
||||
position: relative;
|
||||
padding: 96px 24px 112px;
|
||||
padding: 96px 5% 112px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -35,7 +35,6 @@
|
||||
|
||||
<script>
|
||||
import { reqNewsDetail } from '@/api/newsapi/newsapi'
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
|
||||
export default {
|
||||
name: 'NewsDetail',
|
||||
@ -73,12 +72,19 @@ export default {
|
||||
window.setTimeout(this.scrollToTop, 0)
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
methods: {
|
||||
scrollToTop() {
|
||||
scheduleHomePageLayoutReset()
|
||||
window.scrollTo(0, 0)
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.scrollTop = 0
|
||||
const scrollContainers = [
|
||||
document.querySelector('.homeOut'),
|
||||
document.querySelector('.home-router-view'),
|
||||
document.querySelector('#app')
|
||||
].filter(Boolean)
|
||||
scrollContainers.forEach((container) => {
|
||||
container.scrollTop = 0
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.$router.push('/homePage/news')
|
||||
|
||||
@ -107,7 +107,6 @@
|
||||
|
||||
<script>
|
||||
import { reqNewsList } from '@/api/newsapi/newsapi'
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
export default {
|
||||
name: 'NewsView',
|
||||
data() {
|
||||
@ -158,12 +157,6 @@ export default {
|
||||
created() {
|
||||
this.getNewsList()
|
||||
},
|
||||
mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
activated() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
methods: {
|
||||
goAbout() {
|
||||
this.$router.push('/homePage/about')
|
||||
@ -281,12 +274,12 @@ export default {
|
||||
this.newsList = []
|
||||
this.total = 0
|
||||
this.$message.error(this.$t('newsView.loadFail'))
|
||||
} finally {
|
||||
this.$nextTick(() => {
|
||||
scheduleHomePageLayoutReset()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import url('../../../assets/less/news/news.less');
|
||||
</style>
|
||||
|
||||
@ -102,8 +102,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
|
||||
export default {
|
||||
name: 'TrainPlatform',
|
||||
data() {
|
||||
@ -131,9 +129,6 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
},
|
||||
methods: {
|
||||
handleStart() {
|
||||
this.$message.info('开始使用训推平台')
|
||||
|
||||
@ -11,8 +11,10 @@
|
||||
}
|
||||
|
||||
.grid-bg {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
|
||||
|
||||
@ -223,7 +223,6 @@
|
||||
<script>
|
||||
import { reqNavList, reqNewHomeSync, reqNewHomeFestival } from "@/api/newHome";
|
||||
import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
|
||||
import { scheduleHomePageLayoutReset } from '@/utils/resetHomePageLayout'
|
||||
|
||||
const getImageUrlPrefix = () => {
|
||||
const origin = window.location.origin
|
||||
@ -355,12 +354,8 @@ export default {
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
scheduleHomePageLayoutReset()
|
||||
await this.loadNavData()
|
||||
this.initializeDefaultData()
|
||||
this.$nextTick(() => {
|
||||
scheduleHomePageLayoutReset()
|
||||
})
|
||||
await this.loadNavData();
|
||||
this.initializeDefaultData();
|
||||
},
|
||||
methods: {
|
||||
// 判断当前一级分类是否为 TOKEN 市集，后续用于切换独立渲染逻辑。
|
||||
@ -917,9 +912,11 @@ export default {
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
&.single-product-page {
|
||||
min-height: calc(100vh - 82px);
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding: 82px 0 0;
|
||||
background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.product-content {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user