@import url("../../icon/iconfont.css");
|
:root {
|
--color-gray-50: #f8fafc;
|
--color-gray-100: #f0f1f0;
|
--color-gray-200: #eeeeee;
|
--color-gray-300: #cccccc;
|
--color-gray-400: #9B9B9B;
|
--color-gray-500: #666666;
|
--color-gray-600: #475569;
|
--color-gray-700: #334155;
|
--color-gray-800: #1e293b;
|
--color-gray-900: #0f172a;
|
--color-gray-950: #020617;
|
|
--color-blue-50: #eff6ff;
|
--color-blue-100: #dbeafe;
|
--color-blue-200: #bfdbfe;
|
--color-blue-300: #93c5fd;
|
--color-blue-400: #60a5fa;
|
--color-blue-500: #3b82f6;
|
--color-blue-600: #2563eb;
|
--color-blue-700: #1d4ed8;
|
--color-blue-800: #1e40af;
|
--color-blue-900: #1e3a8a;
|
--color-blue-950: #172554;
|
|
--color-cyan-50: #ecfeff;
|
--color-cyan-100: #cffafe;
|
--color-cyan-200: #a5f3fc;
|
--color-cyan-300: #67e8f9;
|
--color-cyan-400: #22d3ee;
|
--color-cyan-500: #06b6d4;
|
--color-cyan-600: #0891b2;
|
--color-cyan-700: #0e7490;
|
--color-cyan-800: #155e75;
|
--color-cyan-900: #164e63;
|
--color-cyan-950: #083344;
|
|
--color-green-50: #f0fdf4;
|
--color-green-100: #dcfce7;
|
--color-green-200: #bbf7d0;
|
--color-green-300: #86efac;
|
--color-green-400: #4ade80;
|
--color-green-500: #22c55e;
|
--color-green-600: #16a34a;
|
--color-green-700: #15803d;
|
--color-green-800: #166534;
|
--color-green-900: #14532d;
|
--color-green-950: #052e16;
|
|
--color-lime-50: #f7fee7;
|
--color-lime-100: #ecfccb;
|
--color-lime-200: #d9f99d;
|
--color-lime-300: #bef264;
|
--color-lime-400: #a3e635;
|
--color-lime-500: #84cc16;
|
--color-lime-600: #65a30d;
|
--color-lime-700: #4d7c0f;
|
--color-lime-800: #3f6212;
|
--color-lime-900: #365314;
|
--color-lime-950: #1a2e05;
|
|
--color-yellow-50: #fffbeb;
|
--color-yellow-100: #fef3c7;
|
--color-yellow-200: #fde68a;
|
--color-yellow-300: #fcd34d;
|
--color-yellow-400: #fbbf24;
|
--color-yellow-500: #f59e0b;
|
--color-yellow-600: #d97706;
|
--color-yellow-700: #b45309;
|
--color-yellow-800: #92400e;
|
--color-yellow-900: #78350f;
|
--color-yellow-950: #451a03;
|
|
--color-orange-50: #fff7ed;
|
--color-orange-100: #ffedd5;
|
--color-orange-200: #fed7aa;
|
--color-orange-300: #fdba74;
|
--color-orange-400: #fb923c;
|
--color-orange-500: #f97316;
|
--color-orange-600: #ea580c;
|
--color-orange-700: #c2410c;
|
--color-orange-800: #9a3412;
|
--color-orange-900: #7c2d12;
|
--color-orange-950: #431407;
|
|
--color-red-50: #fef2f2;
|
--color-red-100: #fee2e2;
|
--color-red-200: #fecaca;
|
--color-red-300: #fca5a5;
|
--color-red-400: #f87171;
|
--color-red-500: #ef4444;
|
--color-red-600: #dc2626;
|
--color-red-700: #b91c1c;
|
--color-red-800: #991b1b;
|
--color-red-900: #7f1d1d;
|
--color-red-950: #450a0a;
|
|
--color-pink-50: #fdf2f8;
|
--color-pink-100: #fce7f3;
|
--color-pink-200: #fbcfe8;
|
--color-pink-300: #f9a8d4;
|
--color-pink-400: #f472b6;
|
--color-pink-500: #ec4899;
|
--color-pink-600: #db2777;
|
--color-pink-700: #be185d;
|
--color-pink-800: #9d174d;
|
--color-pink-900: #831843;
|
--color-pink-950: #500724;
|
|
--color-purple-50: #faf5ff;
|
--color-purple-100: #f3e8ff;
|
--color-purple-200: #e9d5ff;
|
--color-purple-300: #d8b4fe;
|
--color-purple-400: #c084fc;
|
--color-purple-500: #a855f7;
|
--color-purple-600: #9333ea;
|
--color-purple-700: #7e22ce;
|
--color-purple-800: #6b21a8;
|
--color-purple-900: #581c87;
|
--color-purple-950: #3b0764;
|
|
--color-black: #000;
|
--color-white: #fff;
|
--color-body: #F2F3F5;
|
--black-shadow: rgba(0,0,0,.72);
|
--white-shadow: rgba(255,255,255,.72);
|
|
--xs: 2px;
|
--sm: 4px;
|
--md: 6px;
|
--lg: 8px;
|
--xl: 10px;
|
--2xl: 12px;
|
--3xl: 16px;
|
--4xl: 20px;
|
--5xl: 24px;
|
--6xl: 30px;
|
|
--shadow: 0 1px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px -1px rgba(0, 0, 0, .1);
|
--shadow-md: 0 2px 6px -1px rgba(0, 0, 0, .2), 0 1px 4px -2px rgba(0, 0, 0, .15);
|
--shadow-lg: 0 4px 12px -4px rgba(0, 0, 0, .2), 0 4px 12px -4px rgba(0, 0, 0, .15);
|
--shadow-xl: 0 6px 20px -6px rgba(0, 0, 0, .2), 0 8px 20px -6px rgba(0, 0, 0, .15);
|
--shadow-2xl: 0 10px 30px -10px rgba(0, 0, 0, .4), 0 8px 20px -10px rgba(0, 0, 0, .3);
|
}
|
/*light dark*/
|
@media (prefers-color-scheme:dark) {
|
:root {
|
--color-gray-50: #020617;
|
--color-gray-100: #0f172a;
|
--color-gray-200: #1e293b;
|
--color-gray-300: #334155;
|
--color-gray-400: #475569;
|
--color-gray-500: #888888;
|
--color-gray-600: #9B9B9B;
|
--color-gray-700: #aaaaaa;
|
--color-gray-800: #dddddd;
|
--color-gray-900: #cccccc;
|
--color-gray-950: #f0f0f0;
|
|
--color-blue-50: #172554;
|
--color-blue-100: #1e3a8a;
|
--color-blue-200: #1e40af;
|
--color-blue-300: #1d4ed8;
|
--color-blue-400: #2563eb;
|
--color-blue-500: #3b82f6;
|
--color-blue-600: #60a5fa;
|
--color-blue-700: #93c5fd;
|
--color-blue-800: #bfdbfe;
|
--color-blue-900: #dbeafe;
|
--color-blue-950: #eff6ff;
|
|
--color-cyan-950: #ecfeff;
|
--color-cyan-900: #cffafe;
|
--color-cyan-800: #a5f3fc;
|
--color-cyan-700: #67e8f9;
|
--color-cyan-600: #22d3ee;
|
--color-cyan-500: #06b6d4;
|
--color-cyan-400: #0891b2;
|
--color-cyan-300: #0e7490;
|
--color-cyan-200: #155e75;
|
--color-cyan-100: #164e63;
|
--color-cyan-50: #083344;
|
|
--color-green-50: #052e16;
|
--color-green-100: #14532d;
|
--color-green-200: #166534;
|
--color-green-300: #15803d;
|
--color-green-400: #16a34a;
|
--color-green-500: #22c55e;
|
--color-green-600: #4ade80;
|
--color-green-700: #86efac;
|
--color-green-800: #bbf7d0;
|
--color-green-900: #dcfce7;
|
--color-green-950: #f0fdf4;
|
|
--color-lime-950: #f7fee7;
|
--color-lime-900: #ecfccb;
|
--color-lime-800: #d9f99d;
|
--color-lime-700: #bef264;
|
--color-lime-600: #a3e635;
|
--color-lime-500: #84cc16;
|
--color-lime-400: #65a30d;
|
--color-lime-300: #4d7c0f;
|
--color-lime-200: #3f6212;
|
--color-lime-100: #365314;
|
--color-lime-50: #1a2e05;
|
|
--color-yellow-50: #451a03;
|
--color-yellow-100: #78350f;
|
--color-yellow-200: #92400e;
|
--color-yellow-300: #b45309;
|
--color-yellow-400: #d97706;
|
--color-yellow-500: #f59e0b;
|
--color-yellow-600: #fbbf24;
|
--color-yellow-700: #fcd34d;
|
--color-yellow-800: #fde68a;
|
--color-yellow-900: #fef3c7;
|
--color-yellow-950: #fffbeb;
|
|
--color-orange-950: #fff7ed;
|
--color-orange-900: #ffedd5;
|
--color-orange-800: #fed7aa;
|
--color-orange-700: #fdba74;
|
--color-orange-600: #fb923c;
|
--color-orange-500: #f97316;
|
--color-orange-400: #ea580c;
|
--color-orange-300: #c2410c;
|
--color-orange-200: #9a3412;
|
--color-orange-100: #7c2d12;
|
--color-orange-50: #431407;
|
|
--color-red-50: #450a0a;
|
--color-red-100: #7f1d1d;
|
--color-red-200: #991b1b;
|
--color-red-300: #b91c1c;
|
--color-red-400: #dc2626;
|
--color-red-500: #ef4444;
|
--color-red-600: #f87171;
|
--color-red-700: #fca5a5;
|
--color-red-800: #fecaca;
|
--color-red-900: #fee2e2;
|
--color-red-950: #fef2f2;
|
|
--color-pink-50: #500724;
|
--color-pink-100: #831843;
|
--color-pink-200: #9d174d;
|
--color-pink-300: #be185d;
|
--color-pink-400: #db2777;
|
--color-pink-500: #ec4899;
|
--color-pink-600: #f472b6;
|
--color-pink-700: #f9a8d4;
|
--color-pink-800: #fbcfe8;
|
--color-pink-900: #fce7f3;
|
--color-pink-950: #fdf2f8;
|
|
--color-purple-50: #3b0764;
|
--color-purple-100: #581c87;
|
--color-purple-200: #6b21a8;
|
--color-purple-300: #7e22ce;
|
--color-purple-400: #9333ea;
|
--color-purple-500: #a855f7;
|
--color-purple-600: #c084fc;
|
--color-purple-700: #d8b4fe;
|
--color-purple-800: #e9d5ff;
|
--color-purple-900: #f3e8ff;
|
--color-purple-950: #faf5ff;
|
|
--color-black: #ffffff;
|
--color-white: #181818;
|
--color-body: #111111;
|
--black-shadow: rgba(255,255,255,.72);
|
--white-shadow: rgba(0,0,0,.72);
|
}
|
}
|
|
html,body {background: var(--color-body);margin:0; padding:0;height: 100%; width: 100%; background-origin: border-box;box-sizing: border-box;
|
-webkit-overflow-scrolling: touch;
|
-webkit-touch-callout: none;
|
}
|
html {-webkit-text-size-adjust: 100%;}
|
body {font-size:16px; line-height: 1.5; color:var(--color-gray-900); font-family: -apple-system-font, Helvetica Neue, sans-serif; min-height: 100vh; overflow: auto;}
|
#root {-webkit-tap-highlight-color: transparent; width:100%;}
|
#app {max-width: 640px; min-width: 320px; margin-left: auto; margin-right: auto; min-height: 100vh; position: relative;}
|
|
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,blockquote,p{padding:0; margin:0; user-select: none; box-sizing: border-box;}
|
table,td,tr,th{font-size:14px;}
|
img{vertical-align:top;border:0;}
|
ol,ul{list-style:none;}
|
li{list-style-type:none;}
|
h1,h2,h3,h4,h5,h6 {font-size:20px;}
|
address,code,em,th,s,i{font-weight:normal; font-style:normal;}
|
:before,:after{box-sizing: border-box;}
|
|
/*float*/
|
.l,.left{float:left;}
|
.r,.right{float:right;}
|
.clearfix {display: block;}
|
.clearfix:after {clear: both;content: "";display: block}
|
|
.flex{display:flex;}
|
.justify-between{-ms-flex-align: center;-ms-flex-pack: justify; -webkit-align-items: center; -webkit-justify-content: space-between; align-items: center; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between;}
|
.text-content{word-wrap: break-word;}
|
.center{text-align:center;}
|
/*display*/
|
.hide{display:none;}
|
.block{display:block;}
|
|
/*margin*/
|
.margin-2{margin: var(--xs);}
|
.margin-4{margin: var(--sm);}
|
.margin-6{margin: var(--md);}
|
.margin-8{margin: var(--lg);}
|
.margin-10{margin: var(--xl);}
|
.margin-12{margin: var(--2xl);}
|
.margin-16{margin: var(--3xl);}
|
.margin-20{margin: var(--4xl);}
|
.margin-24{margin: var(--5xl);}
|
.margin-30{margin: var(--6xl);}
|
|
.margin-2-t{margin-top: var(--xs);}
|
.margin-4-t{margin-top: var(--sm);}
|
.margin-6-t{margin-top: var(--md);}
|
.margin-8-t{margin-top: var(--lg);}
|
.margin-10-t{margin-top: var(--xl);}
|
.margin-12-t{margin-top: var(--2xl);}
|
.margin-16-t{margin-top: var(--3xl);}
|
.margin-20-t{margin-top: var(--4xl);}
|
.margin-24-t{margin-top: var(--5xl);}
|
.margin-30-t{margin-top: var(--6xl);}
|
|
.margin-2-r{margin-right: var(--xs);}
|
.margin-4-r{margin-right: var(--sm);}
|
.margin-6-r{margin-right: var(--md);}
|
.margin-8-r{margin-right: var(--lg);}
|
.margin-10-r{margin-right: var(--xl);}
|
.margin-12-r{margin-right: var(--2xl);}
|
.margin-16-r{margin-right: var(--3xl);}
|
.margin-20-r{margin-right: var(--4xl);}
|
.margin-24-r{margin-right: var(--5xl);}
|
.margin-30-r{margin-right: var(--6xl);}
|
|
.margin-2-b{margin-bottom: var(--xs);}
|
.margin-4-b{margin-bottom: var(--sm);}
|
.margin-6-b{margin-bottom: var(--md);}
|
.margin-8-b{margin-bottom: var(--lg);}
|
.margin-10-b{margin-bottom: var(--xl);}
|
.margin-12-b{margin-bottom: var(--2xl);}
|
.margin-16-b{margin-bottom: var(--3xl);}
|
.margin-20-b{margin-bottom: var(--4xl)}
|
.margin-24-b{margin-bottom: var(--5xl)}
|
.margin-30-b{margin-bottom: var(--6xl)}
|
|
.margin-2-l{margin-left: var(--xs);}
|
.margin-4-l{margin-left: var(--sm);}
|
.margin-6-l{margin-left: var(--md);}
|
.margin-8-l{margin-left: var(--lg);}
|
.margin-10-l{margin-left: var(--xl);}
|
.margin-12-l{margin-left: var(--2xl);}
|
.margin-16-l{margin-left: var(--3xl);}
|
.margin-20-l{margin-left: var(--4xl);}
|
.margin-24-l{margin-left: var(--5xl);}
|
.margin-30-l{margin-left: var(--6xl);}
|
|
.margin-2-lr{margin: 0 var(--xs);}
|
.margin-4-lr{margin: 0 var(--sm);}
|
.margin-6-lr{margin: 0 var(--md);}
|
.margin-8-lr{margin: 0 var(--lg);}
|
.margin-10-lr{margin: 0 var(--xl);}
|
.margin-12-lr{margin: 0 var(--2xl);}
|
.margin-16-lr{margin: 0 var(--3xl);}
|
.margin-20-lr{margin: 0 var(--4xl);}
|
.margin-24-lr{margin: 0 var(--5xl);}
|
.margin-30-lr{margin: 0 var(--6xl);}
|
|
.margin-2-tb{margin: var(--xs) 0;}
|
.margin-4-tb{margin: var(--sm) 0;}
|
.margin-6-tb{margin: var(--md) 0;}
|
.margin-8-tb{margin: var(--lg) 0;}
|
.margin-10-tb{margin: var(--xl) 0;}
|
.margin-12-tb{margin: var(--2xl) 0;}
|
.margin-16-tb{margin: var(--3xl) 0;}
|
.margin-20-tb{margin: var(--4xl) 0;}
|
.margin-24-tb{margin: var(--5xl) 0;}
|
.margin-30-tb{margin: var(--6xl) 0;}
|
|
/*padding*/
|
.padding-2{padding: var(--xs);}
|
.padding-4{padding: var(--sm);}
|
.padding-6{padding: var(--md);}
|
.padding-8{padding: var(--lg);}
|
.padding-10{padding: var(--xl);}
|
.padding-12{padding: var(--2xl);}
|
.padding-16{padding: var(--3xl);}
|
.padding-20{padding: var(--4xl);}
|
.padding-24{padding: var(--5xl);}
|
.padding-30{padding: var(--6xl);}
|
|
.padding-2-t{padding-top: var(--xs);}
|
.padding-4-t{padding-top: var(--sm);}
|
.padding-6-t{padding-top: var(--md);}
|
.padding-8-t{padding-top: var(--lg);}
|
.padding-10-t{padding-top: var(--xl);}
|
.padding-12-t{padding-top: var(--2xl);}
|
.padding-16-t{padding-top: var(--3xl);}
|
.padding-20-t{padding-top: var(--4xl);}
|
.padding-24-t{padding-top: var(--5xl);}
|
.padding-30-t{padding-top: var(--6xl);}
|
|
.padding-2-r{padding-right: var(--xs);}
|
.padding-4-r{padding-right: var(--sm);}
|
.padding-6-r{padding-right: var(--md);}
|
.padding-8-r{padding-right: var(--lg);}
|
.padding-10-r{padding-right: var(--xl);}
|
.padding-12-r{padding-right: var(--2xl);}
|
.padding-16-r{padding-right: var(--3xl);}
|
.padding-20-r{padding-right: var(--4xl);}
|
.padding-24-r{padding-right: var(--5xl);}
|
.padding-30-r{padding-right: var(--6xl);}
|
|
.padding-2-b{padding-bottom: var(--xs);}
|
.padding-4-b{padding-bottom: var(--sm);}
|
.padding-6-b{padding-bottom: var(--md);}
|
.padding-8-b{padding-bottom: var(--lg);}
|
.padding-10-b{padding-bottom: var(--xl);}
|
.padding-12-b{padding-bottom: var(--2xl);}
|
.padding-16-b{padding-bottom: var(--3xl);}
|
.padding-20-b{padding-bottom: var(--4xl)}
|
.padding-24-b{padding-bottom: var(--5xl)}
|
.padding-30-b{padding-bottom: var(--6xl)}
|
|
.padding-2-l{padding-left: var(--xs);}
|
.padding-4-l{padding-left: var(--sm);}
|
.padding-6-l{padding-left: var(--md);}
|
.padding-8-l{padding-left: var(--lg);}
|
.padding-10-l{padding-left: var(--xl);}
|
.padding-12-l{padding-left: var(--2xl);}
|
.padding-16-l{padding-left: var(--3xl);}
|
.padding-20-l{padding-left: var(--4xl);}
|
.padding-24-l{padding-left: var(--5xl);}
|
.padding-30-l{padding-left: var(--6xl);}
|
|
.padding-2-lr{padding: 0 var(--xs);}
|
.padding-4-lr{padding: 0 var(--sm);}
|
.padding-6-lr{padding: 0 var(--md);}
|
.padding-8-lr{padding: 0 var(--lg);}
|
.padding-10-lr{padding: 0 var(--xl);}
|
.padding-12-lr{padding: 0 var(--2xl);}
|
.padding-16-lr{padding: 0 var(--3xl);}
|
.padding-20-lr{padding: 0 var(--4xl);}
|
.padding-24-lr{padding: 0 var(--5xl);}
|
.padding-30-lr{padding: 0 var(--6xl);}
|
|
.padding-2-tb{padding: var(--xs) 0;}
|
.padding-4-tb{padding: var(--sm) 0;}
|
.padding-6-tb{padding: var(--md) 0;}
|
.padding-8-tb{padding: var(--lg) 0;}
|
.padding-10-tb{padding: var(--xl) 0;}
|
.padding-12-tb{padding: var(--2xl) 0;}
|
.padding-16-tb{padding: var(--3xl) 0;}
|
.padding-20-tb{padding: var(--4xl) 0;}
|
.padding-24-tb{padding: var(--5xl) 0;}
|
.padding-30-tb{padding: var(--6xl) 0;}
|
|
/*radius*/
|
.radius{border-radius: 50%}
|
.radius-2{border-radius: var(--xs)}
|
.radius-4{border-radius: var(--sm)}
|
.radius-6{border-radius: var(--md)}
|
.radius-8{border-radius: var(--lg)}
|
.radius-10{border-radius: var(--xl)}
|
.radius-12{border-radius: var(--2xl)}
|
.radius-16{border-radius: var(--3xl)}
|
.radius-20{border-radius: var(--4xl)}
|
.radius-24{border-radius: var(--5xl)}
|
.radius-30{border-radius: var(--6xl)}
|
|
/* 边框 */
|
.border{border-width: 1px; border-style: solid; border-color: var(--color-gray-300); color: var(--color-gray-500);}
|
.border-red{border-width: 1px; border-style: solid; border-color: var(--color-red-500)!important; color: var(--color-red-500)!important;}
|
.border-orange{border-width: 1px; border-style: solid; border-color: var(--color-orange-500)!important; color: var(--color-orange-500)!important;}
|
.border-yellow{border-width: 1px; border-style: solid; border-color: var(--color-yellow-500)!important; color: var(--color-yellow-500)!important;}
|
.border-green{border-width: 1px; border-style: solid; border-color: var(--color-green-500)!important; color:var(--color-green-500)!important;}
|
.border-lime{border-width: 1px; border-style: solid; border-color: var(--color-lime-500)!important; color:var(--color-lime-500)!important;}
|
.border-cyan{border-width: 1px; border-style: solid; border-color: var(--color-cyan-500)!important; color: var(--color-cyan-500)!important;}
|
.border-blue{border-width: 1px; border-style: solid; border-color: var(--color-blue-500)!important; color: var(--color-blue-500)!important;}
|
.border-purple{border-width: 1px; border-style: solid; border-color: var(--color-purple-500)!important; color: var(--color-purple-500)!important;}
|
.border-black{border-width: 1px; border-style: solid; border-color: var(--color-black-900)!important; color: var(--color-black-900)!important;}
|
.border-gray{border-width: 1px; border-style: solid; border-color:var(--color-gray-200)!important; color: var(--color-gray-400)!important;}
|
|
/* 背景颜色 */
|
.bg-red{background-color: var(--color-red-500)!important; color: var(--color-white)!important;}
|
.bg-orange{background-color: var(--color-orange-500)!important; color: var(--color-white)!important;}
|
.bg-yellow{background-color: var(--color-yellow-500)!important; color: var(--color-white)!important;}
|
.bg-green{background-color: var(--color-green-500)!important; color: var(--color-white)!important;}
|
.bg-lime{background-color: var(--color-lime-500)!important; color:var(--color-white)!important}
|
.bg-cyan{background-color: var(--color-cyan-500)!important; color: var(--color-white)!important;}
|
.bg-blue{background-color: var(--color-blue-500)!important; color: var(--color-white)!important;}
|
.bg-pink{background-color: var(--color-pink-500)!important; color: var(--color-white)!important;}
|
.bg-purple{background-color: var(--color-purple-500)!important; color: var(--color-white)!important;}
|
.bg-black{background-color: var(--color-black-500)!important; color: var(--color-white)!important;}
|
.bg-white{background-color: var(--color-white)!important; color: var(--color-gray-900)!important;}
|
.bg-gray{background-color: var(--color-gray-100)!important; color: var(--color-gray-500)!important;}
|
|
/* 文本颜色 */
|
.text-red{color: var(--color-red-500)!important;}
|
.text-orange{color: var(--color-orange-500)!important;}
|
.text-yellow{color: var(--color-yellow-500)!important;}
|
.text-green{color: var(--color-green-500)!important;}
|
.text-lime{color: var(--color-lime-500)!important;}
|
.text-cyan{color: var(--color-cyan-500)!important;}
|
.text-blue{color: var(--color-blue-500)!important;}
|
.text-pink{color: var(--color-pink-500)!important;}
|
.text-purple{color: var(--color-purple-500)!important;}
|
.text-black{color: var(--color-gray-900)!important;}
|
.text-white{color: var(--color-white)!important;}
|
.text-gray{color: var(--color-gray-400)!important;}
|
.text-grey{color: var(--color-gray-200)!important;}
|
|
/* 审核状态颜色 */
|
.check-status-color-0{color: var(--color-gray-600)!important;}
|
.check-status-color-1{color: var(--color-blue-500)!important;}
|
.check-status-color-2{color: var(--color-green-500)!important;}
|
.check-status-color-3{color: var(--color-red-500)!important;}
|
.check-status-color-4{color: var(--color-gray-400)!important;}
|
.check-status-color-5{color: var(--color-lime-500)!important;}
|
.check-status-color-6{color: var(--color-orange-500)!important;}
|
.check-status-color-7{color: var(--color-yellow-500)!important;}
|
.check-status-color-8{color: var(--color-purple-500)!important;}
|
|
/*font-size*/
|
.fn{font-weight:normal!important;}
|
.fb{font-weight:bold!important;}
|
.fs{font-style:normal!important;}
|
.f10{font-size:10px!important;}
|
.f12{font-size:12px!important;}
|
.f13{font-size:13px!important;}
|
.f14{font-size:14px!important;}
|
.f15{font-size:15px!important;}
|
.f16{font-size:16px!important;}
|
.f18{font-size:18px!important;}
|
.f20{font-size:20px!important;}
|
.f24{font-size:24px!important;}
|
.f28{font-size:28px!important;}
|
|
/*a*/
|
a{text-decoration:none;color: var(--color-gray-900)}
|
/*ellipsis*/
|
.line-limit-1,.line-limit-2,.line-limit-3,.line-limit-4,.line-limit-5{letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
|
.line-limit-2{-webkit-line-clamp: 2;}
|
.line-limit-3{-webkit-line-clamp: 3;}
|
.line-limit-4{-webkit-line-clamp: 4;}
|
.line-limit-5{-webkit-line-clamp: 5;}
|
|
/*border-1-px*/
|
.border-top,.border-bottom,.border-left,.border-right{position:relative;}
|
.border-top:before,.border-left:before,.border-bottom:after,.border-right:after{content: " ";position: absolute; width: 200%; height: 0;pointer-events: none; transform: scale(0.5); transform-origin: 0 0;}
|
.border-top:before{border-top:1px solid var(--color-gray-200);top: 0; left: 0;}
|
.border-right:after{border-right:1px solid var(--color-gray-200);top: 0; right: 0;}
|
.border-bottom:after{border-bottom:1px solid var(--color-gray-200); bottom: 0; left: 0;}
|
.border-left:before{border-left:1px solid var(--color-gray-200);top: 0; left: 0;}
|
|
/*avatar*/
|
.avatar{align-items: center; aspect-ratio: 1/1; border-radius:4px; display: inline-flex; justify-content: center; overflow: hidden; width: 48px;height:48px;}
|
.avatar>img {margin: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%;}
|
.avatar.sm{width: 36px;height:36px;}
|
.avatar.xs{width: 24px;height:24px;}
|
.avatar.lg{width: 60px;height:60px;}
|
.avatar.radius{border-radius:50%;}
|
|
/*mbui-btn*/
|
.mbui-btn{display: inline-block; vertical-align: middle; height: 42px; line-height: 42px; border: 1px solid transparent; padding: 0 16px;background-color: var(--color-blue-500); color: #f1f1f1; white-space: nowrap; text-align: center; font-size: 16px; border-radius: 4px; cursor: pointer; user-select: none;}
|
.mbui-btn:hover{opacity: 0.8; filter:alpha(opacity=80);}
|
.mbui-btn:active{opacity: 1; filter:alpha(opacity=100);}
|
.mbui-btn+.mbui-btn{margin-left: 10px;}
|
.mbui-btn-100{width:100%;}
|
|
/* 原始 */
|
.mbui-btn-primary{border-color: var(--color-gray-300); background: var(--color-gray-50); color: var(--color-gray-500);}
|
.mbui-btn-primary:hover{border-color: var(--color-gray-400); color: var(--color-gray-900);}
|
/* 百搭 */.mbui-btn-normal{background-color: var(--color-blue-500);}
|
/* 暖色 */.mbui-btn-warm{background-color: var(--color-yellow-500);}
|
/* 警告 */.mbui-btn-danger{background-color: var(--color-red-500);}
|
/* 常规 */.mbui-btn-green{background-color: var(--color-green-500);}
|
/* 选中 */.mbui-btn-checked{background-color: var(--color-lime-500);}
|
/* 禁用 */.mbui-btn-disabled, .mbui-btn-disabled:hover, .mbui-btn-disabled:active{border-color: var(--color-gray-200)!important; background-color:var(--color-gray-100)!important; color:var(--color-gray-300)!important; cursor: not-allowed !important; opacity: 1;}
|
|
/* 大型 */.mbui-btn.lg{height: 48px; line-height: 48px; padding: 0 20px; font-size: 18px;}
|
/* 中型 */.mbui-btn.md{height: 42px; line-height: 42px; padding: 0 16px; font-size: 16px;}
|
/* 小型 */.mbui-btn.sm{height: 32px; line-height: 32px; padding: 0 12px; font-size: 14px;}
|
/* 超小 */.mbui-btn.xs{height: 24px; line-height: 24px; padding: 0 6px; font-size: 12px;}
|
|
|
/* 圆角 */
|
.mbui-btn-radius{border-radius: 100px;}
|
.mbui-btn .mbui-icon{padding: 0 2px; vertical-align: middle\0; vertical-align: bottom;}
|
|
/* 按钮组 */
|
.mbui-btn-group{display: inline-block; vertical-align: middle; font-size: 0;}
|
.mbui-btn-group .mbui-btn{margin-left: 0!important; margin-right: 0!important; border-left: 1px solid rgba(255,255,255,.5); border-radius: 0;}
|
.mbui-btn-group .mbui-btn-primary{border-left: none;}
|
.mbui-btn-group .mbui-btn-primary:hover{border-color:var(--color-gray-300); color: var(--color-gray-500);}
|
.mbui-btn-group .mbui-btn:first-child{border-left: none; border-radius: 2px 0 0 2px;}
|
.mbui-btn-group .mbui-btn-primary:first-child{border-left: 1px solid var(--color-gray-300);}
|
.mbui-btn-group .mbui-btn:last-child{border-radius: 0 2px 2px 0;}
|
.mbui-btn-group .mbui-btn+.mbui-btn{margin-left: 0;}
|
.mbui-btn-group+.mbui-btn-group{margin-left: 10px;}
|
|
/*mbui-list*/
|
.mbui-list{padding: var(--2xl); vertical-align: middle; position: relative; align-items: center; background: var(--color-white); font-size: 16px;
|
display: -webkit-box;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.mbui-list:before{content: " "; position: absolute; top: 0;left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-200);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
pointer-events: none;
|
}
|
.mbui-group .mbui-list:first-child:before {display:none}
|
.mbui-list-bd{display: block; color:var(--color-gray-500); width:120px; height: 24px; text-overflow: ellipsis; white-space: nowrap; flex: 1;}
|
.mbui-list-hd{width: 20px; height: 20px; margin-right: 14px; display: block;}
|
.mbui-list-ft{text-align: right; padding-left: 10px;}
|
.mbui-list-ft .mbui-badge{position: relative;top: -1px;}
|
.mbui-list-ft small{font-size: 16px; color: var(--color-gray-400);}
|
.mbui-list-ft-arrow{display: inline-block; width: 10px;height: 10px;margin-right: 2px; vertical-align:middle;
|
border-bottom: solid 2px var(--color-gray-200);
|
border-right: solid 2px var(--color-gray-200);
|
-webkit-transform: rotate(315deg);
|
-ms-transform: rotate(315deg);
|
transform: rotate(315deg);
|
}
|
a.mbui-list:active{background:var(--color-gray-100);}
|
|
/*tabbar*/
|
.tabbar-fixed{width: 100%; max-width: 480px; position: fixed; left: 50%; bottom: 0; z-index: 999;transform: translateX(-50%);}
|
.tabbar{display:flex;position:relative;z-index:500;background-color:var(--color-gray-100);}
|
.tabbar:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid var(--color-gray-100);color:var(--color-gray-100);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}
|
.tabbar-item{display:block;flex:1;padding:3px 0 6px;padding-bottom:calc(6px + constant(safe-area-inset-bottom));padding-bottom:calc(6px + env(safe-area-inset-bottom));font-size:0;color:var(--color-gray-500);text-align:center;-webkit-tap-highlight-color:var(--color-black)}
|
.tabbar-item:first-child{padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left)}
|
.tabbar-item:last-child{padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right)}
|
.tabbar-icon{display:inline-block;width:28px;height:28px;margin-bottom:8px}
|
.tabbar-icon img{width:100%;height:100%}
|
.tabbar-icon>i.iconfont{font-size:24px;color:var(--color-gray-900);}
|
.tabbar-label{color:var(--color-gray-900); font-size:10px; line-height:1.4}
|
.bar-item-on .tabbar-label,.bar-item-on .tabbar-icon>i{color:var(--color-gray-700);}
|
|
/*tab*/
|
.mbui-tab {position: relative;width: 100%; display: block;}
|
.mbui-tab .mbui-tab-title { padding: 0; margin: 0;list-style: none; position: relative; background: var(--color-white);}
|
.mbui-tab .mbui-tab-title:after{content: " ";position: absolute; width: 200%; height: 0;pointer-events: none; transform: scale(0.5); transform-origin: 0 0; border-bottom:1px solid var(--color-gray-300); bottom: 0; left: 0;}
|
.mbui-tab .mbui-tab-title a { display: inline-block;padding: 12px 0; color: var(--color-gray-500); font-size: 16px; text-align: center;}
|
.mbui-tab .mbui-tab-title .active { position: relative; bottom: 0;}
|
.mbui-tab .mbui-tab-title .active a {border-bottom: 2px solid var(--color-gray-900); padding: 12px 0 10px; color: var(--color-gray-900); position: relative; font-weight: 600;}
|
.mbui-tab .mbui-tab-title li { display: table-cell; width: 1%; text-align: center; position: relative;}
|
.mbui-tab .mbui-tab-title li .badge { padding: 0 4px; position: relative; top: -1px; margin-left: 2px;}
|
.mbui-tab .mbui-tab-title li small { color: var(--color-gray-500);}
|
.mbui-tab.tab-fixed {position: fixed !important; right: 0; left: 0; z-index: 10;}
|
.mbui-tab-item{ display: none;}
|
.mbui-tab-item.mbui-tab-show{ display: block;}
|
|
.mbui-new-add{width:44px;height:44px; border-radius:50%; position:fixed;right:10px;bottom:48px; background-color:var(--color-blue-600);}
|
.mbui-new-add a{width:44px;height:44px;color:var(--color-white); font-size:24px;display: flex; justify-content: center;align-items: center;}
|
.mbui-new-add a i{font-size:24px;}
|
|
/*bar*/
|
.mbui-bar {backface-visibility: hidden; background-color: var(--white-shadow); backdrop-filter: blur(8px); width: 100%; display: block; position: relative; z-index: 10;}
|
.mbui-bar.bar-fixed { position: fixed !important; right: 0; left: 0; z-index: 10;}
|
header.mbui-bar.bar-fixed { top: 0;}
|
header.mbui-bar:before {content: " ";transform: scale(0.5); transform-origin: 0 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); top: auto; bottom: -1px;}
|
header.mbui-bar:before,
|
header.mbui-bar:after { content: "";display: table;}
|
header.mbui-bar:after {clear: both;}
|
header.mbui-bar .mbui-bar-title {display: block; font-size: 18px;font-weight: bold; width: 100%; position: absolute; text-align: center; line-height: 46px; margin: 0; padding: 0; white-space: nowrap;}
|
header.mbui-bar .mbui-bar-title a {color: inherit;}
|
header.mbui-bar .mbui-bar-item { padding: 0 12px; font-size: 16px; line-height: 46px; position: relative;z-index: 10;color: var(--color-gray-900);}
|
header.mbui-bar .mbui-bar-item .mbui-bar-arrow-left { display: inline-block; width: 10px; height: 10px; border-bottom: solid 2px var(--color-gray-900); border-right: solid 2px var(--color-gray-900); margin-left: 2px; transform: rotate(135deg);}
|
header.mbui-bar.bar-primary{ border: none; background: var(--color-gray-900); color: var(--color-white);}
|
header.mbui-bar.bar-green { border: none; background: var(--color-green-500); color: var(--color-white);}
|
header.mbui-bar.bar-primary:before,
|
header.mbui-bar.bar-green:before { display: none;}
|
header.mbui-bar.bar-primary .mbui-bar-item,
|
header.mbui-bar.bar-green .mbui-bar-item { color: var(--color-white);}
|
header.mbui-bar.bar-primary .mbui-bar-item .mbui-bar-arrow-left,
|
header.mbui-bar.bar-green .mbui-bar-item .mbui-bar-arrow-left { border-bottom: solid 2px var(--color-white); border-right: solid 2px var(--color-white);}
|
footer.mbui-bar {height: 60px; display: table; position: relative;}
|
footer.mbui-bar.bar-fixed {bottom: 0;}
|
footer.mbui-bar:before { content: " ";transform: scale(0.5); transform-origin: 0 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);}
|
footer.mbui-bar .mbui-bar-item {display: table-cell; text-align: center; vertical-align: middle; height: inherit; font-size: 12px;color:var(--color-gray-500)}
|
footer.mbui-bar .mbui-bar-item .mbui-bar-icon {width: 30px; height: 30px; line-height:24px; display: inline-block; position: relative;}
|
footer.mbui-bar .mbui-bar-item .mbui-bar-icon i{font-size:24px;}
|
footer.mbui-bar.tool-bar .mbui-bar-item .mbui-bar-icon i{font-weight:600;color: var(--color-gray-700);}
|
footer.mbui-bar .mbui-bar-item .mbui-bar-icon .mbui-badge {position: absolute; top: -2px; right: -10px;}
|
footer.mbui-bar .mbui-bar-item .mbui-bar-icon .mbui-badge.mbui-badge-dot { top: 0px; right: -4px;}
|
footer.mbui-bar .mbui-bar-item span { display: block;line-height: 1;}
|
footer.mbui-bar .mbui-bar-item.active {color: var(--color-blue-600);}
|
|
.mbui-badge{ display: inline-block; padding: 2px 5px; z-index: 2; background: var(--color-red-500); font-weight: 400; border-radius: 50%; -webkit-border-radius: 50px; color: var(--color-white) !important; font-size: 12px !important; line-height: 1 !important; text-align: center; white-space: nowrap; font-style: normal;}
|
.mbui-badge-dot{ width: 9px; height: 9px; padding: 0; min-width: 0;}
|
|
/*grid-9*/
|
.mbui-grid{ background: var(--color-white); border-radius:6px;}
|
.mbui-grid .mbui-grid-title{padding:12px 12px 0; color:var(--color-gray-400);font-size:14px;}
|
.mbui-grid-box{padding:8px 0}
|
.mbui-grid .mbui-grid-item {width: 33.3333%; box-sizing: border-box; display: block; text-align: center; float: left; padding: 8px 8px 12px; line-height:1.32; color: var(--color-gray-500);font-size: 14px; position: relative;}
|
.mbui-grid.grid-4 .mbui-grid-item {width: 25%;}
|
.mbui-grid.border .mbui-grid-item:after { content: " "; pointer-events: none; position: absolute; top: 0; left: -1px; width: 200%; height: 200%; border-right: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-grid.border .mbui-grid-item:before { content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-grid .mbui-grid-item .mbui-grid-item-icon {width: 44px; height: 44px; display: block; margin: 8px auto; line-height:44px;}
|
.mbui-grid .mbui-grid-item .mbui-grid-item-icon i{font-size:32px; color:var(--color-blue-500)}
|
.mbui-grid .mbui-grid-item:nth-child(3n):after {border-right: none;}
|
.mbui-grid.border .mbui-grid-item:nth-last-child(-n+3):before {content: " "; position: absolute; top: 0; left: 0; width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid var(--color-gray-100); transform: scale(0.5); transform-origin: 0 0; pointer-events: none;}
|
.mbui-grid .mbui-grid-item .mbui-grid-item-mun {width: 32px; height: 32px; font-size:24px; color:var(--color-blue-600); display: block; margin: 8px auto; line-height:32px;}
|
.mbui-grid.mbui-grid-bg .mbui-grid-item-icon{background-color:var(--color-blue-600); width: 44px; height: 44px; padding:6px; border-radius:6px;}
|
.mbui-grid.mbui-grid-bg .mbui-grid-item-icon i{font-size:26px; color:#f1f1f1}
|
|
/* 用户面板 */
|
.mbui-user-panel{padding:12px; background-color:var(--color-white); display: flex;}
|
.mbui-user-panel .avatar{margin-right:12px;}
|
|
/* 面板 */
|
.mbui-panel{position: relative; border-width: 1px; border-style: solid; border-radius: 2px; background-color: var(--color-white); color: var(--color-gray-500); box-shadow: 0 4px 8px -4px rgba(0,0,0,.13),0 6px 16px 0 rgba(0,0,0,.08),0 12px 24px 16px rgba(0,0,0,.04);}
|
.mbui-table{padding:0; margin:1px; background-color:var(--color-white); border:1px solid var(--color-gray-200);border-collapse: collapse; border-spacing: 0;}
|
.mbui-table th,.mbui-table td{padding:8px 4px; border:1px solid var(--color-gray-200); text-align:center; font-size:14px;}
|
.mbui-table th{background-color:var(--color-gray-50); color:var(--color-gray-500)}
|
|
/*表单*/
|
input, textarea {user-select: auto;}
|
input,button, textarea ,select{border: none; outline: none;
|
-webkit-appearance: none;
|
-webkit-user-select : text;
|
user-select: text;
|
}
|
input[disabled] {background: var(--color-gray-100);}
|
input::placeholder,textarea::placeholder {color: var(--color-gray-300);}
|
label input{vertical-align:middle; margin-right:3px;}
|
:focus {outline: 0;}
|
select{padding:4px 5px;border:1px solid var(--color-gray-300); border-radius:2px; margin-right:3px;}
|
input[type="file"] {display: block;}
|
|
.mbui-input,.mbui-textarea{box-sizing: border-box;}
|
|
.mbui-input, .mbui-textarea,
|
.mbui-form-pane .mbui-form-label,
|
.mbui-form-pane .mbui-form-item[pane]{border-color: var(--color-gray-200); font-size:16px;}
|
.mbui-form-label >i{color:var(--color-orange-600);}
|
|
.mbui-input, .mbui-textarea{height: 44px; line-height: 1.3; border-width: 1px; border-style: solid; background-color: var(--color-white); color: var(--color-black); border-radius: 2px;}
|
.mbui-input::-webkit-input-placeholder,
|
.mbui-textarea::-webkit-input-placeholder{line-height: 1.3; color:var(--color-gray-400);}
|
.mbui-input, .mbui-textarea{display: block; width: 100%; padding-left: 10px;}
|
.mbui-input:focus, .mbui-textarea:focus{border-color: var(--color-blue-600) !important; box-shadow: 0 0 0 3px rgba(22,183,119,0.08);}
|
.mbui-textarea{position: relative; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical;}
|
.mbui-input[disabled], .mbui-textarea[disabled]{background-color: var(--color-gray-100);}
|
|
.mbui-form-item{position: relative; margin-bottom: 15px; clear: both; *zoom: 1;}
|
.mbui-form-item:after{content:'\20'; clear: both; *zoom: 1; display: block; height:0;}
|
.mbui-input-block, .mbui-input-inline{position: relative;}
|
.mbui-input-block{margin-left: 110px; min-height: 36px;}
|
.mbui-input-inline{display: inline-block; vertical-align: middle;}
|
.mbui-form-item .mbui-input-inline{float: left; width: 190px; margin-right: 10px;}
|
.mbui-form-text .mbui-input-inline{width: auto;}
|
|
/*mbui-form-inline*/
|
.mbui-group+.mbui-group{margin-top:var(--3xl);}
|
.mbui-group-title{padding:var(--3xl) var(--xl) var(--md) var(--2xl); font-size: 14px; color: var(--color-gray-400);font-weight: 400;}
|
.mbui-form-line{position: relative;background:var(--color-white);}
|
.mbui-form-line:before {content: " "; position: absolute; top: 0;left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-200);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
pointer-events: none;
|
}
|
.mbui-group .mbui-form-line:first-child:before{display:none}
|
/*input*/
|
.mbui-form-label {width: 122px; padding: 17px 6px 17px 12px; color: var(--color-gray-500); line-height: 1; font-size: 16px; font-weight: 400; margin: 0; position: absolute;letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; display: -webkit-box !important;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 1;}
|
.mbui-form-input { width: 100%; border: 0; outline: 0; font-size: 16px; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance:button; border-radius: 0; color: var(--color-gray-900); padding: 16px 14px 15px 122px; background: var(--color-white);}
|
|
/*radio*/
|
.mbui-form-radio{ width: 100%; border: 0; font-size: 16px; color: var(--color-gray-900); padding: 3px 12px 3px 122px; background: var(--color-white); line-height:44px}
|
.mbui-form-radio .mbui-input-radio{width: 19px; height: 19px; appearance: none; position: relative;}
|
.mbui-form-radio .mbui-input-radio:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 50%; vertical-align: bottom;}
|
.mbui-form-radio .mbui-input-radio:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 50%; vertical-align: bottom;}
|
.mbui-form-radio .mbui-input-radio:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: bottom; transform: rotate(-45deg);}
|
.mbui-form-radio .mbui-input-radio + label{line-height: 19px; display: inline-block; margin-left: 3px; margin-right:16px;}
|
|
/*checkbox*/
|
.mbui-form-checkbox{ width: 100%; border: 0; font-size: 16px; color: var(--color-gray-900); padding: 14px 12px 14px 122px; background: var(--color-white); line-height:1.5}
|
.mbui-form-checkbox .mbui-input-checkbox{width: 19px; height: 19px; appearance: none; position: relative;}
|
.mbui-form-checkbox .mbui-input-checkbox:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 3px; vertical-align: bottom;}
|
.mbui-form-checkbox .mbui-input-checkbox:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 3px; vertical-align: bottom;}
|
.mbui-form-checkbox .mbui-input-checkbox:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: middle; transform: rotate(-45deg);}
|
.mbui-form-checkbox .mbui-input-checkbox + label{line-height: 19px; display: inline-block; margin-left: 3px; margin-right:16px;}
|
|
/*select*/
|
.mbui-form-select{position: static; width: 100%; min-height: 50px;}
|
.mbui-form-select > select {border-radius: 0;border: 0; width: 100%; padding-left: 122px; height: 48px; font-size: 16px; margin: 2px 0; background: var(--color-white); color: var(--color-gray-900);}
|
.mbui-form-select > select > option {padding: 6px; background-color: var(--color-gray-100); color: var(--color-gray-500);}
|
.mbui-form-select:after {content: ""; top: 20px; right: 20px; position: absolute; display: inline-block;font-size: 0; width: 8px; height: 8px; background-color: transparent; border-top: 2px solid var(--color-gray-400); border-left: 2px solid var(--color-gray-400);-webkit-transform: rotate(225deg);}
|
.mbui-form-select .mbui-form-input{padding: 3px 32px 3px 122px; line-height:44px;}
|
|
.mbui-form-select.date-select:after{content: '📅'; font-size: 14px; width: 12px; height: 12px; top:14px; background-color: transparent; border:none;-webkit-transform: rotate(0);}
|
.mbui-form-select.admin-select:after{content: '👤'; font-size: 14px; width: 12px; height: 12px; top:14px; background-color: transparent; border:none;-webkit-transform: rotate(0);}
|
|
/*uploader*/
|
.mbui-form-uploader {width: 100%;border: 0;outline: 0;font-size: 16px; box-shadow: none; appearance: none;border-radius: 0; color: var(--color-gray-900); padding: 5px 14px 5px 122px; background: var(--color-white);
|
-webkit-appearance: none;
|
-moz-appearance:button;
|
}
|
.mbui-form-uploader .mbui-uploader-btn-border { width: 100%; height: 42px; background: var(--color-white); border-radius: 0;display: block; text-align:right; position: relative;color:var(--color-gray-500);line-height:42px;}
|
.mbui-form-uploader .mbui-uploader-btn-border i{font-size:20px; font-weight:600}
|
.mbui-form-uploader input { opacity: 0; position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
|
|
.mbui-form-phone .mbui-form-input{padding: 16px 120px;}
|
.mbui-input-cell {float: none; width: 100%; padding: 14px 20px; position: static;}
|
.mbui-input-cell small {color: var(--color-gray-400);}
|
.mbui-form-static {font-size: 16px;width: 100%; padding: 14px 20px 14px 122px; margin-bottom: 0;}
|
|
/*list-radio*/
|
.mbui-radio-checkbox{position: relative; background:var(--color-white); width: 100%; font-size: 16px; color: var(--color-gray-900); padding:15px 14px;}
|
.mbui-radio-checkbox:before {content: " ";pointer-events: none;position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-group .mbui-radio-checkbox:last-child:after {content: " ";pointer-events: none;position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-bottom: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-radio-checkbox label{width: 100%; position:relative; line-height:1.36; display:flex;justify-content:space-between;}
|
|
.mbui-radio-checkbox .mbui-radio{width: 21px; height: 21px; appearance: none; position: relative;}
|
.mbui-radio-checkbox .mbui-radio:before{content: ''; width: 21px; height: 21px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 50%; vertical-align: middle;}
|
.mbui-radio-checkbox .mbui-radio:checked:before{border: 1px solid var(--color-blue-600); background:var(--color-blue-600); }
|
.mbui-radio-checkbox .mbui-radio:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 7px; left:5px; vertical-align: bottom; transform: rotate(-45deg);}
|
|
.mbui-radio-checkbox .mbui-checkbox{width: 21px; height: 21px; appearance: none; position: relative;}
|
.mbui-radio-checkbox .mbui-checkbox:before{content: ''; width: 21px; height: 21px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 3px; vertical-align: middle;}
|
.mbui-radio-checkbox .mbui-checkbox:checked:before{border: 1px solid var(--color-blue-600); background:var(--color-blue-600);}
|
.mbui-radio-checkbox .mbui-checkbox:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 7px; left:5px; vertical-align: middle; transform: rotate(-45deg);}
|
|
/*switch*/
|
.mbui-switch {
|
padding: 14px 20px;
|
}
|
.mbui-switch .mbui-switch-text {
|
padding: 4px 0;
|
margin: 0;
|
font-size: 16px;
|
text-indent: 0 !important;
|
}
|
.mbui-switch .mbui-switch-text small {
|
color: var(--color-gray-400);
|
}
|
.mbui-switch > input[type="checkbox"] {
|
display: none;
|
}
|
.mbui-switch > label {
|
margin-bottom: 0;
|
}
|
.mbui-switch .mbui-switch_radius {
|
position: relative;
|
display: inline-block;
|
color: var(--color-gray-200);
|
width: 50px;
|
height: 32px;
|
background: var(--color-gray-200);
|
border-radius: 100px;
|
cursor: pointer;
|
transition: all 0.4s cubic-bezier(0.17, 0.67, 0.43, 0.98);
|
-webkit-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.43, 0.98);
|
float: right;
|
}
|
.mbui-switch .mbui-switch_radius:active {
|
box-shadow: inset 0 0 0 1.2em var(--color-gray-300);
|
-webkit-box-shadow: inset 0 0 0 1.2em var(--color-gray-300);
|
}
|
.mbui-switch .mbui-switch_radius:before {
|
width: 30px;
|
height: 30px;
|
border-radius: 100px;
|
transition: margin-left 0.2s ease 0s;
|
-webkit-transition: margin-left 0.2s ease 0s;
|
margin: 1px;
|
background: var(--color-white);
|
box-shadow: inset 0 0 0 0.03em rgba(0, 0, 0, 0.1), 0 0 0.05em rgba(0, 0, 0, 0.05), 0 0.1em 0.2em rgba(0, 0, 0, 0.2);
|
-webkit-box-shadow: inset 0 0 0 0.03em rgba(0, 0, 0, 0.1), 0 0 0.05em rgba(0, 0, 0, 0.05), 0 0.1em 0.2em rgba(0, 0, 0, 0.2);
|
}
|
.mbui-switch .mbui-switch_radius:before,
|
.mbui-switch .mbui-switch_radius:after {
|
position: absolute;
|
content: "";
|
}
|
.mbui-switch > input:checked + label {
|
background: var(--color-gray-900);
|
transition: all 0.15s ease-out;
|
-webkit-transition: all 0.15s ease-out;
|
box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
|
-webkit-box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
|
}
|
.mbui-switch > input:checked + label:active {
|
box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
|
-webkit-box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
|
}
|
.mbui-switch > input:checked + label:before {
|
margin-left: 19px;
|
}
|
|
.mbui-checkbox_hd,
|
.mbui-radio_hd {
|
display: block;
|
margin-right: 14px;
|
line-height: 0;
|
}
|
.mbui-checkbox_bd,
|
.mbui-radio_bd {
|
width: 100%;
|
font-size: 16px;
|
display: block;
|
position: relative;
|
-webkit-box-flex: 1;
|
-webkit-flex: 1;
|
flex: 1;
|
}
|
.mbui-checkbox_bd small,
|
.mbui-radio_bd small {
|
color: var(--color-gray-400);
|
}
|
.mbui-radio .btn .mbui-radio_ft,
|
.mbui-checkbox .btn .mbui-checkbox_ft {width: 22px; height: 22px;display: inline-block;}
|
.mbui-checkbox .btn .mbui-checkbox_ft:after,
|
.mbui-checkbox .btn .mbui-checkbox_ft:before {
|
position: absolute;
|
display: block;
|
content: "";
|
height: 1px;
|
}
|
.mbui-radio .btn .mbui-radio_ft:after,
|
.mbui-radio .btn .mbui-radio_ft:before {
|
position: absolute;
|
display: block;
|
content: "";
|
height: 2px;
|
}
|
.mbui-radio .btn.active .mbui-radio_ft:after {margin-top: 19px; margin-left: -2px; width: 18px; background: var(--color-blue-600);
|
-webkit-transform: rotate(-45deg) translate3d(10px, 0, 0);
|
-moz-transform: rotate(-45deg) translate3d(10px, 0, 0);
|
transform: rotate(-45deg) translate3d(10px, 0, 0);
|
|
}
|
.mbui-radio .btn.active .mbui-radio_ft:before { margin-top: 4px;margin-left: -2px; width: 8px; background: var(--color-blue-600);
|
-webkit-transform: rotate(45deg) translate3d(10px, 5px, 0);
|
-moz-transform: rotate(45deg) translate3d(10px, 5px, 0);
|
transform: rotate(45deg) translate3d(10px, 5px, 0);
|
}
|
.mbui-checkbox .btn .mbui-checkbox_ft {
|
border-radius: 100%;
|
-webkit-border-radius: 100%;
|
background: var(--color-white);
|
border: 1px solid var(--color-gray-300);
|
}
|
.mbui-checkbox .btn.active .mbui-checkbox_ft {background: var(--color-blue-600); border-color: var(--color-blue-600);}
|
.mbui-checkbox .btn.active .mbui-checkbox_ft:after {
|
-webkit-transform: rotate(-45deg) translate3d(10px, 0, 0);
|
-moz-transform: rotate(-45deg) translate3d(10px, 0, 0);
|
transform: rotate(-45deg) translate3d(10px, 0, 0);
|
margin-top: 17px;
|
margin-left: -1px;
|
width: 10px;
|
background: var(--color-white);
|
}
|
.mbui-checkbox .btn.active .mbui-checkbox_ft:before {
|
-webkit-transform: rotate(45deg) translate3d(11px, 4px, 0);
|
-moz-transform: rotate(45deg) translate3d(11px, 4px, 0);
|
transform: rotate(45deg) translate3d(11px, 4px, 0);
|
margin-top: 1px;
|
margin-left: -1px;
|
width: 5px;
|
background: var(--color-white);
|
}
|
[data-toggle="buttons"] > .btn input[type="radio"],
|
[data-toggle="buttons"] > .btn input[type="checkbox"] {
|
clip: rect(0, 0, 0, 0);
|
pointer-events: none;
|
position: absolute;
|
width: auto;
|
height: 100%;
|
}
|
.mbui-uploader {
|
background: var(--color-white);
|
position: relative;
|
padding: 0 20px;
|
}
|
.mbui-uploader:before {
|
content: " ";
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
pointer-events: none;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 200%;
|
height: 0;
|
border-top: 1px solid var(--color-gray-100);
|
}
|
.mbui-uploader:after {
|
content: " ";
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
pointer-events: none;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 200%;
|
bottom: 0;
|
height: 200%;
|
border-bottom: 1px solid var(--color-gray-100);
|
}
|
.mbui-uploader_title {
|
padding: 20px 0;
|
line-height: 1.1333;
|
font-size: 16px;
|
font-weight: 400;
|
margin: 0;
|
color: var(--color-gray-900);
|
}
|
.mbui-uploader_files {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
}
|
.mbui-uploader_files .mbui-uploader_files_item {
|
width: 90px;
|
height: 90px;
|
float: left;
|
margin-right: 10px;
|
margin-bottom: 20px;
|
}
|
|
.mbui-uploader_files .mbui-uploader_files_item a,
|
.mbui-uploader_files .mbui-uploader_files_item img {
|
display: block;
|
}
|
.mbui-uploader_btn {
|
float: left;
|
position: relative;
|
width: 90px;
|
height: 90px;
|
margin-bottom: 20px;
|
}
|
.mbui-uploader_btn .mbui-uploader_btn_border {
|
float: left;
|
width: 100%;
|
height: 100%;
|
background: var(--color-white);
|
border: 1px dashed var(--color-gray-300);
|
border-radius: 6px;
|
display: block;
|
position: relative;
|
text-align: center;
|
}
|
.mbui-uploader_btn .mbui-uploader_btn_border:before,
|
.mbui-uploader_btn .mbui-uploader_btn_border:after {
|
content: " ";
|
position: absolute;
|
background: var(--color-gray-300);
|
display: block;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
}
|
.mbui-uploader_btn .mbui-uploader_btn_border:after {
|
width: 2px;
|
height: 26px;
|
}
|
.mbui-uploader_btn .mbui-uploader_btn_border:before {
|
width: 26px;
|
height: 2px;
|
}
|
.mbui-uploader_btn input {
|
opacity: 0;
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
width: 100%;
|
height: 100%;
|
}
|
|
/*steps*/
|
.mbui-steps .mbui-steps-item { position: relative; padding-left: 25px; padding-bottom: 12px; font-size: 14px; color: var(--color-gray-600); font-weight: 600;}
|
.mbui-steps .mbui-steps-item small {padding-top:2px; display: block; font-size: 14px;color: var(--color-gray-400); font-weight: 400;}
|
.mbui-steps .mbui-steps-item:last-child:after {display: none;}
|
.mbui-steps .mbui-steps-item:before {position: absolute; content: " ";top: 5px; left: 3px; display: block; width: 13px; height: 13px; background: var(--color-gray-300); border-radius: 50%; z-index: 2;}
|
.mbui-steps .mbui-steps-item:after {position: absolute; content: " "; top: 5px; left: 9px; display: block; width: 1px; height: 100%; background: var(--color-gray-300);}
|
.mbui-steps .mbui-steps-item.success {color: var(--color-gray-900);}
|
.mbui-steps .mbui-steps-item.success:after,
|
.mbui-steps .mbui-steps-item.success:before {background: var(--color-gray-900);}
|
.mbui-steps .mbui-steps-item.active {color: var(--color-gray-900);font-weight: 600;}
|
.mbui-steps .mbui-steps-item.active small {font-weight: 400;}
|
.mbui-steps .mbui-steps-item.success:before,
|
.mbui-steps .mbui-steps-item.active:before {top: 3px; left: 6px; width: 12px;height: 12px;background: var(--color-gray-900);border: 4px solid var(--color-white);}
|
|
/*layer - modal*/
|
.mbui-layer {position: relative; z-index: 888;}
|
.mbui-layer *{box-sizing: border-box;}
|
.mbui-layershade {background-color:var(--black-shadow);pointer-events: auto;}
|
.mbui-layermain,.mbui-layershade { position: fixed; left: 0;top: 0; width: 100%; height: 100%;}
|
.mbui-layermain{display: table;}
|
|
.mbui-layer .modal-dialog { width: 100%; margin: 0;padding: 0; display: table-cell; vertical-align: middle; text-align: center;}
|
.mbui-layer .modal-content {position: relative; background-clip: padding-box; background: var(--color-white); border-radius: 12px; max-width: 320px; margin-left: auto; margin-right: auto;animation: bounce-in 300ms 0ms ease both;}
|
@-webkit-keyframes bounce-in {
|
0% {
|
opacity: 0;
|
-webkit-transform: scale(0.5);
|
}
|
100% {
|
opacity: 1;
|
-webkit-transform: scale(1);
|
}
|
}
|
|
.mbui-layer .modal-header {padding:12px 16px; font-size: 18px; text-align: center;font-weight: 600;}
|
.mbui-layer .modal-body { position: relative; padding: 0 16px 16px; font-size: 16px; color: var(--color-gray-500);text-align: center;}
|
.mbui-layer .modal-footer {padding: 0; position: relative;}
|
|
.mbui-layer .modal-content .btn-default {background-color: var(--color-white);}
|
.mbui-layer .modal-content .btn-lg {font-size: 17px; padding: 12px 16px; border-radius: 0; border: none;}
|
.mbui-layer .modal-content .btn-lg:before {display: none;}
|
|
.mbui-layer .modal-footer:before {content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-layer .modal-footer .btn { margin: 0; border: none; background: none; padding: 14px; width: 50%; text-align: center; float: left; color: var(--color-gray-900); font-size: 16px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; position: relative; box-sizing: border-box;}
|
.mbui-layer .modal-footer .btn:before {display: none;}
|
.mbui-layer .modal-footer .btn.active { color: var(--color-gray-900); font-weight: 600;}
|
.mbui-layer .modal-footer .btn:active { background: rgba(0, 0, 0, 0.05);}
|
.mbui-layer .modal-footer .btn + .btn { margin-left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 4px; border-top-left-radius: 0;border-top-right-radius: 0;}
|
.mbui-layer .modal-footer .btn + .btn:after { content: " ";pointer-events: none; position: absolute;top: 0; left: 0; width: 200%; height: 200%;border-left: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-layer .modal-footer .btn-block { width: 100%; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
|
.mbui-layer .mbui-form-input { height: 40px; padding: 10px;}
|
.form-hairlines {position: relative;}
|
.form-hairlines:before {content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid var(--color-gray-300); border-radius: 8px;
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
-webkit-border-radius: 8px;
|
}
|
.form-hairlines input,.form-hairlines textarea { border: none; border-radius: 3px;}
|
|
.mbui-layer .modal-content.modal-actionsheet{max-width: 100%;width: 100%;position: fixed; margin: 0;left: 0; bottom: 0;background:#EDEDED;}
|
.mbui-layer .modal-long .modal-body {padding: 0 16px; max-height: 320px; overflow-y: auto; text-align: left;}
|
|
.mbui-layer .modal-content.modal-actionsheet.bottom{
|
-webkit-animation: fade-in-up 300ms 0ms ease-in-out both;
|
animation: fade-in-up 300ms 0ms ease-in-out both;
|
}
|
@-webkit-keyframes fade-in-up {
|
0% {
|
-webkit-transform: translateY(200px);
|
transform: translateY(200px);
|
}
|
100% {
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
}
|
.mbui-layer .modal-actionsheet .modal-body{padding:0;width:100%; text-align: left;}
|
.mbui-layer .modal-actionsheet .modal-body .actionsheet-btn {width: 100%; background: var(--color-white); position: relative; border-radius: 0; padding: 14px 20px; max-width: 100%; display: inline-block; font-size: 16px; font-weight: 600; margin-bottom: 0; line-height: 1.42857143; border: 0; text-align: center; white-space: nowrap; vertical-align: middle;touch-action: manipulation; cursor: pointer;
|
-webkit-user-select: none;
|
user-select: none;
|
background-image: none;
|
-webkit-appearance: none;
|
}
|
.mbui-layer .modal-actionsheet .modal-body .actionsheet-btn:after {content: " "; position: absolute; top: 0; left: 0;width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
pointer-events: none;
|
}
|
.mbui-layer .modal-actionsheet .modal-body .actionsheet-btn:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px;}
|
.mbui-layer .modal-actionsheet .modal-footer { margin-top: 10px;}
|
.mbui-layer .modal-actionsheet .modal-footer .btn { background: var(--color-white); border-radius: 0; padding: 14px 16px; max-width: 100%;}
|
|
.mbui-layer .modal-content.modal-view{max-width: 100%;width: 100%;position: fixed; margin: 0;left: 0; top: 0;border-radius: 0 0 12px 12px;}
|
.mbui-layer .modal-content.modal-view.top{
|
-webkit-animation: fade-in-down 300ms 0ms ease-in-out both;
|
animation: fade-in-down 300ms 0ms ease-in-out both;
|
}
|
.mbui-layer .modal-view .modal-body{padding:0;width:100%; text-align: left;}
|
|
/*layer - toast*/
|
.mbui-toptips {font-size: 14px; width: 100%;z-index: 18888; padding: 10px;
|
-webkit-animation: fade-in-down 500ms 0ms ease both;
|
animation: fade-in-down 500ms 0ms ease both;
|
display: -webkit-box;
|
display: -webkit-flex;
|
display: flex;
|
-webkit-box-align: center;
|
-webkit-align-items: center;
|
align-items: center;
|
}
|
@-webkit-keyframes fade-in-down {
|
0% {
|
-webkit-transform: translateY(-40px);
|
}
|
100% {
|
-webkit-transform: translateY(0);
|
}
|
}
|
.mbui-toptips:before {content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
|
}
|
.mbui-toptips i {width: 16px; height: 16px; min-width: 16px; display: inline-block; margin-right: 7px;overflow: hidden;
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABsCAMAAAAbkME5AAAA5FBMVEUAAAD/llrtUVXmoSbtUVbmoCbtUVXmoSbmoSXloSbtUFXmoSbuUVXmoSb/WVn/sjvmoSbooifvUlbyUljnpSbvU1bloSbtUVXtUFXmoCbmoCbtUVXtUVbmoSbtUVbnoiXlpCfwX1/wrS/tUVXsUVXsUFXtUFbmoSXsUFXloSXmoCXsUFbuUlXnoSbtUFbmoCXuUlbmoibsUFXloSbuUVbnoibsUVfnoCbuUVfooibwU1jmoiftUlvtpC71UlzroynsUFbsUlbtUFbuUVXloyntUFXloSbtUFXmoCbmoCXsUFXloCUgjMVLAAAASnRSTlMAA/r6xMS4rvblyMhkZAgIeUw7KChN7ezNzbeuoKBSUjsQEOT29fHx29u6r5OTj4+Ghmxsa2teXlhYNDQcHBkZ5Xp4RkWoqJmZPuxJ55cAAANkSURBVFjD7VbXcuowEJUhMZCAMb33hBZ6TSgJkG79///cXXsmLpKCPMzcp5w3r/bsaqtMGGiZkdrNBQK5rjrKaOQMGqvSveHAfWnVIGJop7bBoH0SuVGiB0slX57MqtXZpJy3vltRhaf/fIOHAXWxs2W7hRpA6c0zq79p4clDyitPPZhONl754x0aShIOkuj67tGjj2YGiiC4AZ66GBuwH4gSIaIB8LFxxHsA/VfyC16B0fqJXMFLuu1nVDXj9oEhKo6PgVvfALhdDmyj2sEkO1FCQsklwmscrJof4dCTzyskXHmyC6Kj2W9tqBc5TyBQwTZ24goylJIhpCBTK+u+KpEhENWMS4P+X8gRFjAfmpnBnRxhB8IMGUH/EzkCgfkY4cXKsoQyhts1jIksYWIYXZIzjJksYWYYOQLJrcoSqlAy3wTfV+IH/Y6Ed27Q/LQmkZDkppVXOGSUy0nCLZzdGiy4rWE3Hwtu87HtLQa2t2CASOp0Qhk7QIIRrcJZoMobUf4SUHIGIKcwqT4J1kzKMJHyrpmWJlhkDYvQYBaZcFV+ov4nuyqFy1g55vNHhVnG/te9/wfF/5Ml/yj6fnYvf9gR2pH363DULvo5Ofv784c//D/EE+NiLxsMZnvFcSJ+Tru5DoWpA+HQuvmbcb1DGXR0kRslFrFUCpXpvFabTysF6zsS447oyy0eBvvLvS3bL/tBlN6+sPpb03wo7ZWnQ6aTrVf+FEZDdcJBHV2Hnzz6FDAUrcohnroYW7AfjBEhYkHwsXXEGwH9N/IL3oAR+YlcwUu67SeKxYTbB4aoOD6Gbn0KcDOGttF4xCQ7ETJT7BLhNSJWzXU49OTzGgnXnuyCSDf7rYPGzhPQbQc7cQ0ZSssQ0pCptUXsExkC6ZtXiUPNlnKEJVQvbmZwL0fYm7keQ/8TOQKB+RiTIqUVWUKF0iLpUTqVJUwp7ZEspXNZwpzSLIHk1mQJNSiZb4LvK/GD/kDCBzdoflq/kfDNTSu/cKReqdQJt3B2a7DgtobdfCy4zce2txjY3oIBImldRxk7QIIRrcFZsMYbUf4SULIUkFXYJSBYM2lqIs2uGcEia1qEJrPIhKvyC/W/2FUpXMaKXijoCrOM/a97/w+K/ydL/lG89NmVf9jlfx3kf04u/P35BwHDLihDV8YIAAAAAElFTkSuQmCC") no-repeat;
|
background-size: 16px;
|
}
|
.mbui-toptips i.mbui-toptips-error-icon {background-position: 0 0;}
|
.mbui-toptips i.mbui-toptips-warning-icon {background-position: 0 -20px;}
|
.mbui-toptips.mbui-toptips-warning { background: var(--color-yellow-100); color: var(--color-yellow-600);}
|
.mbui-toptips.mbui-toptips-warning > a {color: var(--color-yellow-600);}
|
.mbui-toptips.mbui-toptips-error { background: var(--color-red-100); color: var(--color-red-600);}
|
.mbui-toptips.mbui-toptips-error > a { color: var(--color-red-600);}
|
.mbui-toptips.fixed{position: fixed !important;right: 0; left: 0; top: 0;z-index: 10;}
|
.mbui-toast{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 888; overflow: hidden; outline: 0; text-align: center; background-color:var(--black-shadow));
|
-webkit-overflow-scrolling: touch;
|
}
|
.mbui-toast-dialog { width: 100%; height: 100%;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: -webkit-flex;
|
display: flex;
|
-webkit-box-pack: center;
|
-webkit-justify-content: center;
|
justify-content: center;
|
-webkit-box-align: center;
|
-webkit-align-items: center;
|
align-items: center;
|
-webkit-animation: fade-in-up 100ms 0ms ease-in-out both;
|
animation: fade-in-up 100ms 0ms ease-in-out both;
|
}
|
.mbui-toast-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040;}
|
.mbui-toast-content { position: relative; min-width: 126px; display: inline-block; background: var(--black-shadow); text-align: center; border-radius: 6px; margin-top:-20%; color: var(--color-white); font-size: 16px;}
|
.mbui-toast-content > span {padding:12px 16px;display: block;}
|
.mbui-toast-success .mbui-toast-content {min-height: 120px;}
|
.mbui-toast-success .mbui-toast-content .mbui-toast-success-icon {width: 44px; height: 44px; display: block; margin: 6px auto 10px;
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAnFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+TINBkAAAAM3RSTlMA/PL47DQCCINDKgTalRXjil5wTx7VeA7f0MS2s6Q6JBIM5smvwVdqP7uckWJLMBoZzHzNBA+9AAADrElEQVR42u3ciXLaMBSF4eMdsFlCIOw7JGRrSM/7v1vbDJ0GZNkhN+RqpnxPoIll/bIcg4uLi//H82gLhyzqpD+HM6YZf7uBI9KKxz8yuKE24F4EB8TtgH9VoK+z4T9rqLvy+c4YyhYTHniErijjgU0CVe2AB1YLaJqPeWgwh6Ztk4e6DSiKf3o8lO2g6GXDI/0OFFWXPLKcQdGNxyNhDXp6ax4Lf0BPLeMxP4KeW98czxRq0kcavGeo2Q1peoKaaEnTT6i5CmiqQ0vcYo51DCW9EXMMEyiZdZmjO4eSasgczQ6U3L3Fy5mAxXXmCbbQsRgz1y107F6Z6wY6an3mmkBH1SddWoCeAubqN6Ciwnx+DRrSB/7hzA4oGdOiDQ3zIS0eoOGlS4v7FApmfVpkcyiIQlr4Myio+rS5hoLrgDYVKLj1aDOK8f2e7OPpa0zoO1oFGmcKN7S7goA0p448E7ZoN1RYoYvGs9yhzLeOx5tCQDQeZ/b0heMZ4TN622lynvEsG/iEO59sPsvvd5NXxenSunGxBeuhPKm9e+5NEpyszSKbWHZ+s9pJ+mUKX3CybXgwBSOc5IqFnuXHkcEtTnDtsUgLJ2uJpmE1YJFVihMt1syxXuBjIp8G0ab+5ZW5Bh18RC1koTucKH6lRThFuU6ThcY4VUSr4All5hkLhQ3JgEyPMQolQxqkT2HxqjDScxSI1yz2AIN0FmQz2NVZrL+AQXyfhNXioJ66SZSvJF4b+W5ZogIL6Vr7kCLHNGCxQQoLcY02DRhmIYt5P2Aj73W/hiO9ruCCyXdY9I8WlHjEEt1E/Axc7MayPxDeYYJFZZIYV7hAC3ITFlu9YC8KWCJLIJeOacrb2Tb6LLPFV0g2NJk72/ieZer4Gr0BS7QSJBOWaS7wRRoZS4Qrn6WuIWCkX24NCTP9Un4HImb6hdoQMtMvMoghZaZfwIvw5a4oUMcZtPlpyx4szpl+hcP6Oj9niHOZODOj99IRS8kfDOXpFzzJnzf98qMXefrLdVNYKKW/Cgul9I9hoZR+r4azM9Ov/wLzw+n3Gzg3M/1uvKD7WPqbCc7OTL8rr+TrLNWN8Y3iCfdc+Sec0vSv8M2SoUI0BOm/h8A50h9BSp5+B74Ftaf/B8Tk6Xfi691q4NQf6C397swge/qn0NR2Yg16r6K/SBen/xXa4okTX4vY0t+Poe99+ttwwb/0+ws4oZE58osGx+kPZnBF7W1EP+GOxmN39YSLi4uLiwt9vwAkwFFwKPIJrgAAAABJRU5ErkJggg==") no-repeat;
|
background-size: 44px;
|
}
|
.mbui-toast-loading .mbui-toast-content {min-height: 126px;}
|
.mbui-toast-loading_icon {position: relative; width: 44px; height: 44px; display: block; margin: 4px auto 16px;}
|
.loading-icon-leaf {position: absolute; opacity: 0.25; left: 21px; top: 21px;}
|
.loading-icon-leaf:before {content: " "; position: absolute; width: 8.14px; height: 3.08px; background: var(--color-gray-300); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; border-radius: 1px; transform-origin: left 50% 0px;}
|
.loading-icon-leaf_0 {
|
-webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
|
animation: opacity-60-25-0-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_0:before {
|
-webkit-transform: rotate(0deg) translate(7.92px, 0px);
|
transform: rotate(0deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_1 {
|
-webkit-animation: opacity-60-25-1-12 1.25s linear infinite;
|
animation: opacity-60-25-1-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_1:before {
|
-webkit-transform: rotate(30deg) translate(7.92px, 0px);
|
transform: rotate(30deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_2 {
|
-webkit-animation: opacity-60-25-2-12 1.25s linear infinite;
|
animation: opacity-60-25-2-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_2:before {
|
-webkit-transform: rotate(60deg) translate(7.92px, 0px);
|
transform: rotate(60deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_3 {
|
-webkit-animation: opacity-60-25-3-12 1.25s linear infinite;
|
animation: opacity-60-25-3-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_3:before {
|
-webkit-transform: rotate(90deg) translate(7.92px, 0px);
|
transform: rotate(90deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_4 {
|
-webkit-animation: opacity-60-25-4-12 1.25s linear infinite;
|
animation: opacity-60-25-4-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_4:before {
|
-webkit-transform: rotate(120deg) translate(7.92px, 0px);
|
transform: rotate(120deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_5 {
|
-webkit-animation: opacity-60-25-5-12 1.25s linear infinite;
|
animation: opacity-60-25-5-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_5:before {
|
-webkit-transform: rotate(150deg) translate(7.92px, 0px);
|
transform: rotate(150deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_6 {
|
-webkit-animation: opacity-60-25-6-12 1.25s linear infinite;
|
animation: opacity-60-25-6-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_6:before {
|
-webkit-transform: rotate(180deg) translate(7.92px, 0px);
|
transform: rotate(180deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_7 {
|
-webkit-animation: opacity-60-25-7-12 1.25s linear infinite;
|
animation: opacity-60-25-7-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_7:before {
|
-webkit-transform: rotate(210deg) translate(7.92px, 0px);
|
transform: rotate(210deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_8 {
|
-webkit-animation: opacity-60-25-8-12 1.25s linear infinite;
|
animation: opacity-60-25-8-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_8:before {
|
-webkit-transform: rotate(240deg) translate(7.92px, 0px);
|
transform: rotate(240deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_9 {
|
-webkit-animation: opacity-60-25-9-12 1.25s linear infinite;
|
animation: opacity-60-25-9-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_9:before {
|
-webkit-transform: rotate(270deg) translate(7.92px, 0px);
|
transform: rotate(270deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_10 {
|
-webkit-animation: opacity-60-25-10-12 1.25s linear infinite;
|
animation: opacity-60-25-10-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_10:before {
|
-webkit-transform: rotate(300deg) translate(7.92px, 0px);
|
transform: rotate(300deg) translate(7.92px, 0px);
|
}
|
.loading-icon-leaf_11 {
|
-webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
|
animation: opacity-60-25-11-12 1.25s linear infinite;
|
}
|
.loading-icon-leaf_11:before {
|
-webkit-transform: rotate(330deg) translate(7.92px, 0px);
|
transform: rotate(330deg) translate(7.92px, 0px);
|
}
|
@-webkit-keyframes opacity-60-25-0-12 {
|
0% {
|
opacity: 0.25;
|
}
|
0.01% {
|
opacity: 0.25;
|
}
|
0.02% {
|
opacity: 1;
|
}
|
60.01% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.25;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-1-12 {
|
0% {
|
opacity: 0.25;
|
}
|
8.34333% {
|
opacity: 0.25;
|
}
|
8.35333% {
|
opacity: 1;
|
}
|
68.3433% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.25;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-2-12 {
|
0% {
|
opacity: 0.25;
|
}
|
16.6767% {
|
opacity: 0.25;
|
}
|
16.6867% {
|
opacity: 1;
|
}
|
76.6767% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.25;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-3-12 {
|
0% {
|
opacity: 0.25;
|
}
|
25.01% {
|
opacity: 0.25;
|
}
|
25.02% {
|
opacity: 1;
|
}
|
85.01% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.25;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-4-12 {
|
0% {
|
opacity: 0.25;
|
}
|
33.3433% {
|
opacity: 0.25;
|
}
|
33.3533% {
|
opacity: 1;
|
}
|
93.3433% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.25;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-5-12 {
|
0% {
|
opacity: 0.270958333333333;
|
}
|
41.6767% {
|
opacity: 0.25;
|
}
|
41.6867% {
|
opacity: 1;
|
}
|
1.67667% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.270958333333333;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-6-12 {
|
0% {
|
opacity: 0.375125;
|
}
|
50.01% {
|
opacity: 0.25;
|
}
|
50.02% {
|
opacity: 1;
|
}
|
10.01% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.375125;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-7-12 {
|
0% {
|
opacity: 0.479291666666667;
|
}
|
58.3433% {
|
opacity: 0.25;
|
}
|
58.3533% {
|
opacity: 1;
|
}
|
18.3433% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.479291666666667;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-8-12 {
|
0% {
|
opacity: 0.583458333333333;
|
}
|
66.6767% {
|
opacity: 0.25;
|
}
|
66.6867% {
|
opacity: 1;
|
}
|
26.6767% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.583458333333333;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-9-12 {
|
0% {
|
opacity: 0.687625;
|
}
|
75.01% {
|
opacity: 0.25;
|
}
|
75.02% {
|
opacity: 1;
|
}
|
35.01% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.687625;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-10-12 {
|
0% {
|
opacity: 0.791791666666667;
|
}
|
83.3433% {
|
opacity: 0.25;
|
}
|
83.3533% {
|
opacity: 1;
|
}
|
43.3433% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.791791666666667;
|
}
|
}
|
@-webkit-keyframes opacity-60-25-11-12 {
|
0% {
|
opacity: 0.895958333333333;
|
}
|
91.6767% {
|
opacity: 0.25;
|
}
|
91.6867% {
|
opacity: 1;
|
}
|
51.6767% {
|
opacity: 0.25;
|
}
|
100% {
|
opacity: 0.895958333333333;
|
}
|
}
|
/*layer-photo*/
|
.layer-image-photo {display: none; position: fixed;top: 0;left: 0; width: 100%; height: 100%; background-color: var(--black-shadow);z-index: 9999; display: flex;align-items: center; justify-content: center;}
|
.layer-image-photo img { max-width: 96%; max-height: 96%; margin-top:-2%;display: block;}
|
|
/*flex-panel*/
|
.mbui-flex-panel{display:flex;flex:1;align-items:flex-start;font-size:0}
|
.mbui-flex-avatar{margin-right:12px}
|
.mbui-flex-avatar-img{width: 72px; height:72px;}
|
.mbui-flex-avatar-img img{width: 100%; height:100%; border-radius: 4px;}
|
.mbui-flex-content{color: var(--color-gray-900);}
|
.mbui-flex-title{font-weight:600;font-size:16px;}
|
.mbui-flex-description{font-size:14px; line-height:1.5}
|
.mbui-section-title{padding:12px; position: relative; line-height:1.36; font-size:14px; display: flex;align-items: center; justify-content:space-between}
|
/*文件上传*/
|
.mbui-file-list .mbui-file-div{display: flex;align-items: center; padding: 6px 32px 6px 6px; background-color:var(--color-gray-100);border-radius:4px;line-height:1.8;position:relative;margin-bottom:12px;}
|
.mbui-file-div .mbui-file-icon{width:45px;height:45px; line-height:45px; margin-right:8px; overflow:hidden}
|
.mbui-file-div .mbui-file-icon.file-img{width:80px;}
|
.mbui-file-div .mbui-file-icon img{width:100%;height:100%;border-radius:3px;object-fit: cover;}
|
.mbui-file-div .mbui-file-icon i{font-size:40px;}
|
.mbui-file-div .mbui-file-name {font-size:15px;}
|
.mbui-file-div .mbui-file-size {font-size: 12px;color: var(--color-gray-400);}
|
.mbui-file-div .mbui-file-del{ width: 30px; height: 30px;position:absolute;top:16px; right:2px; font-size:20px;line-height:28px; text-align:center; color:var(--color-gray-500);}
|
|
/*人员选择*/
|
.mbui-picker-selector {background-color:var(--color-white);width:100%;height:100vh;position:fixed;top:0;left:0;z-index:999;}
|
.mbui-picker-selector .mbui-bar:before { content: " ";pointer-events: none; position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
.mbui-picker-item{margin: 0;padding: 12px; color: var(--color-gray-900); text-align: left; background: var(--color-white); position: relative;
|
display: -webkit-box;
|
display: -webkit-flex;
|
display: flex;
|
-webkit-box-align: center;
|
-webkit-align-items: center;
|
align-items: center;
|
}
|
.mbui-picker-item:before{ content: " ";pointer-events: none; position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
|
.mbui-picker-selector .letters {display: flex; flex-direction: column; align-items: center; position: fixed; top: 50%; right: 0; z-index:999; width:36px; text-align:center; transform: translateY(-50%);}
|
.mbui-picker-selector .letters a { margin: 2px; text-decoration: none; font-size:12px; color: var(--color-gray-900);}
|
.mbui-picker-selector .contacts{ padding: 0; margin:0; height:100vh; overflow-y:auto;}
|
.mbui-picker-selector .contacts .mbui-contacts-title{padding:8px 16px; background-color:var(--color-gray-50); font-size:12px; color:var(--color-gray-400);}
|
.mbui-picker-selector .lists{padding: 0; margin:0; height:calc(100vh - 46px); overflow-y:auto;}
|
/*picker-radio*/
|
.mbui-picker-item .mbui-input-radio{width: 19px; height: 19px; margin-left:4px; appearance: none; position: relative;}
|
.mbui-picker-item .mbui-input-radio:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 50%; vertical-align: bottom;}
|
.mbui-picker-item .mbui-input-radio:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 50%; vertical-align: bottom;}
|
.mbui-picker-item .mbui-input-radio:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: bottom; transform: rotate(-45deg);}
|
|
/*picker-checkbox*/
|
.mbui-picker-item .mbui-input-checkbox{width: 19px; height: 19px; margin-left:4px; appearance: none; position: relative;}
|
.mbui-picker-item .mbui-input-checkbox:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 3px; vertical-align: bottom;}
|
.mbui-picker-item .mbui-input-checkbox:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 3px; vertical-align: bottom;}
|
.mbui-picker-item .mbui-input-checkbox:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: middle; transform: rotate(-45deg);}
|
|
.mbui-picker-item .mbui-picker-avatar{margin-left:12px; margin-right:8px;}
|
|
/*comment*/
|
.mbui-comment-box{display: flex; align-items:flex-start; background-color:var(--color-white); padding:12px;}
|
.mbui-comment-box .comment-avatar{width: 32px;}
|
.mbui-comment-box .comment-image{width:32px; height:32px; border-radius:50%}
|
|
.mbui-comment-box .comment-body{font-size:16px; margin-left:12px; line-height:1.5; width:100%;}
|
.mbui-comment-box .comment-meta span{margin-right:12px; font-size:12px; color:var(--color-gray-400);}
|
.mbui-comment-box .comment-content{padding:4px 0;}
|
.mbui-comment-box .comment-actions a{color:var(--color-blue-400); cursor:pointer; font-size:12px;}
|
.mbui-comment-box .comment-actions a:hover{color:var(--color-blue-600);}
|
.mbui-comment-box fieldset{border:1px solid var(--color-gray-200); border-radius:3px; background-color:var(--color-gray-100); color:var(--color-gray-500); font-size:14px; padding:8px;}
|
.mbui-comment-box .comment-btn{margin:4px 0;}
|
|
/*img*/
|
.mbui-img-cover{width:100%; position:relative; padding-top: 100%; border-radius: 3px; overflow: hidden; background-color: var(--color-gray-100);}
|
.mbui-img-cover.img3-2{padding-top: 66.666666%;}
|
.mbui-img-cover.img4-3{padding-top: 75%;}
|
.mbui-img-cover.img16-9{padding-top: 56.25%;}
|
.mbui-img-cover.img16-10{padding-top: 62.5%;}
|
.mbui-img-cover img{width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left:0; border-radius:3px;}
|
|
/*pagebox*/
|
.mbui-pagebox{width:100%; text-align:center; font-size:14px;}
|
.mbui-pagebox a,.mbui-pagebox span{min-width:16px; height:33px; line-height:33px; margin:0 4px; padding:0 10px; color:var(--color-gray-700); border-radius:1px; text-align:center; border:1px solid var(--color-gray-300); background-color:var(--color-white); display:inline-block;}
|
.mbui-pagebox span{background-color:var(--color-blue-600); color:var(--color-white); border:1px solid var(--color-blue-600);}
|
.mbui-data-none{padding:30px 0; text-align: center; color:var(--color-gray-400);}
|
.mbui-data-none img{width:200px}
|
|
/*bar*/
|
.mobile-bar{padding: 12px; position: relative; align-items: center; line-height: 1.41176471; font-size: 16px; color: var(--color-gray-900);
|
display: -webkit-box;
|
display: -webkit-flex;
|
display: flex;
|
-webkit-box-align: center;
|
-webkit-align-items: center;
|
justify-content: space-between;
|
}
|
.mobile-bar::after{content: " ";position: absolute; left: 0;bottom: 0; right: 0; height: 1px; border-top: 1px solid var(--color-gray-100); color: var(--color-gray-100); z-index: 2;
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5);
|
}
|
.mobile-bar-title{font-size:16px; font-weight:800;}
|
.tabbar-space{width: 100%; height:60px;}
|
|
|
/*calendar*/
|
.calendar {background-color:var(--color-white); font-size: 14px; color: var(--color-black);}
|
.calendar-header{background-color: #3875C5;padding: 12px 16px;text-align: center; position:relative;}
|
.calendar-select {line-height: 1.5;color: var(--color-gray-500);margin: 0;padding: 0;list-style: none;display: inline-block;position: relative;outline: 0;box-sizing: border-box;}
|
.calendar-column-header,.calendar-cell {width: 14%}
|
.calendar-column-header{font-weight: 400;text-align: center; line-height:2;}
|
.calendar-header i {position: absolute;top: 50%; width: 30px; height: 30px; margin-top: -15px; font-size: 16px;line-height: 30px;text-align: center; cursor: pointer;}
|
.calendar-header i.calendar-next {right: 12px;}
|
.calendar-header i.calendar-pre{left:12px;}
|
.calendar-header i:after {position: absolute; top: 50%;left: 50%; content: ''; width: 14px; height: 14px; margin-top: -7px; margin-left: -5px; border-top:2px solid var(--color-white); border-left: 2px solid var(--color-white);}
|
.calendar-pre:after {transform: rotateZ(-45deg);}
|
.calendar-next:after {transform: rotateZ(135deg);}
|
|
.calendar-table{width:100%;table-layout: fixed;}
|
.calendar-cell{font-size: 12px;color: var(--color-gray-500);}
|
.calendar-cell.calendar-last-month-cell,.calendar-cell.calendar-next-month-cell {color:var(--color-gray-300);}
|
.calendar-date {margin: 0 4px;}
|
.calendar-cell.calendar-thisMonth .calendar-date,.calendar-cell.calendar-today .calendar-date {background-color: var(--color-blue-50);border-radius:4px;color:var(--color-blue-600)}
|
.calendar-cell.calendar-today .calendar-date {background-color:var(--color-blue-600);border-radius:4px;color:var(--color-white)}
|
.calendar-date:hover{background: var(--color-blue-100);border-radius:4px;}
|
.calendar-value {text-align: center;height: 44px;line-height:44px;position: relative;font-size:16px;width: 100%;}
|
.calendar-event {position:absolute;width:6px;height:6px;border-radius:50%;background-color:var(--color-red-600);top:6px;right:6px;}
|
.calendar-select {font-size: 18px;vertical-align: middle;color: var(--color-white)}
|
.calendar-year-text,.calendar-month-text {line-height: 30px;padding:0 10px;}
|
/*calendar-dropdown*/
|
ul.dropdown-month,.dropdown-month li,ul.dropdown-year, .dropdown-year li {list-style: none;text-align: center;padding: 0;margin: 0;}
|
.dropdown-month.open,.dropdown-year.open {display: inline-block;margin-top: 1px;width: 100%;}
|
.dropdown-month, .dropdown-year {height: 240px;overflow-y: auto;overflow-x: hidden;display: none;position: absolute;left: 0;top: 100%;background: var(--color-white);width: 50px;border: 1px solid #eee;z-index:1;box-shadow: 0px 6px 12px rgba(0,0,0,0.175);-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)}
|
.dropdown-month .month-item,.dropdown-year .year-item {font-size: 14px;position: relative;display: block;padding: 6px 3px;line-height: 22px;font-weight: normal;color:var(--color-gray-500);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-webkit-transition: background 0.3s ease;transition: background 0.3s ease;}
|
.month-item:hover,.year-item:hover{background: var(--color-blue-50);}
|
.year-item.active {background-color: var(--color-gray-100);font-weight: 600;color: rgba(0, 0, 0, 0.65);}
|
|
/*loadData*/
|
.load-data-list{width:100%; box-sizing:border-box;}
|
.load-data-list a{width:100%; display:block; box-sizing: border-box;}
|
.load-data-list dl{background-color:var(--color-white); padding:12px;}
|
.load-data-list dt{margin-bottom:6px;}
|
.load-data-list dd{line-height:24px;}
|
.load-data-span i{color:var(--color-gray-400);}
|
.load-data-span + .load-data-span{margin-left: 16px;}
|
.load-data-none{padding-top:50px; padding-bottom:20px; color:var(--color-gray-400); text-align:center; display:none;}
|
.load-data-none.load-data-0{display:block;}
|
.load-data-none i{font-size:24px;}
|
.load-data-loading {padding:12px 0;text-align:center;}
|
.load-data-loading span{white-space: nowrap; display: inline-block; padding-right:20px; height: 24px; line-height:24px; position: relative; color:var(--color-gray-400)}
|
.load-data-loading span:after {content: '.'; color: var(--color-blue-600); animation: loading-dots 1.2s infinite; font-size: 26px; position: absolute; bottom: 8px; left: 88%;}
|
@keyframes loading-dots {
|
0%,100% {
|
content: '.';
|
color:var(--color-green-600);
|
}
|
25% {
|
content: '..';
|
color:var(--color-blue-600);
|
}
|
50% {
|
content: '...';
|
color:var(--color-orange-600);
|
}
|
75% {
|
content: '';
|
color:var(--color-yellow-600);
|
}
|
}
|
.load-data-end{text-align:center; color:var(--color-gray-300); padding:8px 0}
|
|
/*flow-check*/
|
.flow-flex-row {box-direction: row;box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
-ms-flex-direction: row;
|
flex-direction: row;
|
}
|
.flow-flexbox { width: 100%;text-align: left;display: flex;box-align: center;align-items: center;flex-wrap: wrap; line-height:1.2;}
|
.check-item{width: auto; -ms-flex-negative: 0; flex-shrink: 0; padding:4px 0}
|
.check-item i{margin-right:3px; color:var(--color-gray-500);}
|
.check-item span{color:var(--color-gray-400);margin:0 3px;}
|
.check-item .iconfont {font-size:18px;}
|
.check-item .iconfont.icon-arrow{font-size:12px;}
|
.iconfont[data-ok]{color:var(--color-green-600)}
|
.iconfont[data-no]{color:var(--color-red-600);}
|
.check-item-status{color:var(--color-gray-400); font-size:12px; margin-left:3px;}
|
|
/*fixed-bar*/
|
.mbui-fixed-bar {position: fixed; bottom:160px; height:44px; left:8px;z-index: 8;}
|
.fixed-bar-box {padding:4px;z-index: 8;border-radius:50%; position: relative; background-color:var(--color-blue-500);}
|
|
.fixed-bar-btn {position: relative; border: none; background: var(--color-white); width: 36px; height: 36px; border-radius: 50%; line-height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; z-index: 9;}
|
.fixed-bar-btn:focus {border: none;}
|
|
.fixed-bar-btn.active .menutoggle:before,
|
.fixed-bar-btn.active .menutoggle:after,
|
.fixed-bar-btn.active .menutoggle span {animation: none;}
|
.fixed-bar-btn.active .menutoggle span { opacity: 0;}
|
|
.fixed-bar-btn.active .menutoggle:before {
|
transform: translateY(7px) rotate(135deg);
|
}
|
|
.fixed-bar-btn.active .menutoggle:after {
|
transform: translateY(-7px) rotate(-135deg);
|
}
|
|
span.menutoggle {width: 24px; height: 24px; position: relative;cursor: pointer; display: block;}
|
span.menutoggle:before,
|
span.menutoggle:after,
|
span.menutoggle span { background: var(--color-blue-600); content: ""; display: block; height: 3px; border-radius: 8px; margin: 4px 0; transition: 0.5s;}
|
|
.fixed-bar-item {position: relative; width: 44px; height: 44px; border-radius: 50%; transform: translatey(-100%); opacity: 0; visibility: hidden;}
|
.fixed-bar-item.open {opacity: 1; visibility: visible;}
|
.fixed-bar-item a {width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-gray-200); font-size: 12px; text-align: center; position: absolute; right: -24px; top: 0; bottom: 0; color: #ffffff; transition-duration: 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; line-height:1.32;}
|
.fixed-bar-item.open a:nth-of-type(1) {
|
transform: rotate(-90deg) translateX(80px) rotate(90deg);
|
transition-delay: 0s;
|
background: var(--color-purple-600);
|
}
|
|
.fixed-bar-item.open a:nth-of-type(2) {
|
transform: rotate(-45deg) translateX(80px) rotate(45deg);
|
transition-delay: 0.1s;
|
background: var(--color-orange-600);
|
}
|
|
.fixed-bar-item.open a:nth-of-type(3) {
|
transform: rotate(0deg) translateX(80px) rotate(0deg);
|
transition-delay: 0.2s;
|
background: var(--color-blue-600);
|
}
|
|
.fixed-bar-item.open a:nth-of-type(4) {
|
transform: rotate(45deg) translateX(80px) rotate(-45deg);
|
transition-delay: 0.3s;
|
background: var(--color-cyan-600);
|
|
}
|
|
.fixed-bar-item.open a:nth-of-type(5) {
|
transform: rotate(90deg) translateX(80px) rotate(-90deg);
|
transition-delay: 0.4s;
|
background: var(--color-green-600);
|
}
|
|
|
/*picker*/
|
.lay-picker {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 99999999999999;display: none;overflow: hidden;}
|
.lay-picker-shade {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: var(--black-shadow);z-index: 9;}
|
.lay-picker-container {position: absolute;left: 0;bottom: 0;z-index: 99;width: 100%;background: var(--color-white);color: var(--color-gray-900);font-size: 16px;
|
-webkit-transition: transform .25s;
|
-webkit-transform: translate3d(0, 100%, 0);
|
transition: transform .25s;
|
transform: translate3d(0, 100%, 0);
|
}
|
|
.lay-picker-header {height: 50px;line-height: 50px;border-bottom: 1px solid #f3f3f3;margin-bottom: 1px;margin: 0px 12px;}
|
.lay-picker-title {text-align: center;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;color: var(--color-gray-900);}
|
.lay-picker-search{margin: 0 12px; text-align: center; padding: 5px 0;}
|
.lay-picker-search input{text-align: center; height: 40px; line-height: 40px; border: none; border-bottom: 1px solid var(--color-gray-200);font-size: 14px;
|
transition: all .2s;
|
-webkit-transition: all .2s;
|
box-shadow: none!important;
|
}
|
.lay-picker-search input:hover,.lay-picker-search input:focus{ border: none!important; border-bottom: 1px solid var(--color-gray-200)!important;}
|
.lay-picker-btn {position: relative;z-index: 99;}
|
.lay-picker-cancel {color: var(--color-gray-500);}
|
.lay-picker-clear {margin-left:12px;color: var(--color-orange-600);}
|
.lay-picker-confirm {float: right;color: var(--color-blue-600);}
|
|
.lay-picker-shadowup,.lay-picker-shadowdown {height: 120px;width: 100%;position: absolute;left: 0;z-index: 50;}
|
.lay-picker-shadowup {height: 115px;top: -1px;
|
background: -webkit-linear-gradient(to bottom, var(--color-white), rgba(255, 255, 255, .6));
|
background: linear-gradient(to bottom, var(--color-white), rgba(255, 255, 255, .6));
|
pointer-events: none;
|
border-bottom: 1px solid var(--color-gray-200);
|
}
|
|
.lay-picker-shadowdown {height: 130px;bottom: 0;
|
background: -webkit-linear-gradient(to top, var(--color-white), rgba(255, 255, 255, .6));
|
background: linear-gradient(to top, var(--color-white), rgba(255, 255, 255, .6));
|
pointer-events: none;
|
border-top: 1px solid var(--color-gray-200);
|
}
|
|
.lay-picker-content {position: relative;height: 300px;margin: 15px;overflow: hidden;}
|
.lay-picker-box {overflow: hidden;}
|
.lay-picker-box:after {display: table;height: 0;clear: both;content: '';}
|
.lay-picker-list-wrap {float: left;height: 300px;overflow: hidden;
|
-webkit-transition: width .2s;
|
transition: width .2s;
|
}
|
.lay-picker-list-wrap ul {position: relative;padding: 100px 0;margin-top: 16px;
|
-webkit-transition: transform .1s ease-out;
|
transition: transform .1s ease-out;
|
}
|
.lay-picker-list-wrap ul:after {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 55;content: '';}
|
.lay-picker-list-wrap li {line-height: 50px;height: 50px;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
|
|
/** picker wechat skin*/
|
.lay-picker-bottom {text-align: center;margin-top: 10px;margin-bottom: 30px;font-size: 16px;}
|
.lay-picker-bottom-btn {border-radius: 6px;display: inline-block;width: 30%;height: 40px;line-height: 40px;}
|
.lay-picker-bottom-btn-cancel {color: var(--color-gray-500);background: var(--color-gray-200);margin-right: 3%;}
|
.lay-picker-bottom-btn-clear {color: var(--color-white);background: var(--color-orange-600);margin-right: 3%;}
|
.lay-picker-bottom-btn-confirm {color: var(--color-white);background: var(--color-blue-600);}
|
