diff --git a/txw-mhzc-web/src/pages/index/assets/home-cta-group7-2x.png b/txw-mhzc-web/src/pages/index/assets/home-cta-group7-2x.png new file mode 100644 index 0000000..33b0d63 Binary files /dev/null and b/txw-mhzc-web/src/pages/index/assets/home-cta-group7-2x.png differ diff --git a/txw-mhzc-web/src/pages/index/styles/mobile-adaptation.less b/txw-mhzc-web/src/pages/index/styles/mobile-adaptation.less index 5aeadcd..a52a0cf 100644 --- a/txw-mhzc-web/src/pages/index/styles/mobile-adaptation.less +++ b/txw-mhzc-web/src/pages/index/styles/mobile-adaptation.less @@ -437,6 +437,10 @@ } .portal-page .bottom-box { + width: 100% !important; + max-width: none !important; + margin-left: 0 !important; + margin-right: 0 !important; height: auto !important; min-height: 280px !important; overflow: visible !important; @@ -452,8 +456,10 @@ .portal-page .bottom-box-bg { left: 0 !important; top: 0 !important; + min-width: 0 !important; width: 100% !important; height: 100% !important; + transform: none !important; object-fit: cover; object-position: center center; } diff --git a/txw-mhzc-web/src/pages/index/views/home2/assets/Group 7.png b/txw-mhzc-web/src/pages/index/views/home2/assets/Group 7.png new file mode 100644 index 0000000..33b0d63 Binary files /dev/null and b/txw-mhzc-web/src/pages/index/views/home2/assets/Group 7.png differ diff --git a/txw-mhzc-web/src/pages/index/views/home2/index.vue b/txw-mhzc-web/src/pages/index/views/home2/index.vue index 8f1b3d9..96ff68f 100644 --- a/txw-mhzc-web/src/pages/index/views/home2/index.vue +++ b/txw-mhzc-web/src/pages/index/views/home2/index.vue @@ -304,23 +304,21 @@ - +
-
-
-
-

立刻获取碳身份证

-

让中国的每一个碳都拥有独一无二的可信数字身份

-
- -
-
+
@@ -2576,9 +2574,16 @@ export default { } } -/* CTA 全宽铺满视口 */ +/* CTA:全屏宽(用父宽推算左右负边距,避免 50vw± 在全屏滚动下出现竖线色差) */ .portal-page .bottom-box { - .home-section-bleed(); + position: relative; + width: 100vw; + max-width: none; + margin-left: ~"calc(-1 * ((100vw - 100%) / 2))"; + margin-right: ~"calc(-1 * ((100vw - 100%) / 2))"; + border: none; + outline: none; + box-shadow: none; box-sizing: border-box; } @@ -2590,7 +2595,7 @@ export default { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; - background-color: @home-color-footer-bg; + background-color: #f5fbf7; display: block; overflow: hidden; margin: 0; @@ -2598,23 +2603,38 @@ export default { isolation: isolate; } -/* 背景向下外扩,裁掉素材底边留白 */ +/* 无字背景图:保留右侧背景层次,不需要遮罩 */ .bottom-box-bg { position: absolute; - left: -12%; - top: -8%; - width: 124%; - height: 118%; - max-width: none; + left: 50%; + top: 50%; + width: 100%; + min-width: 100%; + height: 102%; + transform: translate(-50%, -50%); display: block; object-fit: cover; - object-position: center bottom; - z-index: 0; - pointer-events: none; + object-position: center center; user-select: none; + border: 0; + outline: none; } -/* 底边与页脚过渡,消除 1~2px 露白 */ +/* 透明点击热区:覆盖设计稿中“申请服务”按钮区域,保持视觉不变但可点击 */ +.bottom-box-cta-hotspot { + position: absolute; + z-index: 2; + left: 54.6%; + top: 56.3%; + width: 25.2%; + height: 13.6%; + border: 0; + border-radius: 8px; + background: transparent; + cursor: pointer; +} + +/* 底边与页脚过渡 */ .bottom-box::after { position: absolute; left: 0; @@ -2629,7 +2649,7 @@ export default { .bottom-box-inner { position: relative; - z-index: 1; + z-index: 2; display: flex; align-items: center; justify-content: flex-end; @@ -2644,14 +2664,18 @@ export default { .bottom-box-copy { position: relative; - top: auto; - right: auto; + z-index: 1; display: flex; flex-direction: column; align-items: flex-start; + flex: 0 1 @home-cta-copy-width; width: @home-cta-copy-width; - max-width: 100%; + max-width: 40%; gap: @home-cta-head-to-btn-gap; + padding: 16px 8px; + margin: 0; + background: transparent; + border-radius: 0; box-sizing: border-box; } @@ -2670,8 +2694,9 @@ export default { font-weight: @home-font-weight-semibold; line-height: @home-cta-title-line-height; text-align: left; - color: var(--home-title-color); + color: @home-color-primary-dark; white-space: nowrap; + text-shadow: none; } .bottom-box-desc { @@ -2681,9 +2706,10 @@ export default { font-weight: @home-font-weight-regular; line-height: @home-cta-subtitle-line-height; text-align: left; - color: var(--home-title-color); + color: @home-color-primary-dark; max-width: @home-cta-copy-width; white-space: normal; + text-shadow: none; } .bottom-box-btn { @@ -2702,9 +2728,9 @@ export default { line-height: @home-line-height-22; text-align: center; cursor: pointer; - backdrop-filter: blur(@home-blur-sm); - transition: transform 0.25s ease, box-shadow 0.25s ease; box-sizing: border-box; + -webkit-font-smoothing: antialiased; + transition: transform 0.25s ease, box-shadow 0.25s ease; &:hover { transform: translateY(-2px); @@ -2716,6 +2742,16 @@ export default { margin-top: 0; } +/* 按 1:1 还原整图时,关闭代码绘制的右侧文案层 */ +.bottom-box-inner, +.bottom-box-copy, +.bottom-box-head, +.bottom-box-content-title, +.bottom-box-desc, +.bottom-box-btn { + display: none; +} + @media (max-width: 767px) { /* 容器调整 */ @@ -3009,7 +3045,7 @@ export default { padding: 12px; } - /* 底部 CTA:移动端内容居中,背景不左偏裁切 */ + /* 底部 CTA:移动端内容居中 */ .bottom-box { min-height: 300px; height: auto; @@ -3019,17 +3055,27 @@ export default { .bottom-box-bg { left: 0; top: 0; + min-width: 0; width: 100%; height: 100%; + transform: none; object-fit: cover; object-position: center center; } + .bottom-box-cta-hotspot { + left: 10%; + top: 62%; + width: 80%; + height: 12%; + } + .bottom-box-inner { align-items: center; justify-content: center; min-height: 300px; height: auto; + max-width: 100%; padding: 40px var(--home-section-px, 16px) 48px; box-sizing: border-box; } @@ -3037,9 +3083,13 @@ export default { .bottom-box-copy { width: 100%; max-width: 100%; - padding: 0; + flex: none; + padding: 0 12px; + margin-left: 0; gap: 20px; align-items: center; + border-radius: 0; + background: transparent; } .bottom-box-head { diff --git a/txw-mhzc-web/src/pages/index/views/search/index.vue b/txw-mhzc-web/src/pages/index/views/search/index.vue index efc1921..034fa3a 100644 --- a/txw-mhzc-web/src/pages/index/views/search/index.vue +++ b/txw-mhzc-web/src/pages/index/views/search/index.vue @@ -2,7 +2,6 @@
-

搜索碳资产、企业、服务

一站式碳信息搜索平台,快速定位所需内容

@@ -165,12 +164,10 @@ import searchApi from '@/pages/index/api/search.js'; export default { name: 'SearchPage', - components: { - Footer, - }, data() { return { keyword: '', + currentCategory: 'all', selectedCategory: 'all', categoryOptions: [ { label: '全部分类', value: 'all' }, @@ -376,7 +373,7 @@ export default { // 搜索英雄区域 .search-hero { position: relative; - background: linear-gradient(135deg, #007242 0%, #009a29 50%, #00b96b 100%); + background: #f5f7fa; padding: 80px 20px 60px; overflow: hidden; @@ -388,20 +385,10 @@ export default { right: 0; bottom: 0; background: url('~@/pages/index/assets/home-top-bg1.jpg') center/cover no-repeat; - opacity: 0.3; + opacity: 1; } } -.hero-bg-overlay { - opacity: 0.5; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(180deg, rgba(0, 114, 66, 0.9) 0%, rgba(0, 154, 41, 0.85) 100%); -} - .hero-content { position: relative; z-index: 1; diff --git a/txw-mhzc-web/src/pages/index/views/tzzx/index.vue b/txw-mhzc-web/src/pages/index/views/tzzx/index.vue index a8aba6e..47dcc6a 100644 --- a/txw-mhzc-web/src/pages/index/views/tzzx/index.vue +++ b/txw-mhzc-web/src/pages/index/views/tzzx/index.vue @@ -21,8 +21,7 @@ import { isAllowedIframeMessageOrigin, } from '@/pages/index/utils/tzzx-iframe'; -/** 视口降级时 iframe 高度 = 视口高度 - 该偏移(预留顶栏/底边距) */ -const VIEWPORT_HEIGHT_OFFSET = 100; +// 视口降级时高度使用 CSS 变量 --page-offset-top(与 main.vue 顶部固定栏保持一致) export default { name: 'tzzx', @@ -53,7 +52,7 @@ export default { } return { ...base, - height: `calc(100vh - ${VIEWPORT_HEIGHT_OFFSET}px)`, + height: 'calc(100dvh - var(--page-offset-top))', minHeight: '480px', }; },