优化性能和轮播图;

This commit is contained in:
2022-03-19 00:18:31 +08:00
parent 370a6cdc4d
commit 4fda375028
5 changed files with 274 additions and 219 deletions

View File

@@ -1,220 +1,230 @@
.main-container {
margin-top: 15px;
margin-top: 15px;
}
.nav-left-container {
margin-top: 15px;
margin-top: 15px;
}
.nav-left-list {
text-align: center;
text-align: center;
}
.nav-left-list a {
display: block;
padding: 10px 15px;
border-radius: 5px;
margin: 5px 20px;
display : block;
padding : 10px 15px;
border-radius: 5px;
margin : 5px 20px;
}
.nav-left-list a:hover, .nav-left-list a.current {
background-color: #6699CC;
color: #fff;
.nav-left-list a:hover,
.nav-left-list a.current {
background-color: #6699CC;
color : #fff;
}
.logo {
text-align: center;
text-align: center;
}
.logo img {
max-width: 60%;
max-width: 60%;
}
.session {
margin-top: 15px;
background-color: #99CCFF;
padding: 15px;
margin-top : 15px;
background-color: #99CCFF;
padding : 15px;
}
.session.border {
border-top: 2px solid #6699CC;
border-top: 2px solid #6699CC;
}
.session .header {
font-size: 18px;
font-weight: 600;
color: #036;
font-size : 18px;
font-weight: 600;
color : #036;
}
.search-container {
display: flex;
display: flex;
}
.layui-btn {
background-color: #6699CC;
background-color: #6699CC;
}
.nav-more-list a {
display: inline-block;
white-space: nowrap;
color: #036;
margin-right: 15px;
margin-top: 15px;
display : inline-block;
white-space : nowrap;
color : #036;
margin-right: 15px;
margin-top : 15px;
}
.session .info p {
margin: 5px 0;
margin: 5px 0;
}
#banner img {
width: 100%;
width: 100%;
}
.tab-list {
border-bottom: 1px solid #ddd;
margin-top: 15px;
font-size: 16px;
border-bottom: 1px solid #ddd;
margin-top : 15px;
font-size : 16px;
}
.tab-list a {
margin-right: 15px;
border-bottom: 2px solid transparent;
padding-bottom: 10px;
display: inline-block;
margin-right : 15px;
border-bottom : 2px solid transparent;
padding-bottom: 10px;
display : inline-block;
}
.tab-list a.current {
border-color: #6699CC;
border-color: #6699CC;
}
.post-item, .plus-post-item {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
.post-item,
.plus-post-item {
display : flex;
justify-content: flex-start;
align-items : center;
margin-top : 15px;
padding-bottom : 15px;
border-bottom : 1px solid #ddd;
}
.post-item>div:nth-child(2) {
width: calc(100% - 160px);
width: calc(100% - 160px);
}
.post-item .poster, .plus-post-item .poster {
width: 160px;
height: 100px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: 15px;
.post-item .poster,
.plus-post-item .poster {
width : 160px;
height : 100px;
background-size : cover;
background-position: center;
background-repeat : no-repeat;
margin-right : 15px;
}
.plus-post-item .poster {
width: 60px;
height: 60px;
width : 60px;
height: 60px;
}
.plus-post-item .title {
font-size: 14px;
font-size: 14px;
}
.post-item .info .title {
font-size: 20px;
line-height: 1.3;
margin-bottom: 4px;
font-weight: 700;
max-height: 52px;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
font-size : 20px;
line-height : 1.3;
margin-bottom : 4px;
font-weight : 700;
max-height : 52px;
display : -webkit-box;
-webkit-line-clamp: 2;
overflow : hidden;
text-overflow : ellipsis;
}
.post-item .info .desc {
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color: #999;
margin : 0 0 8px;
font-size : 13px;
line-height: 24px;
color : #999;
}
.post-item .info .plus-info {
margin-top: 5px;
margin-top: 5px;
}
.nodata {
margin: 60px auto;
display: block;
width: 40%;
margin : 60px auto;
display: block;
width : 40%;
}
.content-container .title {
font-size: 34px;
font-weight: 700;
line-height: 44px;
color: #222;
font-size : 34px;
font-weight: 700;
line-height: 44px;
color : #222;
}
.content-container .info {
margin-top: 12px;
font-size: 13px;
color: #777;
margin-top: 12px;
font-size : 13px;
color : #777;
}
.content-container .info span{
margin-right: 5px;;
.content-container .info span {
margin-right: 5px;
;
}
.content-container .desc {
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color: #999;
margin-top: 15px;
margin : 0 0 8px;
font-size : 13px;
line-height: 24px;
color : #999;
margin-top : 15px;
}
.content-container .jump-container {
margin-top: 15px;
margin-top: 15px;
}
@media screen and (max-width: 768px) {
.nav-left-list {
text-align: left;
}
.nav-left-list a {
display: inline-block;
margin: 5px;
}
.post-item .poster, .plus-post-item .poster {
width: 80px;
height: 60px;
}
.post-item>div:nth-child(2) {
width: calc(100% - 80px);
}
.post-item .info .title {
font-weight: 500;
font-size: 14px;
}
.content-container .title {
font-size: 18px;
line-height: 28px;
}
.nav-left-list {
text-align: left;
}
.nav-left-list a {
display: inline-block;
margin : 5px;
}
.post-item .poster,
.plus-post-item .poster {
width : 80px;
height: 60px;
}
.post-item>div:nth-child(2) {
width: calc(100% - 80px);
}
.post-item .info .title {
font-weight: 500;
font-size : 14px;
}
.content-container .title {
font-size : 18px;
line-height: 28px;
}
}
@media screen and (min-width:1200px) {
.layui-container {
width: 1280px;
}
.layui-container {
width: 1280px;
}
}
a.post-item:visited{
color: #bbb;
a.post-item:visited {
color: #bbb;
}
.ul-content p{
.ul-content p {
margin: 15px 0;
}
@@ -229,8 +239,8 @@ a.post-item:visited{
}
.ul-content h2{
margin:20px 0
.ul-content h2 {
margin: 20px 0
}
/* 表格 */
@@ -268,7 +278,7 @@ a.post-item:visited{
margin: 10px 0 10px 20px;
}
.ul-content ul li{
.ul-content ul li {
list-style: inherit;
}
@@ -284,4 +294,46 @@ a.post-item:visited{
.ul-content img {
max-width: 100%;
}
.index-poster {
height: 100%;
filter: blur(2px);
}
#banner .panel {
display : flex;
align-items : center;
justify-content: center;
text-align : center;
text-shadow : 0 0 2px #333;
color : #fff;
z-index : 99;
height : 100%;
position : absolute;
top : 0;
left : 0;
width : 100%;
}
#banner .index-poster {
height : 100%;
width : 100%;
background-size : cover;
background-position: center;
position : absolute;
z-index : 0;
}
#banner .title {
font-size: 28px;
}
#banner .layui-carousel-arrow {
z-index: 999;
}
#banner .layui-carousel-ind {
z-index: 999;
}