feat:优化部分页面问题
This commit is contained in:
parent
63eebcea09
commit
36843fb304
@ -122,13 +122,13 @@ export default {
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 24px;
|
gap: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-column {
|
.footer-column {
|
||||||
flex: 1 1 0;
|
flex: 1 1 auto;
|
||||||
min-width: 0;
|
min-width: 200px;
|
||||||
/* 优化需求:列内整体居中显示(标题+列表与列中心对齐) */
|
/* 优化需求:列内整体居中显示(标题+列表与列中心对齐) */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -139,7 +139,7 @@ export default {
|
|||||||
.footer-title {
|
.footer-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 0 12px;
|
margin: 0 0 12px;
|
||||||
padding-left: 12px;
|
// padding-left: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -152,7 +152,7 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
|
// background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
content: '';
|
content: '';
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|||||||
@ -1078,7 +1078,8 @@ export default {
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
// 标题/副标题 与 搜索框 的间距:再收窄为 12px,符合 Figma 设计
|
// 标题/副标题 与 搜索框 的间距:再收窄为 12px,符合 Figma 设计
|
||||||
gap: var(--home-hero-content-gap-fluid, clamp(8px, 1.2vh, 12px));
|
// gap: var(--home-hero-content-gap-fluid, clamp(8px, 1.2vh, 12px));
|
||||||
|
gap: 36px !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -144,6 +144,10 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.syncTabFromRoute(this.$route.query.type);
|
this.syncTabFromRoute(this.$route.query.type);
|
||||||
this.fetchNewsData();
|
this.fetchNewsData();
|
||||||
|
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('scroll', this.onScroll);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goHomeToNews() {
|
goHomeToNews() {
|
||||||
@ -155,10 +159,8 @@ export default {
|
|||||||
if (index >= 0) this.activeTab = index;
|
if (index >= 0) this.activeTab = index;
|
||||||
},
|
},
|
||||||
switchTab(index) {
|
switchTab(index) {
|
||||||
if (this.activeTab === index) {
|
// 同 tab 直接 no-op(避免无意义的状态抖动)
|
||||||
// 再次点击当前 tab 仍然收起(首次进入除外)
|
if (this.activeTab === index) return;
|
||||||
if (this.bannerCollapsed) return;
|
|
||||||
}
|
|
||||||
this.activeTab = index;
|
this.activeTab = index;
|
||||||
this.bannerCollapsed = true;
|
this.bannerCollapsed = true;
|
||||||
const type = this.newsTabs[index]?.type;
|
const type = this.newsTabs[index]?.type;
|
||||||
@ -174,7 +176,27 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
onPageChange() {
|
onPageChange() {
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
const root = this.getScrollRoot();
|
||||||
|
if (root && root !== window) {
|
||||||
|
root.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
} else {
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onScroll() {
|
||||||
|
// 滚回 banner 顶部时自动展开 banner
|
||||||
|
if (!this.bannerCollapsed) return;
|
||||||
|
const root = this.getScrollRoot();
|
||||||
|
const scrollTop = root === window ? window.scrollY : (root && root.scrollTop) || 0;
|
||||||
|
if (scrollTop <= 8) {
|
||||||
|
this.bannerCollapsed = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getScrollRoot() {
|
||||||
|
// 优先锁定 .content-wrap(main.vue 唯一滚动容器),兜底用 window
|
||||||
|
const portalRoot = document.querySelector('.content-wrap');
|
||||||
|
if (portalRoot) return portalRoot;
|
||||||
|
return window;
|
||||||
},
|
},
|
||||||
handleNewsClick(item) {
|
handleNewsClick(item) {
|
||||||
const link = item.yyLj || item.lj;
|
const link = item.yyLj || item.lj;
|
||||||
|
|||||||
@ -1034,7 +1034,7 @@ body {
|
|||||||
.banner1 {
|
.banner1 {
|
||||||
--qych-section-bg: #f7faf8;
|
--qych-section-bg: #f7faf8;
|
||||||
background: url(../../assets/qych/banner3.png);
|
background: url(../../assets/qych/banner3.png);
|
||||||
background-size: contain;
|
background-size: cover;
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
}
|
}
|
||||||
.banner2 {
|
.banner2 {
|
||||||
@ -1044,7 +1044,7 @@ body {
|
|||||||
.banner3 {
|
.banner3 {
|
||||||
--qych-section-bg: #f0faf2;
|
--qych-section-bg: #f0faf2;
|
||||||
background: url(../../assets/qych/banner1.png);
|
background: url(../../assets/qych/banner1.png);
|
||||||
background-size: contain;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.open-page {
|
.open-page {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user