Line 29: | Line 29: | ||
/******************** | /******************** | ||
− | + | * 基本 | |
− | + | ********************/ | |
@font-face { | @font-face { | ||
font-family: SourceHanSansCN-Medium; | font-family: SourceHanSansCN-Medium; | ||
Line 190: | Line 190: | ||
} | } | ||
− | .navbar .child-nav .child-item:hover a { | + | .navbar .child-nav .child-item:hover a, |
+ | .navbar .child-nav .child-item.active a { | ||
border-bottom: 3px solid white; | border-bottom: 3px solid white; | ||
} | } | ||
Line 228: | Line 229: | ||
} | } | ||
+ | /*title*/ | ||
.article .title { | .article .title { | ||
font-size: 36px; | font-size: 36px; | ||
line-height: 46px; | line-height: 46px; | ||
color: #4c4c4c; | color: #4c4c4c; | ||
− | margin: 0; | + | margin: 54px 0 44px; |
padding: 0; | padding: 0; | ||
font-weight: normal !important; | font-weight: normal !important; | ||
Line 244: | Line 246: | ||
.article .title.blue { | .article .title.blue { | ||
color: #1f72cc; | color: #1f72cc; | ||
+ | margin: 34px 0 28px; | ||
} | } | ||
+ | /*p*/ | ||
.article p { | .article p { | ||
color: #4c4c4c; | color: #4c4c4c; | ||
− | font-size: | + | font-size: 20px !important; |
line-height: 36px; | line-height: 36px; | ||
margin: 0; | margin: 0; | ||
Line 256: | Line 260: | ||
.article p.align-normal { | .article p.align-normal { | ||
text-align: left; | text-align: left; | ||
+ | } | ||
+ | |||
+ | .article .p-bottom p { | ||
+ | margin-bottom: 28px; | ||
+ | } | ||
+ | |||
+ | /*img-container*/ | ||
+ | .img-container { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .img-container img { | ||
+ | display: block; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .img-container span { | ||
+ | color: #aeaeae; | ||
+ | margin: 12px 18px; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*header*/ | ||
+ | .page-header { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .page-header img { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .page-header h1 { | ||
+ | position: absolute; | ||
+ | bottom: 8%; | ||
+ | left: 12%; | ||
+ | margin: 0; | ||
+ | color: white; | ||
+ | font-size: 44px !important; | ||
+ | letter-spacing: 2px; | ||
} | } | ||
Line 293: | Line 346: | ||
/*abstract*/ | /*abstract*/ | ||
.index-page .abstract { | .index-page .abstract { | ||
− | padding-top: | + | padding-top: 64px; |
} | } | ||
Line 308: | Line 361: | ||
/*promotional*/ | /*promotional*/ | ||
.index-page .promotional { | .index-page .promotional { | ||
− | padding-top: | + | padding-top: 84px; |
padding-bottom: 48px; | padding-bottom: 48px; | ||
} | } | ||
Line 315: | Line 368: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | margin-top: | + | margin-top: 12px; |
} | } |
Revision as of 11:11, 9 September 2021
/********************
* 覆盖 ********************/
- globalWrapper {
font-size: 100%; padding-bottom: 0;
}
- globalWrapper #content {
width: 100%; padding: 0; margin: 0; line-height: inherit;
}
- globalWrapper #content #top_title {
display: none;
}
- bodyContent a[href ^="https://"], .link-https {
background: unset; padding-right: 0;
}
- bodyContent h1, #bodyContent h2 {
margin-bottom: auto;
}
/********************
- 基本
- /
@font-face {
font-family: SourceHanSansCN-Medium; src: url("https://static.igem.org/mediawiki/2021/5/5e/T--Shanghai_Metropolis--font.ttf");
}
- root {
--swiper-container-height: 760px; --gif-logo-height: 100%;
}
body, html {
margin: 0; padding: 0; scroll-behavior: smooth;
}
body {
background-color: white; min-width: 1400px; font-family: SourceHanSansCN-Medium, sans-serif !important;
}
.ev71-content a, .ev71-content a:visited {
text-decoration: none;
}
.ev71-content ul {
list-style: none; margin: 0; padding: 0;
}
.ev71-content ul:after {
content: " "; clear: both; display: table;
}
.ev71-content * {
color: #434343; box-sizing: border-box; font-family: SourceHanSansCN-Medium, sans-serif !important;
}
/*content*/
.ev71-content .content {
width: 1300px; margin: 0 auto;
}
.ev71-content .content-small {
width: 900px; margin: 0 auto;
}
/*Navbar*/
.navbar {
height: 122px; background-color: white; padding: 0 120px; display: flex; align-items: center;
}
.navbar .logo {
width: 54px; height: 62px; display: inline-block; flex-shrink: 0;
}
.navbar .logo img {
width: 100%; height: 100%; object-fit: contain;
}
.navbar .list {
display: block; height: 100%; flex-grow: 1; float: right;
}
.navbar .list .item {
display: inline-block; height: 100%; padding: 0 20px; position: relative; float: right;
}
.navbar .list .item > a {
color: #4c4c4c; font-size: 17px; transition: color 0.3s; padding-top: 4px; height: 100%; display: flex; justify-content: center; align-items: center;
}
.navbar .list .item:after, .navbar .list .item:after {
content: " "; width: 47px; height: 5px; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); background-color: transparent; transition: background-color 0.3s;
}
.navbar .list .item:hover:after, .navbar .list .item.active:after {
background-color: #b3b3b3;
}
.navbar .list .item:hover > a, .navbar .list .item.active > a {
color: #b3b3b3;
}
/*二级*/ .navbar .child-nav {
display: none; background-color: rgba(185, 185, 185, .96); position: absolute; top: 100%; left: -32px; z-index: 9999;
}
.navbar .child-nav .child-list {
padding: 20px 52px; border: 2px solid rgba(255, 255, 255, .96);
}
.navbar .child-nav .child-item {
line-height: 50px;
}
.navbar .child-nav .child-item a {
display: inline-block; color: white !important; border-bottom: 3px solid transparent; word-break: keep-all; white-space: nowrap; height: 42px; font-size: 16px;
}
.navbar .child-nav .child-item:hover a, .navbar .child-nav .child-item.active a {
border-bottom: 3px solid white;
}
.navbar .item:hover .child-nav {
display: inherit;
}
/*Team 避免撑开盒子*/ .navbar .item:first-child:hover .child-nav {
display: inherit; left: -64px;
}
/*footer*/
.footer {
background-color: #F5F5F7; padding-top: 60px; padding-bottom: 38px;
}
.footer hr {
height: 2px;
}
.footer span {
font-size: 14px; display: block; color: #666666; line-height: 24px;
}
/*article*/
.article {
}
/*title*/ .article .title {
font-size: 36px; line-height: 46px; color: #4c4c4c; margin: 54px 0 44px; padding: 0; font-weight: normal !important;
}
.article .title.big {
font-size: 48px; line-height: 56px;
}
.article .title.blue {
color: #1f72cc; margin: 34px 0 28px;
}
/*p*/ .article p {
color: #4c4c4c; font-size: 20px !important; line-height: 36px; margin: 0; text-align: justify;
}
.article p.align-normal {
text-align: left;
}
.article .p-bottom p {
margin-bottom: 28px;
}
/*img-container*/ .img-container {
width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.img-container img {
display: block; max-width: 100%; height: auto;
}
.img-container span {
color: #aeaeae; margin: 12px 18px; font-size: 14px;
}
/*header*/
.page-header {
width: 100%; height: 100%; position: relative;
}
.page-header img {
width: 100%; height: 100%;
}
.page-header h1 {
position: absolute; bottom: 8%; left: 12%; margin: 0; color: white; font-size: 44px !important; letter-spacing: 2px;
}
/********************
* index ********************/
/*gif-logo*/ .index-page .gif-logo {
width: 100%; height: 100%;
}
.index-page .gif-logo img {
width: 100%; height: var(--gif-logo-height); display: block;
}
/*swiper*/ .index-page .swiper-container {
width: 100% !important; height: var(--swiper-container-height) !important;
}
.index-page .swiper-slide {
background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;
}
.index-page .swiper-pagination-bullet {
width: 12px !important; height: 12px !important;
}
/*abstract*/ .index-page .abstract {
padding-top: 64px;
}
.index-page .abstract .bottom {
display: flex;
}
.index-page .abstract .bottom img {
margin-left: 32px; max-width: 400px; height: 100%;
}
/*promotional*/ .index-page .promotional {
padding-top: 84px; padding-bottom: 48px;
}
.index-page .promotional video {
width: 100%; height: 100%; margin-top: 12px;
}