.layui-layer-imgbar, .layui-layer-imgtit a, .layui-layer-tab .layui-layer-title span, .layui-layer-title { text-overflow: ellipsis; white-space: nowrap; user-select: none; } .layui-layer, .layui-layer-shade { position: fixed; pointer-events: auto; } .layui-layer-shade { top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); } .layui-layer { top: 0; left: 0; box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); background-color: #fff; border-radius: 2px; padding: 0; margin: 0; } .layui-layer-close { position: absolute; } .layui-layer-content { position: relative; } .layui-layer-border { 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; } .layui-layer-ico { 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; } .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; } .layui-layer-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: 0.3s; animation-duration: 0.3s; } /* 抽屉开始 */ .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; } } @-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; } } .layer-anim-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); } } @-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); } } .layer-anim-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; } } @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; } } .layer-anim-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); } } @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); } } .layer-anim-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); } } @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); } } .layer-anim-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); } } @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); } } .layer-anim-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; } } @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; } } .layer-anim-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); } } @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); } } .layer-anim-bt-close { -webkit-animation-name: layer-bt-close; animation-name: layer-bt-close; } /* 抽屉结束 */ @-webkit-keyframes layer-bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes layer-bounceIn { 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); } } .layer-anim-00 { -webkit-animation-name: layer-bounceIn; animation-name: layer-bounceIn; } @-webkit-keyframes layer-zoomInDown { 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(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(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(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-keyframes layer-fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 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); } 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-keyframes layer-zoomInLeft { 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(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(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(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-keyframes layer-rollIn { 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); } } @keyframes layer-rollIn { 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); } } .layer-anim-04 { -webkit-animation-name: layer-rollIn; animation-name: layer-rollIn; } @keyframes layer-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .layer-anim-05 { -webkit-animation-name: layer-fadeIn; animation-name: layer-fadeIn; } @-webkit-keyframes layer-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -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); } 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); } } .layer-anim-06 { -webkit-animation-name: layer-shake; animation-name: layer-shake; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 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; } .layui-layer-setwin { 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; } .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; } .layui-layer-setwin .layui-layer-min:hover cite { background-color: #2d93ca; } .layui-layer-setwin .layui-layer-max { background-position: -32px -40px; } .layui-layer-setwin .layui-layer-max:hover { background-position: -16px -40px; } .layui-layer-setwin .layui-layer-maxmin { background-position: -65px -40px; } .layui-layer-setwin .layui-layer-maxmin:hover { background-position: -49px -40px; } .layui-layer-setwin .layui-layer-close1 { background-position: 1px -40px; cursor: pointer; } .layui-layer-setwin .layui-layer-close2 { 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; } .layui-layer-btn { text-align: right; padding: 0 15px 12px; pointer-events: auto; } .layui-layer-btn a { height: 28px; line-height: 28px; margin: 5px 5px 0; padding: 0 15px; border-radius: 2px; border: 1px solid #dedede; background-color: #fff; cursor: pointer; color: #333; font-weight: 400; } .layui-layer-btn .layui-layer-btn0 { border-color: #1e9fff; background-color: #1e9fff; color: #fff; } .layui-layer-btn-l { text-align: left; } .layui-layer-btn-c { text-align: center; } .layui-layer-dialog { 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; } .layui-layer-dialog .layui-layer-content .layui-layer-ico { 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; } .layui-layer-ico1 { background-position: -30px 0; } .layui-layer-ico2 { background-position: -60px 0; } .layui-layer-ico3 { background-position: -90px 0; } .layui-layer-ico4 { background-position: -120px 0; } .layui-layer-ico5 { background-position: -150px 0; } .layui-layer-ico6 { background-position: -180px 0; } .layui-layer-rim { 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%); } .layui-layer-hui { 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; } .layui-layer-dialog .layui-layer-padding { padding: 20px 20px 20px 55px; text-align: left; } .layui-layer-drawer { border-radius: 0px; } .layui-layer-drawer .layui-layer-content, .layui-layer-page .layui-layer-content { 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; } .layui-layer-nobg { background: 0 0; } .layui-layer-iframe iframe { display: block; width: 100%; height: 100%; } .layui-layer-loading { 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; } .layui-layer-loading .layui-layer-loading1 { 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; } .layui-layer-iconext { background: url(icon-ext.png) no-repeat; } .layui-layer-photos { background: 0 0; box-shadow: none; border: none; } .layui-layer-photos .layui-layer-content { overflow: hidden; text-align: center; } .layui-layer-photos .layui-layer-phimg img { 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; } .layui-layer-imgprev { left: 30px; background-position: -5px -5px; } .layui-layer-imgprev:hover { background-position: -33px -5px; } .layui-layer-imgnext { right: 30px; background-position: -5px -50px; } .layui-layer-imgnext:hover { 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, 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; } .layui-layer-imgtit a { max-width: 65%; overflow: hidden; color: #fff; } .layui-layer-imgtit a:hover { color: #fff; text-decoration: underline; } .layui-layer-imgtit em { padding-left: 10px; font-style: normal; } .layui-layer-imgbar{ display: flex;min-height: 40px;height: auto;flex-wrap: wrap;justify-content: center; } .layui-layer-imgbar .thumb-row{ width: 100%; display: flex; justify-content: center; align-self: center; } .layui-layer-imgbar .thumb-box{ width:100px; height:100px; margin:0px; display: inline-flex; align-items: center; justify-content: center; position: relative; } .layui-layer-imgbar .thumb-box-border{ position: absolute; top: 0; transition: all 0.2s ease-in-out; width: 100px; height: 100px; border: 1px solid #5fb878; box-sizing: border-box; } .layui-layer-imgbar img{ max-width: 100%; max-height: 100%; object-fit: contain; } @-webkit-keyframes layer-bounceOut { 100% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } 30% { -webkit-transform: scale(1.05); transform: scale(1.05); } 0% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes layer-bounceOut { 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); } 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: 0.2s; animation-duration: 0.2s; } @media screen and (max-width: 1100px) { .layui-layer-iframe { overflow-y: auto; -webkit-overflow-scrolling: touch; } } .layui-layer-notifiy { border: none; box-shadow: none; } .layui-layer-notifiy-wrapper { 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%); } .layui-layer-notifiy-wrapper .title { font-weight: 700; font-size: 16px; color: #303133; margin-left: 8px; display: flex; align-items: center; } .layui-layer-notifiy-wrapper .content { font-size: 14px; line-height: 21px; margin: 6px 0 0 8px; color: #606266; text-align: justify; } .layui-layer-notifiy-wrapper .content img{ max-width: 100%; } .layui-layer-notifiy-wrapper .layui-layer-close { background-position: 1px -40px; cursor: pointer; width: 16px; height: 16px; position: absolute; top: 10px; right: 10px; } .layui-layer-notifiy-wrapper .layui-layer-close:hover { opacity: 0.7; } .layui-layer-notifiy-transition { transition: top 0.3s ease-in-out; } .layui-layer-notifiy-wrapper .title .layui-layer-ico{ height: 30px !important; width: 30px !important; display: inline-block; transform: scale(0.7); margin-left: -7px; margin-right: 3px; }