feat: 20250928
This commit is contained in:
parent
7ee5633d14
commit
f4c896fefd
@ -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",
|
||||
|
||||
BIN
src/assets/images/logo-mini.png
Normal file
BIN
src/assets/images/logo-mini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -3,7 +3,8 @@
|
||||
<div class="navbar-container">
|
||||
<!-- Logo -->
|
||||
<div class="navbar-logo">
|
||||
<img src="@/assets/images/logo.png" alt="友福同享Logo" />
|
||||
<img src="@/assets/images/logo.png" alt="友福同享Logo" class="navbar-logo-icon" />
|
||||
<img src="@/assets/images/logo-mini.png" alt="友福同享Logo" class="navbar-logo-mini" />
|
||||
<!-- <span>友福同享</span>-->
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -5,18 +5,18 @@
|
||||
<!-- 友福同享简介-->
|
||||
<CompanyTimeline />
|
||||
<!-- // 子公司分布-->
|
||||
<!-- <BranchDistribution />-->
|
||||
<BranchDistribution />
|
||||
<!-- 我们重新定义健康未来-->
|
||||
<!-- <RedefineHealth />-->
|
||||
<RedefineHealth />
|
||||
<!-- 应用场景-->
|
||||
<!-- <CompanyValues />-->
|
||||
<CompanyValues />
|
||||
<!-- 资质认证-->
|
||||
<!-- <QualificationCarousel />-->
|
||||
<QualificationCarousel />
|
||||
<!-- 使命与愿景-->
|
||||
<!-- <MissionVision />-->
|
||||
<MissionVision />
|
||||
<!-- 合作伙伴-->
|
||||
<!-- <Partners />-->
|
||||
<!-- <FooterContact />-->
|
||||
<Partners />
|
||||
<!-- <FooterContact />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -275,22 +275,219 @@ watch(activeIndex, () => {
|
||||
position: relative; /* 作为地图的定位容器 */
|
||||
z-index: 10; /* 父容器层级，控制整体显示优先级 */
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.branch-section {
|
||||
background-color: #fff;
|
||||
padding: 50px 192px 50px;
|
||||
border-top: 50px solid #f6f8fe;
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 1200px) {
|
||||
.branch-section {
|
||||
padding: 60px 40px;
|
||||
// 【移动端基础适配】缩小整体内边距和顶部边框
|
||||
@media (max-width: 768px) {
|
||||
padding: 30px 16px; // 小屏仅留16px左右边距
|
||||
border-top-width: 20px; // 减少顶部留白
|
||||
}
|
||||
.branch-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: @font-size-xxl;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
margin-bottom: 10px;
|
||||
|
||||
// 【移动端标题】缩小字体
|
||||
@media (max-width: 768px) {
|
||||
font-size: 24px; // 原xxl（通常32px+）改24px
|
||||
}
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
margin-bottom: 40px;
|
||||
|
||||
// 【移动端副标题】缩小字体+减少底部间距
|
||||
@media (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.branch-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-top: 50px;
|
||||
|
||||
// 【核心】移动端从“左右分栏”改“垂直堆叠”
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column; // 垂直排列
|
||||
align-items: center;
|
||||
margin-top: 20px; // 减少顶部间距
|
||||
}
|
||||
}
|
||||
|
||||
/* 左侧切换区 - 移动端适配 */
|
||||
.branch-left {
|
||||
margin-top: 110px;
|
||||
padding: 16px 16px 16px 0;
|
||||
text-align: left;
|
||||
width: 496px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%; // 占满屏幕宽度
|
||||
margin-top: 0; // 取消顶部大间距
|
||||
padding: 0; // 清除左右内边距
|
||||
}
|
||||
|
||||
.branch-icon {
|
||||
width: 56px;
|
||||
height: 52px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.branch-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs容器 - 移动端关键优化（避免超出屏幕） */
|
||||
.branch-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
background: #f6f8fe;
|
||||
padding: 6px;
|
||||
width: 463px; // 桌面端固定宽度
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%; // 移动端占满宽度
|
||||
gap: 5px; // 缩小tab间距
|
||||
padding: 4px; // 减少内边距
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平移滑块 - 适配移动端Tabs尺寸 */
|
||||
.tab-slider {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
background-color: #165dff;
|
||||
z-index: 1;
|
||||
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
top: 4px; // 与Tabs容器padding匹配
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tab按钮 - 移动端缩小尺寸，避免换行 */
|
||||
.branch-tab {
|
||||
padding: 12px 30px;
|
||||
border-radius: 100px;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 8px 15px; // 大幅减少内边距
|
||||
font-size: 14px; // 缩小字体
|
||||
}
|
||||
|
||||
&.active,
|
||||
.branch-tabs:hover &:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情区 - 移动端缩小字体和行高 */
|
||||
.branch-details {
|
||||
.detail-item {
|
||||
font-size: 20px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 40px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
line-height: 28px; // 减少行高，避免占用过多高度
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
margin-bottom: 1px;
|
||||
vertical-align: middle; // 对齐文字
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧地图区 - 移动端关键适配（高度自适应） */
|
||||
.branch-right {
|
||||
width: 870px;
|
||||
height: 850px; // 桌面端固定高度
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
margin-left: 60px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%; // 占满屏幕宽度
|
||||
height: 300px; // 固定小屏高度（或用min-height: 50vh自适应）
|
||||
margin-left: 0; // 取消左侧间距
|
||||
margin-top: 20px; // 与左侧区域留间距
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板过渡态（768px~1200px）- 补充中间尺寸适配 */
|
||||
@media (min-width: 769px) and (max-width: 1200px) {
|
||||
.branch-section {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
|
||||
.branch-left {
|
||||
margin-bottom: 40px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.branch-tabs {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.branch-right {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,11 @@
|
||||
|
||||
<!-- 时间轴容器（控制曲线、飞机、阶段定位） -->
|
||||
<section class="timeline-section">
|
||||
<img
|
||||
src="https://images.health.ufutx.com/202506/20/26691a92ed7a9b632cd635c08e35fb17.png"
|
||||
class="timeline-section-bgImage"
|
||||
alt=""
|
||||
/>
|
||||
<div class="timeline-container">
|
||||
<!-- 发展阶段 -->
|
||||
<div v-for="(item, index) in timelineData" :key="index" class="timeline-stage" :class="`stage-${index}`">
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -83,6 +83,7 @@ const handleTabClick = (tab: any) => {
|
||||
<style scoped lang="less">
|
||||
/* 基础样式保持不变 */
|
||||
.news-tabs {
|
||||
width: 93vw;
|
||||
padding-top: 50px;
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
@ -193,69 +194,99 @@ const handleTabClick = (tab: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端适配（768px以下） */
|
||||
//@media (max-width: 768px) {
|
||||
// .app-scenes {
|
||||
// //padding: 30px 15px; /* 减小整体内边距 */
|
||||
// .app-title {
|
||||
// font-size: 24px; /* 缩小标题字体 */
|
||||
// line-height: 1.5;
|
||||
// }
|
||||
//
|
||||
// .scenes-content {
|
||||
// flex-direction: column; /* 改为垂直布局 */
|
||||
// //margin: 0 15px; /* 减小左右边距 */
|
||||
// padding: 30px 0px; /* 减小内边距 */
|
||||
// margin: 0;
|
||||
// //padding: 0;
|
||||
// //background: red;
|
||||
// box-sizing: border-box;
|
||||
// //width: 100%;
|
||||
// .scene-desc {
|
||||
// width: 80%; /* 描述占满宽度 */
|
||||
// margin-bottom: 30px; /* 增加与图片的间距 */
|
||||
//
|
||||
// .speech-title {
|
||||
// font-size: 16px; /* 缩小标题字体 */
|
||||
// }
|
||||
//
|
||||
// .speech-subtitle {
|
||||
// font-size: 13px; /* 缩小内容字体 */
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .scene-img {
|
||||
// width: 100%; /* 图片占满宽度 */
|
||||
// //max-width: 400px; /* 限制最大宽度，避免拉伸 */
|
||||
// margin: 0 auto; /* 居中显示 */
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// /* 标签页适配 */
|
||||
// .news-tabs {
|
||||
// padding-top: 30px;
|
||||
// .scene-label {
|
||||
// font-size: 12px;
|
||||
// }
|
||||
// :deep(.el-tabs__nav) {
|
||||
// gap: 20px; /* 减小标签间距，避免溢出 */
|
||||
// overflow-x: auto; /* 允许横向滚动 */
|
||||
// padding: 0 10px; /* 增加左右内边距 */
|
||||
// scrollbar-width: none; /* 隐藏滚动条 */
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// :deep(.el-tabs__item) {
|
||||
// font-size: 14px; /* 缩小标签字体 */
|
||||
// white-space: nowrap; /* 防止标签换行 */
|
||||
// }
|
||||
//
|
||||
// :deep(.el-tabs__active-bar) {
|
||||
// bottom: -8px !important; /* 调整下划线位置 */
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
/* 移动端适配（768px以下，核心优化） */
|
||||
@media (max-width: 768px) {
|
||||
.app-scenes {
|
||||
padding: 30px 15px; /* 缩小整体内边距，避免贴边 */
|
||||
|
||||
.app-title {
|
||||
font-size: 24px; /* 缩小标题字体 */
|
||||
line-height: 1.5; /* 优化行高，避免拥挤 */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scenes-content {
|
||||
flex-direction: column; /* 垂直堆叠布局，替代左右分栏 */
|
||||
margin: 0; /* 取消桌面端192px边距 */
|
||||
padding: 30px 15px; /* 内边距适配小屏 */
|
||||
gap: 20px; /* 描述与图片间距 */
|
||||
|
||||
.scene-desc {
|
||||
width: 100%; /* 占满屏幕宽度 */
|
||||
margin-bottom: 0; /* 取消冗余间距，用gap控制 */
|
||||
|
||||
.speech-title {
|
||||
font-size: 16px; /* 缩小标题 */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.speech-subtitle {
|
||||
font-size: 13px; /* 缩小内容字体 */
|
||||
|
||||
._text {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.5; /* 适配小屏行高 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scene-img {
|
||||
width: 100%; /* 图片占满宽度 */
|
||||
max-width: 400px; /* 限制最大宽度，避免大屏拉伸 */
|
||||
margin: 0 auto; /* 居中显示 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签页核心适配（解决溢出问题） */
|
||||
.news-tabs {
|
||||
padding-top: 20px;
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
.el-tabs__nav {
|
||||
gap: 25px; /* 缩小标签间距，避免溢出 */
|
||||
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; /* 与el-tabs__item字体统一 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板过渡态（769px~1024px）- 避免中间尺寸断裂 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.app-scenes .scenes-content {
|
||||
margin: 0 50px;
|
||||
gap: 30px;
|
||||
|
||||
.scene-desc,
|
||||
.scene-img {
|
||||
width: 45%; /* 左右分栏但缩小宽度 */
|
||||
}
|
||||
}
|
||||
|
||||
.news-tabs :deep(.el-tabs__nav) {
|
||||
gap: 50px; /* 标签间距过渡 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -265,6 +265,9 @@ const handleClick = (index: number) => {
|
||||
}
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.qualification {
|
||||
height: auto;
|
||||
}
|
||||
.certificate-list {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="banner">
|
||||
<div v-motion-fade-visible class="banner-bg">
|
||||
<!-- 替换为实际背景图路径 -->
|
||||
<img src="https://images.health.ufutx.com/202506/13/19ee6e89c397511fef5ba05d9798cc76.png" alt="Banner背景" />
|
||||
<img src="https://images.health.ufutx.com/202509/26/9986d47439b87108c3cbb01ddf2a853d.jpeg" alt="Banner背景" />
|
||||
</div>
|
||||
<div class="news-panel">
|
||||
<div
|
||||
@ -139,6 +139,9 @@ const newsList = [
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
height: auto !important;
|
||||
}
|
||||
.banner-content {
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
@ -151,5 +154,8 @@ const newsList = [
|
||||
padding: 10px 24px;
|
||||
}
|
||||
}
|
||||
.news-panel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -117,4 +117,18 @@
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* -------------- 移动端适配（768px以下）-------------- */
|
||||
@media (max-width: 768px) {
|
||||
.app-promotion {
|
||||
//padding-top: 30px; /* 缩小顶部留白 */
|
||||
.app-download {
|
||||
}
|
||||
.app-item {
|
||||
margin-top: 50px;
|
||||
height: 52px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -253,6 +253,7 @@ const handleSelect = (index: number) => {
|
||||
.device-info {
|
||||
.device-desc {
|
||||
max-width: 100%;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -268,7 +269,7 @@ const handleSelect = (index: number) => {
|
||||
height: 8px;
|
||||
}
|
||||
.nav-text {
|
||||
font-size: @font-size-xs;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,6 +128,7 @@ const openReport = () => {
|
||||
.device-info {
|
||||
.device-desc {
|
||||
max-width: 100%;
|
||||
line-height: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,6 +100,7 @@ const openReport = () => {
|
||||
.speech-info {
|
||||
.speech-desc {
|
||||
max-width: 100%;
|
||||
line-height: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,6 +139,9 @@
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
height: auto !important;
|
||||
}
|
||||
.banner-content {
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
|
||||
@ -139,6 +139,9 @@
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.banner-bg {
|
||||
height: auto !important;
|
||||
}
|
||||
.banner-content {
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
|
||||
@ -231,7 +231,12 @@ const currentIdx = ref(0)
|
||||
//.nav-bar {
|
||||
// gap: 30px;
|
||||
//}
|
||||
|
||||
.text {
|
||||
margin-top: 22px !important;
|
||||
}
|
||||
.desc {
|
||||
line-height: 12px !important;
|
||||
}
|
||||
.content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
@ -38,6 +38,7 @@ const openCooperationDialog = () => {
|
||||
text-align: left;
|
||||
background-image: url('https://images.health.ufutx.com/202506/20/c60d98038ab065c2e92dc67b938d45e2.png');
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
|
||||
.consult-content {
|
||||
max-width: 1066px;
|
||||
@ -64,4 +65,12 @@ const openCooperationDialog = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端适配（768px以下） */
|
||||
@media (max-width: 768px) {
|
||||
.consult-btn {
|
||||
width: 60px !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -197,6 +197,9 @@ const resetHighlight = () => {
|
||||
gap: 20px;
|
||||
.health-item {
|
||||
border-radius: 8px !important;
|
||||
.item-desc {
|
||||
line-height: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sector-img-container {
|
||||
|
||||
@ -142,21 +142,11 @@ const newsList = [
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.banner-bg {
|
||||
width: 120%;
|
||||
height: 830px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.banner {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
@ -169,5 +159,8 @@ const newsList = [
|
||||
padding: 10px 24px;
|
||||
}
|
||||
}
|
||||
.news-panel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -265,4 +265,6 @@ console.log('数组1:', feedbackList[0]) // 例如: [3, 7, 2, 5]
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
//@media (max-width: @tablet-breakpoint) { }
|
||||
</style>
|
||||
|
||||
@ -177,6 +177,9 @@ const selectedIndex = ref(defaultIndex)
|
||||
}
|
||||
|
||||
@media (max-width: @tablet-breakpoint) {
|
||||
.scene-section {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.scene-item {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
|
||||
@ -135,5 +135,15 @@ const openReport = () => {
|
||||
.scene-item {
|
||||
height: 280px;
|
||||
}
|
||||
.app-promotion {
|
||||
//padding-top: 30px; /* 缩小顶部留白 */
|
||||
.app-download {
|
||||
}
|
||||
.app-item {
|
||||
margin-top: 50px;
|
||||
height: 52px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -178,6 +178,9 @@ const newsList = [
|
||||
}
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
height: auto !important;
|
||||
}
|
||||
.banner-content {
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
@ -190,5 +193,8 @@ const newsList = [
|
||||
padding: 10px 24px;
|
||||
}
|
||||
}
|
||||
.news-panel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -160,15 +160,62 @@ onMounted(() => {
|
||||
transform: translateY(-5px); // 描述文字上移
|
||||
}
|
||||
}
|
||||
}
|
||||
/* ------------------- 移动端适配（max-width: 768px） ------------------- */
|
||||
@media (max-width: 768px) {
|
||||
.scene-section {
|
||||
padding-top: 40px; // 减少顶部留白
|
||||
height: auto; // 取消固定高度，内容自适应
|
||||
padding-bottom: 40px; // 增加底部留白，避免内容贴边
|
||||
overflow: visible; // 允许激活态自然显示
|
||||
}
|
||||
|
||||
//@media (max-width: @tablet-breakpoint) {
|
||||
// .scene-list {
|
||||
// grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
// gap: @space-lg;
|
||||
// }
|
||||
// .scene-item {
|
||||
// height: 280px;
|
||||
// }
|
||||
//}
|
||||
// 网格改为单列布局
|
||||
.scene-list {
|
||||
grid-template-columns: 1fr; // 每个item占满宽度
|
||||
gap: 30px; // 增加垂直间距，避免拥挤
|
||||
padding: 0 15px; // 左右小边距，避免贴边
|
||||
max-width: 350px; // 限制最大宽度，避免大屏手机拉伸
|
||||
}
|
||||
|
||||
// 场景项适配
|
||||
.scene-item {
|
||||
// 触摸设备增加点击反馈
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.scene-inner {
|
||||
height: 120px;
|
||||
padding: 15px 0 20px; // 减少内边距
|
||||
|
||||
// 图标缩小，适配小屏
|
||||
.scene-icon {
|
||||
width: 100%;
|
||||
max-width: 200px; // 限制图标最大宽度
|
||||
height: auto; // 保持宽高比，避免拉伸
|
||||
}
|
||||
|
||||
// 名称字体缩小
|
||||
.scene-name {
|
||||
line-height: 12px !important;
|
||||
}
|
||||
|
||||
// 描述优化小屏显示
|
||||
.scene-desc {
|
||||
line-height: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活态：减小位移，避免过度上移
|
||||
&.active .scene-inner {
|
||||
transform: translateY(-20px); // 桌面端-42px → 移动端-20px
|
||||
}
|
||||
|
||||
// 描述最大高度适配小屏
|
||||
&.active .scene-desc {
|
||||
max-height: 80px; // 减少高度，避免占用过多空间
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -139,6 +139,12 @@ const newsList = [
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
height: auto !important;
|
||||
}
|
||||
.news-panel {
|
||||
display: none;
|
||||
}
|
||||
.banner-content {
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user