From cff67aa2b5096ed2eda4f575d086b83a0188fe95 Mon Sep 17 00:00:00 2001 From: hrx <18603305412@163.com> Date: Mon, 10 Aug 2026 16:18:30 +0800 Subject: [PATCH] =?UTF-8?q?8.10=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- f/web-kboss/src/assets/less/news/news.less | 66 +++---- f/web-kboss/src/main.js | 1 - f/web-kboss/src/router/index.js | 15 +- f/web-kboss/src/styles/home-page-shell.scss | 140 -------------- f/web-kboss/src/utils/resetHomePageLayout.js | 182 ------------------ .../src/views/homePage/about/index.vue | 5 - .../src/views/homePage/agentStore/agent.css | 4 +- .../src/views/homePage/agentStore/index.vue | 4 - .../homePage/components/topBox/index.vue | 41 ++-- f/web-kboss/src/views/homePage/indexLast.vue | 131 +++++-------- .../src/views/homePage/mainPage/OPC/index.vue | 4 - .../src/views/homePage/mainPage/index.vue | 12 +- .../src/views/homePage/news/NewsDetail.vue | 16 +- .../src/views/homePage/news/newsView.vue | 15 +- .../views/homePage/trainPlatform/index.vue | 5 - .../views/homePage/trainPlatform/train.css | 4 +- .../src/views/product/allProduct/index.vue | 13 +- 17 files changed, 122 insertions(+), 536 deletions(-) delete mode 100644 f/web-kboss/src/styles/home-page-shell.scss delete mode 100644 f/web-kboss/src/utils/resetHomePageLayout.js diff --git a/f/web-kboss/src/assets/less/news/news.less b/f/web-kboss/src/assets/less/news/news.less index d66c293..9d7ba55 100644 --- a/f/web-kboss/src/assets/less/news/news.less +++ b/f/web-kboss/src/assets/less/news/news.less @@ -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; } diff --git a/f/web-kboss/src/main.js b/f/web-kboss/src/main.js index 58e0453..384c4fb 100644 --- a/f/web-kboss/src/main.js +++ b/f/web-kboss/src/main.js @@ -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'; // 替换为实际的文件路径 diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js index 8e21726..0af589b 100644 --- a/f/web-kboss/src/router/index.js +++ b/f/web-kboss/src/router/index.js @@ -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') diff --git a/f/web-kboss/src/styles/home-page-shell.scss b/f/web-kboss/src/styles/home-page-shell.scss deleted file mode 100644 index f53027a..0000000 --- a/f/web-kboss/src/styles/home-page-shell.scss +++ /dev/null @@ -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; -} diff --git a/f/web-kboss/src/utils/resetHomePageLayout.js b/f/web-kboss/src/utils/resetHomePageLayout.js deleted file mode 100644 index 4295f12..0000000 --- a/f/web-kboss/src/utils/resetHomePageLayout.js +++ /dev/null @@ -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() -} diff --git a/f/web-kboss/src/views/homePage/about/index.vue b/f/web-kboss/src/views/homePage/about/index.vue index d26c4e0..e8ce698 100644 --- a/f/web-kboss/src/views/homePage/about/index.vue +++ b/f/web-kboss/src/views/homePage/about/index.vue @@ -205,13 +205,8 @@ + + diff --git a/f/web-kboss/src/views/homePage/trainPlatform/index.vue b/f/web-kboss/src/views/homePage/trainPlatform/index.vue index 1d9190a..9c8db32 100644 --- a/f/web-kboss/src/views/homePage/trainPlatform/index.vue +++ b/f/web-kboss/src/views/homePage/trainPlatform/index.vue @@ -102,8 +102,6 @@