385 lines
11 KiB
SCSS
385 lines
11 KiB
SCSS
@import "baseFour.scss";
|
|
@import "mixin/_animation.scss";
|
|
@import "drop_down.scss";
|
|
.main {
|
|
width: 100%;
|
|
height: 84%;
|
|
.aside-left {
|
|
position: relative;
|
|
width: 22%;
|
|
height: 100%;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: -10.4%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../img/invalid.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
ul {
|
|
position: relative;
|
|
z-index: 99;
|
|
display: block;
|
|
height: 91%;
|
|
overflow: hidden;
|
|
}
|
|
li {
|
|
position: relative;
|
|
z-index: 100;
|
|
width: 86%;
|
|
height: 19%;
|
|
padding: 5% 8% 5% 4%;
|
|
margin: 1.5% auto;
|
|
background: rgba(8, 29, 93, .36);
|
|
cursor: pointer;
|
|
img {
|
|
display: block;
|
|
width: 23%;
|
|
height: 100%;
|
|
}
|
|
dl {
|
|
width: 77%;
|
|
padding-left: 5%;
|
|
dt {
|
|
text-align: left;
|
|
font-size: px2em(28, 64);
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
letter-spacing: normal;
|
|
text-overflow: ellipsis;
|
|
}
|
|
dd {
|
|
text-align: left;
|
|
font-family: MicrosoftYaHei;
|
|
font-size: px2em(22, 64);
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.43;
|
|
color: rgba(0, 187, 236, .5);
|
|
letter-spacing: normal;
|
|
p {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.aside-right {
|
|
position: relative;
|
|
width: 22%;
|
|
height: 100%; // 公共样式
|
|
.con_top {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 103.5%;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: -10.4%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../img/aside_top.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
h3 {
|
|
padding: 10% 8% 2% 8%;
|
|
}
|
|
.aside_con {
|
|
height: 86%;
|
|
padding: 0 3%;
|
|
overflow: hidden;
|
|
dl {
|
|
padding: 2% 5%;
|
|
margin: 1% 0;
|
|
background: rgba(8, 29, 93, .43);
|
|
}
|
|
dd {
|
|
font-size: px2em(22, 64);
|
|
}
|
|
.user {
|
|
text-align: left;
|
|
font-size: px2em(24, 64);
|
|
color: #00bbec;
|
|
}
|
|
.time {
|
|
color: rgba(0, 187, 236, .52);
|
|
}
|
|
.comment {
|
|
text-align: left;
|
|
color: #00bbec;
|
|
span {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: px2em(18, 64);
|
|
}
|
|
}
|
|
dd {
|
|
text-align: left;
|
|
font-size: px2em(24, 64);
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.33;
|
|
color: #fff;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 6;
|
|
overflow: hidden;
|
|
letter-spacing: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.middle_con {
|
|
position: relative;
|
|
width: 55%;
|
|
height: 100%;
|
|
margin: 0 .5%;
|
|
background-color: rgba(18, 22, 64, .44);
|
|
.middle_top {
|
|
width: 100%;
|
|
height: 80%;
|
|
}
|
|
.middle_button {
|
|
width: 100%;
|
|
height: 20%;
|
|
overflow: hidden;
|
|
.button_left,
|
|
.button_right {
|
|
position: relative;
|
|
float: left;
|
|
width: 50%;
|
|
height: 100%;
|
|
font-size: px2em(28, 64);
|
|
.button_con {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 82%;
|
|
overflow: hidden;
|
|
}
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: -10.4%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../img/invalid-button.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
h3 {
|
|
padding: 4% 0 2% 3%;
|
|
}
|
|
dl {
|
|
display: inline-block;
|
|
width: 90%;
|
|
line-height: 2.3;
|
|
margin-left: 3%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.number {
|
|
color: #2edbff;
|
|
}
|
|
.title {
|
|
text-align: left;
|
|
color: #fff;
|
|
}
|
|
dt {
|
|
display: inline-block;
|
|
}
|
|
dd {
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding-left: 2%;
|
|
color: rgba(0, 187, 236, .5);
|
|
}
|
|
}
|
|
}
|
|
.con_left,
|
|
.con_right {
|
|
width: 50%;
|
|
height: 37%;
|
|
padding-top: 1%;
|
|
}
|
|
.con_left {
|
|
padding: 2% 5%;
|
|
border-right: 1px solid #00bbec;
|
|
img {
|
|
display: block;
|
|
width: 30%;
|
|
height: 88%;
|
|
}
|
|
dl {
|
|
width: 70%;
|
|
height: 100%;
|
|
padding-left: 5%;
|
|
color: #fff;
|
|
dt {
|
|
text-align: left;
|
|
font-size: px2em(38, 64);
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1;
|
|
padding-bottom: 4%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
letter-spacing: normal;
|
|
text-overflow: ellipsis;
|
|
}
|
|
dd {
|
|
text-align: left;
|
|
font-size: px2em(28, 64);
|
|
font-weight: normal;
|
|
line-height: 1.43;
|
|
letter-spacing: normal;
|
|
p {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.con_right {
|
|
padding-left: 2%;
|
|
dl {
|
|
width: 100%;
|
|
height: 50%;
|
|
float: left;
|
|
margin: 1% 0;
|
|
overflow: hidden;
|
|
dt {
|
|
text-align: left;
|
|
font-size: px2em(28, 64);
|
|
line-height: 1.11;
|
|
color: #fff;
|
|
letter-spacing: normal;
|
|
}
|
|
ul {
|
|
margin: 4% 0 0 7%;
|
|
li {
|
|
float: left;
|
|
text-align: right;
|
|
font-size: px2em(24, 64);
|
|
padding: 1% 5%;
|
|
padding: 1% 5%;
|
|
margin: 1%;
|
|
color: #fff;
|
|
background: rgba(0, 187, 236, .28);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.con_link {
|
|
position: relative;
|
|
float: left;
|
|
width: 100%;
|
|
height: 22.33%;
|
|
li {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: -10.4%;
|
|
width: 20%;
|
|
height: 15%;
|
|
background: url(../img/title_con.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
h3 {
|
|
padding-left: 11%;
|
|
margin-top: -0.5%;
|
|
font-size: px2em(32, 64);
|
|
}
|
|
.link_title,
|
|
.link_ul {
|
|
width: 81%;
|
|
text-align: left;
|
|
font-size: px2em(24, 64);
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: 1.43;
|
|
margin: 2% auto;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
letter-spacing: normal;
|
|
}
|
|
.link_title {
|
|
height: 80%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
padding-top: 1%;
|
|
}
|
|
.link_ul {
|
|
height: 80%;
|
|
li {
|
|
float: left;
|
|
width: 25%;
|
|
padding:0.2% 1%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title_img {
|
|
text-align: left;
|
|
}
|
|
|
|
.main-bottom {
|
|
width: 100%;
|
|
height: 5px;
|
|
span {
|
|
display: inline-block;
|
|
height: 100%;
|
|
background: #02336b;
|
|
}
|
|
.line1 {
|
|
width: 15%;
|
|
margin-right: 6px;
|
|
}
|
|
.line2 {
|
|
width: 55%;
|
|
margin-right: 6px;
|
|
}
|
|
.line3 {
|
|
width: 26%;
|
|
}
|
|
}
|
|
|
|
// 出版社排行 旋转效果
|
|
// .pressRotate {
|
|
// -webkit-animation: mymove .5s ease-in;
|
|
// -moz-animation: mymove .5s ease-in;
|
|
// -o-animation: mymove .5s ease-in;
|
|
// animation: mymove .5s ease-in;
|
|
// }
|
|
@include myMove(".pressRotate");
|
|
@keyframes rotate {
|
|
0% {}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
} |