diff --git a/package.json b/package.json index 87426ab..da561ea 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,11 @@ "@vueuse/core": "^13.4.0", "@vueuse/motion": "^3.0.3", "axios": "^1.9.0", + "core-js": "^3.45.1", "echarts": "^5.6.0", "element-plus": "^2.10.1", "pinia": "^2.1.7", + "regenerator-runtime": "^0.14.1", "swiper": "^11.2.10", "vue": "^3.5.13", "vue-i18n": "^9.8.0", diff --git a/src/assets/images/logo-mini.png b/src/assets/images/logo-mini.png new file mode 100644 index 0000000..a12c1ec Binary files /dev/null and b/src/assets/images/logo-mini.png differ diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 2151e92..fbf7238 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -3,7 +3,8 @@
@@ -92,6 +93,15 @@ const isActive = (path: string) => { //left: 0; } +.navbar-logo-mini { + display: none; + //width: 72px; + //height: 72px; + //position: absolute; + //top: 0; + //left: 0; +} + // 导航容器（居中） .navbar-container { width: 100%; @@ -162,6 +172,17 @@ const isActive = (path: string) => { @media (max-width: 768px) { .navbar-container { width: 90%; + height: 56px; + .navbar-logo-icon { + display: none; + } + .navbar-logo-mini { + display: inline-block; + } + .navbar-logo { + width: 36px; + height: 36px; + } } } diff --git a/src/main.ts b/src/main.ts index eeade83..f23c56c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,7 @@ // src/main.ts +import 'core-js/stable/structured-clone' // 专门为 structuredClone 打补丁 +import 'regenerator-runtime/runtime' // 若项目用了 async/await，需加这行 + import { ViteSSG } from 'vite-ssg' import { createWebHashHistory } from 'vue-router' import App from './App.vue' diff --git a/src/views/About/About.vue b/src/views/About/About.vue index 8633241..caceb0f 100644 --- a/src/views/About/About.vue +++ b/src/views/About/About.vue @@ -5,18 +5,18 @@ - + - + - + - + - + - - + +
diff --git a/src/views/About/sections/BranchDistribution.vue b/src/views/About/sections/BranchDistribution.vue index cdcc380..f3570e4 100644 --- a/src/views/About/sections/BranchDistribution.vue +++ b/src/views/About/sections/BranchDistribution.vue @@ -275,22 +275,219 @@ watch(activeIndex, () => { position: relative; /* 作为地图的定位容器 */ z-index: 10; /* 父容器层级，控制整体显示优先级 */ } + + diff --git a/src/views/About/sections/CompanyTimeline.vue b/src/views/About/sections/CompanyTimeline.vue index aa11fdb..726b5ce 100644 --- a/src/views/About/sections/CompanyTimeline.vue +++ b/src/views/About/sections/CompanyTimeline.vue @@ -8,6 +8,11 @@
+
@@ -70,7 +75,7 @@ const timelineData = [ padding: 80px 20px; border-top: 50px solid #f5f7fe; text-align: center; - + //height: auto; // 标题区样式 .timeline-header { margin-bottom: 50px; @@ -89,15 +94,23 @@ const timelineData = [ .timeline-section { padding: 50px 0px; margin: 0 192px; - background-image: url('https://images.health.ufutx.com/202506/20/26691a92ed7a9b632cd635c08e35fb17.png'); - background-position: top; - height: 955px; // 固定高度承载绝对定位 - background-size: contain; + //background-image: url('https://images.health.ufutx.com/202506/20/26691a92ed7a9b632cd635c08e35fb17.png'); + //background-position: top; + //background-repeat: no-repeat; + height: auto; // 固定高度承载绝对定位 + //background-size: contain; + position: relative; + .timeline-section-bgImage { + position: absolute; + left: 0; + top: 0; + //background: red; + } // 核心容器：提供定位参考 .timeline-container { position: relative; width: 100%; - height: 100%; + height: 944px; margin: 0 auto; overflow: hidden; // 阶段通用样式 @@ -219,22 +232,101 @@ const timelineData = [ } // 响应式适配（移动端垂直排列） + // 响应式适配（彻底解决高度撑开问题） @media (max-width: 768px) { - .timeline-section { - height: 300px !important; + // 1. 重置最外层容器样式 + .company-timeline { + padding: 40px 16px; + border-top-width: 20px; // 缩小顶部边框，适配移动端 } - .timeline-container { - //height: auto; // 取消固定高度 - padding: 40px 0; - .stage-content { - list-style: none; - padding: 0; - font-size: 18px; - li { - line-height: 13px !important; + + // 2. 关键：彻底取消.timeline-section的固定高度，强制由内容决定 + ::v-deep .timeline-section { + margin: 0 16px !important; + padding: 20px 0 !important; + height: auto !important; /* 强制覆盖桌面端的955px固定高度 */ + min-height: auto !important; /* 清除可能存在的最小高度限制 */ + background-size: 100% auto !important; + background-position: top center !important; + background-repeat: no-repeat !important; + overflow: visible !important; /* 确保内容不被截断 */ + } + + // 3. 重置容器高度，确保继承内容高度 + ::v-deep .timeline-container { + position: relative !important; + width: 100% !important; + height: auto !important; /* 彻底取消100%继承的固定高度 */ + padding: 20px 0 !important; + overflow: visible !important; /* 允许内容撑开高度 */ + display: block !important; /* 确保是块级元素，能计算内容高度 */ + } + + // 4. 阶段元素完全回归文档流，确保参与高度计算 + ::v-deep .timeline-stage { + position: static !important; /* 强制取消绝对定位，必须带!important */ + width: 100% !important; + max-width: 300px !important; + margin: 0 auto 60px !important; /* 增加底部间距，确保内容不重叠 */ + padding: 10px 0 !important; /* 增加内边距，避免内容紧贴 */ + display: grid !important; + justify-items: center !important; + text-align: center !important; + } + + // 5. 隐藏桌面端线条，避免干扰高度 + ::v-deep .stage-0:after, + ::v-deep .stage-1:after, + ::v-deep .stage-2:after, + ::v-deep .stage-3:after { + display: none !important; + } + + // 6. 调整内容样式，确保内容有足够高度 + ::v-deep .stage-period { + font-size: 28px !important; + margin-bottom: 8px !important; + } + + ::v-deep .stage-line { + margin: 0 auto 12px !important; /* 居中显示线条，增加间距 */ + } + + ::v-deep .stage-title { + font-size: 24px !important; + margin: 12px 0 16px !important; /* 增加上下间距，提升高度贡献 */ + } + + ::v-deep .stage-content { + width: 100% !important; + padding: 0 10px !important; /* 增加左右内边距，避免内容过宽 */ + li { + font-size: 14px !important; + line-height: 26px !important; /* 增加行高，确保内容高度 */ + margin-bottom: 8px !important; /* 增加列表项间距 */ + text-align: left !important; + padding-left: 16px !important; + &::before { + content: '·'; + position: absolute; + left: 0; + color: #4b89dc; } } } + + // 7. 标题区适配，避免挤压内容 + .timeline-header { + margin-bottom: 30px !important; + .main-title { + font-size: 24px !important; + margin-bottom: 10px !important; + } + .sub-title { + font-size: 16px !important; + margin-bottom: 0 !important; + } + } } } diff --git a/src/views/About/sections/CompanyValues.vue b/src/views/About/sections/CompanyValues.vue index f9eb035..1a1e5f7 100644 --- a/src/views/About/sections/CompanyValues.vue +++ b/src/views/About/sections/CompanyValues.vue @@ -83,6 +83,7 @@ const handleTabClick = (tab: any) => { diff --git a/src/views/About/sections/QualificationCarousel.vue b/src/views/About/sections/QualificationCarousel.vue index a5c0691..a2296d3 100644 --- a/src/views/About/sections/QualificationCarousel.vue +++ b/src/views/About/sections/QualificationCarousel.vue @@ -265,6 +265,9 @@ const handleClick = (index: number) => { } // 响应式适配 @media (max-width: 768px) { + .qualification { + height: auto; + } .certificate-list { flex-direction: column; gap: 20px; diff --git a/src/views/App/sections/ApplicationScenes.vue b/src/views/App/sections/ApplicationScenes.vue index 35f9174..61ee413 100644 --- a/src/views/App/sections/ApplicationScenes.vue +++ b/src/views/App/sections/ApplicationScenes.vue @@ -262,4 +262,100 @@ const activeTab = ref(scenes.value[0].name) } } } + +/* ------------------- 移动端适配（max-width: 768px） ------------------- */ +@media (max-width: 768px) { + /* 页面整体适配 */ + .app-scenes { + padding: 0 15px; /* 取消192px边距，改为小屏留白 */ + + .app-title { + font-size: 24px; /* 缩小标题字体 */ + line-height: 1.5; + margin: 20px 0; + } + + /* 场景内容区：垂直堆叠 */ + .scenes-content { + flex-direction: column; /* 横向→垂直 */ + padding: 20px 10px; + gap: 20px; /* 缩小间距 */ + + /* 隐藏移动端不需要的装饰伪元素 */ + &:after { + display: none !important; + } + + /* 文字描述区：占满宽度 */ + .scene-desc { + width: 100%; /* 取消600px固定宽度 */ + text-align: left; + padding: 0 5px; + + .speech-title { + font-size: 16px; /* 缩小标题 */ + margin-bottom: 15px; + + .icon { + width: 16px; + height: 16px; + } + } + } + + /* 图片区：占满宽度+限制最大尺寸 */ + .scene-img { + width: 100%; /* 取消600px固定宽度 */ + max-width: 400px; /* 避免大屏手机拉伸 */ + margin: 0 auto; /* 居中 */ + } + } + } + + /* 标签栏：解决溢出+优化交互 */ + .news-tabs { + padding: 30px 0 20px; + + :deep(.el-tabs__header) { + .el-tabs__nav { + gap: 30px; /* 缩小标签间距，避免溢出 */ + overflow-x: auto; /* 允许横向滚动 */ + padding: 0 5px; /* 左右留白 */ + scrollbar-width: none; /* 隐藏火狐滚动条 */ + + &::-webkit-scrollbar { + /* 隐藏Chrome滚动条 */ + display: none; + } + + .el-tabs__item { + font-size: 14px; /* 缩小标签字体 */ + white-space: nowrap; /* 防止标签换行 */ + padding: 0 5px; + } + } + } + + /* 调整下划线位置，避免错位 */ + :deep(.el-tabs__active-bar) { + bottom: -8px !important; + height: 2px; /* 缩小下划线 */ + } + + /* 自定义标签文本适配 */ + .scene-label { + font-size: 14px; + } + } + + /* 列表样式：优化小屏阅读 */ + .speech-content li { + line-height: 28px; /* 略微增加行高，提升可读性 */ + padding-left: 15px; + + &::before { + font-size: 16px; + } + } +} diff --git a/src/views/App/sections/BannerCarousel.vue b/src/views/App/sections/BannerCarousel.vue index 0da455e..62718bf 100644 --- a/src/views/App/sections/BannerCarousel.vue +++ b/src/views/App/sections/BannerCarousel.vue @@ -2,7 +2,7 @@