tplus-components-touch 1.25.5 → 1.25.9

package/dist/components/modalWraper/style.less

@@ -1,363 +1,363 @@
-// @import "~tplus-components/dist/components/theme/index.less";
-
-//modal 样式=======================
-.modal-centre{
-    .u-modal-dialog{
-        margin-top: 0px!important;
-        top: calc(~"(100% - 224px)/2")!important;
-        transform: translateY(-50%)!important;
-    }
-}
-
-.modal-formated{
-    .u-modal-content{
-        // box-shadow:none!important;
-        // border:none!important;
-    }
-    .u-modal-header{
-        height:46px;
-        border-bottom: 1px solid #E6E6EB!important;
-        padding:14px 16px!important;
-        button.u-close {
-            color: #333333;
-            font-size: 12px;
-            opacity: 1;
-            margin-top: 3px;
-        }
-        .u-modal-title{
-            font-size: 18px;
-            line-height: 18px!important;
-            color:#333333;
-        }
-        font-size:18px;
-    }
-    .u-modal-footer{
-        height:46px;
-        box-sizing: border-box;
-        padding: 7px 16px!important;
-        border-top: 1px solid #E6E6EB!important;
-
-        .footer{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .check{
-                margin-left: 17px;
-                .u-checkbox-label {
-                    font-size: 14px;
-                    color    : #333333;
-                }
-            }
-            .u-checkbox.is-checked .u-checkbox-label:before {
-                background  : #32ABF9;
-                border-color: #32ABF9;
-                box-shadow  :0 0 0 10px #FFF;
-            }
-
-            .u-checkbox.is-checked .u-checkbox-label:after {
-                color: #FFF;
-            }
-
-            .u-checkbox input[type=checkbox]:focus+.u-checkbox-label:before {
-                border-color: #D2D2D7;
-            }
-            .u-checkbox .u-checkbox-label:before{
-                border-color: #D2D2D7;
-            }
-            .u-checkbox .u-checkbox-label:after,
-            .u-checkbox .u-checkbox-label:before {
-              width : 16px;
-              height: 16px;
-            }
-        }
-        button{
-            height:32px;
-            font-size:16px;
-            margin-left:16px;
-            border-radius: 4px;
-            line-height: 24px;
-        }
-        button[type='success']{
-            color:#fff!important;
-            // background: var(--modal-btn);
-            background: #FF8C26!important;
-            border:none!important;
-        }
-        button[type='cancel']{
-            color: #2D2D2D!important;
-            background: #FFF!important;
-            border: 1px solid #D2D2D7!important;
-        }
-        .u-button:hover {//去掉划过颜色
-            background-color: static!important;
-            border-color: static!important;
-        }
-    }
-    .u-modal-body{
-        padding:0!important;
-        overflow: auto;
-    }
-}
-.modal-formated.bigger-modal{
-    .u-modal-body{
-        height:475px;
-        overflow: auto;
-    }
-}
-.modal-formated.big-modal{
-    .u-modal-dialog{
-        width:800px;
-    }
-    .u-modal-body{
-        height:376px;
-        overflow: auto;
-    }
-}
-.modal-formated.mid-modal{
-    .u-modal-dialog{
-        width:400px;
-        height:376px;
-    }
-    .u-modal-body{
-        height:288px;
-        overflow: auto;
-    }
-}
-.modal-formated.sm-modal{
-    .u-modal-dialog{
-        width:400px;
-    }
-    .u-modal-header{
-        border-bottom:none!important;
-    }
-    .u-modal-body{
-        height:120px;
-        overflow: auto;
-        box-sizing: border-box;
-        // padding:0px 16px 0!important;
-    }
-    .u-modal-footer{
-        height:50px!important;
-        border-top:none!important;
-        border-bottom:none!important;
-    }
-}
-.method-modal1{
-    .u-button.u-button-primary{
-        color:#fff!important;
-        // background: var(--modal-btn);
-        background: #FF8C26!important;
-        border:none!important;
-        font-size: 16px!important;
-    }
-    .u-button.u-button-secondary{
-        color: #2D2D2D!important;
-        background: #FFF!important;
-        border: 1px solid #D2D2D7!important;
-        font-size: 16px!important;
-    }
-    .u-modal-dialog{
-        // margin-top: 0px!important;
-        // top: calc(~"(100%)/2")!important;
-        // transform: translateY(-50%)!important;
-    }
-    .method-modal-ticon{
-        font-size: 24px;
-        line-height: 24px;
-        margin-left:14px;
-        margin-right: 14px;
-    }
-    .ticon-confirm{
-        color:#FF595E!important;
-        position: absolute;
-        top:50%;
-        left:6px;
-        transform: translateY(-50%);
-    }
-    .ticon-info{
-        color:#FAAD14!important;
-        position: absolute;
-        top:50px;
-        left:6px;
-        transform: translateY(-50%);
-    }
-    .u-modal-content{
-        border-radius: 5px!important;
-    }
-    .u-modal-header{
-        height: 0px!important;
-        padding-bottom:0!important;
-        box-sizing: content-box;
-        .u-modal-title{
-            height: 24px!important;
-        }
-        .u-modal-confirm-title{
-            vertical-align: bottom;
-            font-weight: 400;
-            font-size: 18px;
-            color: rgba(0,0,0,0.85);
-        }
-    }
-    .u-modal-body{
-        padding-top:12px!important;
-        padding-bottom:0px!important;
-        font-size: 14px!important;
-        color: #333333!important;;
-        line-height: 22px!important;;
-        height:120px!important;
-        box-sizing: border-box!important;
-        position: relative!important;
-        >div{
-            padding:0!important;
-            width:100%;
-        }
-    }
-    .u-modal-footer{
-        .u-button-primary{
-            color:#fff!important;
-            // background: var(--modal-btn);
-            background: #FF8C26!important;
-            border:none!important;
-        }
-        .u-button-secondary{
-            color: #2D2D2D!important;
-            background: #FFF!important;
-            border: 1px solid #D2D2D7!important;
-            margin-right:16px!important;
-        }
-    }
-    .content1{
-        width:100%;
-        overflow: hidden;
-        min-height: 30px;
-        max-height: 100%;
-        position: absolute;
-        line-height: 30px;
-        top:50%;
-        transform: translateY(-50%);
-        left:0;
-        padding:0 15px 0 57px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp:4;
-        -webkit-box-orient:vertical;
-
-        .promptContent{
-            height: 100px;
-            overflow-y: auto;
-            margin-top: 30px;
-            padding: 5px 0;
-        }
-    }
-}
-
-.u-modal-body-250{
-    .u-modal-body{
-        height:250px!important;
-    }
-    .promptContent{
-        height: 230px!important;
-    }
-    img{
-        width: 120px;
-        height: 120px;
-    }
-}
-
-.vertical-touch-platform{ // 竖屏端暂时统一覆盖样式 不使用传参控制
-    .vertical-modal-wrapper {
-        &.method-modal1 {
-            background-color: rgba(0,0,0,.4);
-        }
-        .u-modal-dialog{
-            width: 80% !important;
-        }
-        .u-modal-header{
-            padding: 0px !important;
-            height: auto !important;
-            i.uf-close{
-                font-size: 24px;
-            }
-            .u-modal-title{
-                font-size: 40px !important;
-                line-height: 40px!important;
-                color:#333333;
-                height: auto !important;
-
-                .u-modal-confirm-title{
-                    font-size: 40px !important;
-                }
-            }
-        }
-        .u-modal-content{
-            padding: 30px 45px;
-            border-radius: 30px !important;
-            box-shadow: 0 5px 15px rgba(0,0,0,.2) !important;
-            .u-modal-body{
-                height: auto !important;
-                padding-top: 110px !important;
-                .content1{
-                    min-height: 50px;
-                    font-size: 38px;
-                    line-height: 48px;
-                    display: block;
-                    .method-modal-ticon{
-                        font-size: 48px !important;
-                        left: 25px !important;
-                        height: 48px;
-                        &:before{
-                            position: relative;
-                            top: 13px;
-                        }
-                    }
-                }
-            }
-            .u-button{
-                border-radius: 32px;
-                font-size: 32px !important;
-                padding: 6px 44px;
-            }
-            .u-modal-footer{
-                height: 96px !important;
-                .u-button{
-                    min-height: 64px;
-                }
-            }
-            .u-modal-footer, .modal-footer-container{
-                margin-bottom: 8px;
-                margin-top: 80px;
-                .u-button{
-                    &:first-child{
-                        margin-right: 40px!important
-                    }
-                }
-            }
-            .modal-footer-container{
-                text-align: right;
-                margin-right: -10px;
-                padding: 15px 0 15px 15px;
-                border-top: 1px solid transparent;
-                margin-top: 80px;
-            }
-        }
-        &.wrapperControl-modal-container{
-            .u-modal-footer{
-                display: none;
-            }
-        }
-        .u-modal-confirm-content{
-            .content1{
-                padding-left: 120px !important;
-                position: relative !important;
-                transform: translateY(0) !important;
-                .content-box{
-                    position: relative;
-                    .iconfont{
-                        left: -95px !important;
-                    }
-                }
-            }
-        }
-    }
-}
+// @import "~tplus-components/dist/components/theme/index.less";
+
+//modal 样式=======================
+.modal-centre{
+    .u-modal-dialog{
+        margin-top: 0px!important;
+        top: calc(~"(100% - 224px)/2")!important;
+        transform: translateY(-50%)!important;
+    }
+}
+
+.modal-formated{
+    .u-modal-content{
+        // box-shadow:none!important;
+        // border:none!important;
+    }
+    .u-modal-header{
+        height:46px;
+        border-bottom: 1px solid #E6E6EB!important;
+        padding:14px 16px!important;
+        button.u-close {
+            color: #333333;
+            font-size: 12px;
+            opacity: 1;
+            margin-top: 3px;
+        }
+        .u-modal-title{
+            font-size: 18px;
+            line-height: 18px!important;
+            color:#333333;
+        }
+        font-size:18px;
+    }
+    .u-modal-footer{
+        height:46px;
+        box-sizing: border-box;
+        padding: 7px 16px!important;
+        border-top: 1px solid #E6E6EB!important;
+
+        .footer{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .check{
+                margin-left: 17px;
+                .u-checkbox-label {
+                    font-size: 14px;
+                    color    : #333333;
+                }
+            }
+            .u-checkbox.is-checked .u-checkbox-label:before {
+                background  : #32ABF9;
+                border-color: #32ABF9;
+                box-shadow  :0 0 0 10px #FFF;
+            }
+
+            .u-checkbox.is-checked .u-checkbox-label:after {
+                color: #FFF;
+            }
+
+            .u-checkbox input[type=checkbox]:focus+.u-checkbox-label:before {
+                border-color: #D2D2D7;
+            }
+            .u-checkbox .u-checkbox-label:before{
+                border-color: #D2D2D7;
+            }
+            .u-checkbox .u-checkbox-label:after,
+            .u-checkbox .u-checkbox-label:before {
+              width : 16px;
+              height: 16px;
+            }
+        }
+        button{
+            height:32px;
+            font-size:16px;
+            margin-left:16px;
+            border-radius: 4px;
+            line-height: 24px;
+        }
+        button[type='success']{
+            color:#fff!important;
+            // background: var(--modal-btn);
+            background: #FF8C26!important;
+            border:none!important;
+        }
+        button[type='cancel']{
+            color: #2D2D2D!important;
+            background: #FFF!important;
+            border: 1px solid #D2D2D7!important;
+        }
+        .u-button:hover {//去掉划过颜色
+            background-color: static!important;
+            border-color: static!important;
+        }
+    }
+    .u-modal-body{
+        padding:0!important;
+        overflow: auto;
+    }
+}
+.modal-formated.bigger-modal{
+    .u-modal-body{
+        height:475px;
+        overflow: auto;
+    }
+}
+.modal-formated.big-modal{
+    .u-modal-dialog{
+        width:800px;
+    }
+    .u-modal-body{
+        height:376px;
+        overflow: auto;
+    }
+}
+.modal-formated.mid-modal{
+    .u-modal-dialog{
+        width:400px;
+        height:376px;
+    }
+    .u-modal-body{
+        height:288px;
+        overflow: auto;
+    }
+}
+.modal-formated.sm-modal{
+    .u-modal-dialog{
+        width:400px;
+    }
+    .u-modal-header{
+        border-bottom:none!important;
+    }
+    .u-modal-body{
+        height:120px;
+        overflow: auto;
+        box-sizing: border-box;
+        // padding:0px 16px 0!important;
+    }
+    .u-modal-footer{
+        height:50px!important;
+        border-top:none!important;
+        border-bottom:none!important;
+    }
+}
+.method-modal1{
+    .u-button.u-button-primary{
+        color:#fff!important;
+        // background: var(--modal-btn);
+        background: #FF8C26!important;
+        border:none!important;
+        font-size: 16px!important;
+    }
+    .u-button.u-button-secondary{
+        color: #2D2D2D!important;
+        background: #FFF!important;
+        border: 1px solid #D2D2D7!important;
+        font-size: 16px!important;
+    }
+    .u-modal-dialog{
+        // margin-top: 0px!important;
+        // top: calc(~"(100%)/2")!important;
+        // transform: translateY(-50%)!important;
+    }
+    .method-modal-ticon{
+        font-size: 24px;
+        line-height: 24px;
+        margin-left:14px;
+        margin-right: 14px;
+    }
+    .ticon-confirm{
+        color:#FF595E!important;
+        position: absolute;
+        top:50%;
+        left:6px;
+        transform: translateY(-50%);
+    }
+    .ticon-info{
+        color:#FAAD14!important;
+        position: absolute;
+        top:50px;
+        left:6px;
+        transform: translateY(-50%);
+    }
+    .u-modal-content{
+        border-radius: 5px!important;
+    }
+    .u-modal-header{
+        height: 0px!important;
+        padding-bottom:0!important;
+        box-sizing: content-box;
+        .u-modal-title{
+            height: 24px!important;
+        }
+        .u-modal-confirm-title{
+            vertical-align: bottom;
+            font-weight: 400;
+            font-size: 18px;
+            color: rgba(0,0,0,0.85);
+        }
+    }
+    .u-modal-body{
+        padding-top:12px!important;
+        padding-bottom:0px!important;
+        font-size: 14px!important;
+        color: #333333!important;;
+        line-height: 22px!important;;
+        height:120px!important;
+        box-sizing: border-box!important;
+        position: relative!important;
+        >div{
+            padding:0!important;
+            width:100%;
+        }
+    }
+    .u-modal-footer{
+        .u-button-primary{
+            color:#fff!important;
+            // background: var(--modal-btn);
+            background: #FF8C26!important;
+            border:none!important;
+        }
+        .u-button-secondary{
+            color: #2D2D2D!important;
+            background: #FFF!important;
+            border: 1px solid #D2D2D7!important;
+            margin-right:16px!important;
+        }
+    }
+    .content1{
+        width:100%;
+        overflow: hidden;
+        min-height: 30px;
+        max-height: 100%;
+        position: absolute;
+        line-height: 30px;
+        top:50%;
+        transform: translateY(-50%);
+        left:0;
+        padding:0 15px 0 57px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp:4;
+        -webkit-box-orient:vertical;
+
+        .promptContent{
+            height: 100px;
+            overflow-y: auto;
+            margin-top: 30px;
+            padding: 5px 0;
+        }
+    }
+}
+
+.u-modal-body-250{
+    .u-modal-body{
+        height:250px!important;
+    }
+    .promptContent{
+        height: 230px!important;
+    }
+    img{
+        width: 120px;
+        height: 120px;
+    }
+}
+
+.vertical-touch-platform{ // 竖屏端暂时统一覆盖样式 不使用传参控制
+    .vertical-modal-wrapper {
+        &.method-modal1 {
+            background-color: rgba(0,0,0,.4);
+        }
+        .u-modal-dialog{
+            width: 80% !important;
+        }
+        .u-modal-header{
+            padding: 0px !important;
+            height: auto !important;
+            i.uf-close{
+                font-size: 24px;
+            }
+            .u-modal-title{
+                font-size: 40px !important;
+                line-height: 40px!important;
+                color:#333333;
+                height: auto !important;
+
+                .u-modal-confirm-title{
+                    font-size: 40px !important;
+                }
+            }
+        }
+        .u-modal-content{
+            padding: 30px 45px;
+            border-radius: 30px !important;
+            box-shadow: 0 5px 15px rgba(0,0,0,.2) !important;
+            .u-modal-body{
+                height: auto !important;
+                padding-top: 110px !important;
+                .content1{
+                    min-height: 50px;
+                    font-size: 38px;
+                    line-height: 48px;
+                    display: block;
+                    .method-modal-ticon{
+                        font-size: 48px !important;
+                        left: 25px !important;
+                        height: 48px;
+                        &:before{
+                            position: relative;
+                            top: 13px;
+                        }
+                    }
+                }
+            }
+            .u-button{
+                border-radius: 32px;
+                font-size: 32px !important;
+                padding: 6px 44px;
+            }
+            .u-modal-footer{
+                height: 96px !important;
+                .u-button{
+                    min-height: 64px;
+                }
+            }
+            .u-modal-footer, .modal-footer-container{
+                margin-bottom: 8px;
+                margin-top: 80px;
+                .u-button{
+                    &:first-child{
+                        margin-right: 40px!important
+                    }
+                }
+            }
+            .modal-footer-container{
+                text-align: right;
+                margin-right: -10px;
+                padding: 15px 0 15px 15px;
+                border-top: 1px solid transparent;
+                margin-top: 80px;
+            }
+        }
+        &.wrapperControl-modal-container{
+            .u-modal-footer{
+                display: none;
+            }
+        }
+        .u-modal-confirm-content{
+            .content1{
+                padding-left: 120px !important;
+                position: relative !important;
+                transform: translateY(0) !important;
+                .content-box{
+                    position: relative;
+                    .iconfont{
+                        left: -95px !important;
+                    }
+                }
+            }
+        }
+    }
+}