wanda-bm-guide/src/assets/css/rotation.less

.overview {
    background: #f2f5f7;
    padding: 16px 20px 20px 20px;
    // height: 100%;
    height: calc(100% - 48px);
    width: 100%;
    .view-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        nav {
            display: flex;
            align-items: center;
            span:nth-of-type(1) {
                width: 3px;
                height: 16px;
                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
                border-radius: 2px;
                margin-right: 4px;
                display: inline-block;
            }
            span:nth-of-type(2) {
                height: 24px;
                font-size: 16px;
                font-family: MicrosoftYaHeiSemibold;
                font-weight: bold;
                color: #1f2429;
            }
        }
        .view-button {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 22px;
            width: 106px;
            height: 32px;
            background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
            font-size: 14px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
            img {
                display: inline-block;
                height: 16px;
                width: 16px;
                margin-right: 6px;
            }
        }
    }
    .view-box {
        height: calc(100% - 32px);
        display: flex;
        justify-content: space-between;
        .view-left {
            width: 58.5%;
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            .lb-left {
                width: 100%;
                // TODO: lb-left
                // max-height: 300px;
                height: 66%;
                // overflow: hidden;
                flex: 1;
                margin-top: 12px;
                margin-bottom: 10px;
                position: relative;
                border: 1px solid #ccc;
                border-radius: 4px;
                img {
                    width: 100%;
                    // height: 100%;
                }
                .lb-icon {
                    z-index: 99;
                    position: absolute;
                    top: 0;
                    right: 0px;
                    width: 32px;
                    height: 32px;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 0px 4px 0px 4px;
                    cursor: pointer;
                }
                .lb-img {
                    z-index: 101;
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    cursor: pointer;
                }
                .lb-left-noImg {
                    width: 100%;
                    height: 100%;
                    object-fit: fill;
                }
            }
            .lb-bottom {
                height: 34%;
                background: #ffffff;
                padding: 12px 16px;
                nav {
                    width: 161px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
                    margin-bottom: 12px;
                    border-radius: 4px;
                    span:nth-of-type(1) {
                        width: 2px;
                        height: 16px;
                        background: #025baa;
                        margin-right: 6px;
                        display: inline-block;
                    }
                    span:nth-of-type(2) {
                        width: 107px;
                        height: 22px;
                        font-size: 14px;
                        font-family: MicrosoftYaHeiSemibold;
                        font-weight: bold;
                        color: #025baa;
                    }
                }
                .place-p1 {
                    height: 24px;
                    font-size: 16px;
                    font-family: MicrosoftYaHeiSemibold;
                    color: rgba(31, 36, 41, 1);
                    line-height: 21px;
                    margin-bottom: 8px;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 3px;
                        margin-top: -3px;
                    }
                }
                .place-p2 {
                    margin: 16px 0;
                    height: 22px;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: rgba(31, 36, 41, 1);
                    line-height: 19px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 12px;
                    margin-top: 0px;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 3px;
                    }
                }
                .place-bottom {
                    display: flex;
                    .place-box {
                        width: 50%;
                        display: flex;
                        .place-left {
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            span {
                                display: inline-block;
                                width: 56px;
                                margin-right: 8px;
                                font-size: 12px;
                                font-family: MicrosoftYaHei;
                                color: rgba(100, 108, 115, 1);
                                line-height: 22px;
                            }
                        }
                        .place-right {
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            span {
                                display: inline-block;
                                font-size: 12px;
                                font-family: MicrosoftYaHei;
                                color: rgba(31, 36, 41, 1);
                                line-height: 22px;
                            }
                        }
                    }
                }
            }
        }
        .view-right {
            flex: 1;
            .view-right-box {
                height: 100%;
                display: flex;
                flex-direction: column;
                .lb-right {
                    flex: 1;
                    // TODO: lb-right
                    height: 47%;
                    margin-top: 12px;
                    margin-bottom: 10px;
                    position: relative;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    .lb-icon {
                        z-index: 99;
                        position: absolute;
                        top: 0;
                        right: 0px;
                        width: 32px;
                        height: 32px;
                        background: rgba(0, 0, 0, 0.6);
                        border-radius: 0px 4px 0px 4px;
                        cursor: pointer;
                    }
                    .lb-img {
                        z-index: 101;
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        top: 8px;
                        right: 8px;
                        cursor: pointer;
                    }
                    .lb-left-noImg {
                        width: 100%;
                        height: 100%;
                        object-fit: fill;
                    }
                }
                .lb-right-bottom {
                    height: 53%;
                    background: #ffffff;
                    padding: 12px 16px;
                    overflow: hidden;
                    nav {
                        width: 161px;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
                        margin-bottom: 12px;
                        border-radius: 4px;
                        span:nth-of-type(1) {
                            width: 2px;
                            height: 16px;
                            background: #025baa;
                            margin-right: 6px;
                            display: inline-block;
                        }
                        span:nth-of-type(2) {
                            width: 107px;
                            height: 22px;
                            font-size: 14px;
                            font-family: MicrosoftYaHeiSemibold;
                            font-weight: bold;
                            color: #025baa;
                        }
                    }
                    .view-right-bottom {
                        overflow: auto;
                    }
                }
            }
        }
    }
}

// 自适应1366*768 和1920*1080 的 暂时不用
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    // .view-left {
    //     flex: 1;
    //     margin-right: 16px;
    //     .view-left-box {
    //         display: flex;
    //         flex-direction: column;
    //         .view-left-top {
    //             height: 336px;
    //             margin-bottom: 16px;
    //             display: flex;
    //             justify-content: space-between;
    //             .view-top-imgL {
    //                 margin-right: 16px;
    //                 width: 504px;
    //                 height: 336px;
    //             }
    //             .view-top-imgR {
    //                 width: 336px;
    //                 height: 336px;
    //             }
    //         }
    //         .view-left-bottom {
    //             background: #ffffff;
    //             padding: 16px;
    //             nav {
    //                 width: 161px;
    //                 height: 32px;
    //                 display: flex;
    //                 align-items: center;
    //                 background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
    //                 margin-bottom: 16px;
    //                 span:nth-of-type(1) {
    //                     width: 2px;
    //                     height: 16px;
    //                     background: #025baa;
    //                     margin-right: 6px;
    //                     display: inline-block;
    //                 }
    //                 span:nth-of-type(2) {
    //                     width: 107px;
    //                     height: 22px;
    //                     font-size: 14px;
    //                     font-family: MicrosoftYaHeiSemibold;
    //                     color: #025baa;
    //                     line-height: 19px;
    //                 }
    //             }
    //             .place-p {
    //                 margin: 16px 0;
    //                 height: 22px;
    //                 font-size: 14px;
    //                 font-family: MicrosoftYaHei;
    //                 color: rgba(31, 36, 41, 1);
    //                 line-height: 19px;
    //                 display: flex;
    //                 align-items: center;
    //                 img {
    //                     margin-right: 3px;
    //                 }
    //             }
    //             .place-bottom {
    //                 display: flex;
    //                 .place-bottom-row {
    //                     display: flex;
    //                     justify-content: space-around;
    //                     div {
    //                         span {
    //                             display: block;
    //                         }
    //                     }
    //                     div:nth-of-type(1) {
    //                         margin-right: 16px;
    //                         span {
    //                             width: 56px;
    //                             font-size: 14px;
    //                             font-family: MicrosoftYaHei;
    //                             color: rgba(100, 108, 115, 1);
    //                             line-height: 32px;
    //                         }
    //                     }
    //                     div:nth-of-type(2) {
    //                         margin-right: 16px;
    //                         span {
    //                             font-size: 14px;
    //                             font-family: MicrosoftYaHei;
    //                             color: rgba(31, 36, 41, 1);
    //                             line-height: 32px;
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }
    // .view-right {
    //     padding: 16px;
    //     max-width: 424px;
    //     nav {
    //         width: 161px;
    //         height: 32px;
    //         display: flex;
    //         align-items: center;
    //         background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
    //         margin-bottom: 16px;
    //         span:nth-of-type(1) {
    //             width: 2px;
    //             height: 16px;
    //             background: #025baa;
    //             margin-right: 6px;
    //             display: inline-block;
    //         }
    //         span:nth-of-type(2) {
    //             width: 107px;
    //             height: 22px;
    //             font-size: 14px;
    //             font-family: MicrosoftYaHeiSemibold;
    //             color: #025baa;
    //             line-height: 19px;
    //         }
    //     }
    //     .view-right-bottom {
    //         display: flex;
    //         font-size: 14px;
    //         font-family: MicrosoftYaHei;
    //         line-height: 40px;
    //         .view-right-bottom-l {
    //             min-width: 42px;
    //             margin-right: 16px;
    //             color: #646c73;
    //         }
    //         .view-right-bottom-r {
    //             color: #1f2429;
    //         }
    //     }
    // }
}
@media only screen and (min-width: 1367px) {
    // .view-left {
    //     flex: 1;
    //     margin-right: 20px;
    //     .view-left-box {
    //         display: flex;
    //         flex-direction: column;
    //         background: #fff2f5f7;
    //         .view-left-top {
    //             height: 498px;
    //             margin-bottom: 20px;
    //             display: flex;
    //             justify-content: space-between;
    //             .view-top-imgL {
    //                 margin-right: 20px;
    //                 max-width: 748px;
    //                 max-height: 498px;
    //             }
    //             .view-top-imgR {
    //                 max-width: 498px;
    //                 max-height: 498px;
    //             }
    //         }
    //         .view-left-bottom {
    //             background: #ffffff;
    //             padding: 20px;
    //             nav {
    //                 width: 181px;
    //                 height: 40px;
    //                 display: flex;
    //                 align-items: center;
    //                 background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
    //                 margin-bottom: 24px;
    //                 span:nth-of-type(1) {
    //                     width: 2px;
    //                     height: 24px;
    //                     background: #025baa;
    //                     margin-right: 12px;
    //                     display: inline-block;
    //                 }
    //                 span:nth-of-type(2) {
    //                     width: 135px;
    //                     height: 22px;
    //                     font-size: 18px;
    //                     font-family: MicrosoftYaHeiSemibold;
    //                     color: #025baa;
    //                     line-height: 24px;
    //                 }
    //             }
    //             .place-p {
    //                 margin: 20px 0;
    //                 height: 24px;
    //                 font-size: 16px;
    //                 font-family: MicrosoftYaHei;
    //                 color: rgba(31, 36, 41, 1);
    //                 line-height: 21px;
    //                 display: flex;
    //                 align-items: center;
    //                 img {
    //                     margin-right: 3px;
    //                 }
    //             }
    //             .place-bottom {
    //                 display: flex;
    //                 .place-bottom-row {
    //                     display: flex;
    //                     justify-content: space-around;
    //                     div {
    //                         span {
    //                             display: block;
    //                         }
    //                     }
    //                     div:nth-of-type(1) {
    //                         margin-right: 16px;
    //                         span {
    //                             width: 76px;
    //                             font-size: 16px;
    //                             font-family: MicrosoftYaHei;
    //                             color: rgba(100, 108, 115, 1);
    //                             line-height: 40px;
    //                         }
    //                     }
    //                     div:nth-of-type(2) {
    //                         margin-right: 20px;
    //                         span {
    //                             font-size: 16px;
    //                             font-family: MicrosoftYaHei;
    //                             color: rgba(31, 36, 41, 1);
    //                             line-height: 40px;
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }
    // .view-right {
    //     padding: 20px;
    //     min-width: 555px;
    //     nav {
    //         width: 181px;
    //         height: 40px;
    //         display: flex;
    //         align-items: center;
    //         background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
    //         margin-bottom: 24px;
    //         span:nth-of-type(1) {
    //             width: 2px;
    //             height: 24px;
    //             background: #025baa;
    //             margin-right: 12px;
    //             display: inline-block;
    //         }
    //         span:nth-of-type(2) {
    //             width: 135px;
    //             height: 22px;
    //             font-size: 18px;
    //             font-family: MicrosoftYaHeiSemibold;
    //             color: #025baa;
    //             line-height: 24px;
    //         }
    //     }
    //     .view-right-bottom {
    //         display: flex;
    //         font-size: 16px;
    //         font-family: MicrosoftYaHei;
    //         line-height: 40px;
    //         padding-left: 4px;
    //         .view-right-bottom-l {
    //             min-width: 42px;
    //             margin-right: 30px;
    //             color: #646c73;
    //         }
    //         .view-right-bottom-r {
    //             color: #1f2429;
    //         }
    //     }
    // }
}