/* * Chrome renders extra-wide   characters for the Hoefler Text font. * This results in a jumping cursor when typing in both the Classic and block * editors. The following font-face override fixes the issue by manually inserting * a custom font that includes just a Hoefler Text space replacement for that * character instead. * 50=>3.59em 13=>.92em 20=>1.43 16=>1.14 */ @font-face { font-family: 'NonBreakingSpaceOverride'; src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format("woff2"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format("woff"); } html {line-height: 1.15;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;scroll-behavior: smooth; height: 100%;width: 100%;overflow: hidden;font-family:"PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; } body{ margin: 0;padding: 0;background: white;position: relative;scroll-behavior: smooth;overflow: auto;height: 100%;width: 100%; --radius:6px; --red:255,0,71; --reds:248,215,218; --green:rgba(37,201,118,.9); --orange:rgba(255,152,0,.9); --bg: 247,248,249; --border: 241,242,244; --surface: 255,255,255; --text-primary: 9,30,66; --text-secondary: rgb(98,111,134); --primary: 29,122,252; --text-inverse: rgb(255 255 255); --text-second:#e1e1e1; --dbt:1.73rem; --dblh:2.8rem; --dfb:1.25rem; --dtext:.9rem; --dlh:1.2rem; --stext:.8rem; --dslh:1.2rem; --ns:.08rem; --ns10:.9rem; --ns20:.16rem; font-size:var(--dtext); --jbColor:linear-gradient(to right,rgba(var(--primary),1),rgba(var(--primary),0)); } body.sunset{ --bg: 21,28,25; --border: 66,79,74; --surface: 47,56,52; --text-primary: 236,210,197; --text-secondary: rgb(192,171,146); --primary: 192,171,146; --text-inverse: rgb(21 28 25); } body.sunrise{ --bg: 236,210,197; --border: 215,201,198; --surface: 243,232,229; --text-primary: 79,39,51; --text-secondary: rgb(104,88,68); --primary: 160,77,102; --text-inverse: rgb(243 232 229); } body.dark{ --bg: 16,18,20; --border: 34,39,43; --surface: 22,26,29; --text-primary: 222,228,234; --text-secondary: rgb(115,132,150); --primary: 29,122,252; --text-inverse: rgb(255 255 255); --red:255,38,99; --text-second:#333 } body{ background-color: rgba(var(--bg),1); color:rgba(var(--text-primary),1) } h1 {font-size: 2em;margin: 0.67em 0;} hr {box-sizing: content-box;height: 0;overflow: visible;} pre {font-family: monospace, monospace;font-size: 1em;} *{-webkit-tap-highlight-color: transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} *:before,*:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} a{text-decoration: none;background-color: transparent;}img{vertical-align: top;border: none;}li{list-style:none;}ul{margin: 0;padding: 0} audio,canvas,progress,video{display: inline-block;vertical-align: baseline;} strong {font-weight: bold;}pre{overflow: auto;}button,input,optgroup,select,textarea {margin: 0;font: inherit;color: inherit;outline: none;} button {overflow: visible;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance: button;cursor: pointer;}button[disabled],html input[disabled] {cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner {padding: 0;border: 0;}input[type="checkbox"],input[type="radio"] {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}input[type="search"] {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;-webkit-appearance: textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}.clear:after,.clear:before{content:" ";display:table}.clear:after{clear:both} .must{position: relative;} .must::before{content: '*';position: absolute;top:0;left:-8px;color:rgba(var(--red),1);z-index:99} .hide{display: none !important;} .mt-6{margin-top: 6px !important;}.mt-10{margin-top:var(--ns10)}.mt-20{margin-top:var(--ns20)}.mt-30{margin-top:30px !important}.mt-40{margin-top:40px !important;}.mt-50{margin-top:50px !important} .mb-6{margin-bottom: 6px !important;}.mb-10{margin-bottom:10px !important}.mb-20{margin-bottom:20px !important;}.mb-30{margin-bottom:30px !important}.mb-40{margin-bottom:40px !important;}.mb-50{margin-bottom:50px !important} .pt-6{padding-top:6px !important}.pt-10{padding-top:10px !important}.pt-20{padding-top:20px !important}.pt-30{padding-top:30px !important}.pt-40{padding-top:40px !important}.pt-50{padding-top:50px !important} .pl-20{padding-left: 20px;} .dh-bt{font-size:var(--dbt);margin:var(--ns) 0;line-height: var(--dblh);} .dh-fb{font-size:var(--dfb);margin:var(--ns) 0} .dh-text{font-size:var(--dtext);margin:var(--ns) 0;line-height: var(--dlh);} .dh-stext{font-size:var(--stext);margin:var(--ns) 0;line-height: var(--dslh);} .db{font-weight: bold;} .row{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;} .row2{-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;overflow: hidden;white-space: normal;} .row3{-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;display: -webkit-box;overflow: hidden;white-space: normal;} .price {color: rgba(var(--red),1);font-size: 15px;position: relative;} .price::before {content: '￥';font-size: 12px;} .price.h {color: #ccc;margin-right: 10px;}.price.h .number{text-decoration: line-through;} .price.h::after {content: '原价';font-size: 12px;position: absolute;top: -0;left: 0;text-decoration: auto;transform: translateY(-100%);} /* 去除number类型的上下箭头 */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none !important;} input[type="number"] {-moz-appearance: textfield;} .flex{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex} .flex-s{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;justify-content:space-between;flex-wrap:wrap;position: relative} .flex-c{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;position: relative;flex-direction: column} .flex-sa{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;justify-content:space-between;} .flex-a{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;} .flex-tb{width:calc(100% + var(--gap,20%));flex-wrap: wrap;gap:var(--gap,0);display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex} .flex-li,.flex-tb>div{width:calc(100% / var(--number,5) - var(--gap,0));} /* 文章默认列表 */ .n-item{background-color: white;border-radius: var(--radius);position: relative;} .flex-img{position: relative;}.flex-tips{position: absolute;bottom:0;left:0;width: 100%;height: 32px;display: flex;display: -webkit-flex;align-items: center;padding:0 10px;font-size:.1rem} .flex-img img,.flex-product img{width: 100%;height:100%;object-fit: cover;} .flex-ct{padding: 10px;} .flex-ct .bt{font-size: .118rem;text-align: justify;line-height: .15rem;font-weight: 500;} .flex-ft{display: flex;display: -webkit-flex;justify-content: space-between;font-size:.1rem;color:#aaa;padding:10px 0 0 0 ;} .flex-img.p{padding: 10px 10px 0 10px;} .flex-img.p img{border-radius: var(--radius) var(--radius) 0 0;} .n-item.row .flex-img.p{padding:10px 0 10px 10px} .n-item.row .flex-img.p img{border-radius: var(--radius) 0 0 var(--radius);} .flex-ct.m{position: absolute;bottom:0;left:0;width: 100%;background: linear-gradient(to top,rgba(var(--primary),1),rgba(var(--primary),0));-webkit-backdrop-filter: blur(2px) saturate(125%);backdrop-filter: blur(2px) saturate(125%);color:var(--text-inverse);padding:30px 10px 10px 10px;z-index: 10;} .flex-ct.m .flex-ft{color:var(--text-inverse);} .flex-product{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;display: -webkit-flex;justify-content: center;align-items: center;padding:10px} .flex-product img{object-fit: contain;} .n-item.row{display: flex;display: -webkit-flex;--w:160px} .n-item.row .flex-img{width:var(--w);} .n-item.row .flex-ct{width:calc(100% - var(--w));display: flex;display: -webkit-flex;flex-direction: column;justify-content: space-between;} .flex-zy{font-size: .095rem;color:#aaa;padding-top:.03rem;line-height: .135rem;} .dhm{background: linear-gradient(to top,rgba(var(--primary),1),rgba(var(--primary),0));color:var(--text-inverse);-webkit-backdrop-filter: blur(2px) saturate(125%);backdrop-filter: blur(2px) saturate(125%);} /*动画预设*/ .icon,.dh02{transition:All 0.2s ease-in-out;-webkit-transition:All 0.2s ease-in-out;-moz-transition:All 0.2s ease-in-out;-o-transition:All 0.2s ease-in-out;} .dh03{transition:All 0.3s ease-in-out;-webkit-transition:All 0.3s ease-in-out;-moz-transition:All 0.3s ease-in-out;-o-transition:All 0.3s ease-in-out;} .dh04{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;} .dh05{transition:All 0.5s ease-in-out;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;-o-transition:All 0.5s ease-in-out;} /* 禁止双击 */ .in-ap,.selectVal,.info,.btnTm,.bt,.fb,.content{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;} /* 弹窗样式 */ .tc-list-box{flex-direction: column;position: fixed;top:0;left:0;width: 100vw;height:100vh;z-index:99999} .tc-list-box .tc-item{position: relative;height:auto;width:auto;} .tc-list-box .tc-toast{margin:2px 0} .tc-list-box .tc-modal{max-width:100%;max-height:100%} .tc-list-box .tc-modal .tc-box{height:100%} .tc-item{position: fixed;height:100vh;width:100vw;top:0;left:0;flex-direction: column;z-index:9999} .tc-item.ct{justify-content: center;align-items: center;} .tc-item.lt{align-items: flex-start;justify-content: center;padding-left:20px} .tc-item.rt{align-items: flex-end;justify-content: center;padding-right:20px} /* 顶部位置 */ .tc-item.topct{align-items: center;justify-content: flex-start;padding-top:20px} .tc-item.toplt{align-items: flex-start;justify-content: flex-start;padding:20px 0 0 20px} .tc-item.toprt{align-items: flex-end;justify-content: flex-start;padding:20px 20px 0 0} /* 底部位置 */ .tc-item.botlt{align-items: flex-start;justify-content: flex-start;padding:0 0 20px 20px;flex-direction: column-reverse;} .tc-item.botct{align-items: center;justify-content: flex-start;padding:0 0 20px 0;flex-direction: column-reverse;} .tc-item.botrt{align-items: flex-end;justify-content: flex-start;padding:0 20px 20px 0;flex-direction: column-reverse;} .tc-toast{--bgColor:0,0,0;--zFont:white} .tc-box{position: relative;z-index: 1;} .tc-toast .tc-box{padding:13px;border-radius: 6px;min-width:100px;max-width:230px;justify-content: center;align-items: center;background-color:rgba(var(--bgColor),.8);color:var(--zFont);width: fit-content;}.tc-box.column{flex-direction: column;} .tc-box.column .tc-text{margin-top:4px;text-align: center;}.tc-box.row .tc-text{padding-left:2px;width:calc(100% - 32px)} .tc-toast .icon{background-color:var(--zFont);width:32px;height:32px;} .tc-modal .tc-box{min-width:300px;max-width:100%;flex-direction: column;max-height:100%} .tc-modal .tc-hd{height:38px;width:100%;background-color:rgba(var(--surface),1);color:rgba(var(--text-primary),1);border-radius:var(--radius) var(--radius) 0 0;overflow: hidden;} .tc-modal .tc-hd .lt{padding-left: 10px;align-items: center;} .tc-modal .tc-hd .icon{background-color: rgba(var(--text-primary),1);width:14px;height:14px;} .tc-modal .tc-hd .close-box:hover{background-color:rgba(var(--text-primary),.2)} .close-box:hover .icon{transform: rotateZ(0deg);} .tc-modal .tc-ct{min-height:80px;padding:10px;overflow: auto;background-color: rgba(var(--bg),1);color: rgba(var(--text-primary), 1);} .tc-modal .tc-ft{height:50px;background-color:rgba(var(--surface),1);border-radius: 0 0 var(--radius) var(--radius);justify-content: center;align-items: center;} .tc-load .tc-box{background-color:rgba(0,0,0,.6);min-width:100px;width:fit-content;color:white;align-items: center;padding:10px;border-radius: var(--radius);pointer-events: none;} .tc-load .tc-text{margin-left:6px} .tc-load .loaders{width:26px;height:26px} .tc-bg{position: absolute;top:0;left:0;width:100%;height:100%;} .tc-modal .tc-box.tcTailor .tc-ft{background-color:#eee} .tc-modal .tc-box.tcTailor .tc-ft .btnTm{margin:0 5px} /* 表单y样式 */ .in-ap{--hd:38px;min-height:var(--hd);font-size:var(--dtext);margin:10px 0} .in-ap.in-row{display: flex;display: -webkit-flex;align-items:center} .in-ap .in-nr{height:100%;border-radius: 6px;background-color: rgba(var(--surface), 1);color: rgba(var(--text-primary),1);} .in-hd .bt{padding-left:15px;position: relative;}.in-hd .bt.must::before{content:'*';position: absolute;top:0;left:2px;width:15px;text-align: center;} .in-hd{align-items: center;height:var(--hd);cursor: pointer;} .in-box{position:relative;} .in-box-hd{height:var(--hd);border:1px solid rgba(var(--border),1);border-radius:6px;background-color:rgba(var(--surface),1);color:#000} .in-box-hd .in-nr,.sel-input{border:0;padding:0 5px;flex:1;height:100%} .in-btn-box{border:0;} .in-btn-box .in-nr{border-radius:6px 0 0 6px;border:1px solid rgba(var(--border),1);border-right:0;} .in-btn-box .btnTm{border:1px solid rgba(var(--border),1);border-left:0} .in-btn-box .btnTm{border-radius:0 6px 6px 0;} .in-btn-box .icon{width: 16px;height:16px;background-color: var(--text-secondary);} .in-ap .bg{position: fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.2);visibility: hidden;opacity: 0;z-index:996} .error-main{ position:absolute;top:0;right:0; height:100%;align-items:center;justify-content:center;} .error-main .tips-div{position:absolute;top:100%;right:0;width:300px;padding:10px;background-color:rgba(255,230,226,1);border-radius:3px;margin-top:10px;color:rgba(229, 32, 0,1); z-index: 999;display: none;} .error-main .tips-div.tt{top:unset;bottom:100%;margin-bottom:10px} .error-main .tips-div::before{ content:'';position: absolute;top:-5px;right:10px;width:10px;height:10px;background-color: rgba(255,230,226,1);transform: rotateZ(135deg); clip-path: polygon(0 0, 0 100%, 100% 100%);border-radius: 0 0 0 2px; } .error-main .tips-div.tt::before{ bottom:-5px;top:unset; transform: rotateZ(-45deg); } .error-main:hover .tips-div{display:block} .error-main .icon-tips{display: none;} .errShow .icon-tips{display:block} .errShow .in-nr:focus ~ .error-main .tips-div{display: block;} .errShow .in-nr:focus ~ .error-main .icon{display: none;} .errShow .in-btn-box .in-nr,.errShow .in-btn-box .btnTm,.errShow .in-box-hd{border-color:rgba(var(--red),.4);background-color: rgba(var(--surface),1);} /* .errShow .in-nr{background-color: rgb(255, 245, 243);} */ .errShow .img-one-box{border-color: rgba(var(--red),.4);background-color: rgba(var(--surface),1);} .errShow .img-one-box .icon{background-color:rgba(var(--red),1)} .errShow .file-img-box,.errShow .upload-file,.errShow .radio-main,.errShow .in-tag-ct{background-color: rgba(255,230,226,1);} .errShow .error-main{padding:0 5px} .errShow .radio-main{border-radius: 6px;} /* 下拉框 */ .sel-hd{height:var(--hd);cursor: pointer;}.sel-hd .icon-right{background-color:var(--text-secondary);width:16px;height:16px} .sel-input{color:#777;display: flex;display: -webkit-flex;align-items: center;overflow: auto;}.sel-input.sel{color:rgba(var(--text-primary),1)} .sel-input::-webkit-scrollbar,.sel-op::-webkit-scrollbar,body::-webkit-scrollbar,.dh-scroll::-webkit-scrollbar,.sel-ul::-webkit-scrollbar,.s-ul-s::-webkit-scrollbar {height: 10px;width:10px; /* 滚动条宽度 */} .sel-input::-webkit-scrollbar-track,.sel-op::-webkit-scrollbar-track,body::-webkit-scrollbar-track,.dh-scroll::-webkit-scrollbar-track,.sel-ul::-webkit-scrollbar-track,.s-ul-s::-webkit-scrollbar-track {background: rgba(var(--primary),.08);} .sel-input::-webkit-scrollbar-thumb,.sel-op::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,.dh-scroll::-webkit-scrollbar-thumb,.sel-ul::-webkit-scrollbar-thumb,.s-ul-s::-webkit-scrollbar-thumb {background: rgba(var(--primary),.3);border-radius: 10px;padding:10px 0;height:8px; /* 滑块颜色 */} .sel-input::-webkit-scrollbar-thumb:hover,.sel-op::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover,.dh-scroll::-webkit-scrollbar-thumb:hover,.sel-ul::-webkit-scrollbar-thumb:hover,.s-ul-s::-webkit-scrollbar-thumb:hover {background: rgba(var(--primary),.8);} .date-item{padding:8px 10px;cursor: pointer;} .date-item:hover{color:rgba(var(--primary),1)} .s-date{height:100%;overflow: hidden;width: 100%;text-align: center;justify-content: center;} .s-date-ul .s-item {height:var(--h);display: flex;display: -webkit-flex;align-items: center;justify-content: center;} .s-date-tips{position: absolute;top:50%;left:0;transform: translateY(-50%);height:50px;width:100%;border-top:1px solid rgba(var(--primary),1);border-bottom:1px solid rgba(var(--primary),1)} .s-date-ul .s-item{color:var(--text-second)} .s-date-ul .s-item.t{color:rgba(var(--text-primary), 1);transition:All 0.3s ease-in-out;-webkit-transition:All 0.3s ease-in-out;-moz-transition:All 0.3s ease-in-out;-o-transition:All 0.3s ease-in-out;} .sel-date .sel-input{white-space: nowrap;} .sel-date .sel-input::-webkit-scrollbar{height:0} .sel-date .s-ul-s{overflow: hidden;} .sel-date .s-date-ul{cursor: pointer;} .sel-box{position: relative;}.sea-box{margin-top:10px} .sel-op{border:1px solid #eee;height:300px;width:100%;position:absolute;left:0;margin-top:5px;overflow: auto;}.sel-select .sel-op{height:auto;max-height:300px} .sel-op-hd{justify-content: space-between;align-items: center;position: sticky;top:0;left:0;background-color: rgba(var(--surface),1);color:rgba(var(--text-primary), 1);border-bottom:1px solid rgba(var(--border),1);height:50px;display: none;z-index:1} .sel-op-close{padding:0 10px;height:100%;align-items: center;cursor: pointer;} .sel-op-hd .icon{background-color:rgba(var(--text-primary), 1);width:13px;height:13px} .sel-op-input{height:100%} .sel-in-item{padding:0 10px;height:100%;display: flex;display: -webkit-flex;align-items: center;cursor: pointer;} .sel-in-item.ac{color:rgba(var(--primary),1);border-bottom:1px solid rgba(var(--primary),1)} .sel-ul{height:calc(100% - 50px);overflow: auto;} .sel-ul.sec{height:calc(100% - 90px)} .sel-ul .s-item{margin:10px 0;border-radius:3px;cursor: pointer;} .sel-ul .s-item:hover{border:1px solid rgba(var(--primary),.5);background-color: rgba(var(--primary),.08)} .s-item .s-check{margin-right:6px} .sel-ul-box{padding:10px 0;overflow: hidden;width:100%;height:calc(100% - 50px)} .sel-ul-box .s-item{border:0;} .s-ul-s{width:100%;height:100%;overflow: auto;} .sel-u-b{height:100%} /* 常规列表 */ .s-item{align-items: center;border:1px solid rgba(var(--border),1);padding:0 10px;cursor: pointer;} .cas-ul .s-item{position: relative;width:260px} .s-item .control{padding-left: 20px;} .s-item .s-info{align-items: center;width:100%;height:100%;height:38px} .s-item.ac{color:rgba(var(--primary),1);background-color:rgba(var(--primary),.1)} .s-item-ul{position: absolute;top:0;left:100%;display: none;z-index:99;padding:0 10px;width:260px;background-color:white;margin-left:1px;} .s-item-ul .s-item{width:100%;} .cas-ul .s-item:hover>.s-item-ul{display: block;} .cas-op{position: absolute;width:fit-content;overflow: unset;} .cas-op .sel-ul{overflow: unset;background-color: white;} .state-b .s-item-ul{bottom:0;top:unset} .state-t .s-item-ul .s-item{margin-top:0} .state-b .s-item-ul .s-item{margin-bottom:0} /* 单选框 */ .s-check{display: flex;display: -webkit-flex;align-items: center;justify-content: center;pointer-events: none;border-radius:3px;width:16px;height:16px;border: 1px solid rgba(var(--primary),1);} .s-check.ac{background-color:rgba(var(--primary),1);border-color:rgba(var(--primary),1)} .s-check::before{content: '';width:0;} .s-check.ac::before{ width: 30%;height:2px;background-color: white; transform: rotateZ(45deg) translateX(52%) translateY(-20%); transition:width 0.2s ease-in-out;-webkit-transition:width 0.2s ease-in-out;-moz-transition:width 0.2s ease-in-out;-o-transition:width 0.2s ease-in-out; } .s-check::after{content: '';width:0;} .s-check.ac::after{ content: ''; width: 70%;height:2px;background-color: white; transform: rotateZ(-45deg) translateX(-8%); transition:width 0.3s ease-in-out;-webkit-transition:width 0.3s ease-in-out;-moz-transition:width 0.3s ease-in-out;-o-transition:width 0.3s ease-in-out; } .s-check.hc{background-color:var(--orange);border-color:var(--orange)} .s-check.hc::before{content:'';height:2px;width:70%;background-color:white;} .radio-item{padding: 5px 0 10px 0;cursor: pointer;} /* 搜索 */ .ss{border:1px solid rgba(var(--primary),.3);padding:0 5px;background-color:rgba(var(--surface),1)} /* 下拉框窗体 */ .in-op{box-shadow:0 5px 8px -2px rgb(0 0 0 / 8%);z-index:998;border-radius: 0 0 6px 6px;border: 1px solid rgba(var(--border),1);padding:0 10px 10px 10px;background-color:rgba(var(--surface),1);color:rgba(var(--text-primary), 1);font-size:14px; /* -webkit-transform: translateY(15px);-moz-transform: translateY(15px);-ms-transform: translateY(15px);-o-transform: translateY(15px);transform: translateY(15px); */ visibility: hidden; /* opacity: 0; */ animation: topHide 0.3s ease-in-out both;-webkit-animation: topHide 0.3s ease-in-out both;-moz-animation: topHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards; /* animation: selectHide 0.3s ease-in-out both;-webkit-animation: selectHide 0.3s ease-in-out both;-moz-animation: selectHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards; */ pointer-events: none;} .in-op.ac{visibility: visible; /* opacity: 1; -webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0); */ /* animation: selectShow 0.3s ease-in-out both;-webkit-animation: selectShow 0.3s ease-in-out both;-moz-animation: selectShow 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards; */ animation: topShow 0.3s ease-in-out both;-webkit-animation: topShow 0.3s ease-in-out both;-moz-animation: topShow 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards; pointer-events: unset;} /* 图标 */ .icon-box{align-items: center;justify-content: center;} .icon-90 .icon-box .icon{ transform: rotateZ(90deg);-webkit-transform: rotateZ(90deg);-o-transform: rotateZ(90deg);-moz-transform: rotateZ(90deg);-ms-transform: rotateZ(90deg); } /* 按钮的样式 */ .btnTm{height:38px;padding:6px 20px;background-color:rgba(var(--primary),1);color:var(--text-inverse);display: flex;display: -webbkit-flex;align-items: center;justify-content: center;cursor: pointer;border-radius: var(--radius);border:0; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out; font-weight: 300; } button.btnTm:hover{transform: scale(1.03);} /* 表单的开关按钮 */ input[type=checkbox].radioTm{margin:0;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;cursor: pointer;} input[type=checkbox].radioTm:checked::before{content:'';} input[type=checkbox].radioTm{min-width: 46px;width:46px;height:1.6em;border-radius: 1.8em;line-height: 1.8em;margin: auto 0; overflow: hidden;border:0; background-color: rgba(var(--red),.8);position: relative;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} .radioTm:after{content: '';position: absolute;width: 1.3em;height: 1.3em;border-radius: 1.3em;background: white; left: .18em;top: 50%;margin-top:-.66em;box-shadow: 1px 1px 7px 1px rgb(0 0 0 / 30%); -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} .radioTm:checked:after{left: calc(100% - 1.46em);} input[type=checkbox].radioTm:checked{background-color:rgba(var(--primary),1);-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} input[type=checkbox].radioTm:focus{border:0;box-shadow: none;} input[type=color]{height:2.4em;width:100px;padding:0 3px;cursor: pointer;} /* 图片 */ .in-files{position: absolute;top: 0;left: 0;opacity: 0;pointer-events:none;height:100%} .upload-file{display: flex;display: -webkit-flex;display: -o-flex;display: -moz-flex;align-items: center;background-color:rgba(var(--surface), 1);overflow: hidden;flex-wrap: wrap; padding: 5px; width: 100%; min-height: 38px; border-radius: 3px; border: 1px solid rgba(var(--border),1); } /* .upload-file:hover{height: auto;} */ .files-name{background-color: rgba(var(--primary),1);color: var(--text-inverse);line-height: 25px;text-overflow: ellipsis; padding:0 5px;border-radius: 3px;align-items: center;position: relative;z-index:10;margin-right: 10px;} /* 图片字提示 */ .file-row::before{content: attr(data-title);position: absolute;top:0;left:0;z-index: 1;width: 80%;color:#aaa;padding:0 10px;} .img-one-box{height:80px;width:80px;border:1px solid rgba(var(--border),1);align-items: center;justify-content: center;cursor: pointer;border-radius: 6px;position: relative;background-color: rgba(var(--surface),1);} .img-one-box .icon{background-color: var(--text-secondary);width:1.9em;height:1.9em} .img-one-box img{width:100%;pointer-events: none;} .img-one-show{overflow: hidden;border-radius: 6px;width:100%;height:100%;position: absolute;top:0;left:0;align-items: center;justify-content: center;z-index:9;} .files-hd{justify-content: space-between;align-items: center;} .files-hd .icon-close,.tag-close .icon{background-color: white;height:.7em;width:.7em} .files-name .icon{margin-left:2px;width:30px;cursor: pointer; position: absolute;top:-5px;right:-4px;height:18px;width:18px;background-color:rgba(var(--red),.7); display: none;align-items: center;justify-content: center;border-radius:18px} .files-name:hover .icon{display: flex;animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-moz-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-webkit-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;} .file-progress{height: 2px;width: 0; background-color: rgba(var(--zColor),1);margin-bottom: 4px;} .upload-file .file-progress{background-color:white} .file-progress.suc,.file-img .file-progress.suc{display: none;} .files-hd .bt{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100px;cursor: pointer;} .file-img{height:80px;width:80px;border-radius:6px;position: relative;margin-right:10px;margin-bottom:10px} .file-img-ct{height:100%;width:100%;overflow: hidden;border:1px solid rgba(var(--border),1);border-radius:6px;justify-content: center;align-items: center;background-color:rgba(var(--surface),1)} .file-img-add{align-items: center;justify-content: center;cursor: pointer;border:1px solid #aaa;}.file-img-add .icon{width:24px;fill:#aaa;} .file-img-p{position: absolute;top:10px;left:0;padding:0 10px;width: 100%;line-height: 2px;z-index:999} .file-img .file-progress{background-color: rgba(var(--zColor),.8);display: inline-block;height:3px} .file-img img{max-width:100%;max-height:100%;pointer-events: none;} .in-img{flex-wrap: wrap;}.file-img-box{flex-wrap: wrap;background-color: rgba(var(--surface),1);padding: 10px;min-height: 100px;align-items: flex-start;border-radius: 0 0 var(--radius) var(--radius);} .agenda-ul{flex-direction: column;} .agenda-item{width:100%}.agenda-item:hover{background-color:rgba(var(--zColor),.1);cursor: pointer;border-radius: 3px;} .agenda-list{margin:0 10px} .agenda-list .val{margin:0 10px} .file-hd{height:42px;background-color: rgba(var(--surface),1);color: var(--text-primary);padding:5px 10px;justify-content: space-between;border-radius: var(--radius) var(--radius) 0 0;} .file-hd .icon{background-color: var(--text-inverse);} .file-hd .btnTm{height:32px;width: fit-content;padding:0 10px} .file-hd .rt .btnTm{margin-left: 10px;} .file-hd .rt .btnTm:first-child{margin-left: 0;} .file-hd .btnTm span{width:calc(100% - 20px)} .file-img{cursor: pointer;} .file-img-close{ width:20px;height:20px;background-color: rgba(var(--red),.7);position: absolute;z-index:99;top:-7px; right:-7px;border-radius: 20px;cursor: pointer;display: none;align-items: center;justify-content: center;} .file-img:hover .file-img-close,.img-one-box:hover .file-img-close{display:flex;display: -webkit-flex;animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-moz-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-webkit-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;} .file-img-close .icon{fill:white;width:.92em;height:.92em;pointer-events: none;} .files-close{align-items: center;} .files-close .icon{pointer-events: none;width:16px;height:16px;background-color: var(--text-secondary);} .sku-select-item{width:100%;margin-bottom: 10px;} /* .sku-select-item:last-child{margin-bottom: 0;} */ .sku-select-item .sku-select-ct{height:0;overflow: hidden;padding:0 10px 0 20px;background-color:white;margin-top: 5px;border-radius: 3px;} .sku-select-hd{align-items: center;} .sku-item-s{height:30px;padding:0 20px;border-radius: 3px;margin-right: 4px;border-color:#bbb}.sku-item-s:last-child{margin:0} .sku-select-item.ac .icon-right{transform: rotateZ(90deg);} .file-table{width:100%} .file-table thead .hd{background-color: rgba(var(--primary),1);color:var(--text-inverse);} .file-table tbody .hd{color:rgba(var(--text-primary),1)} .file-table .hd{height:34px !important;font-size:14px} .file-table td{padding:0 10px;height:30px;line-height: 30px;} .file-table tr:nth-child(even){background-color: rgba(var(--primary),.1);} .file-table tr .btnTm{height: 30px;} td .file-progress{background-color: rgba(var(--zColor),.5);} .files-tips{color:red;position:relative} .files-div{position:absolute;right:0;display: none;z-index: 999;} .files-tips:hover .files-div{display: block;background-color: white;text-align: right;width:300px;} .in-img .in-err-tips{height:38px;top:46px} .in-row .in-img{display:flex;display:-webkit-flex;flex-direction: column;} /* 截图样式 */ .tailor-img{width:750px;height:750px} .tailor-img-ct{position:relative;width: 100%;background-repeat: no-repeat;background-position: center;background-size: 100% 100%;box-shadow: 0 0 2000px 2000px rgb(0 0 0 / 50%);} .tailor-drag{position:absolute;outline-color: rgba(51,153,255,.75);outline: 1px solid #39f;box-shadow: 0 0 2000px 2000px rgb(0 0 0 / 50%);cursor: grab;z-index: 3;} .tailor-img{display: flex;justify-content: center;align-items: center;border: 1px solid #ccc;background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAQABADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9LMx+if8AjtfZ272/nRu9v518Y5j9E/8AHaAP/9k=); overflow: hidden;} .tailor-drag div{position: absolute;background: #39f;width: 6px;height: 6px;z-index: 5;font-size: 0;} .rRightDown {bottom: -3px;right: -3px}.rRightDown:hover,.rLeftUp:hover{cursor:nwse-resize} .rLeftDown {bottom: -3px;left: -3px} .rRightUp{top:-3px;right:-3px}.rRightUp:hover,.rLeftDown:hover{cursor:nesw-resize} .rLeftUp{top:-3px;left:-3px} .rRight{top:50%;right:-3px}.rRight:hover,.rLeft:hover{cursor:col-resize} .rLeft{top:50%;left:-3px} .rUp{top:-3px;left:50%}.rUp:hover,.rDown:hover{cursor:row-resize} .rDown{bottom:-3px;left:50%} #tailor-main img,.tailor-img,.tailor-main,.tailor-img-ct{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none;} #tailor-main img{pointer-events:none;position:relative} #tailor-preview{overflow:hidden} .tailor-preview-main{padding:0 0 0 20px} /* 分类表单 */ .tag-item {height: 26px;line-height: 26px; color: var(--zFont); display: inline-block;border-radius: 3px;margin-right: 10px;position: relative;margin-bottom: 10px;padding: 0 10px;background-color: rgba(var(--primary),1);color: var(--text-inverse); animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-moz-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-webkit-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards; } .tag-item .bt{font-size:var(--stext)} .tag-close{position: absolute;top: -8px;right: -8px;height: 100%;align-items:center;display: none;cursor: pointer;padding:0 2px; width:18px;height:18px;background-color: rgba(var(--red),.7);align-items: center;justify-content: center;border-radius: 18px;} .tag-item:hover .tag-close {display: flex;display: -webkit-flex;animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-moz-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;-webkit-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both;animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;} .in-tag-ct {min-height: 60px;max-height:300px;background-color: rgba(var(--surface),1);color:var(--text-primary);padding: 10px;flex-wrap: wrap;align-content: flex-start;overflow: auto; border-radius: var(--radius) var(--radius) 0 0;border:1px solid rgba(var(--border),1);border-bottom:0} .in-tag-ft {background-color: rgba(var(--surface),1);color: var(--text-primary);height: 46px;padding: 0 5px;align-items: center;border-radius: 0 0 var(--radius) var(--radius); border:1px solid rgba(var(--border),1);border-top:0 } .tag-input { height: 80%;width: calc(100% - 70px);border-radius: 3px 0 0 3px;border: 1px solid rgba(var(--primary),1);padding: 0 5px;color: rgba(var(--text-primary),1);border-right:0;background-color: rgba(var(--surface),1);} .in-tag-ft .btnTm {height: 80%;border-radius: 0 3px 3px 0;width: 70px;justify-content: center} /* 树状选项 */ .jl-ul-main{ --cw:16px;position:absolute;top:100%;left:0;width:260px;background-color:rgba(0,0,0,0);box-shadow:unset;border:0;margin-top:4px } .jl-li{position: relative;} .jl-hd{align-items: center;cursor: pointer;min-height:42px;padding:0 10px;} .jl-hd:hover{background-color:rgba(var(--primary),.1)} .jl-nr{width:calc(100% - 16px);padding-left:8px;line-height: 22px;justify-content: space-between;align-items: center;} .jl-ul{display: none;position:absolute;top:0;left:100%;width: 100%;padding-left:10px;} .jl-ul-box,.jl-op-ct{background-color: white;border:1px solid #ddd;box-shadow: 0 5px 8px -2px rgb(0 0 0 / 8%);} .jl-li:hover>.jl-ul{display:block} .jl-op-hd{height:50px;align-items:center;justify-content:space-between;padding:0 10px;position: sticky;top: 0;left: 0;width: 100%;z-index: 9999;background-color: white;border-bottom:1px solid #eee} .jl-op-hd .btnTm{height:32px} .jl-main.ac .cascader-bg{display: block;} .s-check{display: flex;display: -webkit-flex;align-items: center;justify-content: center;pointer-events: none;border-radius:3px} .jl-hd.ac .s-check,.s-check.ac{background-color:rgba(var(--primary),1);border-color:rgba(var(--primary),1)} .s-check::before{content: '';width:0;} .jl-hd.ac .s-check::before,.s-check.ac::before{ width: 30%;height:2px;background-color: white; transform: rotateZ(45deg) translateX(52%) translateY(-20%); transition:width 0.2s ease-in-out;-webkit-transition:width 0.2s ease-in-out;-moz-transition:width 0.2s ease-in-out;-o-transition:width 0.2s ease-in-out; } .s-check::after{content: '';width:0;} .jl-hd.ac .s-check::after,.s-check.ac::after{ content: ''; width: 70%;height:2px;background-color: white; transform: rotateZ(-45deg) translateX(-8%); transition:width 0.3s ease-in-out;-webkit-transition:width 0.3s ease-in-out;-moz-transition:width 0.3s ease-in-out;-o-transition:width 0.3s ease-in-out; } .jl-hd.hc .s-check,.s-check.hc{background-color:var(--orange);border-color:var(--orange)} .jl-hd.hc .s-check::before,.s-check.hc::before{content:'';height:2px;width:70%;background-color:white;} .jl-main .in-box-hd .icon{background-color:var(--text-secondary);width:16px;height: 16px;} .jl-hd .icon{background-color:#777} .jl-hd.ac{color:rgba(var(--zColor),1)} .bt-slider{width:100%;height:2px;position: absolute;bottom: 2px;left: 0;background-color: rgba(var(--bg),1);} .bt-slider-item{height:2px;background-color: rgba(var(--primary),1);} /* 列表 */ .table-box td{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;} .table-hds{padding:4px 0;height:var(--hd)} .table-hds .btnTm{height:30px;border-radius: 0 var(--radius) var(--radius) 0;} .table-hds input{border-radius:var(--radius) 0 0 var(--radius)} .table-hd-btn .btnTm{border-radius: var(--radius);margin-right:4px} .table-top{height:50px;justify-content: space-between;align-items: center;} .table-footer{height:50px;align-items: center;justify-content: center;} .table-main{height:calc(100% - var(--hd) - var(--ft));width:100%;position: relative;--tbhd:40px;overflow: hidden;flex:1} .table-box{width: 100%;} .table-hd td{height:var(--tbhd);background-color: rgba(var(--primary), .7);color: var(--text-inverse);} .table-body{overflow-x: auto;overflow-y: hidden;} .table-body .table-nr{overflow-y: auto;overflow-x: hidden;} .table-body .table-hd{overflow-x: auto;} .table-right .table-nr{overflow-y: auto;overflow-x: hidden;} .table-nr{height:calc(100% - var(--tbhd));overflow-y: auto;} .table-left{ position: absolute;left:0;top:0;height:100%;background: rgba(var(--surface), 1);color: rgba(var(--text-primary), 1);} .table-right{ position: absolute;right:0;top:0;height:100%;background: rgba(var(--surface), 1);color: rgba(var(--text-primary), 1);} .table-body .table-hd, .table-left .table-nr {scrollbar-width: none;} .table-body .table-nr { scrollbar-track-color:#007bff; } .table-td{padding:0} .table-right.ac{box-shadow: -4px 0 10px rgb(0 0 0 / 12%);} .table-left.ac{box-shadow: 0 0 10px rgb(0 0 0 / 12%);} .operate .btnTm{height:28px;font-size:.8rem;padding:0 15px;margin:0 5px} .table-tr:nth-child(odd){ background-color: rgba(var(--primary), .08); } .table-box table{width: 100%;} .table-tr.hover{background-color: rgba(var(--primary), .2);} .page-item{ cursor: pointer;border:1px solid rgba(0,0,0,0);margin:0 2px; height:32px;display: flex;display: -webkit-flex;align-items: center;justify-content: center;border-radius: var(--radius);padding:0 10px} .page-item.ac{background-color: rgba(var(--primary), 1);color: var(--text-inverse);} .page-item:hover{border-color:rgba(var(--border),1)} .page-select{margin-left:2px;position: relative;} .page-title{height:32px;border:1px solid rgba(0,0,0,0);align-items: center;padding:0 10px;border-radius: var(--radius);cursor: pointer;} .page-title:hover{border: 1px solid rgba(var(--border),1);} .page-select-div{position: absolute;bottom:100%;left:0;display: none; background-color: rgba(var(--surface), 1); color: rgba(var(--text-primary), 1); padding:10px; border:1px solid rgba(var(--border),1); border-radius: var(--radius); } .page-select-div.ac{display: block;} .page-s-item{text-align: center;border-radius: var(--radius);margin:2px 0;cursor: pointer;} .page-s-item:hover,.page-s-item.ac{background-color: rgba(var(--primary), 1);color: var(--text-inverse);} .search-main{--hd:32px;} .search-main .ss{border:1px solid rgba(var(--border),1);border-radius: var(--radius) 0 0 var(--radius);height:var(--hd)} .search-main .btnTm{border-radius: 0 var(--radius) var(--radius) 0;height:var(--hd)} .table-t-tp{--hd:32px;width:50%;overflow-x: auto;overflow-y:hidden;white-space:nowrap} .table-t-tp .btnTm{height:var(--hd);margin-right:10px} .td-edit{position: relative;cursor: pointer;} .table-tr:hover .td-edit::after{content:'右键编辑';position: absolute;top:50%;right: .8rem;transform: translateY(-50%); background-color: rgba(var(--primary), 1);border-radius: var(--radius);color:var(--text-inverse);padding:.18rem .48rem;font-size:0.75rem} .td-edit.dh-edit::after{display: none;} .td-box{padding: 0 5px;overflow: hidden;} .btn-more-div{position: absolute;right:0;background: rgba(var(--surface), 1);color:rgba(var(--text-primary), 1); z-index: 9999;border:1px solid rgba(var(--border),1);padding:10px;display: none;border-radius: 0 0 var(--radius) var(--radius); box-shadow: -4px 0 10px rgb(0 0 0 / 12%); } .btn-more-div .btnTm{border-radius: var(--radius);} .search-btn-more:hover .btn-more-div{display: block;} /* 分页 */ .table-page{padding:0 10px;height: var(--hd);align-items: center;width:100%;} .page-box{width: 100%;align-items: center;justify-content: space-between;font-size: var(--stext);--w:38px;height:var(--w);} .page-main{align-items: center;justify-content: center;} .page-item{min-width: none;width:var(--w);min-height:var(--w);display:flex;display:-webkit-flex;align-items:center;justify-content:center;background-color: #eee;margin:0 10px 0 0;cursor: pointer;position: relative;border-radius: var(--radius); -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none; } .page-item.ac{color:red} .page-item .btn-loading{position: absolute;top:2px;right:2px;width:14px !important;height:14px !important; } .page-tips-page{margin-right:4px} .tab-main .hd{position: relative;padding-bottom:6px;margin-bottom:4px} .tab-main .tab-item{padding:10px;color:rgba(var(--text-primary), 1);cursor: pointer;border-radius:6px 6px 0 0;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none;} .tab-main .tab-item.ac{background-color: rgba(var(--primary),1);color:var(--text-inverse)} .tab-div{height:200px;display: none;padding:10px;} .tab-div.ac{display: block;} @media only screen and (min-width: 0px) and (max-width: 767px) { .in-op{position: fixed;bottom:0;left:0;width:100%;border-radius:6px 6px 0 0} .in-ap .bg.ac{visibility: visible;opacity: 1;} .tc-item.botct{padding:0} #tailor-main{flex-direction: column;} .tailor-img{width:100%;height:100%} .sel-op-hd{display: flex;display: -webkit-flex;} .file-img-close, .tag-close, .files-name .icon { display: flex; display: -webkit-flex; } .jl-ul-main{top:unset;max-height:100%;overflow: auto;background-color: white;} .jl-nr{width:calc(100% - 36px);} .jl-ul{position: relative;top:0;left:unset;height: 0;overflow: hidden;display: block;padding-left:20px;border-left:1px solid #eee;} .jl-ul-box,.jl-op-ct{box-shadow: unset;border:0} .jl-op-ct{padding-bottom:20px} .jl-li.ac>.jl-hd .icon{transform: rotateZ(90deg);} .in-op{animation: selectHide 0.4s ease-in-out both;-webkit-animation: selectHide 0.4s ease-in-out both;-moz-animation: selectHide 0.4s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;} .in-op.ac{animation: selectShow 0.4s ease-in-out both;-webkit-animation: selectShow 0.4s ease-in-out both;-moz-animation: selectShow 0.4s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;} } .loaders{margin:0 auto;font-size: 10px;position: relative;text-indent: -9999em;border-top: 0.3em solid rgba(255, 255, 255, 0.2);border-right: 0.3em solid rgba(255, 255, 255, 0.2);border-bottom: 0.3em solid rgba(255, 255, 255, 0.2);border-left: 0.3em solid #ffffff;-webkit-animation: loaders 1.1s infinite linear;animation: loaders 1.1s infinite linear;} .loaders,.loaders:after{border-radius: 50%;width: inherit;height: inherit;overflow: hidden} @-webkit-keyframes loaders {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} @keyframes loaders {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}} .icon-home{ -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' overflow='hidden'%3E%3Cpath d='M829.781 960H617.92c-12.075 0-21.867-9.77-21.867-21.867V642.22H427.925v295.936c0 12.074-9.77 21.866-21.866 21.866h-211.84c-55.168 0-74.816-38.656-74.816-74.816V589.248h-66.71c-21.482 0-35.285-6.933-41.088-20.63-8.64-20.394 7.318-40.66 22.208-56.063L459.051 86.912C472.448 73.024 491.029 64.789 511.147 64c21.866.79 40.469 9.024 54.122 23.21l424.598 425.067c15.146 15.68 31.168 35.968 22.549 56.363-5.803 13.675-19.648 20.63-41.11 20.63H904.62v295.935c0 36.139-19.67 74.795-74.838 74.795z' /%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' overflow='hidden'%3E%3Cpath d='M829.781 960H617.92c-12.075 0-21.867-9.77-21.867-21.867V642.22H427.925v295.936c0 12.074-9.77 21.866-21.866 21.866h-211.84c-55.168 0-74.816-38.656-74.816-74.816V589.248h-66.71c-21.482 0-35.285-6.933-41.088-20.63-8.64-20.394 7.318-40.66 22.208-56.063L459.051 86.912C472.448 73.024 491.029 64.789 511.147 64c21.866.79 40.469 9.024 54.122 23.21l424.598 425.067c15.146 15.68 31.168 35.968 22.549 56.363-5.803 13.675-19.648 20.63-41.11 20.63H904.62v295.935c0 36.139-19.67 74.795-74.838 74.795z' /%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-err{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon' style='width:1em;height:1em;vertical-align:middle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M512 128c212.064 0 384 171.936 384 384S724.064 896 512 896 128 724.064 128 512s171.936-384 384-384zm0 64c-176.704 0-320 143.296-320 320s143.296 320 320 320 320-143.296 320-320-143.296-320-320-320zm6.848 429.728a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM516.576 320a32 32 0 0 1 32 32v182.848a32 32 0 1 1-64 0V352a32 32 0 0 1 32-32z' fill='%23111'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon' style='width:1em;height:1em;vertical-align:middle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M512 128c212.064 0 384 171.936 384 384S724.064 896 512 896 128 724.064 128 512s171.936-384 384-384zm0 64c-176.704 0-320 143.296-320 320s143.296 320 320 320 320-143.296 320-320-143.296-320-320-320zm6.848 429.728a48 48 0 1 1 0 96 48 48 0 0 1 0-96zM516.576 320a32 32 0 0 1 32 32v182.848a32 32 0 1 1-64 0V352a32 32 0 0 1 32-32z' fill='%23111'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-gb{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon icon-gb' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M926.034 339.87c-9.866 0-19.17 4.143-26.179 11.086-14.09 13.946-39.444 30.94-79.856 47.278-79.862 32.286-192.123 50.8-307.994 50.8s-228.137-18.514-307.993-50.8c-40.413-16.338-65.767-33.332-79.857-47.278-7.015-6.943-16.312-11.08-26.179-11.08-33.054 0-48.998 40.356-24.985 63.073 72.832 68.895 241.97 117.171 439.02 117.171s366.186-48.28 439.019-117.17c24.002-22.723 8.054-63.08-24.996-63.08z'/%3E%3Cpath d='M353.838 642.412L376.76 512.41a35.548 35.548 0 0 1 70.001 12.339L423.839 654.75a35.538 35.538 0 1 1-70-12.34zm256.476 12.344l-22.922-130.002a35.533 35.533 0 0 1 28.83-41.17 35.533 35.533 0 0 1 41.17 28.83l22.923 130.003a35.548 35.548 0 0 1-70 12.339zm268.483-65.377l-93.343-93.343a35.538 35.538 0 1 1 50.263-50.263l93.343 93.343a35.538 35.538 0 1 1-50.263 50.263zm-773.699-50.263l93.343-93.343a35.538 35.538 0 1 1 50.263 50.263l-93.343 93.343a35.538 35.538 0 1 1-50.263-50.263z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon icon-gb' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M926.034 339.87c-9.866 0-19.17 4.143-26.179 11.086-14.09 13.946-39.444 30.94-79.856 47.278-79.862 32.286-192.123 50.8-307.994 50.8s-228.137-18.514-307.993-50.8c-40.413-16.338-65.767-33.332-79.857-47.278-7.015-6.943-16.312-11.08-26.179-11.08-33.054 0-48.998 40.356-24.985 63.073 72.832 68.895 241.97 117.171 439.02 117.171s366.186-48.28 439.019-117.17c24.002-22.723 8.054-63.08-24.996-63.08z'/%3E%3Cpath d='M353.838 642.412L376.76 512.41a35.548 35.548 0 0 1 70.001 12.339L423.839 654.75a35.538 35.538 0 1 1-70-12.34zm256.476 12.344l-22.922-130.002a35.533 35.533 0 0 1 28.83-41.17 35.533 35.533 0 0 1 41.17 28.83l22.923 130.003a35.548 35.548 0 0 1-70 12.339zm268.483-65.377l-93.343-93.343a35.538 35.538 0 1 1 50.263-50.263l93.343 93.343a35.538 35.538 0 1 1-50.263 50.263zm-773.699-50.263l93.343-93.343a35.538 35.538 0 1 1 50.263 50.263l-93.343 93.343a35.538 35.538 0 1 1-50.263-50.263z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-zk{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon icon-zk' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 284.19c72.35 0 160.19 36.578 247.332 102.99 64.686 49.3 108.308 99.368 126.177 125.178-17.843 25.524-62.295 75.643-129.331 125.635C668.129 703.657 581.412 739.814 512 739.814c-70.528 0-157.68-36.587-245.402-103.024-65.136-49.331-109.266-99.098-127.677-125.051 18.135-25.984 61.573-75.648 125.752-124.56C351.811 320.764 439.65 284.192 512 284.192m0-70.876C291.671 213.315 61.44 463.908 61.44 512S296.622 810.685 512 810.685c210.427 0 450.56-245.53 450.56-298.685 0-48.092-230.231-298.685-450.56-298.685z'/%3E%3Cpath d='M512 446.188c36.285 0 65.812 29.521 65.812 65.812S548.285 577.812 512 577.812 446.188 548.291 446.188 512s29.527-65.812 65.812-65.812m0-70.877c-75.49 0-136.689 61.195-136.689 136.689S436.511 648.689 512 648.689 648.689 587.494 648.689 512 587.489 375.311 512 375.311z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon icon-zk' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 284.19c72.35 0 160.19 36.578 247.332 102.99 64.686 49.3 108.308 99.368 126.177 125.178-17.843 25.524-62.295 75.643-129.331 125.635C668.129 703.657 581.412 739.814 512 739.814c-70.528 0-157.68-36.587-245.402-103.024-65.136-49.331-109.266-99.098-127.677-125.051 18.135-25.984 61.573-75.648 125.752-124.56C351.811 320.764 439.65 284.192 512 284.192m0-70.876C291.671 213.315 61.44 463.908 61.44 512S296.622 810.685 512 810.685c210.427 0 450.56-245.53 450.56-298.685 0-48.092-230.231-298.685-450.56-298.685z'/%3E%3Cpath d='M512 446.188c36.285 0 65.812 29.521 65.812 65.812S548.285 577.812 512 577.812 446.188 548.291 446.188 512s29.527-65.812 65.812-65.812m0-70.877c-75.49 0-136.689 61.195-136.689 136.689S436.511 648.689 512 648.689 648.689 587.494 648.689 512 587.489 375.311 512 375.311z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-close{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M597.9 512l294.8 293.5c23.7 23.9 24.2 62.2 1.2 86.8-22.2 23.8-59.4 25-83.2 2.9-.5-.5-1.1-1-1.6-1.6L512 597.6l-297.2 296c-22.9 23.1-60.1 23.3-83.2.4-.5-.5-1-1.1-1.6-1.6-23.1-24.5-22.5-62.9 1.2-86.8L426 512 131.2 218.5c-23.7-23.9-24.2-62.2-1.2-86.8 22.2-23.8 59.4-25 83.2-2.9.5.5 1.1 1 1.6 1.6l297.2 296 297.2-296c22.9-23.1 60.1-23.3 83.2-.4.5.5 1 1.1 1.6 1.6 23.1 24.5 22.5 62.9-1.2 86.8L597.9 512z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M597.9 512l294.8 293.5c23.7 23.9 24.2 62.2 1.2 86.8-22.2 23.8-59.4 25-83.2 2.9-.5-.5-1.1-1-1.6-1.6L512 597.6l-297.2 296c-22.9 23.1-60.1 23.3-83.2.4-.5-.5-1-1.1-1.6-1.6-23.1-24.5-22.5-62.9 1.2-86.8L426 512 131.2 218.5c-23.7-23.9-24.2-62.2-1.2-86.8 22.2-23.8 59.4-25 83.2-2.9.5.5 1.1 1 1.6 1.6l297.2 296 297.2-296c22.9-23.1 60.1-23.3 83.2-.4.5.5 1 1.1 1.6 1.6 23.1 24.5 22.5 62.9-1.2 86.8L597.9 512z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-close-1{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 113c-226.2 0-409.6 183.4-409.6 409.6S285.8 932.2 512 932.2s409.6-183.4 409.6-409.6C921.6 296.3 738.2 113 512 113zm181.2 518.1c20.1 20.1 20.1 52.6 0 72.7s-52.6 20.1-72.7 0L512 594.8l-108.6 109c-20.1 20.1-52.6 20.1-72.7 0s-20.1-52.6 0-72.7l109.1-108.5L330.7 414c-20.1-20.1-20.1-52.6 0-72.7s52.6-20.1 72.7 0L512 450.4l108.5-109.1c20.1-20.1 52.6-20.1 72.7 0s20.1 52.6 0 72.7l-109 108.6 109 108.5z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 113c-226.2 0-409.6 183.4-409.6 409.6S285.8 932.2 512 932.2s409.6-183.4 409.6-409.6C921.6 296.3 738.2 113 512 113zm181.2 518.1c20.1 20.1 20.1 52.6 0 72.7s-52.6 20.1-72.7 0L512 594.8l-108.6 109c-20.1 20.1-52.6 20.1-72.7 0s-20.1-52.6 0-72.7l109.1-108.5L330.7 414c-20.1-20.1-20.1-52.6 0-72.7s52.6-20.1 72.7 0L512 450.4l108.5-109.1c20.1-20.1 52.6-20.1 72.7 0s20.1 52.6 0 72.7l-109 108.6 109 108.5z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-add{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 113.3c-220.2 0-398.7 178.5-398.7 398.7S291.8 910.7 512 910.7s398.8-178.5 398.8-398.8S732.2 113.3 512 113.3zm.7 737c-186.8 0-338.3-151.3-338.3-338s151.5-338 338.3-338S851 325.6 851 512.3s-151.5 338-338.3 338z'/%3E%3Cpath d='M654.8 480.1H545V370.3c0-17.8-14.5-32.3-32.3-32.3-17.8 0-32.3 14.5-32.3 32.3V480H370.7c-17.8 0-32.3 14.5-32.3 32.3 0 17.8 14.5 32.3 32.3 32.3h109.7v109.8c0 17.8 14.5 32.3 32.3 32.3 17.8 0 32.3-14.5 32.3-32.3V544.7h109.7c17.8 0 32.3-14.5 32.3-32.3.1-17.9-14.4-32.4-32.2-32.3z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 113.3c-220.2 0-398.7 178.5-398.7 398.7S291.8 910.7 512 910.7s398.8-178.5 398.8-398.8S732.2 113.3 512 113.3zm.7 737c-186.8 0-338.3-151.3-338.3-338s151.5-338 338.3-338S851 325.6 851 512.3s-151.5 338-338.3 338z'/%3E%3Cpath d='M654.8 480.1H545V370.3c0-17.8-14.5-32.3-32.3-32.3-17.8 0-32.3 14.5-32.3 32.3V480H370.7c-17.8 0-32.3 14.5-32.3 32.3 0 17.8 14.5 32.3 32.3 32.3h109.7v109.8c0 17.8 14.5 32.3 32.3 32.3 17.8 0 32.3-14.5 32.3-32.3V544.7h109.7c17.8 0 32.3-14.5 32.3-32.3.1-17.9-14.4-32.4-32.2-32.3z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-right{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon' style='width:1em;height:1em;vertical-align:middle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M605.086 512.146L338.36 245.272l51.76-51.687L708.536 512.17l-318.44 318.244-51.687-51.736z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon' style='width:1em;height:1em;vertical-align:middle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M605.086 512.146L338.36 245.272l51.76-51.687L708.536 512.17l-318.44 318.244-51.687-51.736z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-del{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon' style='width:1em;height:1em;vertical-align:middle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M328.777 377.905l31.72 449.658h310.662l31.695-449.658h73.265l-32.012 454.802a73.143 73.143 0 0 1-72.948 67.999H360.497a73.143 73.143 0 0 1-72.948-68.023l-32.061-454.778h73.29zm159.208 22.65v341.333h-73.143V400.555h73.143zm133.73 0v341.333H548.57V400.555h73.143zM146.284 256h731.43v73.143h-731.43V256zm518.267-121.905v73.143H371.98v-73.143h292.572z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon' style='width:1em;height:1em;vertical-align:middle' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M328.777 377.905l31.72 449.658h310.662l31.695-449.658h73.265l-32.012 454.802a73.143 73.143 0 0 1-72.948 67.999H360.497a73.143 73.143 0 0 1-72.948-68.023l-32.061-454.778h73.29zm159.208 22.65v341.333h-73.143V400.555h73.143zm133.73 0v341.333H548.57V400.555h73.143zM146.284 256h731.43v73.143h-731.43V256zm518.267-121.905v73.143H371.98v-73.143h292.572z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-ban{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 910.7c-220.2 0-398.7-178.5-398.7-398.8S291.7 113.2 512 113.2 910.7 291.8 910.7 512 732.2 910.7 512 910.7zm.7-736.3c-186.8 0-338.3 151.3-338.3 338s151.5 338 338.3 338S851 699 851 512.3 699.5 174.4 512.7 174.4zm135.8 368.8H376.9c-17.1 0-30.9-13.8-30.9-30.9 0-17.1 13.8-30.9 30.9-30.9h271.6c17.1 0 30.9 13.8 30.9 30.9s-13.8 30.9-30.9 30.9z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 910.7c-220.2 0-398.7-178.5-398.7-398.8S291.7 113.2 512 113.2 910.7 291.8 910.7 512 732.2 910.7 512 910.7zm.7-736.3c-186.8 0-338.3 151.3-338.3 338s151.5 338 338.3 338S851 699 851 512.3 699.5 174.4 512.7 174.4zm135.8 368.8H376.9c-17.1 0-30.9-13.8-30.9-30.9 0-17.1 13.8-30.9 30.9-30.9h271.6c17.1 0 30.9 13.8 30.9 30.9s-13.8 30.9-30.9 30.9z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-tips{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 113c-220.4 0-399 178.6-399 399s178.7 399 399 399 399-178.6 399-399-178.6-399-399-399zm0 662.9c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9c-.1 28.2-22.8 50.9-50.9 50.9zm50.8-215.8c0 28.1-22.8 50.9-50.9 50.9S461 588.2 461 560.1V343c0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9v217.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 113c-220.4 0-399 178.6-399 399s178.7 399 399 399 399-178.6 399-399-178.6-399-399-399zm0 662.9c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9c-.1 28.2-22.8 50.9-50.9 50.9zm50.8-215.8c0 28.1-22.8 50.9-50.9 50.9S461 588.2 461 560.1V343c0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9v217.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-success{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 910.7c-220.2 0-398.7-178.5-398.7-398.7S291.7 113.2 512 113.2 910.7 291.7 910.7 512 732.2 910.7 512 910.7zm0-60.5c186.8 0 338.2-151.4 338.3-338.2 0-186.8-151.4-338.2-338.2-338.3h-.1c-186.8 0-338.2 151.5-338.2 338.3S325.2 850.2 512 850.2zm167.8-480.4c12.8-13.8 34.4-14.5 48.2-1.7 13.8 12.8 14.5 34.4 1.7 48.2-.5.6-1.1 1.2-1.7 1.7L486.8 659.2c-13.3 13.3-34.9 13.3-48.2 0L318 538.6c-13.8-12.8-14.5-34.4-1.7-48.2 12.8-13.8 34.4-14.5 48.2-1.7.6.5 1.2 1.1 1.7 1.7l96.5 96.5 217.1-217.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 910.7c-220.2 0-398.7-178.5-398.7-398.7S291.7 113.2 512 113.2 910.7 291.7 910.7 512 732.2 910.7 512 910.7zm0-60.5c186.8 0 338.2-151.4 338.3-338.2 0-186.8-151.4-338.2-338.2-338.3h-.1c-186.8 0-338.2 151.5-338.2 338.3S325.2 850.2 512 850.2zm167.8-480.4c12.8-13.8 34.4-14.5 48.2-1.7 13.8 12.8 14.5 34.4 1.7 48.2-.5.6-1.1 1.2-1.7 1.7L486.8 659.2c-13.3 13.3-34.9 13.3-48.2 0L318 538.6c-13.8-12.8-14.5-34.4-1.7-48.2 12.8-13.8 34.4-14.5 48.2-1.7.6.5 1.2 1.1 1.7 1.7l96.5 96.5 217.1-217.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-send{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M886.4 169.4L128 462.1c-42.7 16.5-41.7 40.5 2.2 53.5L313.5 570 388 791.7c9.8 29 35.2 35.1 57 13.6l96.1-95.2 189.7 139c24.6 18.1 50 8.6 56.6-21.4L926 203.6c6.6-29.9-11.1-45.2-39.6-34.2zM771 310.5L447.5 598.7c-5.8 5.2-11.1 15.5-11.9 23.1L421.3 756c-1.6 15.1-6.8 15.7-11.6 1.2l-62.6-188.7c-2.5-7.4.9-16.4 7.4-20.4L764.8 302c26.2-15.5 29-11.8 6.2 8.5z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M886.4 169.4L128 462.1c-42.7 16.5-41.7 40.5 2.2 53.5L313.5 570 388 791.7c9.8 29 35.2 35.1 57 13.6l96.1-95.2 189.7 139c24.6 18.1 50 8.6 56.6-21.4L926 203.6c6.6-29.9-11.1-45.2-39.6-34.2zM771 310.5L447.5 598.7c-5.8 5.2-11.1 15.5-11.9 23.1L421.3 756c-1.6 15.1-6.8 15.7-11.6 1.2l-62.6-188.7c-2.5-7.4.9-16.4 7.4-20.4L764.8 302c26.2-15.5 29-11.8 6.2 8.5z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-menu{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M385.4 113.1c4.3.9 8.7 1.7 12.9 2.8 42.8 10.6 72.2 48 72.6 92.2.2 27 .1 54.2.1 81.3v181.4c-2.4.1-4.3.3-6.2.3-84.3 0-168.5-.3-252.8.1-52.1.3-89.6-36.2-97.1-77.8-.6-2.7-1.2-5.3-1.6-8V113.1h272.1zm253.2-.1c-.9.3-1.7.7-2.7.9-50.1 8-83 46.4-83 96.9v260.3h231.9c11.7-.1 23.2.1 34.8-.3 41.6-1.6 77.3-30.5 87.8-70.9 1.3-4.7 2.2-9.6 3.2-14.4 0-90.7 0-181.5.1-272.3H638.6v-.2zm211.1 260.3c-3.6 20.9-21.4 36.2-42.5 37.8-2.8.1-5.5.3-8.3.3H612.7c-.1-2.4-.3-4.5-.3-6.4 0-60.5-.1-120.9 0-181.4.1-30.9 20.1-50.7 51-50.7H851c0 2.9 0 5.1.1 7.3 0 54.9 0 109.8-.1 164.8 0 9.3.4 19-1.3 28.3zM113.2 638.7c1-4.9 2-9.7 3.2-14.4 10.4-40.2 45.9-69 87.3-71 3.2-.1 6.6-.2 9.9-.2H471v260.2c0 50.5-32.9 89-83 96.9-.9.1-1.7.6-2.7.9H113.2V638.7zm525.2 272.2c-6.2-1.5-12.6-2.5-18.7-4.4-38-11.7-64.8-46.4-66.7-86.1-.1-2.4-.1-4.7-.1-7.2V553.4c2.2-.1 3.9-.3 5.8-.3 84.7 0 169.6-.1 254.4.1 48.9.1 86.8 31.3 96.1 78.1.6 2.5 1 5 1.6 7.5V911H638.4v-.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M385.4 113.1c4.3.9 8.7 1.7 12.9 2.8 42.8 10.6 72.2 48 72.6 92.2.2 27 .1 54.2.1 81.3v181.4c-2.4.1-4.3.3-6.2.3-84.3 0-168.5-.3-252.8.1-52.1.3-89.6-36.2-97.1-77.8-.6-2.7-1.2-5.3-1.6-8V113.1h272.1zm253.2-.1c-.9.3-1.7.7-2.7.9-50.1 8-83 46.4-83 96.9v260.3h231.9c11.7-.1 23.2.1 34.8-.3 41.6-1.6 77.3-30.5 87.8-70.9 1.3-4.7 2.2-9.6 3.2-14.4 0-90.7 0-181.5.1-272.3H638.6v-.2zm211.1 260.3c-3.6 20.9-21.4 36.2-42.5 37.8-2.8.1-5.5.3-8.3.3H612.7c-.1-2.4-.3-4.5-.3-6.4 0-60.5-.1-120.9 0-181.4.1-30.9 20.1-50.7 51-50.7H851c0 2.9 0 5.1.1 7.3 0 54.9 0 109.8-.1 164.8 0 9.3.4 19-1.3 28.3zM113.2 638.7c1-4.9 2-9.7 3.2-14.4 10.4-40.2 45.9-69 87.3-71 3.2-.1 6.6-.2 9.9-.2H471v260.2c0 50.5-32.9 89-83 96.9-.9.1-1.7.6-2.7.9H113.2V638.7zm525.2 272.2c-6.2-1.5-12.6-2.5-18.7-4.4-38-11.7-64.8-46.4-66.7-86.1-.1-2.4-.1-4.7-.1-7.2V553.4c2.2-.1 3.9-.3 5.8-.3 84.7 0 169.6-.1 254.4.1 48.9.1 86.8 31.3 96.1 78.1.6 2.5 1 5 1.6 7.5V911H638.4v-.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-setting{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M930.2 423.4c-1.3-6.4-5.2-12-10.6-15.6-5.5-3.6-12.2-4.8-18.5-3.5-7.4 1.5-15 2.3-22.5 2.3-39.8 0-75.3-20.2-95-54.1-23.5-40.4-18.1-91.2 13.2-126.6 9-10.1 8.1-25.5-2.1-34.5-44.1-38.9-94.5-67.9-149.8-86.1-12.9-4.2-26.9 2.7-31.2 15.5-15.1 44.8-56.8 74.9-103.9 74.9s-88.8-30.1-103.9-74.9c-4.3-12.8-18.2-19.7-31.2-15.5-55.3 18.2-105.7 47.2-149.8 86.1-10.2 9-11.1 24.4-2.1 34.5 31.4 35.4 36.7 86.2 13.2 126.6-19.6 33.9-55.2 54.1-95 54.1-7.5 0-15.1-.8-22.5-2.3-6.4-1.3-13.1 0-18.5 3.5-5.4 3.6-9.3 9.2-10.6 15.6-5.8 28.1-8.7 57-8.7 85.9 0 28.9 2.9 57.8 8.7 85.9 1.3 6.4 5.2 12 10.6 15.5 5.5 3.6 12.2 4.8 18.5 3.5 7.4-1.5 15-2.3 22.5-2.3 39.8 0 75.3 20.2 95 54.1 23.5 40.4 18.2 91.2-13.2 126.6-9 10.1-8.1 25.6 2.1 34.5C269 866 319.4 895 374.7 913.2c2.6.8 5.2 1.2 7.8 1.2 10.3 0 20-6.5 23.4-16.7C421 853.1 462.8 823 509.8 823s88.8 30.1 103.9 74.9c4.3 12.8 18.3 19.7 31.2 15.5 55.3-18.2 105.7-47.2 149.8-86.1 10.2-9 11.1-24.4 2.1-34.5-31.4-35.4-36.7-86.2-13.2-126.6 19.6-33.9 55.2-54.1 95-54.1 7.5 0 15.1.8 22.5 2.3 6.3 1.3 13.1.1 18.5-3.5s9.3-9.1 10.6-15.5c5.8-28.1 8.7-57.1 8.7-85.9 0-29.1-2.9-58-8.7-86.1M509.8 665.5c-86.9 0-157.3-69.9-157.3-156.1 0-86.2 70.4-156.1 157.3-156.1s157.3 69.9 157.3 156.1c0 86.2-70.4 156.1-157.3 156.1'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M930.2 423.4c-1.3-6.4-5.2-12-10.6-15.6-5.5-3.6-12.2-4.8-18.5-3.5-7.4 1.5-15 2.3-22.5 2.3-39.8 0-75.3-20.2-95-54.1-23.5-40.4-18.1-91.2 13.2-126.6 9-10.1 8.1-25.5-2.1-34.5-44.1-38.9-94.5-67.9-149.8-86.1-12.9-4.2-26.9 2.7-31.2 15.5-15.1 44.8-56.8 74.9-103.9 74.9s-88.8-30.1-103.9-74.9c-4.3-12.8-18.2-19.7-31.2-15.5-55.3 18.2-105.7 47.2-149.8 86.1-10.2 9-11.1 24.4-2.1 34.5 31.4 35.4 36.7 86.2 13.2 126.6-19.6 33.9-55.2 54.1-95 54.1-7.5 0-15.1-.8-22.5-2.3-6.4-1.3-13.1 0-18.5 3.5-5.4 3.6-9.3 9.2-10.6 15.6-5.8 28.1-8.7 57-8.7 85.9 0 28.9 2.9 57.8 8.7 85.9 1.3 6.4 5.2 12 10.6 15.5 5.5 3.6 12.2 4.8 18.5 3.5 7.4-1.5 15-2.3 22.5-2.3 39.8 0 75.3 20.2 95 54.1 23.5 40.4 18.2 91.2-13.2 126.6-9 10.1-8.1 25.6 2.1 34.5C269 866 319.4 895 374.7 913.2c2.6.8 5.2 1.2 7.8 1.2 10.3 0 20-6.5 23.4-16.7C421 853.1 462.8 823 509.8 823s88.8 30.1 103.9 74.9c4.3 12.8 18.3 19.7 31.2 15.5 55.3-18.2 105.7-47.2 149.8-86.1 10.2-9 11.1-24.4 2.1-34.5-31.4-35.4-36.7-86.2-13.2-126.6 19.6-33.9 55.2-54.1 95-54.1 7.5 0 15.1.8 22.5 2.3 6.3 1.3 13.1.1 18.5-3.5s9.3-9.1 10.6-15.5c5.8-28.1 8.7-57.1 8.7-85.9 0-29.1-2.9-58-8.7-86.1M509.8 665.5c-86.9 0-157.3-69.9-157.3-156.1 0-86.2 70.4-156.1 157.3-156.1s157.3 69.9 157.3 156.1c0 86.2-70.4 156.1-157.3 156.1'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-right-1{ -webkit-mask: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M709.717 546.901a46.805 46.805 0 0 0 0-69.802L368.981 181.077c-28.032-24.32-70.314-3.328-70.314 34.944V807.98c0 38.272 42.282 59.306 70.314 34.944L709.717 546.9z'/%3E%3C/svg%3E") no-repeat 50% 50%; mask: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M709.717 546.901a46.805 46.805 0 0 0 0-69.802L368.981 181.077c-28.032-24.32-70.314-3.328-70.314 34.944V807.98c0 38.272 42.282 59.306 70.314 34.944L709.717 546.9z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; height: 20px;width:20px; } .icon-cat{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M883.6 523.8L500.2 140.4c-22.7-22.7-56-32.3-87.3-25L228.3 158c-34.7 8-62.3 35.5-70.2 70.2l-42.6 184.6c-7.3 31.7 2 64.3 25 87.3l383.4 383.4c17.7 17.7 41.2 27.4 66.3 27.4 25 0 48.6-9.7 66.3-27.4l227.2-227.2c17.7-17.7 27.5-41.2 27.5-66.3-.2-25-9.9-48.5-27.6-66.2zM332.9 405.4c-40.9 0-74.1-33.2-74.1-74.1s33.2-74.1 74.1-74.1 74.1 33.2 74.1 74.1-33.2 74.1-74.1 74.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask: var(--icon);mask: var(--icon);-webkit-mask-size: cover;mask-size: cover;height: 20px;width:20px; } .icon-search{ --icon:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='currentColor' overflow='hidden'%3E%3Cpath d='M930.56 749.44l-160-103.36A400.96 400.96 0 1 0 646.08 768l103.36 160a133.44 133.44 0 0 0 39.36 39.36 130.88 130.88 0 0 0 141.76-220.48zM432 704a272 272 0 1 1 272-272 272 272 0 0 1-272 272z' /%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask: var(--icon);mask: var(--icon);-webkit-mask-size: cover;mask-size: cover;height: 20px;width:20px; } .icon-cat{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M893.7 524.1L499.8 130.2c-23.3-23.3-57.6-33.1-89.7-25.7l-189.6 43.8c-35.6 8.2-64 36.5-72.2 72.2l-43.8 189.7c-7.5 32.6 2.1 66.1 25.7 89.7l393.9 393.9c18.2 18.2 42.4 28.2 68.1 28.2 25.7 0 49.9-10 68.1-28.2l233.4-233.4c18.2-18.2 28.2-42.4 28.2-68.1 0-25.8-10-50-28.2-68.2zM328 402.5c-42 0-76.1-34.1-76.1-76.1s34.1-76.1 76.1-76.1 76.1 34.1 76.1 76.1-34 76.1-76.1 76.1z'/%3E%3C/svg%3E") no-repeat 50% 50%; -webkit-mask: var(--icon);mask: var(--icon);-webkit-mask-size: cover;mask-size: cover;height: 20px;width:20px; } .sizeShow{ animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both; -moz-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both; -webkit-animation: sizeShow .3s cubic-bezier(.4,.45,.15,.91) both; animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards; } @keyframes sizeShow { 0% {opacity: 0;-moz-transform: scale3d(.3,.3,.3);-webkit-transform: scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);}to { opacity: 1;-webkit-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1);} } @-webkit-keyframes sizeShow { 0% {opacity: 0;-moz-transform: scale3d(.3,.3,.3);-webkit-transform: scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);}to {opacity: 1; -webkit-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1); } } .sizeHide{animation: sizeHide 0.3s cubic-bezier(.4,.45,.15,.91) both;-moz-animation: sizeHide 0.3s cubic-bezier(.4,.45,.15,.91) both;-webkit-animation: sizeHide 0.3s cubic-bezier(.4,.45,.15,.91) both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes sizeHide { 0% {opacity: 1;-webkit-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}to {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);-moz-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);} } @keyframes sizeHide { 0% {opacity: 1;-webkit-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}to {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);-moz-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);} } .leftShow{-webkit-animation: leftShow 0.3s ease-in-out both;-moz-animation: leftShow 0.3s ease-in-out both;animation: leftShow 0.3s ease-in-out both;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;} @-webkit-keyframes leftShow { 0% {-webkit-transform: translateX(110px);transform: translateX(110px);opacity: 0;} to {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;} } @keyframes leftShow { 0% {-webkit-transform: translateX(110px);transform: translateX(110px);opacity: 0;} to {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;} } .leftHide{animation: leftHide 0.3s ease-in-out both;-webkit-animation: leftHide 0.3s ease-in-out both;-moz-animation: leftHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} /* 删除动画 */ @-webkit-keyframes leftHide { 0% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;} to {-webkit-transform: translateX(110px);transform: translateX(110px);opacity: 0;} } @keyframes leftHide { 0% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;} to {-webkit-transform: translateX(110px);transform: translateX(110px);opacity: 0;} } .topShow{animation: topShow 0.3s ease-in-out both;-webkit-animation: topShow 0.3s ease-in-out both;-moz-animation: topShow 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes topShow { 0% {-webkit-transform: translateY(20px);transform: translateY(20px);opacity: 0;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } @keyframes topShow { 0% {-webkit-transform: translateY(20px);transform: translateY(20px);opacity: 0;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } .topHide{animation: topHide 0.3s ease-in-out both;-webkit-animation: topHide 0.3s ease-in-out both;-moz-animation: topHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} /* 删除动画 */ @-webkit-keyframes topHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} to {-webkit-transform: translateY(20px);transform: translateY(20px);opacity: 0;} } @keyframes topHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} to {-webkit-transform: translateY(20px);transform: translateY(20px);opacity: 0;} } .bottomShow{animation: bottomShow 0.3s ease-in-out both;-webkit-animation: bottomShow 0.3s ease-in-out both;-moz-animation: bottomShow 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes bottomShow { 0% {-webkit-transform: translateY(-110px);transform: translateY(-110px);opacity: 0;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } @keyframes bottomShow { 0% {-webkit-transform: translateY(-110px);transform: translateY(-110px);opacity: 0;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } .bottomHide{animation: bottomHide 0.3s ease-in-out both;-webkit-animation: bottomHide 0.3s ease-in-out both;-moz-animation: bottomHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes bottomHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} to {-webkit-transform: translateY(-110px);transform: translateY(-110px);opacity: 0;} } @keyframes bottomHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} to {-webkit-transform: translateY(-110px);transform: translateY(-110px);opacity: 0;} } .tcmbtShow{animation: tcmbtShow 0.3s ease-in-out both;-webkit-animation: tcmbtShow 0.3s ease-in-out both;-moz-animation: tcmbtShow 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes tcmbtShow { 0% {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } @keyframes tcmbtShow { 0% {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } .tcmbtHide{animation: tcmbtHide 0.3s ease-in-out both;-webkit-animation: tcmbtHide 0.3s ease-in-out both;-moz-animation: tcmbtHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} /* 删除动画 */ @-webkit-keyframes tcmbtHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} to {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} } @keyframes tcmbtHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} to {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} } .dhShow{animation: boxshow 0.3s; -webkit-animation: boxshow 0.3s;-moz-animation: boxshow 0.3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes boxshow {0% {opacity: 0;}100% {opacity: 1;}} @keyframes boxshow {0% {opacity: 0;}100% {opacity: 1;}} .dhHide{animation: boxhide 0.3s; -webkit-animation: boxhide 0.3s;-moz-animation: boxhide 0.3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes boxhide {0% {opacity: 1;}100% {opacity: 0;}} @keyframes boxhide {0% {opacity: 1;}100% {opacity: 0;}} .selectShow{animation: selectShow 0.3s ease-in-out both;-webkit-animation: selectShow 0.3s ease-in-out both;-moz-animation: selectShow 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} @-webkit-keyframes selectShow { 0% {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} 20% {opacity: 1;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } @keyframes selectShow { 0% {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} 20% {opacity: 1;} to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} } .selectHide{animation: selectHide 0.3s ease-in-out both;-webkit-animation: selectHide 0.3s ease-in-out both;-moz-animation: selectHide 0.3s ease-in-out both;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards} /* 删除动画 */ @-webkit-keyframes selectHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} 60% {opacity: 1;} to {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} } @keyframes selectHide { 0% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;} 60% {opacity: 1;} to {-webkit-transform: translateY(300px);transform: translateY(300px);opacity: 0;} }