@font-face { font-family: "叶根友飘悦飞草2.0"; src: url("fonts/叶根友飘悦飞草2.0.TTF") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "方正粗倩简体"; src: url("fonts/FZCuQian.ttf") format("truetype"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: #ECEBF1; } body { position: relative; width: 1600px; margin: 0 auto; background: #ECEBF1; font-family: "Microsoft YaHei-Regular", Arial, sans-serif; font-weight: Regular; color: #333; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { display: block; border: 0; } .wrap { width: 1600px; margin: 0 auto; } /* ========== 板块1:顶部工具栏 ========== */ .topbar { position: relative; width: 1600px; height: 43px; background: #F7F7F7; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: #555; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .topbar .wrap { position: relative; width: 1600px; height: 100%; } .topbar .welcome-icon { position: absolute; left: 203px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; } .topbar .welcome-text { position: absolute; left: 222px; top: 50%; transform: translateY(-50%); color: #414141; white-space: nowrap; } .topbar .welcome-arrow { position: absolute; left: 380px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; } .topbar .nav { position: absolute; left: 416px; top: 50%; transform: translateY(-50%); color: #414141; } .topbar .nav-arrow { position: absolute; left: 474px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; } .topbar .searchbox { position: absolute; left: 688px; top: 50%; transform: translateY(-50%); display: flex; height: 33px; } .topbar .search-input-wrap { position: relative; width: 228px; height: 33px; } .topbar .searchbox input { width: 228px; height: 33px; padding: 0 8px 0 28px; border: 1px solid #ccc; border-right: 0; font-size: 12px; outline: none; color: #626468; } .topbar .searchbox input::placeholder { color: #626468; } .topbar .search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; pointer-events: none; } .topbar .searchbox button { height: 33px; width: 79px; padding: 0 14px; border: 1px solid #ccc; border-left: 0; background: #F4F4F4; cursor: pointer; font-size: 12px; color: #626468; } .user-info { position: absolute; left: 1046px; top: 50%; transform: translateY(-50%); color: #414141; font-size: 12px; } .topbar .toplinks-link { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 14px; color: #414141; } .topbar .toplinks-link .top-icon { width: 12px; height: 12px; } .topbar .link-exit .top-icon { width: 17px; height: 18px; } .topbar .link-register .top-icon { width: 16px; height: 18px; } .topbar .link-disk .top-icon { width: 16px; height: 15px; } .topbar .link-exit { left: 1164px; } .topbar .link-register { left: 1246px; } .topbar .link-disk { left: 1326px; } .topbar .links-arrow { position: absolute; left: 1388px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; } .topbar .toplinks-link:hover { color: #c00; } /* ========== 板块3:网站头部切图 ========== */ .header-banner { position: relative; width: 100%; } .header-banner img:first-child { width: 100%; } .header-banner .header-logo { position: absolute; left: 199px; right: 1190px; top: 23px; bottom: 313px; width: calc(100% - 1389px); height: calc(100% - 336px); object-fit: contain; } .header-banner .layer-35 { position: absolute; left: 0; bottom: 32px; width: 100%; } .header-banner .layer-35 > img:first-child { display: block; width: 100%; } .header-banner .layer-side-links { position: absolute; left: 1244px; top: 11px; display: flex; flex-direction: column; gap: 7px; } .header-banner .layer-side-item { display: flex; align-items: center; gap: 8px; color: #fff; white-space: nowrap; } .header-banner .layer-side-item img { width: 41px; height: 41px; flex-shrink: 0; } .header-banner .layer-side-item span { font-family: "方正粗倩简体", sans-serif; font-size: 16px; font-weight: normal; font-style: normal; line-height: 1; color: #fff; } .header-banner .layer-35-content { position: absolute; left: 215px; right: 392px; top: 12px; bottom: 0; display: flex; align-items: stretch; color: rgba(255, 255, 255, 0.85); } .header-banner .layer-nav-col { position: relative; flex: 1; min-width: 0; padding: 0 10px; } .header-banner .layer-nav-col:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 8px; width: 1px; height: 70%; background: rgba(180, 190, 210, 0.45); } .header-banner .layer-nav-col h3 { font-family: "叶根友飘悦飞草2.0", cursive; font-size: 24px; font-weight: normal; line-height: 1.2; margin-bottom: 6px; color: rgba(255, 255, 255, 0.95); letter-spacing: 1px; } .header-banner .layer-nav-col ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; row-gap: 2px; } .header-banner .layer-nav-culture ul { grid-template-columns: repeat(3, auto); column-gap: 10px; justify-content: start; } .header-banner .layer-nav-col li a { display: block; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 13px; line-height: 1.6; color: rgba(220, 228, 240, 0.9); white-space: nowrap; } .header-banner .layer-nav-col li a:hover { color: #fff; } /* ========== 板块3 ========== */ .block-3 { position: absolute; top: 489px; left: 50%; transform: translateX(-50%); width: 1200px; height: 105px; background: #FDFDFD; box-sizing: border-box; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; gap: 12px; } .block-3 .block-3-title { width: 1024px; height: 31px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-weight: bold; font-size: 42px; color: #0B408A; line-height: 16px; letter-spacing: 2px; text-align: center; font-style: normal; text-transform: none; white-space: nowrap; overflow: visible; } .block-3 .block-3-subs { display: flex; align-items: center; justify-content: center; gap: 16px; } .block-3 .block-3-subs li { width: 153px; height: 17px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-weight: bold; font-size: 16px; color: #0B408A; line-height: 16px; letter-spacing: 1px; text-align: center; font-style: normal; text-transform: none; white-space: nowrap; } /* ========== 板块4 ========== */ .block-4 { position: absolute; top: 614px; left: 50%; transform: translateX(-50%); width: 1200px; height: 400px; background: #FDFDFD; box-sizing: border-box; z-index: 2; } .block-4 .block-4-logo { position: absolute; top: 2px; right: 21px; width: 64px; height: 61px; z-index: 3; } .block-4 .block-4-carousel { position: absolute; left: 14px; top: 15px; width: 616px; height: 344px; background: #d9d9d9; overflow: hidden; } .block-4 .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .block-4 .carousel-slide.is-active { opacity: 1; z-index: 1; } .block-4 .carousel-slide img { width: 100%; height: 100%; object-fit: cover; background: #c5d0de; } .block-4 .carousel-slide:nth-child(2) img { background: #b7c6d8; } .block-4 .carousel-slide:nth-child(3) img { background: #a8bbd0; } .block-4 .carousel-slide p { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; margin: 0; padding: 0 16px; background: rgba(11, 64, 138, 0.72); color: #fff; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-size: 16px; font-weight: 400; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .block-4 .carousel-btn { position: absolute; top: 50%; z-index: 2; width: 28px; height: 48px; margin-top: -24px; border: 0; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 24px; line-height: 48px; cursor: pointer; } .block-4 .carousel-prev { left: 0; } .block-4 .carousel-next { right: 0; } .block-4 .carousel-dots { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; } .block-4 .carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); cursor: pointer; } .block-4 .carousel-dots button.is-active { background: #fff; } .block-4 .block-4-tabs { position: absolute; left: 666px; top: 25px; display: flex; gap: 8px; } .block-4 .block-4-tab { width: 83px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; } .block-4 .block-4-tab span { width: 100%; height: 22px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-weight: 300; font-size: 16px; color: #7EA3CC; line-height: 22px; text-align: center; font-style: normal; text-transform: none; } .block-4 .block-4-tab.is-active { background: #7EA3CC; } .block-4 .block-4-tab.is-active span { color: #FFFFFF; } .block-4 .block-4-line { position: absolute; left: 659px; top: 66px; width: 523px; height: 1px; background: #6789B0; } .block-4 .block-4-panel { display: none; } .block-4 .block-4-panel.is-active { display: block; } .block-4 .block-4-item { position: absolute; left: 660px; width: 495px; height: 36px; background: #D9D9D9; display: flex; align-items: center; padding-left: 12px; box-sizing: border-box; } .block-4 .block-4-item span { width: 305px; height: 16px; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-weight: 400; font-size: 16px; color: #414141; line-height: 16px; letter-spacing: 1px; text-align: left; font-style: normal; text-transform: none; white-space: nowrap; overflow: hidden; } .block-4 .block-4-item:nth-child(1) { top: 73px; } .block-4 .block-4-item:nth-child(2) { top: 123px; } .block-4 .block-4-item:nth-child(3) { top: 173px; } .block-4 .block-4-item:nth-child(4) { top: 223px; } .block-4 .block-4-item:nth-child(5) { top: 273px; } .block-4 .block-4-item:nth-child(6) { top: 323px; } /* ========== Footer ========== */ .footer { position: relative; width: 100%; height: 522px; background: url("assest/网站底部1600 1.png") center top / 100% 100% no-repeat; margin-top: 540px; box-sizing: border-box; } .footer .footer-link { position: absolute; top: 12px; bottom: 494px; height: 16px; line-height: 16px; font-size: 14px; color: #fff; white-space: nowrap; z-index: 2; } .footer .footer-link-stats { left: 1134px; } .footer .footer-link-login { left: 1219px; } .footer .footer-link:hover { opacity: 0.85; } /* logo 基准:左306 底348 */ .footer .footer-logo { position: absolute; left: 306px; bottom: 348px; width: 237px; height: 41px; } /* 中国人民解放军:紧贴 logo 上方,同宽右对齐 */ .footer .footer-org { position: absolute; left: 306px; bottom: 395px; width: 237px; text-align: right; font-size: 16px; font-weight: bold; color: #222; line-height: 1.2; } /* 左侧说明:紧贴 logo 下方,同宽右对齐 */ .footer .footer-left { position: absolute; left: 306px; top: 184px; width: 237px; text-align: right; } .footer .footer-info { font-size: 12px; color: #333; line-height: 1.85; } /* 竖线:logo 右缘外侧,高度覆盖左右内容 */ .footer .footer-divider { position: absolute; left: 560px; bottom: 160px; width: 1px; height: 300px; background: #9aa3ad; } /* 右侧链接:竖线右侧,与「中国人民解放军」顶齐 */ .footer .footer-right { position: absolute; left: 580px; bottom: 160px; right: 180px; top: 100px; } .footer .footer-row { display: flex; align-items: flex-start; margin-bottom: 6px; font-size: 12px; line-height: 1.75; } .footer .footer-label { flex: 0 0 64px; font-weight: bold; color: #333; white-space: nowrap; } .footer .footer-links { flex: 1; display: flex; flex-wrap: wrap; gap: 0 14px; } .footer .footer-links a { color: #777; white-space: nowrap; } .footer .footer-links a:hover { color: #0b408a; }