mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-03-04 00:24:29 +08:00
910 lines
14 KiB
CSS
910 lines
14 KiB
CSS
/**
|
|
|
|
@Name: layuiSimpleBlog - 极简博客模板
|
|
@Author: xuzhiwen
|
|
@Copyright: layui.com
|
|
|
|
*/
|
|
|
|
|
|
/*end-menu-btn*/
|
|
|
|
|
|
|
|
body {
|
|
font: 14px 宋体 Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.w1000 {
|
|
max-width: 1000px !important;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
height: 120px;
|
|
line-height: 120px;
|
|
position: relative;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.header .logo,
|
|
.header .welcome-text,
|
|
.header .nav {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.header .logo {
|
|
left: 65px;
|
|
}
|
|
|
|
.header .logo span {
|
|
display: none;
|
|
}
|
|
|
|
.header .logo img {
|
|
max-width: 120px;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.header .nav {
|
|
left: 250px;
|
|
}
|
|
|
|
.header .nav a {
|
|
color: #3f2863;
|
|
margin: 0 40px;
|
|
}
|
|
|
|
.header .nav a.active {
|
|
color: #ff7f21;
|
|
}
|
|
|
|
.header .welcome-text {
|
|
right: 50px;
|
|
}
|
|
|
|
.header .header-down-nav {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.banner {
|
|
height: 600px;
|
|
width: 100%;
|
|
background: url(../img/banner.jpg) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.banner .cont {
|
|
position: relative;
|
|
}
|
|
|
|
.banner .title {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 152px;
|
|
left: 0;
|
|
}
|
|
|
|
.banner .title h3 {
|
|
font-size: 80px;
|
|
line-height: 88px;
|
|
}
|
|
|
|
.banner .title h4 {
|
|
font-size: 46px;
|
|
}
|
|
|
|
.banner .amount {
|
|
font-size: 18px;
|
|
line-height: 50px;
|
|
color: #ff7f21;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 290px;
|
|
}
|
|
|
|
.banner .text {
|
|
position: relative;
|
|
width: 80px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.banner .text::before {
|
|
position: absolute;
|
|
right: -5px;
|
|
content: '\FF1A';
|
|
}
|
|
|
|
|
|
.content {
|
|
padding: 100px 0 160px 0;
|
|
}
|
|
|
|
.content .cont .title {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.content .cont .title a {
|
|
font-size: 16px;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.content .cont .title .layui-breadcrumb span {
|
|
position: relative;
|
|
top: -1px;
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.content .cont .title a.active,
|
|
.content .cont .title a:hover {
|
|
color: #ff7f21 !important;
|
|
}
|
|
|
|
.content .cont .list-item .layui-fluid {
|
|
padding: 0;
|
|
}
|
|
|
|
.content .cont .list-item .item {
|
|
margin-bottom: 80px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content .cont .list-item .item .img img {
|
|
width: 100%;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont {
|
|
padding-left: 100px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont .go-icon {
|
|
width: 33px;
|
|
height: 11px;
|
|
background: url(../img/jiantou.png) center center no-repeat;
|
|
display: block;
|
|
padding: 10px 0;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont h3 {
|
|
font-size: 24px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont h3 .new-icon {
|
|
width: 36px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: -3px 0 0 10px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont h5 {
|
|
font-size: 12px;
|
|
color: #ff7f21;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont p {
|
|
line-height: 37px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
/* autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
/* autoprefixer: on */
|
|
}
|
|
|
|
.content .review-version {
|
|
padding: 20px;
|
|
border-top: 1px dashed #dddddd;
|
|
}
|
|
|
|
.content .review-version img {
|
|
float: left;
|
|
}
|
|
|
|
.content .review-version .form {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.content .review-version .form .layui-form-item {
|
|
clear: none;
|
|
}
|
|
|
|
.content .review-version .form .layui-input-block {
|
|
margin-left: 70px;
|
|
}
|
|
|
|
.content .review-version .form .layui-input-block .layui-btn {
|
|
width: 100px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background: #ff7f21;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont {
|
|
padding: 40px 0 30px 0;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text {
|
|
padding-left: 70px;
|
|
line-height: 22px;
|
|
color: #333;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text .tit {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text .data {
|
|
float: right;
|
|
}
|
|
|
|
|
|
.footer-wrap {
|
|
border-top: 1px solid #402863;
|
|
}
|
|
|
|
.footer {
|
|
padding: 60px 0 80px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footer .qrcode {
|
|
float: left;
|
|
}
|
|
|
|
.footer .practice-mode {
|
|
position: absolute;
|
|
right: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footer .practice-mode img {
|
|
float: left;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.footer .practice-mode .text {
|
|
color: #3f2863;
|
|
float: left;
|
|
}
|
|
|
|
.footer .practice-mode .text h4 {
|
|
font-size: 20px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.footer .practice-mode .text p {
|
|
line-height: 32px;
|
|
}
|
|
|
|
.footer .practice-mode .text p span {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*whisper*/
|
|
.whisper-content {
|
|
padding: 40px 0 100px 0;
|
|
}
|
|
|
|
.whisper-content .item-box {
|
|
background: #f9f9f9;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.whisper-content .cont {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.whisper-content .cont .item-box .item {
|
|
padding: 50px 46px 20px 54px;
|
|
}
|
|
|
|
.whisper-content .cont .whisper-list .whisper-title {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.whisper-content .cont .whisper-list .whisper-title i {
|
|
position: relative;
|
|
top: 1px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.whisper-content .cont .whisper-list .whisper-title span {
|
|
color: #ff7f21;
|
|
}
|
|
|
|
.whisper-content .cont .whisper-list .whisper-title span.hour {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.whisper-content .whisper-list .text-cont {
|
|
line-height: 24px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list {
|
|
margin-top: 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list .like {
|
|
-webkit-user-select: none;
|
|
-moz-user-focus: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list .like.active {
|
|
color: #ff7f21;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list p {
|
|
float: left;
|
|
cursor: pointer;
|
|
color: #999999;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list p.off {
|
|
float: right;
|
|
-webkit-user-select: none;
|
|
-moz-user-focus: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list p.off span {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.whisper-content .whisper-list .op-list p.like {
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.whisper-content .whisper-list .img-box {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.whisper-content .whisper-list .img-box img {
|
|
float: left;
|
|
margin: 0px 18px 18px 0;
|
|
}
|
|
|
|
.whisper-content .whisper-list .img-box img:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/*end-whisper*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*leacots*/
|
|
.leacots-content .review-version {
|
|
padding: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.leacots-content .review-version .form .layui-form-item {
|
|
clear: both;
|
|
}
|
|
|
|
.leacots-content .item-box {
|
|
background: transparent;
|
|
}
|
|
|
|
.leacots-content .review-version .form {
|
|
margin: 70px 0;
|
|
}
|
|
|
|
.leacots-content .review-version .form textarea {
|
|
border-color: #402760;
|
|
}
|
|
|
|
.leacots-content .review-version .form .layui-input-block {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.leacots-content .review-version .banner-img {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.leacots-content .review-version .volume {
|
|
color: #3f2469;
|
|
}
|
|
|
|
.leacots-content .review-version .volume span {
|
|
padding-left: 30px;
|
|
color: #f37d25;
|
|
}
|
|
|
|
.leacots-content .review-version .list-cont .cont {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*end-leacots*/
|
|
|
|
|
|
|
|
/*details*/
|
|
.details-content .article-cont img {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.details-content .article-cont .title {
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.details-content .article-cont .title h3 {
|
|
font-size: 24px;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.details-content .article-cont .title p {
|
|
padding: 0;
|
|
}
|
|
|
|
.details-content .article-cont .title p.cont-info {
|
|
text-indent: 0;
|
|
}
|
|
|
|
.details-content .article-cont .title p .data {
|
|
margin-right: 26px;
|
|
}
|
|
|
|
.details-content .article-cont .title p .types {
|
|
color: #ff7f21;
|
|
}
|
|
|
|
.details-content .article-cont p {
|
|
line-height: 24px;
|
|
padding: 30px 0 30px 5px;
|
|
color: #333;
|
|
text-indent: 40px;
|
|
}
|
|
|
|
.details-content .article-cont .btn-box {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
/*end-details*/
|
|
|
|
|
|
/*album*/
|
|
.album-content .img-info {
|
|
margin-top: 66px;
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
margin-bottom: 126px;
|
|
}
|
|
|
|
.album-content .img-info img {
|
|
float: left;
|
|
padding-right: 60px;
|
|
}
|
|
|
|
.album-content .img-info .title {
|
|
line-height: 30px;
|
|
margin-top: 124px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.album-content .img-info .title .data {
|
|
color: #ff7f21;
|
|
}
|
|
|
|
.album-content .img-info .title .data span {
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.album-content .img-list {
|
|
overflow: hidden;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.album-content .img-list .item {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.album-content .img-list .layui-laypage {
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.album-content .img-list .space>* {
|
|
padding: 55px;
|
|
}
|
|
|
|
.album-content .img-list .layui-col-space80 {
|
|
padding: 40px;
|
|
}
|
|
|
|
.album-content .img-list .item img {
|
|
width: 100%;
|
|
}
|
|
|
|
.album-content .img-list .cont-text {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.album-content .img-list .cont-text .data {
|
|
line-height: 55px;
|
|
color: #ff7f21;
|
|
}
|
|
|
|
.album-content .img-list .cont-text .briefly {
|
|
line-height: 24px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/*end-album*/
|
|
|
|
|
|
/*about*/
|
|
.about-content {
|
|
background: #faf8fb;
|
|
}
|
|
|
|
.about-content .item {
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.about-content .item h3 {
|
|
font-size: 24px;
|
|
color: #3f2863;
|
|
line-height: 100px;
|
|
}
|
|
|
|
.about-content .item.info .cont {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-content .item.info img {
|
|
float: left;
|
|
height: 220px;
|
|
margin-right: 86px;
|
|
}
|
|
|
|
.about-content .item.info p {
|
|
line-height: 50px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.about-content .item.info p {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.about-content .item.tool .cont-box {
|
|
text-align: center;
|
|
}
|
|
|
|
.about-content .item.tool .cont-box img {}
|
|
|
|
.about-content .item.tool .cont-box p {
|
|
line-height: 56px;
|
|
}
|
|
|
|
.about-content .item.contact .cont {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-content .item.contact .cont img {
|
|
width: 110px;
|
|
height: 110px;
|
|
float: left;
|
|
margin: 0 100px;
|
|
}
|
|
|
|
.about-content .item.contact .cont .text {
|
|
line-height: 36px;
|
|
}
|
|
|
|
/*end-about*/
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
.header .logo {
|
|
left: 20px;
|
|
}
|
|
|
|
.header .nav {
|
|
left: 150px;
|
|
}
|
|
|
|
.header .nav a {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.content .cont .title {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.content .cont .list-item .item .img {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont h3 {
|
|
margin: 15px 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont h5 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont p {
|
|
line-height: 30px;
|
|
}
|
|
|
|
.content .cont .list-item .item .item-cont .go-icon {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.content .cont .list-item .item {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.content {
|
|
padding: 60px 0 60px 0;
|
|
}
|
|
|
|
.whisper-content {
|
|
padding: 0 0 60px 0;
|
|
}
|
|
|
|
.details-content .article-cont .title {
|
|
padding: 0;
|
|
}
|
|
|
|
.details-content .article-cont .title h3 {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
.leacots-content {
|
|
padding: 0 20px 40px 20px;
|
|
}
|
|
|
|
.album-content .img-info img {
|
|
width: 100%;
|
|
padding-right: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.album-content .img-info {
|
|
margin-top: 0px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.album-content .img-list .space>* {
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
.header .nav,
|
|
.header .welcome-text {
|
|
display: none;
|
|
}
|
|
|
|
.banner .amount {
|
|
line-height: 40px;
|
|
}
|
|
|
|
.banner .title {
|
|
top: 245px;
|
|
}
|
|
|
|
.banner .title h3 {
|
|
font-size: 40px;
|
|
line-height: 44px;
|
|
}
|
|
|
|
.banner .title h4 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.footer {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.footer .qrcode {
|
|
float: none;
|
|
margin-bottom: 40px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.footer .practice-mode {
|
|
position: relative;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.banner .title {
|
|
top: 290px;
|
|
left: 20px;
|
|
}
|
|
|
|
.banner .amount {
|
|
left: 20px;
|
|
top: 210px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.whisper-content .cont .item {
|
|
padding: 30px;
|
|
}
|
|
|
|
.whisper-content .cont .item-box .item {
|
|
padding: 30px;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text {
|
|
padding-left: 0;
|
|
line-height: 22px;
|
|
color: #333;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text .tit {
|
|
line-height: 50px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text .tit .name {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.content .review-version .list-cont .cont .text .ct {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.leacots-content .review-version .form {
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.album-content .img-list .space>* {
|
|
padding: 10px;
|
|
}
|
|
|
|
.album-content .img-list .layui-laypage {
|
|
margin: 50px 0 0 0;
|
|
}
|
|
|
|
.album-content .img-list #demo {
|
|
text-align: center;
|
|
}
|
|
|
|
.about-content .item.info img {
|
|
margin-right: 0;
|
|
float: none;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.about-content .item.info p {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.about-content .item {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.about-content .item h3 {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.about-content .item.contact .cont img {
|
|
margin: 0 30px 0 20px;
|
|
}
|
|
|
|
/*menu-btn*/
|
|
.menu {
|
|
width: 50px;
|
|
height: 40px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu:before,
|
|
.menu:after {
|
|
content: "";
|
|
display: block;
|
|
width: 50px;
|
|
height: 6px;
|
|
background: #ff7f21;
|
|
border-radius: 8px;
|
|
position: absolute;
|
|
left: 0;
|
|
-webkit-transition: all 0.15s ease-in-out;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.menu:before {
|
|
top: 0px;
|
|
box-shadow: 0 34px #ff7f21;
|
|
}
|
|
|
|
.menu:after {
|
|
bottom: 17px;
|
|
}
|
|
|
|
.menu.on:before {
|
|
top: 17px;
|
|
box-shadow: none;
|
|
-webkit-transform: rotate(225deg);
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.menu.on:after {
|
|
bottom: 17px;
|
|
-webkit-transform: rotate(135deg);
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
.menu-btn {
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 20px;
|
|
}
|
|
|
|
.header .header-down-nav {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 120px;
|
|
z-index: 2;
|
|
left: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.header .header-down-nav {
|
|
background: #ff7f21;
|
|
}
|
|
|
|
.header .header-down-nav .layui-nav-item a {
|
|
padding: 0 40px;
|
|
}
|
|
|
|
.header .header-down-nav li {
|
|
display: block;
|
|
}
|
|
|
|
.header .header-down-nav li a {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.whisper-content .cont .item img {
|
|
width: 100%;
|
|
}
|
|
} |