样式更改

shuishen

2021-12-23 64dc085c9201f180aa630463204b7fff7e648eae

样式更改

 src/styles/mobile/popup.scss

@@ -3,6 +3,7 @@
    align-items: center;
    justify-content: center;
}

//随地图移动弹窗
#mobile-map_popup_content {
    //弹窗
@@ -11,32 +12,29 @@
    z-index: 100;
    left: -1000px;
    box-sizing: border-box;

    #mobilePopup {
        width: 70%;
        left: 1000px;
        position: absolute;
        height: auto;
        // background-color: #fff;
        background-image: linear-gradient(
                // 135deg,
                // #28bbf06c 50%,
        background-image: linear-gradient( // 135deg,
                // rgba(40,187,240, 0.5) 50%,
                // transparent 50%
                #28bbf06c 35px,
                #28bbf06c 35px,
                #28bbf06c calc(100% - 34px),
                transparent calc(100% - 34px)
            ),
            linear-gradient(
                // -45deg,
                // #28bbf06c 50.1%,
                rgba(40, 187, 240, 0.5) 35px,
                rgba(40, 187, 240, 0.5) 35px,
                rgba(40, 187, 240, 0.5) calc(100% - 34px),
                transparent calc(100% - 34px)),
            linear-gradient( // -45deg,
                // rgba(40,187,240, 0.5) 50.1%,
                // transparent 50%
                transparent 35px,
                #28bbf06c 35px,
                #28bbf06c calc(100% - 0px),
                transparent calc(100% - 0px)
            );
        // background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
        //     linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
                rgba(40, 187, 240, 0.5) 35px,
                rgba(40, 187, 240, 0.5) calc(100% - 0px),
                transparent calc(100% - 0px));
        // background-image: linear-gradient(135deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50%, transparent 50%),
        //     linear-gradient(-45deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50.1%, transparent 50%);
        border-radius: 10px;
        position: relative;

@@ -46,7 +44,7 @@
            width: 100%;
            height: 35px;
            // background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
            background-image: linear-gradient(#29baf1a1, #29baf1a1);
            background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));

            // background-image: linear-gradient(#29baf1, #28bbf0);
            // background-color: #f7f7f7;
@@ -61,15 +59,17 @@
            line-height: 20px;
            box-sizing: border-box;
        }

        .mobilelabel-content {
            width: 100%;
            height: auto;

            // 内容样式
            .mobile-popup-imgs-heard {
                .mobile-popup-imgs-h-close {
                    width: 35px;
                    height: 34px;
                    // background-image: linear-gradient(#29baf1a1, #29baf1a1);
                    // background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
                    // background-image: linear-gradient(#29baf1, #28bbf0);
                    // background-color: #f7f7f7;
                    background-color: transparent;
@@ -78,36 +78,44 @@
                    border-radius: 100px;
                    right: 0;
                    top: 0;

                    .icon {
                        color: #fff;
                        font-size: 25px;
                    }
                }

                width: 100%;
                padding: 10px;
                text-align: justify;
                letter-spacing: 1px;
                box-sizing: border-box;

                img {
                    margin-left: calc(50% - 35px);
                    width: 70px;
                    height: 70px;
                }

                //内容显示
                $centerFontSize: 13px;

                .mobileBig-center-our {
                    width: 100%;
                    height: auto;
                    font-size: $centerFontSize;

                    .mobileBig-center {
                        width: 100%;
                        min-height: 30px;
                        border-bottom: 1px solid #f7f7f7;
                        @extend .centersFlex;

                        .m-c-title {
                            color: #fff;
                            width: 21%;
                        }

                        .m-c-center {
                            width: 79%;
                            // text-indent: 2em;
@@ -116,6 +124,7 @@
                            line-height: 25px;
                        }
                    }

                    .mobileBig-center-introduce {
                        width: 100%;
                        height: auto;
@@ -125,6 +134,7 @@
                    }
                }
            }

            .mobile-popup-control {
                width: 100%;
                height: 20px;
@@ -134,24 +144,26 @@
                border-radius: 0 0 10px 10px;
                display: flex;
                align-items: center;
                background-image: linear-gradient(#29baf1a1, #29baf1a1);
                background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
                // background-image: linear-gradient(#29baf1, #28bbf0);
                justify-content: center;
                position: relative;

                &::before {
                    content: "";
                    width: 0px;
                    height: 0px;
                    // background-image: linear-gradient(#29baf1a1, #29baf1a1);
                    // background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid #19b3f0a1;
                    border-bottom: 8px solid rgba(25,179,240, 0.5);
                    border-left: 8px solid transparent;
                    border-right: 8px solid #19b3f0a1;
                    border-right: 8px solid rgba(25,179,240, 0.5);
                    position: absolute;
                    bottom: -8px;
                    left: calc(50% - 8px);
                    transform: rotate(45deg);
                }

                .mobilePopupOurOnce_r_d_in {
                    color: #fff;
                }
@@ -162,18 +174,22 @@

//地图基础样式更改
$controllerw: 35px !important;

#mobile-viewer-container {

    // 继承类
    .flexCenter {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    // 比例尺
    .dc-distance-legend {
        right: 5px !important;
        left: auto !important;
    }

    // 缩放控制
    .dc-zoom-controller {
        width: 32px !important;
@@ -188,9 +204,11 @@
            // border-bottom: 1px solid #ebebeb;
            margin-bottom: 49px !important;
        }

        div:nth-child(2) {
            display: none !important;
        }

        // div:nth-child(3) {
        //     // border-top: 1px solid #ebebeb;
        // }
@@ -203,26 +221,31 @@
            color: white !important;
            @extend .flexCenter;
            border-radius: 5px;

            svg {
                width: 20px !important;
                height: 20px !important;
            }
        }
    }

    //弹窗标签栏的标签
    .m_p_center {
        .el-tabs {
            width: 100% !important;
            height: 100% !important;
            box-sizing: border-box;

            .el-tabs__nav-scroll {
                width: 100% !important;
                @extend .flexCenter;
            }

            .el-tabs__content {
                width: 100% !important;
                height: calc(100% - 55px) !important;
                box-sizing: border-box;

                .el-tab-pane {
                    width: 100% !important;
                    height: 100% !important;
@@ -237,6 +260,7 @@
            width: 100% !important;
            height: 100% !important;
            @extend .flexCenter;

            .el-icon-s-flag.icon {
                position: relative;
                top: 4px;
@@ -256,6 +280,7 @@
        /*滚动条的背景颜色*/
    }
}

//地图固定弹窗
#mobile-map_content_content-fixed {
    position: fixed;
@@ -266,6 +291,7 @@
    left: 5%;
    background-color: #fff;
    border-radius: 10px;

    //关闭按钮
    .mobiletitle-close-fixed {
        width: 30px;
@@ -276,10 +302,12 @@
        position: absolute;
        right: 10px;
        top: 2px;

        .icon {
            font-size: 20px;
        }
    }

    //标题样式
    .mobiletitle-fixed {
        width: 100%;
@@ -291,6 +319,7 @@
        align-items: center;
        box-sizing: border-box;
    }

    // 内容样式
    .mobile-popup-imgs-heard-fixed {
        width: 100%;
@@ -299,19 +328,23 @@
        text-align: justify;
        letter-spacing: 1px;
        box-sizing: border-box;

        img {
            width: 70px;
            height: 50px;
        }

        //内容显示
        .mobileBig-center-fiexd {
            width: 100%;
            height: 30px;
            @extend .centersFlex;

            .m-c-f-title {
                width: 20%;
                @extend .centersFlex;
            }

            .m-c-f-center {
                @extend .centersFlex;
                justify-content: space-between;
@@ -319,6 +352,7 @@
            }
        }
    }

    .mobile-popup-control-fixed {
        width: 100%;
        height: 35px;
@@ -327,6 +361,7 @@
        display: flex;
        align-items: center;
        justify-content: space-around;

        .m-p-c-f-once {
            .mobilePopupOurOnce_r_d_in-gan {
                position: relative;
@@ -345,12 +380,14 @@
    height: 100%;
    background-color: #fff;
    z-index: 300;

    .m_p_heard {
        width: 100%;
        height: 50px;
        background-image: linear-gradient(#29baf1, #28bbf0);
        border-bottom: 1px solid rgba(82, 209, 255, 0.774);
        color: #fff;

        // background-color: #a40000;
        .m_p_h_break {
            position: absolute;
@@ -361,22 +398,26 @@
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
                font-size: 22px;
                color: #fff;
            }
        }

        .m_p_h_center {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-dropdown-link {
                color: #fff;
            }
        }
    }

    .m_p_center {
        width: 100%;
        height: calc(100% - 50px);
@@ -400,6 +441,7 @@
        //         transparent 100%
        //     );
        box-sizing: border-box;

        .m_p_c_tableIn {
            width: 100%;
            height: 100%;
@@ -407,6 +449,7 @@
            overflow-x: hidden;
            overflow-y: auto;
        }

        // .el-divider__text {
        // background-image: linear-gradient(#29baf1, #28bbf0) !important;
        // color: #fff !important;
@@ -430,8 +473,9 @@
//左侧弹窗全景图片变小
.mobile-way-entitys-box {
    $size: 30px;

    img {
        width: $size;
        height: $size;
    }
}
}