437 lines
7.5 KiB
CSS
437 lines
7.5 KiB
CSS
@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: 14px;
|
|
line-height: 1.6;
|
|
color: rgba(220, 228, 240, 0.9);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-banner .layer-nav-col li a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/* ========== 大标题区 ========== */
|
|
.headline-box {
|
|
position: absolute;
|
|
top: 489px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 1200px;
|
|
height: 105px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.headline-box .headline-main {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #0b408a;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.headline-box .headline-subs {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px 16px;
|
|
}
|
|
|
|
.headline-box .headline-subs li {
|
|
font-size: 16px;
|
|
color: #0b408a;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ========== Footer ========== */
|
|
.footer {
|
|
width: 100%;
|
|
background: #1a4a8a;
|
|
color: #fff;
|
|
padding: 30px 0;
|
|
margin-top: 120px;
|
|
}
|
|
|
|
.footer .wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.footer-left h4 {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer-left p {
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
color: #c8d4e8;
|
|
}
|
|
|
|
.footer-right {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: #c8d4e8;
|
|
line-height: 1.8;
|
|
}
|