+样式

liuyg

2021-12-23 3063e55a3ce855f36654b19b8db90b0ad161404b

 src/styles/mobile/popup.scss

@@ -16,25 +16,27 @@
        left: 1000px;
        position: absolute;
        height: auto;
        //   background-color: #fff;
        // background-color: #fff;
        background-image: linear-gradient(
                // 135deg,
                #28bbf0a1 30px,
                #28bbf0a1 30px,
                // #28bbf0a1 50%,
                // #28bbf06c 50%,
                // transparent 50%
                #28bbf0a1 100%,
                transparent 100%
                #28bbf06c 35px,
                #28bbf06c 35px,
                #28bbf06c calc(100% - 34px),
                transparent calc(100% - 34px)
            ),
            linear-gradient(
                // -45deg,
                transparent 30px,
                #28bbf0a1 30px,
                // #28bbf0a1 50.1%,
                // #28bbf06c 50.1%,
                // transparent 50%
                #28bbf0a1 100%,
                transparent 100%
                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%);
        border-radius: 10px;
        position: relative;

@@ -43,12 +45,16 @@
            color: #fff;
            width: 100%;
            height: 35px;
            background-image: linear-gradient(#29baf1, #28bbf0);
            // background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
            background-image: linear-gradient(#29baf1a1, #29baf1a1);

            // background-image: linear-gradient(#29baf1, #28bbf0);
            // background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
            font-size: 14px;
            font-size: 16px;
            border-radius: 10px 10px 0 0;
            padding: 8px 14px;
            line-height: 20px;
            box-sizing: border-box;
        }
        .mobilelabel-content {
@@ -59,8 +65,10 @@
                .mobile-popup-imgs-h-close {
                    width: 35px;
                    height: 34px;
                    background-image: linear-gradient(#29baf1, #28bbf0);
                    // background-image: linear-gradient(#29baf1a1, #29baf1a1);
                    // background-image: linear-gradient(#29baf1, #28bbf0);
                    // background-color: #f7f7f7;
                    background-color: transparent;
                    position: absolute;
                    @extend .centersFlex;
                    border-radius: 100px;
@@ -77,13 +85,16 @@
                letter-spacing: 1px;
                box-sizing: border-box;
                img {
                    margin-left: calc(50% - 35px);
                    width: 70px;
                    height: 70px;
                }
                $centerFontSize: 15px;
                //内容显示
                .mobileBig-center-our {
                    width: 100%;
                    height: auto;
                    font-size: $centerFontSize;
                    .mobileBig-center {
                        width: 100%;
                        min-height: 30px;
@@ -101,18 +112,26 @@
                            line-height: 25px;
                        }
                    }
                    .mobileBig-center-introduce {
                        width: 100%;
                        height: auto;
                        // border: 1px solid red;
                        text-indent: 2em;
                        color: #fff;
                    }
                }
            }
            .mobile-popup-control {
                width: 100%;
                height: 20px;
                background-color: #f7f7f7;
                // background-color: #f7f7f7;
                border-top: 1px solid #ebebeb;
                padding: 5px 0 8px 0;
                border-radius: 0 0 10px 10px;
                display: flex;
                align-items: center;
                background-image: linear-gradient(#29baf1, #28bbf0);
                background-image: linear-gradient(#29baf1a1, #29baf1a1);
                // background-image: linear-gradient(#29baf1, #28bbf0);
                justify-content: center;
                position: relative;
                &::before {
@@ -212,8 +231,8 @@
            @extend .flexCenter;
            .el-icon-s-flag.icon {
                position: relative;
                top: 10px;
                left: 10px;
                top: 4px;
                left: 4px;
            }
        }
    }
@@ -399,3 +418,12 @@
        // }
    }
}

//左侧弹窗全景图片变小
.mobile-way-entitys-box {
    $size: 30px;
    img {
        width: $size;
        height: $size;
    }
}