From 79509e99f9f6b96c3ebef1ff3973cfb2fc3281c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?0o=E5=BC=A0=E4=B8=8D=E6=AD=AAo0?= Date: Wed, 29 Jun 2022 18:03:31 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E6=96=B0=E5=A2=9Elayer?= =?UTF-8?q?.notifiy()=E6=96=B9=E6=B3=95,=E4=BF=AE=E5=A4=8Dlayer=E4=BC=A0?= =?UTF-8?q?=E5=85=A5time:0=E6=97=B6=E7=9B=B4=E6=8E=A5=E6=89=A7=E8=A1=8C?= =?UTF-8?q?=E9=94=80=E6=AF=81=E7=9A=84=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ISSUES CLOSED: #I5BUMN --- .../document-layer/src/document/zh-CN/demo.md | 101 +- .../src/document/zh-CN/index.md | 1 + package/layer/src/component/Notifiy.vue | 59 + package/layer/src/component/index.vue | 122 +- package/layer/src/index.ts | 22 +- package/layer/src/theme/index.css | 1548 +++++++++-------- package/layer/src/utils/index.ts | 106 +- 7 files changed, 1132 insertions(+), 827 deletions(-) create mode 100644 package/layer/src/component/Notifiy.vue diff --git a/package/document-layer/src/document/zh-CN/demo.md b/package/document-layer/src/document/zh-CN/demo.md index 7e66119b..df8804b3 100644 --- a/package/document-layer/src/document/zh-CN/demo.md +++ b/package/document-layer/src/document/zh-CN/demo.md @@ -231,7 +231,7 @@ const openAreaAuto2 = function(){ title:"area:auto", offset:['10px','50%'], isHtmlFragment:true, - content:"" + content:"", }) } @@ -322,6 +322,105 @@ const groupImg = function() { ::: +::: demo 通过 layer.notifiy(options) 创建通知。 + + + + + +::: +
销毁
diff --git a/package/document-layer/src/document/zh-CN/index.md b/package/document-layer/src/document/zh-CN/index.md index 60f2eb79..38c5ee41 100644 --- a/package/document-layer/src/document/zh-CN/index.md +++ b/package/document-layer/src/document/zh-CN/index.md @@ -96,6 +96,7 @@ const changeVisible = () => { | shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` | | isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` | | imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - | +| startIndex | 图片初始浏览索引 | number | 0 | - |
动画
diff --git a/package/layer/src/component/Notifiy.vue b/package/layer/src/component/Notifiy.vue new file mode 100644 index 00000000..7945af23 --- /dev/null +++ b/package/layer/src/component/Notifiy.vue @@ -0,0 +1,59 @@ + + + diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue index 72b293e8..03bd600c 100644 --- a/package/layer/src/component/index.vue +++ b/package/layer/src/component/index.vue @@ -11,6 +11,7 @@ import Title from "./Title.vue"; import CloseBtn from "./CloseBtn.vue"; import Resize from "./Resize.vue"; import Photos from "./Photos.vue"; +import Notifiy from "./Notifiy.vue"; import { Ref, ref, @@ -36,11 +37,12 @@ import { getDrawerAnimationClass, calculateDrawerArea, calculatePhotosArea, + calculateNotifOffset, + removeNotifiyFromQueen, } from "../utils"; import useMove from "../composable/useMove"; import useResize from "../composable/useResize"; import { zIndexKey } from "../tokens"; -import { arrayExpression } from "@babel/types"; export interface LayModalProps { id?: string; @@ -57,18 +59,20 @@ export interface LayModalProps { move?: boolean | string; resize?: boolean | string; type?: - | 0 - | 1 - | 2 - | 3 - | 4 - | 5 - | "dialog" - | "page" - | "iframe" - | "loading" - | "drawer" - | "photos"; + | 0 + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | "dialog" + | "page" + | "iframe" + | "loading" + | "drawer" + | "photos" + | "notifiy"; content?: string | Function | object | VNodeTypes; isHtmlFragment?: boolean; shade?: boolean | string; @@ -115,12 +119,12 @@ const props = withDefaults(defineProps(), { resize: false, isHtmlFragment: false, isOutAnim: true, - destroy: () => {}, - success: () => {}, - end: () => {}, - full: () => {}, - min: () => {}, - restore: () => {}, + destroy: () => { }, + success: () => { }, + end: () => { }, + full: () => { }, + min: () => { }, + restore: () => { }, yesText: "确定", isFunction: false, isMessage: false, @@ -182,6 +186,9 @@ const firstOpenDelayCalculation = function () { area.value = ["auto", "auto"]; } offset.value = calculateOffset(props.offset, area.value, props.type); + if (type == 6) { + offset.value = calculateNotifOffset(props.offset, area.value, id.value) + } w.value = area.value[0]; h.value = area.value[1]; _w.value = area.value[0]; @@ -375,6 +382,7 @@ const boxClasses = computed(() => { type === 3 ? "layui-layer-loading" : "", type === 4 ? "layui-layer-drawer" : "", type === 5 ? "layui-layer-photos" : "", + type === 6 ? "layui-layer-notifiy-border" : "", props.isMessage ? "layui-layer-msg" : "", props.isMessage && !props.icon ? "layui-layer-hui" : "", props.skin, @@ -433,9 +441,8 @@ const styles = computed(() => { offset.value[1].indexOf("%") > -1 ) { // @ts-ignore - style.transform = `translate(-${ - style.left.indexOf("%") > -1 ? style.left : 0 - },-${style.top.indexOf("%") > -1 ? style.top : 0})`; + style.transform = `translate(-${style.left.indexOf("%") > -1 ? style.left : 0 + },-${style.top.indexOf("%") > -1 ? style.top : 0})`; } } } @@ -462,9 +469,15 @@ const contentClasses = computed(() => { * @param null */ const closeHandle = () => { + emit("close"); emit("update:modelValue", false); props.destroy(); + + //Notify 从队列中移除当前实例 + if(type===6){ + removeNotifiyFromQueen(props.id) + } }; /** @@ -578,7 +591,7 @@ const showResize = computed(() => { * @param type 类型 */ const showTitle = computed(() => { - return props.title && props.type != 3 && props.type != "photos"; + return props.title && props.type != 3 && props.type != 5 && props.type != 6; }); /* @@ -606,33 +619,15 @@ defineExpose({ reset, open, close }); - + + - - + + - + -
+
diff --git a/package/layer/src/index.ts b/package/layer/src/index.ts index ba2f7a52..ab309758 100644 --- a/package/layer/src/index.ts +++ b/package/layer/src/index.ts @@ -2,7 +2,7 @@ import { render, h, isVNode, getCurrentInstance, AppContext, App } from "vue"; import LayLayer from "./component/index.vue"; import { InstallOptions } from "./types"; import { zIndexKey } from "./tokens"; -import { nextId } from "./utils"; +import { nextId, removeNotifiyFromQueen } from "./utils"; // 实例队列 const layerInstance: any = []; @@ -129,7 +129,7 @@ const layer = { }; } let defaultOption = { - type: "photos", + type: 5, anim: 2, startIndex: 0, isOutAnim: true, @@ -138,6 +138,18 @@ const layer = { }; return layer.create(option, defaultOption, callback); }, + //通知 + notifiy: (option: any = {}, callback?: Function) => { + option.anim = 5 + option.shade = false + option.type = 6 + let defaultOption = { + offset: 'rt', + time:2000, + area:'auto' + } + return layer.create(option, defaultOption, callback); + }, // 创建弹出层 create: (option: any, defaultOption: any, callback?: Function) => { // 销毁定时 @@ -174,7 +186,7 @@ const layer = { // 调用 open 函数 modalInstance.component?.exposed?.open(); // 延时 time 销毁 - if (defaultOption && defaultOption.time != undefined) { + if (defaultOption && defaultOption.time != undefined && defaultOption.time != 0) { timer = setTimeout(() => { modalInstance.component?.exposed?.close(); if (callback) callback(modalContainer.id); @@ -186,6 +198,10 @@ const layer = { }, 2000); // 销毁实例 delInstance(modalContainer.id); + //Notifiy特殊处理 + if (options.type === 6) { + removeNotifiyFromQueen(options.id) + } }, defaultOption.time); } // 维护实例 diff --git a/package/layer/src/theme/index.css b/package/layer/src/theme/index.css index 154ea4da..9f8baa01 100644 --- a/package/layer/src/theme/index.css +++ b/package/layer/src/theme/index.css @@ -2,1236 +2,1284 @@ .layui-layer-imgtit a, .layui-layer-tab .layui-layer-title span, .layui-layer-title { - text-overflow: ellipsis; - white-space: nowrap; - user-select:none; + text-overflow: ellipsis; + white-space: nowrap; + user-select: none; } html #layuicss-layer { - display: none; - position: absolute; - width: 1989px + display: none; + position: absolute; + width: 1989px; } .layui-layer, .layui-layer-shade { - position: fixed; - pointer-events: auto + position: fixed; + pointer-events: auto; } .layui-layer-shade { - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgb(0, 0, 0); + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0, 0, 0); } .layui-layer { - -webkit-overflow-scrolling: touch; - top: 150px; - left: 0; - margin: 0; - padding: 0; - background-color: #fff; - -webkit-background-clip: content; - border-radius: 2px; - box-shadow: 1px 1px 50px rgba(0, 0, 0, .3) + -webkit-overflow-scrolling: touch; + top: 150px; + left: 0; + margin: 0; + padding: 0; + background-color: #fff; + -webkit-background-clip: content; + border-radius: 2px; + box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); } .layui-layer-close { - position: absolute + position: absolute; } .layui-layer-content { - position: relative + position: relative; } .layui-layer-border { - border: 1px solid #eeeeee; - box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); + border: 1px solid #eeeeee; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .layui-layer-load { - background: url(loading-1.gif) center center no-repeat #eee + background: url(loading-1.gif) center center no-repeat #eee; } .layui-layer-ico { - background: url(icon.png) no-repeat + background: url(icon.png) no-repeat; } .layui-layer-btn a, .layui-layer-dialog .layui-layer-ico, .layui-layer-setwin a { - display: inline-block; - vertical-align: top + display: inline-block; + vertical-align: top; } .layui-layer-move { - display: none; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - cursor: move; - opacity: 0; - filter: alpha(opacity=0); - background-color: #fff; - z-index: 2147483647 + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + cursor: move; + opacity: 0; + filter: alpha(opacity=0); + background-color: #fff; + z-index: 2147483647; } .layui-layer-resize { - z-index: 999999999; - position: absolute; - width: 15px; - height: 15px; - right: 0; - bottom: 0; - cursor: se-resize + z-index: 999999999; + position: absolute; + width: 15px; + height: 15px; + right: 0; + bottom: 0; + cursor: se-resize; } .layer-anim { - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .3s; - animation-duration: .3s + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; } /* 抽屉开始 */ -.layer-drawer-anim{ - -webkit-animation-duration: .3s; - animation-duration: .3s; - -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); - animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); +.layer-drawer-anim { + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); + animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); } /* right to left */ @keyframes layer-rl { - from { - -webkit-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - opacity: 1; - - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } + from { + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } } @-webkit-keyframes layer-rl { - from { - -webkit-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - opacity: 1; - - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } + from { + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } } .layer-anim-rl { - -webkit-animation-name: layer-rl; - animation-name: layer-rl; + -webkit-animation-name: layer-rl; + animation-name: layer-rl; } /* right to left close */ @keyframes layer-rl-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - -webkit-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } } @-webkit-keyframes layer-rl-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - - } - to { - -webkit-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } } .layer-anim-rl-close { - -webkit-animation-name: layer-rl-close; - animation-name: layer-rl-close; + -webkit-animation-name: layer-rl-close; + animation-name: layer-rl-close; } /* left to right */ @-webkit-keyframes layer-lr { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } - to { - -webkit-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - opacity: 1 - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + opacity: 1; + } } @keyframes layer-lr { - from { - -webkit-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - opacity: 1 - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } + from { + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } } .layer-anim-lr { - -webkit-animation-name: layer-lr; - animation-name: layer-lr + -webkit-animation-name: layer-lr; + animation-name: layer-lr; } /* left to right close */ @-webkit-keyframes layer-lr-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - -webkit-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } @keyframes layer-lr-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - -webkit-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } .layer-anim-lr-close { - -webkit-animation-name: layer-lr-close; - animation-name: layer-lr-close + -webkit-animation-name: layer-lr-close; + animation-name: layer-lr-close; } /* top to bottom */ @-webkit-keyframes layer-tb { - from { - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - opacity: 1; - animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); - } + from { + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + opacity: 1; + animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); + } } @keyframes layer-tb { - from { - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - opacity: 1; - animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); - } + from { + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + opacity: 1; + animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1); + } } .layer-anim-tb { - -webkit-animation-name: layer-tb; - animation-name: layer-tb + -webkit-animation-name: layer-tb; + animation-name: layer-tb; } /* top to bottom close */ @-webkit-keyframes layer-tb-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } } @keyframes layer-tb-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } } .layer-anim-tb-close { - -webkit-animation-name: layer-tb-close; - animation-name: layer-tb-close + -webkit-animation-name: layer-tb-close; + animation-name: layer-tb-close; } /* bottom to top */ @-webkit-keyframes layer-bt { - from { - -webkit-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - opacity: 1 - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } + from { + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } } @keyframes layer-bt { - from { - -webkit-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - opacity: 1 - } - to { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } + from { + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } } .layer-anim-bt { - -webkit-animation-name: layer-bt; - animation-name: layer-bt + -webkit-animation-name: layer-bt; + animation-name: layer-bt; } /* bottom to top close */ @-webkit-keyframes layer-bt-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - to { - -webkit-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } } @keyframes layer-bt-close { - from { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - - } - to { - -webkit-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - - } + from { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } } .layer-anim-bt-close { - -webkit-animation-name: layer-bt-close; - animation-name: layer-bt-close + -webkit-animation-name: layer-bt-close; + animation-name: layer-bt-close; } /* 抽屉结束 */ @-webkit-keyframes layer-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5) - } + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1) - } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } } @keyframes layer-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - -ms-transform: scale(.5); - transform: scale(.5) - } + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + } - 100% { - opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1) - } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } } .layer-anim-00 { - -webkit-animation-name: layer-bounceIn; - animation-name: layer-bounceIn + -webkit-animation-name: layer-bounceIn; + animation-name: layer-bounceIn; } @-webkit-keyframes layer-zoomInDown { - 0% { - opacity: 0; - -webkit-transform: scale(.1) translateY(-2000px); - transform: scale(.1) translateY(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out - } + 0% { + opacity: 0; + -webkit-transform: scale(0.1) translateY(-2000px); + transform: scale(0.1) translateY(-2000px); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } - 60% { - opacity: 1; - -webkit-transform: scale(.475) translateY(60px); - transform: scale(.475) translateY(60px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out - } + 60% { + opacity: 1; + -webkit-transform: scale(0.475) translateY(60px); + transform: scale(0.475) translateY(60px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } } @keyframes layer-zoomInDown { - 0% { - opacity: 0; - -webkit-transform: scale(.1) translateY(-2000px); - -ms-transform: scale(.1) translateY(-2000px); - transform: scale(.1) translateY(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out - } + 0% { + opacity: 0; + -webkit-transform: scale(0.1) translateY(-2000px); + -ms-transform: scale(0.1) translateY(-2000px); + transform: scale(0.1) translateY(-2000px); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } - 60% { - opacity: 1; - -webkit-transform: scale(.475) translateY(60px); - -ms-transform: scale(.475) translateY(60px); - transform: scale(.475) translateY(60px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out - } + 60% { + opacity: 1; + -webkit-transform: scale(0.475) translateY(60px); + -ms-transform: scale(0.475) translateY(60px); + transform: scale(0.475) translateY(60px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } } .layer-anim-01 { - -webkit-animation-name: layer-zoomInDown; - animation-name: layer-zoomInDown + -webkit-animation-name: layer-zoomInDown; + animation-name: layer-zoomInDown; } @-webkit-keyframes layer-fadeInUpBig { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - transform: translateY(2000px) - } + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0) - } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } } @keyframes layer-fadeInUpBig { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px) - } + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + -ms-transform: translateY(2000px); + transform: translateY(2000px); + } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0) - } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } } .layer-anim-02 { - -webkit-animation-name: layer-fadeInUpBig; - animation-name: layer-fadeInUpBig + -webkit-animation-name: layer-fadeInUpBig; + animation-name: layer-fadeInUpBig; } @-webkit-keyframes layer-zoomInLeft { - 0% { - opacity: 0; - -webkit-transform: scale(.1) translateX(-2000px); - transform: scale(.1) translateX(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out - } + 0% { + opacity: 0; + -webkit-transform: scale(0.1) translateX(-2000px); + transform: scale(0.1) translateX(-2000px); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } - 60% { - opacity: 1; - -webkit-transform: scale(.475) translateX(48px); - transform: scale(.475) translateX(48px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out - } + 60% { + opacity: 1; + -webkit-transform: scale(0.475) translateX(48px); + transform: scale(0.475) translateX(48px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } } @keyframes layer-zoomInLeft { - 0% { - opacity: 0; - -webkit-transform: scale(.1) translateX(-2000px); - -ms-transform: scale(.1) translateX(-2000px); - transform: scale(.1) translateX(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out - } + 0% { + opacity: 0; + -webkit-transform: scale(0.1) translateX(-2000px); + -ms-transform: scale(0.1) translateX(-2000px); + transform: scale(0.1) translateX(-2000px); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } - 60% { - opacity: 1; - -webkit-transform: scale(.475) translateX(48px); - -ms-transform: scale(.475) translateX(48px); - transform: scale(.475) translateX(48px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out - } + 60% { + opacity: 1; + -webkit-transform: scale(0.475) translateX(48px); + -ms-transform: scale(0.475) translateX(48px); + transform: scale(0.475) translateX(48px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } } .layer-anim-03 { - -webkit-animation-name: layer-zoomInLeft; - animation-name: layer-zoomInLeft + -webkit-animation-name: layer-zoomInLeft; + animation-name: layer-zoomInLeft; } @-webkit-keyframes layer-rollIn { - 0% { - opacity: 0; - -webkit-transform: translateX(-100%) rotate(-120deg); - transform: translateX(-100%) rotate(-120deg) - } + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } - 100% { - opacity: 1; - -webkit-transform: translateX(0) rotate(0); - transform: translateX(0) rotate(0) - } + 100% { + opacity: 1; + -webkit-transform: translateX(0) rotate(0); + transform: translateX(0) rotate(0); + } } @keyframes layer-rollIn { - 0% { - opacity: 0; - -webkit-transform: translateX(-100%) rotate(-120deg); - -ms-transform: translateX(-100%) rotate(-120deg); - transform: translateX(-100%) rotate(-120deg) - } + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + -ms-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } - 100% { - opacity: 1; - -webkit-transform: translateX(0) rotate(0); - -ms-transform: translateX(0) rotate(0); - transform: translateX(0) rotate(0) - } + 100% { + opacity: 1; + -webkit-transform: translateX(0) rotate(0); + -ms-transform: translateX(0) rotate(0); + transform: translateX(0) rotate(0); + } } .layer-anim-04 { - -webkit-animation-name: layer-rollIn; - animation-name: layer-rollIn + -webkit-animation-name: layer-rollIn; + animation-name: layer-rollIn; } @keyframes layer-fadeIn { - 0% { - opacity: 0 - } + 0% { + opacity: 0; + } - 100% { - opacity: 1 - } + 100% { + opacity: 1; + } } .layer-anim-05 { - -webkit-animation-name: layer-fadeIn; - animation-name: layer-fadeIn + -webkit-animation-name: layer-fadeIn; + animation-name: layer-fadeIn; } @-webkit-keyframes layer-shake { + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 0%, - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translateX(-10px); - transform: translateX(-10px) - } - - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translateX(10px); - transform: translateX(10px) - } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } } @keyframes layer-shake { + 0%, + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } - 0%, - 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0) - } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + -ms-transform: translateX(-10px); + transform: translateX(-10px); + } - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translateX(-10px); - -ms-transform: translateX(-10px); - transform: translateX(-10px) - } - - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translateX(10px); - -ms-transform: translateX(10px); - transform: translateX(10px) - } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); + } } .layer-anim-06 { - -webkit-animation-name: layer-shake; - animation-name: layer-shake + -webkit-animation-name: layer-shake; + animation-name: layer-shake; } @-webkit-keyframes fadeIn { - 0% { - opacity: 0 - } + 0% { + opacity: 0; + } - 100% { - opacity: 1 - } + 100% { + opacity: 1; + } } .layui-layer-title { - padding: 0 100px 0 20px; - height: 50px; - line-height: 50px; - border-bottom: 1px solid #F0F0F0; - font-size: 14px; - color: #333; - overflow: hidden; - border-radius: 2px 2px 0 0 + padding: 0 100px 0 20px; + height: 50px; + line-height: 50px; + border-bottom: 1px solid #f0f0f0; + font-size: 14px; + color: #333; + overflow: hidden; + border-radius: 2px 2px 0 0; } .layui-layer-setwin { - position: absolute; - right: 15px; - top: 17px; - font-size: 0; - line-height: initial + position: absolute; + right: 15px; + top: 17px; + font-size: 0; + line-height: initial; } .layui-layer-setwin a { - position: relative; - width: 16px; - height: 16px; - margin-left: 10px; - font-size: 12px; + position: relative; + width: 16px; + height: 16px; + margin-left: 10px; + font-size: 12px; } .layui-layer-setwin .layui-layer-min cite { - position: absolute; - width: 14px; - height: 2px; - left: 0; - top: 50%; - margin-top: -1px; - background-color: #2E2D3C; - cursor: pointer; + position: absolute; + width: 14px; + height: 2px; + left: 0; + top: 50%; + margin-top: -1px; + background-color: #2e2d3c; + cursor: pointer; } .layui-layer-setwin .layui-layer-min:hover cite { - background-color: #2D93CA + background-color: #2d93ca; } .layui-layer-setwin .layui-layer-max { - background-position: -32px -40px + background-position: -32px -40px; } .layui-layer-setwin .layui-layer-max:hover { - background-position: -16px -40px + background-position: -16px -40px; } .layui-layer-setwin .layui-layer-maxmin { - background-position: -65px -40px + background-position: -65px -40px; } .layui-layer-setwin .layui-layer-maxmin:hover { - background-position: -49px -40px + background-position: -49px -40px; } .layui-layer-setwin .layui-layer-close1 { - background-position: 1px -40px; - cursor: pointer + background-position: 1px -40px; + cursor: pointer; } .layui-layer-setwin .layui-layer-close1:hover { - opacity: .7 + opacity: 0.7; } .layui-layer-setwin .layui-layer-close2 { - position: absolute; - right: -28px; - top: -28px; - width: 30px; - height: 30px; - margin-left: 0; - background-position: -149px -31px; + position: absolute; + right: -28px; + top: -28px; + width: 30px; + height: 30px; + margin-left: 0; + background-position: -149px -31px; } .layui-layer-setwin .layui-layer-close2:hover { - background-position: -180px -31px + background-position: -180px -31px; } .layui-layer-btn { - text-align: right; - padding: 0 15px 12px; - pointer-events: auto; - user-select: none; - -webkit-user-select: none + text-align: right; + padding: 0 15px 12px; + pointer-events: auto; + user-select: none; + -webkit-user-select: none; } .layui-layer-btn a { - height: 28px; - line-height: 28px; - margin: 5px 5px 0; - padding: 0 15px; - border: 1px solid #dedede; - background-color: #fff; - color: #333; - border-radius: 2px; - font-weight: 400; - cursor: pointer; - text-decoration: none + height: 28px; + line-height: 28px; + margin: 5px 5px 0; + padding: 0 15px; + border: 1px solid #dedede; + background-color: #fff; + color: #333; + border-radius: 2px; + font-weight: 400; + cursor: pointer; + text-decoration: none; } .layui-layer-btn a:hover { - opacity: .9; - text-decoration: none + opacity: 0.9; + text-decoration: none; } .layui-layer-btn a:active { - opacity: .8 + opacity: 0.8; } .layui-layer-btn .layui-layer-btn0 { - border-color: #1E9FFF; - background-color: #1E9FFF; - color: #fff + border-color: #1e9fff; + background-color: #1e9fff; + color: #fff; } .layui-layer-btn-l { - text-align: left + text-align: left; } .layui-layer-btn-c { - text-align: center + text-align: center; } .layui-layer-dialog { - min-width: 300px + min-width: 300px; } .layui-layer-dialog .layui-layer-content { - position: relative; - padding: 20px; - line-height: 24px; - word-break: break-all; - overflow: hidden; - font-size: 14px; - overflow-x: hidden; - overflow-y: auto + position: relative; + padding: 20px; + line-height: 24px; + word-break: break-all; + overflow: hidden; + font-size: 14px; + overflow-x: hidden; + overflow-y: auto; } .layui-layer-dialog .layui-layer-content .layui-layer-ico { - position: absolute; - top: 15px; - left: 15px; - width: 30px; - height: 30px + position: absolute; + top: 15px; + left: 15px; + width: 30px; + height: 30px; } .layui-layer-dialog .layui-layer-content .layui-layer-ico.layui-layer-ico16 { - width: 33px; - height: 33px; + width: 33px; + height: 33px; } .layui-layer-ico1 { - background-position: -30px 0 + background-position: -30px 0; } .layui-layer-ico2 { - background-position: -60px 0 + background-position: -60px 0; } .layui-layer-ico3 { - background-position: -90px 0 + background-position: -90px 0; } .layui-layer-ico4 { - background-position: -120px 0 + background-position: -120px 0; } .layui-layer-ico5 { - background-position: -150px 0 + background-position: -150px 0; } .layui-layer-ico6 { - background-position: -180px 0 + background-position: -180px 0; } .layui-layer-rim { - border: 6px solid #8D8D8D; - border: 6px solid rgba(0, 0, 0, .3); - border-radius: 5px; - box-shadow: none + border: 6px solid #8d8d8d; + border: 6px solid rgba(0, 0, 0, 0.3); + border-radius: 5px; + box-shadow: none; } .layui-layer-msg { - min-width: 180px; - border: 1px solid rgba(220, 220, 220, 0.5); - box-shadow: 2px 0 8px 0 rgb(29 35 41 / 3%) + min-width: 180px; + border: 1px solid rgba(220, 220, 220, 0.5); + box-shadow: 2px 0 8px 0 rgb(29 35 41 / 3%); } .layui-layer-hui { - min-width: 100px; - background-color: #000; - filter: alpha(opacity=60); - background-color: rgba(0, 0, 0, .6); - color: #fff; - border: none + min-width: 100px; + background-color: #000; + filter: alpha(opacity=60); + background-color: rgba(0, 0, 0, 0.6); + color: #fff; + border: none; } .layui-layer-hui .layui-layer-content { - padding: 12px 25px; - text-align: center + padding: 12px 25px; + text-align: center; } .layui-layer-dialog .layui-layer-padding { - padding: 20px 20px 20px 55px; - text-align: left + padding: 20px 20px 20px 55px; + text-align: left; } .layui-layer-drawer { - border-radius: 0px; + border-radius: 0px; } .layui-layer-drawer .layui-layer-content, .layui-layer-page .layui-layer-content { - position: relative; - overflow: auto + position: relative; + overflow: auto; } .layui-layer-drawer .layui-layer-btn, .layui-layer-iframe .layui-layer-btn, .layui-layer-page .layui-layer-btn { - padding-top: 10px + padding-top: 10px; } .layui-layer-nobg { - background: 0 0 + background: 0 0; } .layui-layer-iframe iframe { - display: block; - width: 100%; - height: 100%; + display: block; + width: 100%; + height: 100%; } .layui-layer-loading { - border-radius: 100%; - background: 0 0; - box-shadow: none; - border: none + border-radius: 100%; + background: 0 0; + box-shadow: none; + border: none; } .layui-layer-loading .layui-layer-content { - width: 60px; - height: 24px; - background: url(loading-0.gif) no-repeat + width: 60px; + height: 24px; + background: url(loading-0.gif) no-repeat; } .layui-layer-loading .layui-layer-loading1 { - width: 37px; - height: 37px; - background: url(loading-1.gif) no-repeat + width: 37px; + height: 37px; + background: url(loading-1.gif) no-repeat; } .layui-layer-ico16, .layui-layer-loading .layui-layer-loading2 { - width: 32px; - height: 32px; - background: url(loading-2.gif) no-repeat + width: 32px; + height: 32px; + background: url(loading-2.gif) no-repeat; } .layui-layer-tips { - background: 0 0; - box-shadow: none; - border: none + background: 0 0; + box-shadow: none; + border: none; } .layui-layer-tips .layui-layer-content { - position: relative; - line-height: 22px; - min-width: 12px; - padding: 8px 15px; - font-size: 12px; - border-radius: 2px; - box-shadow: 1px 1px 3px rgba(0, 0, 0, .2); - background-color: #000; - color: #fff + position: relative; + line-height: 22px; + min-width: 12px; + padding: 8px 15px; + font-size: 12px; + border-radius: 2px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); + background-color: #000; + color: #fff; } .layui-layer-tips .layui-layer-close { - right: -2px; - top: -1px + right: -2px; + top: -1px; } .layui-layer-tips i.layui-layer-TipsG { - position: absolute; - width: 0; - height: 0; - border-width: 8px; - border-color: transparent; - border-style: dashed; + position: absolute; + width: 0; + height: 0; + border-width: 8px; + border-color: transparent; + border-style: dashed; } .layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT { - left: 5px; - border-right-style: solid; - border-right-color: #000 + left: 5px; + border-right-style: solid; + border-right-color: #000; } .layui-layer-tips i.layui-layer-TipsT { - bottom: -8px + bottom: -8px; } .layui-layer-tips i.layui-layer-TipsB { - top: -8px + top: -8px; } .layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR { - top: 5px; - border-bottom-style: solid; - border-bottom-color: #000 + top: 5px; + border-bottom-style: solid; + border-bottom-color: #000; } .layui-layer-tips i.layui-layer-TipsR { - left: -8px + left: -8px; } .layui-layer-tips i.layui-layer-TipsL { - right: -8px + right: -8px; } -.layui-layer-lan[type=dialog] { - min-width: 280px +.layui-layer-lan[type="dialog"] { + min-width: 280px; } .layui-layer-lan .layui-layer-title { - background: #4476A7; - color: #fff; - border: none + background: #4476a7; + color: #fff; + border: none; } .layui-layer-lan .layui-layer-btn { - padding: 5px 10px 10px; - text-align: right; - border-top: 1px solid #E9E7E7 + padding: 5px 10px 10px; + text-align: right; + border-top: 1px solid #e9e7e7; } .layui-layer-lan .layui-layer-btn a { - background: #fff; - border-color: #E9E7E7; - color: #333 + background: #fff; + border-color: #e9e7e7; + color: #333; } .layui-layer-lan .layui-layer-btn .layui-layer-btn1 { - background: #C9C5C5 + background: #c9c5c5; } .layui-layer-molv .layui-layer-title { - background: #009f95; - color: #fff; - border: none + background: #009f95; + color: #fff; + border: none; } .layui-layer-molv .layui-layer-btn a { - background: #009f95; - border-color: #009f95 + background: #009f95; + border-color: #009f95; } .layui-layer-molv .layui-layer-btn .layui-layer-btn1 { - background: #92B8B1 + background: #92b8b1; } .layui-layer-iconext { - background: url(icon-ext.png) no-repeat + background: url(icon-ext.png) no-repeat; } .layui-layer-prompt .layui-layer-input { - display: block; - width: 260px; - height: 36px; - margin: 0 auto; - line-height: 30px; - padding-left: 10px; - border: 1px solid #e6e6e6; - color: #333 + display: block; + width: 260px; + height: 36px; + margin: 0 auto; + line-height: 30px; + padding-left: 10px; + border: 1px solid #e6e6e6; + color: #333; } .layui-layer-prompt textarea.layui-layer-input { - width: 300px; - height: 100px; - line-height: 20px; - padding: 6px 10px + width: 300px; + height: 100px; + line-height: 20px; + padding: 6px 10px; } .layui-layer-prompt .layui-layer-content { - padding: 20px + padding: 20px; } .layui-layer-prompt .layui-layer-btn { - padding-top: 0 + padding-top: 0; } .layui-layer-tab { - box-shadow: 1px 1px 50px rgba(0, 0, 0, .4) + box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.4); } .layui-layer-tab .layui-layer-title { - padding-left: 0; - overflow: visible + padding-left: 0; + overflow: visible; } .layui-layer-tab .layui-layer-title span { - position: relative; - float: left; - min-width: 80px; - max-width: 300px; - padding: 0 20px; - text-align: center; - overflow: hidden; - cursor: pointer + position: relative; + float: left; + min-width: 80px; + max-width: 300px; + padding: 0 20px; + text-align: center; + overflow: hidden; + cursor: pointer; } .layui-layer-tab .layui-layer-title span.layui-this { - height: 51px; - border-left: 1px solid #eee; - border-right: 1px solid #eee; - background-color: #fff; - z-index: 10 + height: 51px; + border-left: 1px solid #eee; + border-right: 1px solid #eee; + background-color: #fff; + z-index: 10; } .layui-layer-tab .layui-layer-title span:first-child { - border-left: none + border-left: none; } .layui-layer-tabmain { - line-height: 24px; - clear: both + line-height: 24px; + clear: both; } .layui-layer-tabmain .layui-layer-tabli { - display: none + display: none; } .layui-layer-tabmain .layui-layer-tabli.layui-this { - display: block + display: block; } .layui-layer-photos { - background: 0 0; - box-shadow: none; - border:none + background: 0 0; + box-shadow: none; + border: none; } .layui-layer-photos .layui-layer-content { - overflow: hidden; - text-align: center + overflow: hidden; + text-align: center; } .layui-layer-photos .layui-layer-phimg img { - position: relative; - width: 100%; - display: inline-block; - vertical-align: top + position: relative; + width: 100%; + display: inline-block; + vertical-align: top; } .layui-layer-imgnext, .layui-layer-imgprev { - position: fixed; - top: 50%; - width: 27px; - height: 44px; - margin-top: -22px; - outline: 0; + position: fixed; + top: 50%; + width: 27px; + height: 44px; + margin-top: -22px; + outline: 0; } .layui-layer-imgprev { - left: 30px; - background-position: -5px -5px; + left: 30px; + background-position: -5px -5px; } .layui-layer-imgprev:hover { - background-position: -33px -5px; + background-position: -33px -5px; } .layui-layer-imgnext { - right: 30px; - background-position: -5px -50px; + right: 30px; + background-position: -5px -50px; } .layui-layer-imgnext:hover { - background-position: -33px -50px; + background-position: -33px -50px; } .layui-layer-imgbar { - position: fixed; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 40px; - line-height: 40px; - filter: Alpha(opacity=60); - background-color: rgba(2, 0, 0, .35); - color: #fff; - overflow: hidden; - font-size: 0; - opacity: 0; - transition: all 1s ease-in-out; + position: fixed; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 40px; + line-height: 40px; + filter: Alpha(opacity=60); + background-color: rgba(2, 0, 0, 0.35); + color: #fff; + overflow: hidden; + font-size: 0; + opacity: 0; + transition: all 1s ease-in-out; } .layui-layer-imgtit * { - display: inline-block; - vertical-align: top; - font-size: 12px + display: inline-block; + vertical-align: top; + font-size: 12px; } .layui-layer-imgtit a { - max-width: 65%; - overflow: hidden; - color: #fff + max-width: 65%; + overflow: hidden; + color: #fff; } .layui-layer-imgtit a:hover { - color: #fff; - text-decoration: underline + color: #fff; + text-decoration: underline; } .layui-layer-imgtit em { - padding-left: 10px; - font-style: normal + padding-left: 10px; + font-style: normal; } @-webkit-keyframes layer-bounceOut { - 100% { - opacity: 0; - -webkit-transform: scale(.7); - transform: scale(.7) - } + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + transform: scale(0.7); + } - 30% { - -webkit-transform: scale(1.05); - transform: scale(1.05) - } + 30% { + -webkit-transform: scale(1.05); + transform: scale(1.05); + } - 0% { - -webkit-transform: scale(1); - transform: scale(1) - } + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } } @keyframes layer-bounceOut { - 100% { - opacity: 0; - -webkit-transform: scale(.7); - -ms-transform: scale(.7); - transform: scale(.7) - } + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } - 30% { - -webkit-transform: scale(1.05); - -ms-transform: scale(1.05); - transform: scale(1.05) - } + 30% { + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); + } - 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1) - } + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } } .layer-anim-close { - -webkit-animation-name: layer-bounceOut; - animation-name: layer-bounceOut; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .2s; - animation-duration: .2s + -webkit-animation-name: layer-bounceOut; + animation-name: layer-bounceOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; } -@media screen and (max-width:1100px) { - .layui-layer-iframe { - overflow-y: auto; - -webkit-overflow-scrolling: touch - } +@media screen and (max-width: 1100px) { + .layui-layer-iframe { + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } +} + +.layer-notifiy { + min-width: 330px; + padding: 14px 26px 14px 13px; + box-sizing: border-box; + background-color: #fff; + overflow: hidden; + border: 1px solid #ebeef5; + box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); +} +.layer-notifiy .title { + font-weight: 700; + font-size: 16px; + color: #303133; + margin-left: 8px; + display: flex; + align-items: center; +} +.layer-notifiy .content { + font-size: 14px; + line-height: 21px; + margin: 6px 0 0 8px; + color: #606266; + text-align: justify; +} +.layer-notifiy .content img{ + max-width: 100%; +} +.layer-notifiy .layui-layer-close1 { + background-position: 1px -40px; + cursor: pointer; + width: 15px; + height: 15px; + position: absolute; + top: 10px; + right: 10px; +} + +.layer-notifiy .layui-layer-close1:hover { + opacity: 0.7; +} +.layui-layer-notify{ + transition: top 0.3s ease-in-out; +} +.layui-layer-notifiy-border{ + border: none; + box-shadow: none; +} +.layer-notifiy .title .layui-layer-ico{ + height: 30px !important; + width: 30px !important; + display: inline-block; + transform: scale(0.7); + margin-left: -7px; } \ No newline at end of file diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts index 5c92bb06..fe7c22b9 100644 --- a/package/layer/src/utils/index.ts +++ b/package/layer/src/utils/index.ts @@ -75,6 +75,9 @@ export function calculateOffset(offset: any, area: any, type: any) { if (offset instanceof Array && type === "drawer") { offset = "r"; } + if (offset instanceof Array && type === 6) { + offset = "rt-15"; + } // @ts-ignore if (arr.indexOf(offset) > -1) { t = "50%"; @@ -102,6 +105,9 @@ export function calculateOffset(offset: any, area: any, type: any) { } else if (offset === "rb") { t = "calc(100% - " + area[1] + ")"; l = "calc(100% - " + area[0] + ")"; + } else if (offset === "rt-15") { + t = "15px"; + l = "calc(100% - " + (parseFloat(area[0]) + 15) + "px)"; } // 返回位置 @@ -120,8 +126,10 @@ export function calculateType(modalType: number | string) { return 3; } else if (modalType === "drawer" || modalType == 4) { return 4; - } else if (modalType === "photos") { + } else if (modalType === "photos" || modalType == 5) { return 5; + } else if (modalType === "notifiy" || modalType == 6) { + return 6; } return 0; } @@ -235,6 +243,7 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) { return isClose ? `${prefix}-${suffix}-close` : `${prefix}-${suffix}`; } +//计算图片大小 并缩放 export async function calculatePhotosArea(url: string, options: object) { let img = new Image(); img.src = url; @@ -273,3 +282,98 @@ export async function calculatePhotosArea(url: string, options: object) { return [imgarea[0] + "px", imgarea[1] + "px"]; } } + +// 计算Notify位置 队列 此处先暂时定义Notify的间距为15px +export function calculateNotifOffset(offset: any, area: any, layerId: string) { + let arr = ["lt", "lb", "rt", "rb"]; + let t = '0', l = '0'; + // 间隙 + let transOffsetLeft = 15; + let transOffsetTop = 15; + // @ts-ignore + window.NotifiyQueen = window.NotifiyQueen || []; + // @ts-ignore + let notifiyQueen = window.NotifiyQueen; + if (typeof offset != 'string' || arr.indexOf(offset) === -1) { + offset = "rt"; + } + // 当前区域元素集合 + let nodeList = notifiyQueen.filter((e: { offset: any; }) => { + if (e.offset === offset) { + return e + } + }) + //前一个元素 + let prevNode = nodeList.length > 0 ? nodeList[nodeList.length - 1] : null; + if (prevNode) { + prevNode = document.getElementById(prevNode['id'])?.firstElementChild?.firstElementChild; + if (offset === "rt" || offset === "lt") { + transOffsetTop += prevNode.offsetHeight + parseFloat(prevNode.style['top']) + } else { + let bottom = parseFloat(prevNode.style['top'].split(' - ')[1]) + transOffsetTop += prevNode.offsetHeight + bottom; + } + } else { + if (offset === "rb" || offset === "lb") { + transOffsetTop += parseFloat(area[1]); + } + } + + // 关键字处理 + if (offset === "rt") { + t = transOffsetTop + "px"; + l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)"; + } else if (offset === "rb") { + t = "calc(100vh - " + transOffsetTop + "px)" + l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)"; + } else if (offset === "lt") { + t = transOffsetTop + "px"; + l = transOffsetLeft + "px"; + } else if (offset === "lb") { + t = "calc(100vh - " + transOffsetTop + "px)" + l = transOffsetLeft + "px"; + } + + notifiyQueen.push({ + id: layerId, + offset: offset + }) + // 返回位置 + return [t, l]; +} + +//移除Notify队列中某项，并且重新计算其他Notify位置 +export function removeNotifiyFromQueen(layerId: string | undefined) { + // 间隙 + let transOffsetTop = 15; + // @ts-ignore 删除项的高度 + let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild?.offsetHeight; + // @ts-ignore + window.NotifiyQueen = window.NotifiyQueen || []; + // @ts-ignore + let notifiyQueen = window.NotifiyQueen; + //console.log(notifiyQueen) + let index = notifiyQueen.findIndex((e: { id: string; }) => e.id === layerId) + let offsetType = notifiyQueen[index].offset; + let list = notifiyQueen.filter((e: { offset: any; }) => { + if (e.offset === offsetType) { + return e; + } + }) + let findIndex = list.findIndex((e: { id: string; }) => e.id === layerId) + // //得到需要修改的定位的Notifiy集合 + let needCalculatelist = list.slice(findIndex + 1) + needCalculatelist.forEach((e: { id: string; }) => { + let dom = document.getElementById(e.id)?.firstElementChild?.firstElementChild + if (offsetType === 'rt' || offsetType === 'lt') { + // @ts-ignore + dom.style['top'] = parseFloat(dom.style['top']) - transOffsetTop - offsetHeight + 'px' + } else { + // @ts-ignore + let bottom = parseFloat(dom.style['top'].split(' - ')[1]) - transOffsetTop - offsetHeight + // @ts-ignore + dom.style['top'] = "calc(100vh - " + bottom + "px)" + } + }) + notifiyQueen.splice(index, 1);//删除 +} \ No newline at end of file