mirror of
https://gitee.com/dromara/sa-token.git
synced 2024-12-02 11:57:40 +08:00
160 lines
6.8 KiB
CSS
160 lines
6.8 KiB
CSS
/* ================================== 内容 ====================================== */
|
|
/* 总 */
|
|
*{margin: 0px; padding: 0px;}
|
|
body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica Neue","Arial,sans-serif";}
|
|
.s-width{width: 1000px; margin: auto;}
|
|
/* 栏目标题 */
|
|
.s-title{color: #000; margin-top: 90px; margin-bottom: 50px;}
|
|
/* 解释性文字 */
|
|
.re-text{color: #4e6e8e;}
|
|
/* 分割线 */
|
|
.s-fenge{width: 80%; margin: auto; border-top: 1px #ddd solid;}
|
|
|
|
/* -------- header头部 --------- */
|
|
.s-header{height: 70px; border: 0px #000 solid; position: fixed; width: 100%;}
|
|
.s-header{background-color: #FFF; color: #000; z-index: 99999; box-shadow: 0 1px 3px rgba(26,26,26,0.1);}
|
|
/* logo部分 */
|
|
.logo-box {margin-top: 10px; margin-left: 30px; cursor: pointer; color: #000; float: left;}
|
|
.logo-box img {width: 50px; height: 50px; vertical-align: middle;}
|
|
.logo-box .logo-text {display: inline-block;vertical-align: middle; font-size: 22px;font-weight: 400;}
|
|
/* 小章鱼 */
|
|
.github-corner svg{color: #fff; fill: var(--theme-color, #42b983); height: 80px; width: 80px;}
|
|
/* 右边导航 */
|
|
.nav-right{float: right; line-height: 70px; padding-right: 4.5em; white-space: nowrap;}
|
|
.nav-right a{padding: 0px 1em; color: #34495E; text-decoration: none; transition: all 0.2s;}
|
|
.nav-right a:hover{color: #42B983;}
|
|
|
|
/* -------- 海报部分 --------- */
|
|
.main-box{width: 100%; min-height: 100vh;; /* height: 80vh; */ text-align: center; background-image: url(https://oss.dev33.cn/sa-token/home-bg.jpg); }
|
|
.main-box{display: flex; align-items: center; text-align: center; }
|
|
.fenge{min-height: 90px;}
|
|
.content-box{color: #000; flex: 1;}
|
|
.content-box h1{font-size: 100px; font-weight: 400; position: relative; margin-top: 40px; /* margin-top: 15vh; */}
|
|
.content-box h1 small{font-size: 18px; position: absolute; bottom: 10px; margin-left: 5px; font-weight: 100;}
|
|
/* .title-logo{width: 221px; cursor: pointer; transition: all 0.2s;}
|
|
.title-logo:hover{transform: scale(1.2, 1.2);} */
|
|
|
|
.sub-title{font-size: 22px; font-weight: 400; margin-top: 30px; margin-bottom: 25px; color: #6a8bad; color: #444;}
|
|
/* .content-box p{line-height: 30px; padding: 0px 1em;} */
|
|
|
|
.main-box{animation: changes 60s 0.2s linear infinite normal; background-attachment: ;} /* normal | alternate */
|
|
@keyframes changes {
|
|
from {background-position: 0vw 0%;}
|
|
to {background-position: -100vw 0%;}
|
|
}
|
|
|
|
/* 几个按钮 */
|
|
.btn-box{margin-top: 50px; margin-bottom: 40px;}
|
|
.btn-box a{border: 1px #42B983 solid; border-radius: 2em; box-sizing: border-box; color: #3eaf7c; display: inline-block;transition: all 0.1s;}
|
|
.btn-box a{font-size: 14px; background-color: rgba(0,255,0,0.04); letter-spacing: 1px; padding: 1em 2em; margin: 0 0.5em; margin-bottom: 14px; text-decoration: none; }
|
|
/* 最后一个加深底色 */
|
|
.btn-box a:last-child {color: #fff; background-color: #42B983; border: 1px green solid;}
|
|
.btn-box a:hover{/* transform: scale(1.05, 1.05); */padding: 1em 2.3em; margin: 0 0.2em;}
|
|
|
|
/* 按钮发光动画 */
|
|
.btn-box a:last-child{animation: bganimation 3s infinite;}
|
|
@keyframes bganimation{
|
|
0%{box-shadow: 0 0 1px #42B983;}
|
|
50%{box-shadow: 0 0 20px #42B983;}
|
|
100%{box-shadow: 0 0 20px #FFF;}
|
|
}
|
|
/* 微信二维码 */
|
|
.wx-qr-box{margin-top: 50px;}
|
|
.qr-item{display: inline-block;}
|
|
.qr-item p{font-size: 12px; padding: 0 0.5em;}
|
|
/* .qr-item a{color: #42B983;} */
|
|
.wx-qr{width: 150px;}
|
|
.wx-qr-box p{margin-top: 10px; color: #666; margin-bottom: 20px;}
|
|
.wx-qr,.dro-qr{cursor: pointer;}
|
|
|
|
/* -------- 支持特性 --------- */
|
|
.feature-z{padding: 0em 1em; padding-top: 0px; padding-bottom: 60px; text-align: center; color: #000;}
|
|
.feature-z .s-title{font-size: 30px; font-weight: 400; margin-top: 70px; margin-bottom: 40px;}
|
|
.feature-z{color: rgb(128, 128, 128); text-align: center; box-sizing: border-box; line-height: 24px; font-size: 16px;}
|
|
|
|
.feature-box{margin-top: 40px; margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: flex-start;}
|
|
.feature{border: 0px #000 solid; flex: 1; min-width: 33%; max-width: 33%; text-align: left; padding: 1.5em 1.2em; box-sizing: border-box;}
|
|
.feature h2{font-size: 24px; color: #000; font-weight: 400;}
|
|
.feature p{margin-top: 14px; font-size: 16px; color: #4e6e8e;}
|
|
|
|
/* -------- 使用公司 --------- */
|
|
.com-box-f{padding: 1em 1em; padding-bottom: 30px; text-align: center;}
|
|
.com-box-f h2{font-size: 30px; color: #000; font-weight: 400;}
|
|
.com-box{display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 50px; justify-content: flex-start;}
|
|
.com-box a{flex: 1; display: block; cursor: pointer; border: 0px #ddd solid;}
|
|
.com-box a{min-width: 17%; max-width: 18%; margin: 5px; line-height: 100px;}
|
|
.com-box a img{transition: all 0.2s; vertical-align: middle; min-width: 60%; max-width: 100%; max-height: 100%;}
|
|
.com-box a img:hover{transform: scale(1.05, 1.05);}
|
|
.com-box-you a img:hover{transform: none;}
|
|
|
|
/* -------- 友情链接 --------- */
|
|
.com-box-you a{min-width: 13%; max-width: 14%; line-height: 60px; height: 60px; margin: 10px;}
|
|
.com-box-you a img{min-width: 60%; max-width: 100%; vertical-align: middle; max-height: 100%;}
|
|
|
|
/* -------- 底部 - 连接 --------- */
|
|
#footer{background-color: #181818;}
|
|
#footer h3{font-weight: 400; font-size: 16px; color: #ccc; margin-top: 20px; margin-bottom: 20px;}
|
|
#footer{border-top: 1px #666 solid;}
|
|
.footer-r-b{display: flex; padding: 40px 0;}
|
|
.ss-box{display: inline-block; flex: 1; color: #595959; margin: 0 50px; font-size: 14px;}
|
|
.ss-box a{color: #595959; text-decoration: none;}
|
|
.ss-box a:hover{color: #EEE; text-decoration: underline;}
|
|
.ss-box ul{margin: 0; padding: 0;}
|
|
.ss-box li{list-style: none; line-height: 28px;}
|
|
|
|
/* -------- 底部 - 版权 --------- */
|
|
.foot-box{background-color: #000; color: #ddd; padding: 2em 0px; line-height: 28px; overflow: hidden; position: relative; z-index: 100;}
|
|
.foot-box{border-top: 0px #666 solid;}
|
|
.foot-box p{text-indent: 1em;}
|
|
.foot-box b{font-size: 1.1em;}
|
|
.foot-box a{color: #ddd; font-size: 0.9em;}
|
|
.foot-box a:hover{text-decoration: underline;}
|
|
|
|
|
|
|
|
/* -------- 自适应 --------- */
|
|
/* 媒体查询 */
|
|
@media screen and (max-width: 800px) {
|
|
|
|
.s-title{padding: 0 16px;}
|
|
.s-width{width: 100%;}
|
|
|
|
.logo-box,.copyright {display: none;}
|
|
.main-box{ height: auto;}
|
|
.content-box{ padding: 2em 1em;}
|
|
.content-box h1{font-size: 50px;}
|
|
|
|
.feature-z{padding: 0em;}
|
|
.feature{min-width: 100%;}
|
|
|
|
.com-box-f{padding: 0em;}
|
|
.com-box a{min-width: 90%;}
|
|
|
|
.footer-r-b{display: block;}
|
|
.ss-box{display: block; width: 90%; margin: 0px; padding-left: 1.5em;}
|
|
|
|
/* .s-header{position: static;} */
|
|
footer{position: static; line-height: 40px;}
|
|
}
|
|
|
|
@media screen and (min-width: 1700px) {
|
|
.content-box h1{margin-top: 120px;}
|
|
}
|
|
|
|
|
|
/* 闪光背景 */
|
|
/* .main-box{
|
|
background-size: 500%;
|
|
background-image: linear-gradient(125deg,#BFFEBE,#F6F8B5,#FCD0B3,#BFB6F8,#E8D8B3);
|
|
animation: bganimation 15s infinite;
|
|
}
|
|
@keyframes bganimation{
|
|
0%{background-position: 0% 50%;}
|
|
50%{background-position: 100% 50%;}
|
|
100%{background-position: 0% 50%;}
|
|
} */
|
|
|
|
|
|
|
|
|