/* 优化导航显示:居中对齐,均匀分布 */ #c1173335 ul { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important;} #c1173335 ul li { height: 50px !important; line-height: 50px !important; font-size: 20px !important; flex: 1 !important; /* 允许弹性缩放,平分空间 */ min-width: auto !important; /* 移除固定的最小宽度,以防止超出宽度 */ text-align: center !important;} #c1173335 #nav { line-height: 45px !important; font-size: 22px !important; text-align: center !important;} #c1173335 #nav a { font-size: 17px !important; height: 45px !important; line-height: 45px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: inline-block !important; /* 让二级标题可设置padding */ padding: 0 15px !important; /* 左右内边距,适度缩小以适应屏幕 */ text-align: center !important; /* 文字居中 */ vertical-align: top !important;} #c1173335 .link { display: block !important; color: #ffffff !important; font-size: 20px !important; padding: 0 10px !important; /* 左右内边距适当缩小,保证一行放得下 */ white-space: nowrap !important;} #c1173335 .cur { background: #869bae !important;} .vsbcontent-table-container-outer { position: relative;} .vsbcontent-table-container { width: 98%; overflow-y: auto; _overflow: auto; margin: 2px;} .vsbcontent-table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px;} .vsbcontent-table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3);} .vsbcontent-table-container-fade { position: absolute; right: 0; width: 5px; height: 100%; background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff); background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);} /* 容器:接近脚注(#5a7fa1)的半透明磨砂,整体更紧凑 */ #c1173311 { background: rgba(90,127,161,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(70,105,134,0.7); color: #fff; border-radius: 12px; padding: 14px 18px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.15); line-height: 1.5; max-width: 100%; box-sizing: border-box; overflow: hidden;} #c1173311 .links-grid { display: flex; flex-wrap: wrap; /* 超出时允许换行,避免硬撑宽 */ gap: 20px;} #c1173311 .media-col { flex: 0 0 36%; /* 左侧大约 1/3 宽 */ min-width: 260px; box-sizing: border-box;} #c1173311 .friend-col { flex: 1 0 18%; /* 右侧列按内容自适应,初始约五分之一 */ min-width: 180px; /* 足够放下一两个字 */ box-sizing: border-box;} /* 标题 */ #c1173311 .col-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #fff; position: relative;} #c1173311 .col-title::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 32px; height: 3px; background: #cfe6f5; border-radius: 3px;} /* 校园平台(媒体) */ #c1173311 .media-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0;} #c1173311 .media-item { text-align: center; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 8px 6px 10px; transition: .2s;} #c1173311 .media-item:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.22);} #c1173311 .qr-box img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; border-radius: 6px; background: #fff;} #c1173311 .m-title { margin: 6px 0 2px; font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #c1173311 .m-desc { margin: 0; font-size: 11px; color: #e3eff6; line-height: 1.25; min-height: 1.25em;} /* 友情链接列表:每列内部竖排,链接可换行 */ #c1173311 .friend-list { list-style: none; margin: 0; padding: 0;} #c1173311 .friend-list li { float: none !important; display: block; margin: 0 0 6px 0 !important;} #c1173311 .friend-list li a { float: none !important; display: block; width: 100%; /* 关键:每条在本列内占满宽度 */ max-width: 100%; margin: 0; padding: 6px 12px 6px 20px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; font-size: 12.5px; color: #fff; text-decoration: none; white-space: normal; /* 允许换行 */ word-break: break-all; /* 长英文/url 也强制断行 */ overflow-wrap: break-word; position: relative; box-sizing: border-box; transition: .2s;} #c1173311 .friend-list li a::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; background: #cfe6f5; border-radius: 50%; transform: translateY(-50%);} #c1173311 .friend-list li a:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); transform: translateY(-2px);} /* 覆盖公共 .link-list2 a 浮动(防止被老样式拖走) 同时为通用选择器 .vsb-container.mainOne .vsb-space.linkTwo .link-list2 提供同等覆盖,避免全局样式干扰 */ #c1173311 .link-list2 a { float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 6px 0 !important; box-sizing: border-box;} /* ========== 平板:<=960px ========== */ @media (max-width: 960px) { #c1173311 { padding: 16px 14px;} /* 左侧媒体独占一行,右侧三列在下一行换行排布 */ #c1173311 .media-col { flex: 0 0 100%;} #c1173311 .links-grid { gap: 16px;} #c1173311 .media-list { grid-template-columns: repeat(3, minmax(0, 1fr));} } /* ========== 手机:<=640px,彻底防溢出 ========== */ @media (max-width: 640px) { #c1173311 { padding: 12px 10px; border-radius: 0; max-width: 100vw; width: 100vw; margin: 0 auto; box-sizing: border-box; overflow-x: hidden;} #c1173311 .links-grid { flex-direction: column; /* 所有列竖排:媒体 + 三个友链列依次堆叠 */ gap: 12px;} #c1173311 .media-col, #c1173311 .friend-col { flex: 0 0 auto; width: 100%; max-width: 100%;} #c1173311 .media-list { grid-template-columns: repeat(2, minmax(0, 1fr));} #c1173311 .friend-list li a, #c1173311 .link-list2 a { width: 100% !important; max-width: 100% !important; font-size: 14px; border-radius: 18px;} } /* 只约束“联系我们/友情链接”这个组件,不动别的 mainOne —— 在窄屏下,保证整体不比视口宽,并把内部列改为竖排 */ @media (max-width: 960px) { #c1173311 { box-sizing: border-box; width: 100%; max-width: 100vw; margin: 0 auto; overflow-x: hidden;} #c1173311 .links-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 100%;} #c1173311 .col { box-sizing: border-box; width: 100% !important; max-width: 100% !important; float: none !important;} #c1173311 .media-list, #c1173311 .friend-list { box-sizing: border-box; width: 100%; max-width: 100%;} #c1173311 .friend-list li a { display: inline-block; max-width: 100%; white-space: normal; word-break: break-all; overflow-wrap: break-word;} #c1173311 img { max-width: 100%; height: auto;} } /* 更窄手机:再收紧一点 padding,彻底防横向溢出 */ @media (max-width: 640px) { #c1173311 { padding-left: 10px; padding-right: 10px; border-radius: 0;} } /* 联系我们整体放大并居中 */ #c1173311 { font-size: 20px; /* 进一步放大字体 */ padding: 30px 35px; /* 增加内边距 */ margin: 0 auto; /* 自动居中 */ max-width: 1400px; /* 增加最大宽度以放大整体 */ width: 100%; box-sizing: border-box;} /* 栏目标题稍大一点 */ #c1173311 .col-title { font-size: 16px;} /* 左侧"融媒体"文字放大 */ #c1173311 .m-title { font-size: 13px;} #c1173311 .m-desc { font-size: 12px;} /* 右侧链接按钮字体放大一点 */ #c1173311 .friend-list li a { font-size: 13.5px;} /* 小屏时让联系我们区块占满宽度,避免右边空白不一致 */ @media (max-width: 960px) { #c1173311 { max-width: 100% !important; width: 100% !important; margin: 0 !important;} } /* 针对 contact-enlarged 类名的放大和居中样式 */ .contact-enlarged { font-size: 22px !important; /* 放大字体 */ padding: 20px 20px !important; /* 增加内边距 */ margin: 0 auto !important; /* 自动居中 */ max-width: 100% !important; /* 不超过上级组件宽度 */ width: 100% !important; /* 自适应上级组件宽度 */ box-sizing: border-box !important;} .contact-enlarged .links-grid { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; /* 防止换行,保持一行布局 */ gap: 10px !important; /* 减少间隙,让组件更贴合 */ box-sizing: border-box !important;} .contact-enlarged .media-col { flex: 0 0 300px !important; /* 固定左侧列宽度,自适应调整 */ box-sizing: border-box !important;} .contact-enlarged .friend-col { flex: 1 !important; /* 右侧列自适应填充剩余空间 */ box-sizing: border-box !important;} .contact-enlarged .media-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;} .contact-enlarged .col-title { font-size: 20px !important;} .contact-enlarged .m-title { font-size: 16px !important;} .contact-enlarged .m-desc { font-size: 15px !important;} .contact-enlarged .friend-list li a { font-size: 16px !important; /* 进一步放大链接字体 */ padding: 8px 14px 8px 22px !important;} /* 放大联系我们标题 */ .contact-enlarged .Title1 { font-size: 24px !important; /* 放大标题字体 */ height: auto !important; /* 高度自适应 */ padding: 15px 20px !important;} .contact-enlarged .Title1 span { font-size: 24px !important;} /* 使 .contact-enlarged 的外框与外层 .vsb-container.mainOne 宽度对齐 说明:.vsb-space 通常带有左右内边距(如 16px / 12px),此处通过 负边距和等宽扩展来抵消内边距,保证视觉上组件与 .vsb-container 同宽 */ .vsb-container.mainOne > .vsb-space.linkTwo > .link-list2.contact-enlarged, .vsb-container.mainOne .vsb-space.linkTwo .link-list2.contact-enlarged { box-sizing: border-box !important; max-width: none !important; /* 默认假设 .vsb-space 左右内边距为 16px:向左拉 16px,并加回左右共 32px 的宽度 */ width: calc(100% + 32px) !important; margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; /* 保持内部可视填充一致 */ padding-right: 16px !important;} /* 如果页面在小于 960px 时 .vsb-space 使用 12px 内边距,使用对应补偿 */ @media (max-width: 960px) { .vsb-container.mainOne > .vsb-space.linkTwo > .link-list2.contact-enlarged, .vsb-container.mainOne .vsb-space.linkTwo .link-list2.contact-enlarged { width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; padding-left: 12px !important; padding-right: 12px !important;} } /* 极小屏幕下保持不溢出视口 */ @media (max-width: 640px) { .vsb-container.mainOne > .vsb-space.linkTwo > .link-list2.contact-enlarged, .vsb-container.mainOne .vsb-space.linkTwo .link-list2.contact-enlarged { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; overflow-x: hidden !important;} }