LargeScreenVisualization/viewdata-master/新增75套源码/3/css/four.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);
    }
}