tuya
/
supplier-admin-9620


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/common.css">
    <script src="/layui/layui.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        /** 初始化 */
        html #layuicss-easyxin {
            display: none;
            width: 1989px
        }

        [template] {
            display: none
        }

        [lay-href] {
            cursor: pointer
        }

        * {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        body {
            color: #595959;
            background-color: #f0f2f5;

        }

        .layui-body {
            left: 0;

        }

        .layui-layout-body {
            overflow: auto;

        }

        .layui-layout-admin {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            -webkit-transition: left .3s ease, right .3s ease;
            transition: left .3s ease, right .3s ease;
        }

        /** body */
        .layui-layout-admin .layui-body {
            position: absolute;
            left: 60px;
            top: 50px;
            z-index: auto;
            overflow: auto;
            -webkit-transition: left .3s;
            transition: left .3s;
            -webkit-overflow-scrolling: touch
        }

        .admin-iframe {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%
        }

        .layui-fluid {
            padding: 14px;
        }

        /** footer */
        .layui-layout-admin .layui-footer {
            position: absolute;
            left: 60px;
            background: #fff;
            box-sizing: border-box;
            border-top: 1px solid #f5f7f9;
            -webkit-transition: left .3s;
            transition: left .3s;
            overflow: hidden
        }

        .close-footer .layui-layout-admin .layui-footer {
            display: none
        }

        .close-footer .layui-layout-admin .layui-body {
            bottom: 0
        }

        /** side */
        .layui-layout-admin .layui-side {
            position: absolute;
            top: 50px;
            width: 60px;
            background-color: #191a23;
            box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .05);
            -webkit-transition: width .3s;
            transition: width .3s;
            -webkit-user-select: none;
            user-select: none;
            z-index: 1000
        }

        .layui-layout-admin .layui-side .layui-side-scroll {
            width: 255px
        }

        .layui-layout-admin .layui-side .layui-nav {
            width: 60px;
            background-color: transparent
        }

        .layui-layout-admin .layui-side>.layui-side-scroll>.layui-nav:first-child {
            margin-top: 10px
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item>a {
            cursor: pointer;
            padding-top: 5px;
            padding-bottom: 5px;
            overflow: visible
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item a {
            -webkit-transition: color .3s, background-color .3s;
            transition: color .3s, background-color .3s
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-more {
            right: 15px
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item>.layui-nav-child {
            position: static
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child a {
            padding-left: 50px;
            cursor: pointer
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child a {
            padding-left: 70px
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child a {
            padding-left: 90px
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child a {
            padding-left: 110px
        }

        /** 侧导航折叠状态下样式 */
        .layui-layout-admin .layui-side .layui-nav .layui-nav-item>a .layui-nav-more,
        .layui-layout-admin .layui-side .layui-nav .layui-nav-item>a>cite,
        .layui-layout-admin .layui-side .layui-nav .layui-nav-itemed>.layui-nav-child {
            display: none !important
        }

        .layui-layout-admin .layui-side .layui-nav li.layui-nav-itemed>a {
            background: rgba(0, 0, 0, .8)
        }

        .layui-layout-admin .layui-side .layui-nav .layui-nav-item>a>.layui-icon {
            font-size: 16px;
            -webkit-transition: font-size .3s;
            transition: font-size .3s
        }

        .layui-layout-admin .layui-side .layui-nav .admin-nav-hover>.layui-nav-child {
            position: fixed;
            top: 60px;
            left: 60px;
            padding: 5px;
            min-width: 150px;
            display: block !important;
            background: 0 0 !important
        }

        .layui-layout-admin .layui-side .layui-nav .admin-nav-hover>.layui-nav-child:before {
            content: '';
            position: absolute;
            right: 5px;
            left: 5px;
            bottom: 0;
            top: 0;
            border-radius: 4px;
            background: #191a23;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
        }

        .layui-layout-admin .layui-side .layui-nav .admin-nav-hover>.layui-nav-child dd:first-child>.layui-nav-child {
            margin-top: -5px
        }

        .layui-layout-admin .layui-side .layui-nav .admin-nav-hover>.layui-nav-child dd:last-child>.layui-nav-child.show-top {
            margin-top: 5px
        }

        .layui-layout-admin .layui-side .layui-nav .admin-nav-hover>.layui-nav-child>dd>a {
            padding: 0 20px !important
        }

        .layui-layout-admin .layui-side .layui-nav .admin-nav-hover>.layui-nav-child>dd>a .layui-nav-more {
            border-color: transparent transparent transparent rgba(255, 255, 255, .7);
            right: 7px;
            margin-top: -6px
        }

        .layui-layout-admin .layui-side .layui-nav.arrow1 .admin-nav-hover>.layui-nav-child>dd>a .layui-nav-more,
        .layui-layout-admin .layui-side .layui-nav.arrow2 .admin-nav-hover>.layui-nav-child>dd>a .layui-nav-more {
            -o-transform: rotate(0);
            -ms-transform: rotate(0);
            -moz-transform: rotate(0);
            -webkit-transform: rotate(0);
            transform: rotate(0);
            width: 6px;
            height: 10px;
            right: 10px;
            margin-top: -5px;
            font-weight: 600
        }

        .layui-layout-admin .layui-side .layui-nav.arrow1 .admin-nav-hover>.layui-nav-child>dd>a .layui-nav-more:before,
        .layui-layout-admin .layui-side .layui-nav.arrow2 .admin-nav-hover>.layui-nav-child>dd>a .layui-nav-more:before {
            content: "\e602";
            left: -4px;
            top: -2px
        }

        .layui-layout-admin .layui-side .layui-nav.arrow2 .admin-nav-hover>.layui-nav-child>dd>a .layui-nav-more:before {
            -o-transform: rotate(0);
            -ms-transform: rotate(0);
            -moz-transform: rotate(0);
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        /** side hover 进入动画 */
        .ew-anim-drop-in {
            -webkit-animation: ewTransitionDropIn .3s ease-in-out;
            animation: ewTransitionDropIn .3s ease-in-out;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0
        }

        @-webkit-keyframes ewTransitionDropIn {
            from {
                opacity: 0;
                -webkit-transform: scale(.8)
            }

            to {
                opacity: 1;
                -webkit-transform: scale(1)
            }
        }

        @keyframes ewTransitionDropIn {
            from {
                opacity: 0;
                transform: scale(.8)
            }

            to {
                opacity: 1;
                transform: scale(1)
            }
        }

        /** layui nav tree */
        .layui-nav-tree .layui-nav-bar {
            display: none
        }

        .layui-nav-tree>.layui-nav-item>a:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 100%;
            width: 3px;
            background-color: #009688;
            transition: all .3s ease
        }

        .layui-nav-tree>.layui-nav-item:hover>a:before {
            bottom: 0
        }

        .layui-nav-tree .layui-nav-item a:hover {
            background-color: transparent
        }

        .layui-nav-tree .layui-nav-child dd.layui-this,
        .layui-nav-tree .layui-this {
            background: 0 0
        }

        .layui-nav-tree .layui-nav-item .layui-nav-child {
            padding: 5px 0;
            background-color: rgba(0, 0, 0, .3) !important
        }

        .layui-nav-tree .layui-nav-itemed>.layui-nav-child {
            display: none
        }

        /** 小三角改箭头 */
        .layui-nav-tree.arrow1 .layui-nav-more {
            font-family: layui-icon !important;
            font-size: 12px;
            font-weight: 600;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow: hidden;
            line-height: normal;
            border: none;
            margin: -3px 0 0 0;
            padding: 0;
            width: 10px;
            height: 6px;
            top: 50%;
            display: inline-block;
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .layui-nav-tree.arrow1 .layui-nav-more:before {
            content: "\e61a";
            position: absolute;
            right: -1px;
            top: -4px
        }

        .layui-nav-tree.arrow1 .layui-nav-itemed>a>.layui-nav-more {
            -ms-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            transform: rotate(-180deg)
        }

        /** 小三角改加减号 */
        .layui-nav-tree.arrow2 .layui-nav-more {
            font-family: layui-icon !important;
            font-size: 12px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow: hidden;
            line-height: normal;
            border: none;
            margin: -5px 0 0 0;
            padding: 0;
            width: 10px;
            height: 10px;
            top: 50%;
            display: inline-block;
            -webkit-transition: all .3s ease;
            transition: all .3s ease
        }

        .layui-nav-tree.arrow2 .layui-nav-more:before {
            content: "\e654";
            position: absolute;
            top: -2px;
            left: -1px
        }

        .layui-nav-tree.arrow2 .layui-nav-itemed>a>.layui-nav-more {
            -ms-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .layui-nav-tree.arrow2 .layui-nav-itemed>a>.layui-nav-more:before {
            content: '';
            width: 8px;
            height: 2px;
            background-color: rgba(255, 255, 255, .7);
            top: 4px;
            left: 1px;
            -ms-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        /** 单标签标题 */
        .layui-body-header {
            color: #262626;
            font-size: 16px;
            padding: 0 20px;
            height: 45px;
            line-height: 45px;
            background-color: #fff;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
            box-sizing: border-box;
            position: absolute;
            left: 0;
            right: 0;
            z-index: 998;
            display: block
        }

        .layui-body-header-title {
            padding-left: 6px;
            border-left: 4px solid #009688
        }

        .layui-body-header+div {
            position: absolute;
            left: 0;
            right: 0;
            top: 45px;
            bottom: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch
        }

        .layui-breadcrumb {
            visibility: visible
        }

        /** 右侧弹窗 */
        .layui-layer.layui-layer-adminRight {
            bottom: 0;
            top: 50px !important;
            border: none !important;
            box-shadow: 1px 1px 50px rgba(0, 0, 0, .3) !important;
            overflow: auto
        }

        .layui-anim-rl {
            -webkit-animation-name: layui-rl;
            animation-name: layui-rl
        }

        @-webkit-keyframes layui-rl {
            from {
                -webkit-transform: translate3d(100%, 0, 0)
            }

            to {
                -webkit-transform: translate3d(0, 0, 0)
            }
        }

        @keyframes layui-rl {
            from {
                transform: translate3d(100%, 0, 0)
            }

            to {
                transform: translate3d(0, 0, 0)
            }
        }

        .layui-anim-lr,
        .layui-anim-rl.layer-anim-close {
            -webkit-animation-name: layui-lr;
            animation-name: layui-lr
        }

        @-webkit-keyframes layui-lr {
            from {
                -webkit-transform: translate3d(0, 0, 0);
                opacity: 1
            }

            to {
                -webkit-transform: translate3d(100%, 0, 0);
                opacity: 1
            }
        }

        @keyframes layui-lr {
            from {
                transform: translate3d(0, 0, 0)
            }

            to {
                transform: translate3d(100%, 0, 0)
            }
        }

        /** admin风格弹窗 */
        .layui-layer.layui-layer-admin {
            border: none !important;
            box-shadow: 1px 1px 50px rgba(0, 0, 0, .3) !important
        }

        .layui-layer.layui-layer-admin .layui-layer-title {
            color: #fff;
            height: 50px;
            line-height: 50px;
            background-color: #191a23;
            border: none
        }

        .layui-layer.layui-layer-admin .layui-layer-setwin {
            top: 17px
        }

        .layui-layer.layui-layer-admin .layui-layer-setwin a {
            color: #fff;
            font-size: 16px;
            font-style: normal;
            font-family: layui-icon !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        /** 关闭按钮 */
        .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-close1 {
            background: 0 0
        }

        .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-close1:before {
            content: "\1006"
        }

        /** 最小化按钮 */
        .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-min cite {
            background-color: #ddd
        }

        /** 最大化按钮 */
        .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-max {
            font-size: 14px;
            padding-top: 1px;
            background: 0 0
        }

        .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-max:before {
            content: "\e622"
        }

        .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-maxmin:before {
            content: "\e758"
        }

        /** 弹窗按钮 */
        .layui-layer.layui-layer-admin .layui-layer-btn {
            padding-bottom: 15px
        }

        .layui-layer.layui-layer-admin .layui-layer-btn .layui-layer-btn0 {
            border-color: #009688;
            background-color: #009688
        }

        .layui-layer.layui-layer-admin .layui-layer-btn a {
            height: 34px;
            line-height: 34px
        }

        .layui-layer-admin {
            max-width: 100%
        }

        .layui-layer-iframe .layui-layer-content {
            overflow: auto;
            -webkit-overflow-scrolling: touch
        }

        /** msg样式 */
        body .layui-layer-msg {
            border: none;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
        }

        body .layui-layer-load {
            background: 0 0
        }

        /** loading */
        .page-loading {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 19891017;
            background-color: #fff
        }

        body>.page-loading {
            position: fixed;
            background-color: #f5f7f9
        }

        .layui-layout-admin>.layui-body>.layui-tab>.layui-tab-content>.layui-tab-item>.page-loading,
        .layui-layout-admin>.layui-body>.page-loading {
            background-color: #f5f7f9
        }

        .layui-layout-admin>.layui-body>.layui-body-header.show+div+.page-loading {
            top: 45px;
            height: auto
        }

        .page-no-scroll {
            overflow-x: hidden;
            overflow-y: hidden;
            min-height: 80px
        }

        .ball-loader,
        .rubik-loader,
        .signal-loader {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        .ball-loader>span,
        .signal-loader>span {
            background-color: #4aca85;
            display: inline-block
        }

        .ball-loader.sm>span:nth-child(1),
        .ball-loader>span:nth-child(1),
        .signal-loader.sm>span:nth-child(1),
        .signal-loader>span:nth-child(1) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s
        }

        .ball-loader.sm>span:nth-child(2),
        .ball-loader>span:nth-child(2),
        .signal-loader.sm>span:nth-child(2),
        .signal-loader>span:nth-child(2) {
            -webkit-animation-delay: .1s;
            animation-delay: .1s
        }

        .ball-loader.sm>span:nth-child(3),
        .ball-loader>span:nth-child(3),
        .signal-loader.sm>span:nth-child(3),
        .signal-loader>span:nth-child(3) {
            -webkit-animation-delay: .15s;
            animation-delay: .15s
        }

        .ball-loader.sm>span:nth-child(4),
        .ball-loader>span:nth-child(4),
        .signal-loader.sm>span:nth-child(4),
        .signal-loader>span:nth-child(4) {
            -webkit-animation-delay: .2s;
            animation-delay: .2s
        }

        /** 魔方loading */
        .rubik-loader {
            width: 64px;
            height: 64px;
            background-image: url(img/ic_loading.gif);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain
        }

        .rubik-loader.sm {
            width: 50px;
            height: 50px
        }

        /** 球形loading */
        .ball-loader>span {
            width: 20px;
            height: 20px;
            margin: 0 3px;
            border-radius: 50%;
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-animation: 1s ball-load ease-in-out infinite;
            animation: ball-load 1s ease-in-out infinite
        }

        @-webkit-keyframes ball-load {
            0% {
                -webkit-transform: scale(0)
            }

            50% {
                -webkit-transform: scale(1)
            }

            100% {
                -webkit-transform: scale(0)
            }
        }

        @keyframes ball-load {
            0% {
                transform: scale(0)
            }

            50% {
                transform: scale(1)
            }

            100% {
                transform: scale(0)
            }
        }

        .ball-loader.sm>span {
            width: 15px;
            height: 15px;
            margin: 0 2px
        }

        /** 信号loading */
        .signal-loader {
            width: 50px;
            height: 22px
        }

        .signal-loader>span {
            width: 8px;
            height: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            margin: 0;
            -webkit-animation: signal-load 1s infinite;
            animation: signal-load 1s infinite
        }

        .signal-loader>span:nth-child(2) {
            left: 14px
        }

        .signal-loader>span:nth-child(3) {
            left: 28px
        }

        .signal-loader>span:nth-child(4) {
            left: 42px
        }

        @-webkit-keyframes signal-load {
            0% {
                height: 0
            }

            50% {
                height: 22px
            }

            100% {
                height: 0
            }
        }

        @keyframes signal-load {
            0% {
                height: 0
            }

            50% {
                height: 22px
            }

            100% {
                height: 0
            }
        }

        /** 信号loading小型 */
        .signal-loader.sm {
            width: 32px;
            height: 15px
        }

        .signal-loader.sm>span {
            width: 5px;
            -webkit-animation: signal-load-sm 1s infinite;
            animation: signal-load-sm 1s infinite
        }

        .signal-loader.sm>span:nth-child(2) {
            left: 9px
        }

        .signal-loader.sm>span:nth-child(3) {
            left: 18px
        }

        .signal-loader.sm>span:nth-child(4) {
            left: 27px
        }

        @-webkit-keyframes signal-load-sm {
            0% {
                height: 0
            }

            50% {
                height: 15px
            }

            100% {
                height: 0
            }
        }

        @keyframes signal-load-sm {
            0% {
                height: 0
            }

            50% {
                height: 15px
            }

            100% {
                height: 0
            }
        }

        /** 组件样式 */
        /** toolbar */
        .layui-form.toolbar .layui-form-item {
            margin-bottom: 0
        }

        .layui-card-body>.layui-table,
        .toolbar+.layui-table {
            margin: 2px 0
        }

        .layui-card-body>.layui-table-view,
        .toolbar+table+.ew-tree-table,
        .toolbar+table+.layui-table-view {
            margin: 0
        }

        .mr0 {
            margin-right: 0 !important
        }

        .w-auto {
            width: auto
        }

        @media screen and (max-width:450px) {
            .layui-form-item .w-auto+.layui-input-inline {
                margin-left: 100px
            }

            .layui-form-item .layui-inline {
                margin-bottom: 8px
            }
        }

        /** form */
        .model-form {
            padding: 20px 30px 0 0
        }

        .model-form.no-padding {
            padding: 0
        }

        .model-form .model-form-body {
            overflow-y: auto;
            padding: 25px 30px 0 0;
            max-height: calc(100vh - 180px)
        }

        .model-form.no-padding .model-form-footer {
            padding-top: 10px;
            padding-right: 30px
        }

        .layui-form.model-form>.layui-form-item:last-child {
            margin-bottom: 0;
            padding-bottom: 20px
        }

        .layui-form-required:before {
            content: "*";
            display: inline-block;
            font-family: SimSun;
            margin-right: 4px;
            font-size: 14px;
            line-height: 1;
            color: #ed4014
        }

        .layui-input,
        .layui-textarea {
            color: #595959
        }

        .layui-input[type=number] {
            line-height: 38px
        }

        .layui-form-select .layui-input {
            padding-right: 0
        }

        .layui-form-select-top .layui-form-select>dl {
            top: auto;
            bottom: 42px
        }

        /** button */
        .layui-btn-primary {
            color: #595959;
            border-color: #e6e6e6
        }

        .layui-btn-group .layui-btn-primary:first-child {
            border-left: 1px solid #e6e6e6
        }

        .layui-btn-group .layui-btn-primary:hover,
        .layui-btn-primary:hover {
            color: #262626;
            border-color: #c9c9c9
        }

        .layui-btn {
            -webkit-transition: background-color .2s;
            transition: background-color .2s
        }

        /** 圆形按钮 */
        .btn-circle {
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            background: #009688;
            position: fixed;
            right: 15px;
            bottom: 15px;
            color: #fff;
            text-align: center;
            box-shadow: 0 0 8px rgba(0, 0, 0, .2);
            cursor: pointer
        }

        .btn-circle:hover {
            color: #fff;
            opacity: .8
        }

        .btn-circle .layui-icon {
            font-size: 24px
        }

        /** 组件加图标 */
        .date-icon,
        .icon-date {
            background-image: url(img/icon_date.png);
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 28px
        }

        .icon-search {
            background-image: url(img/icon_search.png);
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 26px
        }

        a.icon-text>.layui-icon,
        span.icon-text>.layui-icon {
            font-size: 14px;
            margin-left: 2px
        }

        .icon-btn {
            padding: 0 10px
        }

        /** 辅助样式 */
        .bg-white,
        html.bg-white>body {
            background-color: #fff
        }

        [ew-href],
        [lay-tips] {
            cursor: pointer
        }

        .inline-block {
            display: inline-block
        }

        .pull-right {
            float: right
        }

        .pull-left {
            float: left
        }

        .text-left {
            text-align: left
        }

        .text-center {
            text-align: center
        }

        .text-right {
            text-align: right
        }

        .layui-link,
        .text-primary {
            color: #009688 !important
        }

        .text-success {
            color: #5fb878 !important
        }

        .text-warning {
            color: #ffb800 !important
        }

        .text-danger {
            color: #ff5722 !important
        }

        .text-info {
            color: #01aaed !important
        }

        .text-muted {
            color: #c2c2c2 !important
        }

        .layui-text a:not(.layui-btn) {
            color: #2d8cf0;
            cursor: pointer
        }

        .layui-text a:not(.layui-btn):hover {
            text-decoration: none
        }

        .ew-console-wrapper .layui-card {
            box-shadow: none;
            border-radius: 4px;
            padding: 10px;
        }

        .layui-card-header {
            color: #595959;
            border-bottom: none;
        }

        .lay-big-font {
            font-size: 30px;
            line-height: 36px;
            padding: 10px 0px 10px;
            overflow: hidden;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            color: rgba(0, 0, 0, .85);
        }

        /** 隐藏滚动条 */
        .no-scrollbar {
            overflow-x: hidden !important;
            overflow-y: hidden !important
        }

        /** 输入框禁用样式 */
        input.layui-disabled,
        input.layui-disabled:hover,
        textarea.layui-disabled,
        textarea.layui-disabled:hover {
            color: #595959 !important;
            background-color: #f6f6f6
        }

        /** 下拉菜单 */
        .dropdown-menu {
            display: inline-block
        }

        .dropdown-menu .dropdown-menu-nav {
            display: none
        }

        .dropdown-menu+.dropdown-menu,
        .dropdown-menu+.layui-btn,
        .layui-btn+.dropdown-menu {
            margin-left: 10px
        }

        /** 滚动条样式 */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background: 0 0
        }

        ::-webkit-scrollbar-track {
            background: 0 0
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #c1c1c1
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #a8a8a8
        }

        .mini-bar::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }

        .mini-bar::-webkit-scrollbar-thumb {
            border-radius: 3px
        }

        @media screen and (max-width:768px) {
            ::-webkit-scrollbar {
                width: 4px;
                height: 4px
            }

            ::-webkit-scrollbar-thumb {
                border-radius: 2px
            }
        }

        /** 地图选择位置弹窗 */
        #ew-map-select-map {
            height: 450px
        }

        #ew-map-select-pois {
            height: 450px;
            overflow-x: hidden;
            overflow-y: auto
        }

        .ew-map-select-search-list-item {
            padding: 10px 30px 10px 15px;
            border-bottom: 1px solid #e8e8e8;
            cursor: pointer;
            position: relative
        }

        .ew-map-select-search-list-item:hover {
            background: #f2f2f2
        }

        .ew-map-select-search-list-item:last-child {
            border-bottom: none
        }

        .ew-map-select-search-list-item .ew-map-select-search-list-item-title {
            font-size: 14px;
            color: #262626
        }

        .ew-map-select-search-list-item .ew-map-select-search-list-item-address {
            font-size: 12px;
            color: #595959;
            padding-top: 5px
        }

        .ew-map-select-search-list-item-icon-ok {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%)
        }

        .ew-map-select-search-list-item-icon-ok .layui-icon {
            color: #3b74ff
        }

        .ew-map-select-tool {
            padding: 5px 15px;
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05)
        }

        #ew-map-select-center-img {
            position: absolute;
            bottom: 50%;
            left: 50%;
            width: 26px;
            margin-left: -13px
        }

        #ew-map-select-center-img2 {
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 12px;
            display: inline-block;
            margin-left: -6px;
            margin-top: -7px;
            color: #3b74ff
        }

        .bounceInDown {
            animation: bounceInDown .5s;
            animation-direction: alternate;
            -webkit-animation: bounceInDown .5s;
            -webkit-animation-direction: alternate
        }

        @-webkit-keyframes bounceInDown {

            0%,
            60%,
            75%,
            90%,
            to {
                -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1)
            }

            0%,
            to {
                -webkit-transform: translate3d(0, 0, 0)
            }

            25% {
                -webkit-transform: translate3d(0, -30px, 0)
            }

            50% {
                -webkit-transform: translate3d(0, -15px, 0)
            }

            75% {
                -webkit-transform: translate3d(0, -4px, 0)
            }
        }

        @keyframes bounceInDown {

            0%,
            60%,
            75%,
            90%,
            to {
                transition-timing-function: cubic-bezier(.215, .61, .355, 1)
            }

            0%,
            to {
                transform: translate3d(0, 0, 0)
            }

            25% {
                transform: translate3d(0, -10px, 0)
            }

            50% {
                transform: translate3d(0, -20px, 0)
            }

            75% {
                transform: translate3d(0, -10px, 0)
            }
        }

        #ew-map-select-tips {
            position: absolute;
            z-index: 999;
            background: #fff;
            max-height: 430px;
            overflow: auto;
            top: 48px;
            left: 56px;
            width: 280px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
            border: 1px solid #d2d2d2
        }

        #ew-map-select-tips .ew-map-select-search-list-item {
            padding: 10px 15px 10px 35px
        }

        .ew-map-select-search-list-item-icon-search {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%)
        }

        .ew-map-select-search-list-item-icon-search .layui-icon {
            color: #8c8c8c
        }

        /** 表格头部工具栏迷你样式 */
        .table-tool-mini .layui-table-view {
            position: relative
        }

        .table-tool-mini .layui-table-tool {
            position: absolute;
            min-height: unset;
            height: auto;
            padding: 3px 10px;
            width: auto;
            top: -38px;
            right: -1px;
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            border: 1px solid #e6e6e6;
            border-bottom: none
        }

        .table-tool-mini .layui-table-tool .layui-table-tool-temp {
            padding-right: 0;
            display: inline-block
        }

        .table-tool-mini .layui-table-tool .layui-table-tool-self {
            position: static;
            display: inline-block
        }

        .table-tool-mini .layui-table-tool .layui-table-tool-self .layui-inline[lay-event]:first-child {
            margin: 0
        }

        .table-tool-mini.full-table .layui-table-tool {
            top: -35px;
            height: 1px;
            padding: 0 10px;
            background: 0 0;
            border: none
        }

        .table-tool-mini.full-table .layui-table-tool:before {
            content: "";
            position: absolute;
            top: -3px;
            right: 0;
            left: 0;
            height: 36px;
            background-color: #f2f2f2;
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            border: 1px solid #e6e6e6;
            border-bottom: none
        }

        /** laydate自适应 */
        @media screen and (max-width: 768px) {
            .layui-laydate-range {
                left: 0 !important;
                top: 0 !important;
                right: 0 !important;
                margin: 10px auto !important;
                max-width: 95%
            }

            .layui-laydate-range .layui-laydate-content table,
            .layui-laydate-range .layui-laydate-main {
                width: 100%
            }

            .layui-laydate-range .laydate-main-list-0 .laydate-next-m,
            .layui-laydate-range .laydate-main-list-0 .laydate-next-y,
            .layui-laydate-range .laydate-main-list-1 .laydate-prev-m,
            .layui-laydate-range .laydate-main-list-1 .laydate-prev-y {
                display: inline-block !important
            }

            .layui-laydate-range .laydate-main-list-1 .layui-laydate-header {
                border-top: 1px solid #e2e2e2
            }

            .layui-laydate-range .laydate-main-list-1 .layui-laydate-content {
                border-left: none !important
            }

            .layui-laydate-range .laydate-time-list ol li {
                padding-left: 0 !important;
                text-align: center
            }

            .layui-laydate-range .laydate-time-list ol {
                overflow: auto !important
            }
        }

        /** tree展开箭头朝下 */
        .layui-tree-spread>div>div>span>.layui-tree-iconArrow:after {
            border-color: #c0c4cc transparent transparent transparent;
            top: 6px;
            left: 0
        }

        .layui-tree .layui-tree-iconArrow:after {
            transition: none
        }

        /** 数据表格内checkbox */
        .ew-tb-cell-ck .layui-form-checkbox[lay-skin=primary] {
            padding-left: 22px
        }

        .ew-tb-cell-ck .layui-form-checkbox[lay-skin=primary] span {
            padding-right: 5px
        }

        /** 字段集嵌套数据表格 */
        .ew-field-group>.layui-elem-field {
            border-bottom: none;
            margin: 0
        }

        .ew-field-group>.ew-field-box {
            border: 1px solid #e6e6e6;
            padding: 10px 15px;
            border-top: none
        }

        /** 垂直选项卡 */
        .layui-tab.layui-tab-vertical {
            position: relative
        }

        .layui-tab.layui-tab-vertical:after {
            content: "";
            clear: both;
            display: block
        }

        .layui-tab.layui-tab-vertical>.layui-tab-title {
            width: 130px;
            height: auto;
            border: none;
            border-right: 1px solid #e9e9e9;
            box-sizing: border-box;
            padding: 10px 0;
            float: left
        }

        .layui-tab.layui-tab-vertical>.layui-tab-title>li {
            display: block;
            margin-right: -1px;
            border-right: 2px solid transparent;
            white-space: normal;
            line-height: normal;
            padding: 10px 20px;
            text-align: right
        }

        .layui-tab.layui-tab-vertical>.layui-tab-title>li.layui-this {
            border-right: 2px solid #5fb878;
            color: #5fb878
        }

        .layui-tab.layui-tab-vertical>.layui-tab-title>li.layui-this:after {
            display: none
        }

        .layui-tab.layui-tab-vertical>.layui-tab-title>li>.layui-icon {
            font-size: 14px;
            margin-right: 5px
        }

        .layui-tab.layui-tab-vertical>.layui-tab-content {
            margin-left: 130px
        }

        .layui-tab.layui-tab-vertical.layui-tab-vertical-right>.layui-tab-title {
            float: right;
            border-right: none;
            border-left: 1px solid #e9e9e9
        }

        .layui-tab.layui-tab-vertical.layui-tab-vertical-right>.layui-tab-content {
            margin-left: 0;
            margin-right: 130px
        }

        .layui-tab.layui-tab-vertical.layui-tab-vertical-right>.layui-tab-title>li {
            text-align: left;
            border-left: 2px solid transparent;
            border-right: none
        }

        .layui-tab.layui-tab-vertical.layui-tab-vertical-right>.layui-tab-title>li.layui-this {
            border-left: 2px solid #5fb878
        }

        .layui-tab.layui-tab-vertical.layui-tab-vertical-full>.layui-tab-title {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            min-height: 100%
        }

        .layui-tab.layui-tab-vertical.layui-tab-vertical-right.layui-tab-vertical-full>.layui-tab-title {
            right: 0;
            left: auto
        }

        /** 按钮加载中状态 */
        .ew-btn-loading {
            opacity: .8;
            pointer-events: none;
            font-size: 0 !important
        }

        .ew-btn-loading * {
            display: none !important
        }

        .ew-btn-loading>.ew-btn-loading-text {
            font-size: 14px !important;
            display: inline-block !important
        }

        .ew-btn-loading.layui-btn-sm>.ew-btn-loading-text,
        .ew-btn-loading.layui-btn-xs>.ew-btn-loading-text {
            font-size: 12px !important
        }

        .ew-btn-loading>.ew-btn-loading-text * {
            display: inline-block !important
        }

        /** 搜索展开更多 */
        .form-search-expand,
        .form-search-expand:hover {
            padding: 0;
            border: none;
            color: #2d8cf0;
            box-shadow: none !important
        }

        .form-search-expand .layui-icon {
            font-size: 12px;
            font-weight: 600
        }

        .form-search-show-expand {
            display: none !important
        }

        /** 徽章扩展样式 */
        .layui-badge-green {
            color: #52c41a;
            background: #f6ffed;
            border: 1px solid #b7eb8f
        }

        .layui-badge-blue {
            color: #1890ff;
            background: #e6f7ff;
            border: 1px solid #91d5ff
        }

        .layui-badge-red {
            color: #f5222d;
            background: #fff1f0;
            border: 1px solid #ffa39e
        }

        .layui-badge-yellow {
            color: #faad14;
            background: #fffbe6;
            border: 1px solid #ffe58f
        }

        .layui-badge-gray {
            color: #8c8c8c;
            background: #fafafa;
            border: 1px solid #ccc
        }

        .layui-badge {
            height: 20px;
            line-height: 19px;
            box-sizing: border-box
        }

        .layui-badge-list .layui-badge {
            height: 23px;
            line-height: 22px;
            margin-bottom: 8px
        }

        .layui-badge-list .layui-badge+.layui-badge {
            margin-left: 6px
        }

        .layui-badge-list .layui-badge.layui-bg-gray {
            border: 1px solid #ccc;
            background-color: #fafafa !important
        }

        .layui-card .layui-card-header .layui-badge.pull-right {
            top: 50%;
            margin-top: -10px
        }

        /** 锁屏 */
        .ew-lock-screen-group {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 19891099
        }

        /** ios下iframe兼容 */
        .ios-iframe-body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }

        /** 应用快捷块样式 */
        .console-app-group {
            padding: 16px;
            border-radius: 4px;
            text-align: center;
            background-color: #fff;
            cursor: pointer
        }

        .console-app-group .console-app-icon,
        .console-user-group .console-user-group-head .console-app-icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin-bottom: 6px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 32px;
            color: #69c0ff
        }

        .console-app-group:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, .08)
        }

        /** 小组成员 */
        .console-user-group {
            position: relative;
            padding: 10px 0 10px 60px
        }

        .console-user-group .console-user-group-head {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -16px
        }

        .console-user-group .layui-badge {
            position: absolute;
            top: 50%;
            right: 8px;
            margin-top: -10px
        }

        .console-user-group .console-user-group-name {
            line-height: 1.2
        }

        .console-user-group .console-user-group-desc {
            color: #8c8c8c;
            line-height: 1;
            font-size: 12px;
            margin-top: 5px
        }

        /** 卡片轮播图样式 */
        .admin-carousel .layui-carousel-ind {
            position: absolute;
            top: -41px;
            text-align: right
        }

        .admin-carousel .layui-carousel-ind ul {
            background: 0 0
        }

        .admin-carousel .layui-carousel-ind li {
            background-color: #e2e2e2
        }

        .admin-carousel .layui-carousel-ind li.layui-this {
            background-color: #999
        }

        /** 广告位轮播图 */
        .admin-news .layui-carousel-ind {
            height: 45px
        }

        .admin-news a {
            display: block;
            line-height: 60px;
            text-align: center;
            border-radius: 4px
        }

        /** 消息列表样式 */
        .message-tab {
            padding: 5px 0 0 0;
            margin: 0
        }

        .message-tab .layui-tab-title {
            text-align: center
        }

        .message-tab .layui-tab-content {
            padding: 5px 0 0 0
        }

        .message-list {
            overflow: auto
        }

        .message-list-item {
            padding: 10px 24px;
            border-bottom: 1px solid #e8e8e8;
            -ms-flex-align: start;
            align-items: flex-start;
            display: flex;
            -ms-flex: 1 1;
            flex: 1 1
        }

        .message-btn-clear:hover,
        .message-btn-more:hover,
        .message-list-item:hover {
            background: #f2f2f2
        }

        .message-item-icon {
            width: 40px;
            height: 40px;
            margin-right: 16px;
            display: block;
            margin-top: 4px
        }

        .message-item-right {
            display: block;
            flex: 1 0;
            line-height: 24px
        }

        .message-item-title {
            font-size: 14px;
            color: rgba(0, 0, 0, .65)
        }

        .message-item-text {
            color: rgba(0, 0, 0, .45);
            font-size: 12px
        }

        .message-btn-clear,
        .message-btn-more {
            display: block;
            padding: 10px 5px;
            text-align: center;
            line-height: 24px;
            color: #333
        }

        .message-btn-clear {
            background: #fff;
            border-top: 1px solid #e8e8e8
        }

        .message-btn-more {
            color: #666;
            font-size: 13px
        }

        .message-list-empty {
            text-align: center;
            color: rgba(0, 0, 0, .45);
            padding: 73px 0 88px;
            display: none;
        }

        .message-list-empty img {
            height: 76px;
            margin-bottom: 16px
        }

        /** 便签样式 */
        .note-wrapper {
            padding-left: 15px;
            margin-bottom: 10px;
            padding-top: 15px;
        }

        .note-item {
            width: 113px;
            height: 100px;
            display: inline-block;
            margin: 0 6px 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            position: relative;
            cursor: pointer
        }

        .note-item:hover {
            background-color: #f1f1f1
        }

        .note-item .note-item-content {
            font-size: 14px;
            color: #666;
            height: 78px;
            overflow: hidden;
            word-wrap: break-word
        }

        .note-item .note-item-time {
            font-size: 12px;
            color: #999;
            margin-top: 10px
        }

        .note-empty {
            text-align: center;
            color: rgba(0, 0, 0, .45);
            padding: 73px 0 88px;
            display: none
        }

        .note-empty .layui-icon {
            margin-bottom: 10px;
            display: inline-block;
            font-size: 60px
        }

        .note-item-del {
            position: absolute;
            right: 3px;
            top: 3px;
            display: none;
            color: #ff5722
        }

        .note-item-del.show {
            display: inline-block
        }

        .note-item-del .layui-icon {
            font-size: 22px
        }

        .layui-layer-admin textarea {
            width: 260px;
            height: 112px;
            color: #666666;
            word-wrap: break-word;
            resize: none;
            margin: 20px 5px;
            margin-bottom: 0;
            border: none;
            padding: 0 10px;
            overflow: hidden;
        }

        /** 单色导航图标 */
        @font-face {
            font-family: easyxin-icon-nav;
            src: url(/font/nav/iconfont.eot);
            src: url(/font/nav/iconfont.eot?#iefix) format('embedded-opentype'), url(/font/nav/iconfont.woff2) format('woff2'), url(/font/nav/iconfont.woff) format('woff'), url(/font/nav/iconfont.ttf) format('truetype'), url(/font/nav/iconfont.svg#easyxin-icon-nav) format('svg')
        }

        .easyxin-icon-nav {
            font-family: easyxin-icon-nav !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .easyxin-icon-nav-anpaipaiche:before {
            content: "\e60a"
        }

        .easyxin-icon-nav-gongchengguanli:before {
            content: "\e609"
        }

        .easyxin-icon-nav-zichanguanli:before {
            content: "\e608"
        }

        .easyxin-icon-nav-caigouguanli:before {
            content: "\e607"
        }

        .easyxin-icon-nav-cangkuguanli:before {
            content: "\e606"
        }

        .easyxin-icon-nav-yuangongguanli:before {
            content: "\e605"
        }

        .easyxin-icon-nav-dingdanguanli:before {
            content: "\e604"
        }

        .easyxin-icon-nav-wuliaoguanli:before {
            content: "\e603"
        }

        .easyxin-icon-nav-waixieguanli:before {
            content: "\e602"
        }

        /** 单色前三名 */
        @font-face {
            font-family: currency-icon-ranking;
            src: url(/font/ranking/iconfont.eot);
            src: url(/font/ranking/iconfont.eot?#iefix) format('embedded-opentype'), url(/font/ranking/iconfont.woff2) format('woff2'), url(/font/ranking/iconfont.woff) format('woff'), url(/font/ranking/iconfont.ttf) format('truetype'), url(/font/ranking/iconfont.svg#currency-icon-ranking) format('svg')
        }

        .currency-icon-ranking {
            font-family: currency-icon-ranking !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .currency-icon-ranking-fuben3:before {
            content: "\e60d"
        }

        .currency-icon-ranking-fuben2:before {
            content: "\e60c"
        }

        .currency-icon-ranking-fuben1:before {
            content: "\e60b"
        }

        .currency-icon-ranking-huangguan:before {
            content: "\e601"

        }
    </style>
</head>

<body>
    <div class="layui-body">
        <div class="layui-fluid ew-console-wrapper">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <p style="font-size:14px;color: rgba(0,0,0,.45);">总订单金额
                                <span class="pull-right">
                                    <i class="ri-exchange-cny-fill ri-xl" style="vertical-align: -0.3em;"></i>
                                </span>
                            </p>
                            <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥&nbsp;</span>85,84787
                            </p>
                            <div style="height: 40px;">
                                <p>
                                    <span style="margin-right: 30px;">周同比 17% &nbsp;
                                        <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" width="24" height="24">
                                            <path fill="none" d="M0 0h24v24H0z" />
                                            <path d="M12 8l6 6H6z" fill="rgba(231,76,60,1)" /></svg>
                                    </span>
                                    <span>日同比 11% &nbsp;
                                        <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" width="24" height="24">
                                            <path fill="none" d="M0 0h24v24H0z" />
                                            <path d="M12 16l-6-6h12z" fill="rgba(47,204,113,1)" /></svg>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">日销售金额<span
                                style="padding: 0 12px;">¥&nbsp;63 万元</span></p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <p style="font-size:14px;color: rgba(0,0,0,.45);">访问量
                                <span class="pull-right">
                                    <i class="ri-funds-line ri-xl" style="vertical-align: -0.3em;"></i>
                                </span>
                            </p>
                            <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;"></span>92,648
                            </p>
                            <div style="height: 40px;" id="ECharts01">

                            </div>
                        </div>
                        <p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">
                            日访问量<span style="padding: 0 10px;">1675</span>
                            <span style="margin-left: 20px;">日同比 26% &nbsp;
                                <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24" width="24" height="24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path d="M12 8l6 6H6z" fill="rgba(231,76,60,1)" /></svg>
                            </span>
                        </p>

                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <p style="font-size:14px;color: rgba(0,0,0,.45);">活跃用户
                                <span class="pull-right">
                                    <i class="ri-ghost-2-line ri-xl" style="vertical-align: -0.3em;"></i>
                                </span>
                            </p>
                            <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;"></span>12684
                            </p>
                            <div style="height: 40px;" id="ECharts02">

                            </div>
                        </div>
                        <p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">
                            今日活跃用户<span style="padding: 0 10px;">782</span>
                            <span style="margin-left: 20px;">日同比 6% &nbsp;
                                <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24" width="24" height="24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path d="M12 16l-6-6h12z" fill="rgba(47,204,113,1)" /></svg>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <p style="font-size:14px;color: rgba(0,0,0,.45);">总支出金额
                                <span class="pull-right">
                                    <i class="ri-hand-coin-line ri-xl" style="vertical-align: -0.3em;"></i>
                                </span>
                            </p>
                            <div class="layui-row" style="height: 96px;">
                                <div style="width: 40%;height: 100%;float: left;">
                                    <p class="lay-big-font"><span
                                            style="font-size: 26px;line-height: 1;">¥&nbsp;</span>4675217
                                    </p>
                                    <p>
                                        <span>周同比12% &nbsp;
                                            <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
                                                viewBox="0 0 24 24" width="24" height="24">
                                                <path fill="none" d="M0 0h24v24H0z" />
                                                <path d="M12 8l6 6H6z" fill="rgba(231,76,60,1)" /></svg>
                                        </span>
                                    </p>
                                </div>
                                <div style="width:60%;height: 100%;float: left;" id="ECharts03">

                                </div>
                            </div>
                        </div>
                        <p style="padding: 10px 15px 0px 15px;border-top: 1px solid #f0f0f0;">今日总支出<span
                                style="padding: 0 10px;">68541</span></p>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm8">
                    <div class="layui-row">
                        <div class="layui-card">
                            <div class="layui-card-header">全国用户分布</div>
                            <div class="layui-card-body">
                                <div id="ECharts04" style="min-height: 420px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-row ">
                        <div class="layui-card">
                            <div class="layui-card-header">科目通过人数比例</div>
                            <div class="layui-card-body">
                                <div id="ECharts05" style="min-height: 420px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-lg8 layui-col-md7">
                    <div class="layui-card">
                        <div class="layui-card-header">2018年 - 2019年 | 销售趋势</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div id="ECharts06" style="min-height: 220px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-card">
                        <div class="layui-card-header">登录日志</div>
                        <div class="layui-card-body">
                            <table class="layui-table"
                                lay-data="{height:384, url:'/data/user/loginlog.json', page:true, limit: 10 ,skin: 'line', even: true,size: 'sm'}"
                                lay-filter="test">
                                <thead>
                                    <tr>
                                        <th lay-data="{field:'userName'}">用户名</th>
                                        <th lay-data="{field:'IP'}">IP</th>
                                        <th lay-data="{field:'status'}">状态</th>
                                        <th lay-data="{field:'creationTime', sort: true}">登陆时间</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-lg4 layui-col-md5">
                    <div class="layui-card">
                        <div class="layui-card-header">安全情况</div>
                        <div class="layui-card-body">
                            <div id="ECharts07" style="min-height: 260px;"></div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">最新订单</div>
                        <div class="layui-card-body">
                            <table class="layui-table layui-text">
                                <colgroup>
                                    <col width="80">
                                    <col>
                                    <col width="90">
                                    <col>
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <td>订货单</td>
                                        <td>Y20200824</td>
                                        <td>下单客户</td>
                                        <td><span class="layui-badge layui-badge-red">张三</span></td>
                                    </tr>
                                    <tr>
                                        <td>订货单</td>
                                        <td>Y20200824</td>
                                        <td>下单客户</td>
                                        <td><span class="layui-badge layui-badge-yellow">李四</span></td>
                                    </tr>
                                    <tr>
                                        <td>订货单</td>
                                        <td>Y20200824</td>
                                        <td>下单客户</td>
                                        <td><span class="layui-badge layui-badge-green">王五</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">星级客户</div>
                        <div class="layui-card-body">
                            <div class="console-user-group">
                                <div class="console-user-group-head">
                                    <i class="ri-trophy-line ri-2x" style="color: #1890ff;"></i>
                                </div>
                                <div class="console-user-group-name">王五</div>
                                <div class="console-user-group-desc">13800000000</div>
                                <span class="layui-badge layui-badge-blue">￥684104.00</span>
                            </div>
                            <div class="console-user-group">
                                <div class="console-user-group-head">
                                    <i class="ri-medal-line ri-2x" style="color: #faad14;"></i>
                                </div>
                                <div class="console-user-group-name">张三</div>
                                <div class="console-user-group-desc">13800000000</div>
                                <span class="layui-badge layui-badge-yellow">￥475211.00</span>
                            </div>
                            <div class="console-user-group">
                                <div class="console-user-group-head">
                                    <i class="ri-award-line ri-2x" style="color: #52c41a;"></i>
                                </div>
                                <div class="console-user-group-name">李四</div>
                                <div class="console-user-group-desc">13800000000</div>
                                <span class="layui-badge layui-badge-green">￥207457.00</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.min.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>


    <script>
        layui.use('table', function () {
            var table = layui.table;
        })
    </script>

    <script>
        var ECharts01 = echarts.init(document.getElementById('ECharts01'));
        var option01 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            grid: {
                top: 2,
                left: 0,
                right: 0,
                bottom: 0,
                containLabel: true
            },
            xAxis: [{
                show: false,
                data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
            }],
            yAxis: [{
                show: false,
                type: 'value',
                data: ['13:00', '13:00', '13:00', '13:05', '13:10', '13:00', '13:05', '13:10', '13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35',]

            }],
            series: [{
                name: 'PV',
                type: 'line',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#16D9F0"
                    }
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(22,217,240, 1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(22,217,240, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#16D9F0',
                    },
                    emphasis: {
                        show: true,
                        borderWidth: 1,
                    },
                },
                data: ['2', '156', '129', '3', '126', '7', '99', '143', '50', '180', '67', '142',],
            }]
        };
        ECharts01.setOption(option01);


        var ECharts02 = echarts.init(document.getElementById('ECharts02'));
        var option02 = {
            color: ['#60ABFC',],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'horizontal',
                data: ['2020-8-13', '2020-8-14', '2020-8-15', '2020-8-16', '2020-8-17', '2020-8-18', '2020-8-19', '2020-8-20', '2020-8-21', '2020-8-22'],
                textStyle: {
                    color: '#858FA6',
                    fontFamily: 'Microsoft YAHei,serf'
                }
            },
            grid: {
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                containLabel: true
            },
            xAxis: {
                data: ['2020-8-13', '2020-8-14', '2020-8-15', '2020-8-16', '2020-8-17', '2020-8-18', '2020-8-19', '2020-8-20', '2020-8-21', '2020-8-22'],
                axisLabel: {
                    show: false,
                    color: '#858fa6'
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        width: 1,
                        color: '#E2E2E2'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 1,
                        color: '#E2E2E2'
                    }
                }
            },
            yAxis: {
                data: [],
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        width: 1,
                        color: '#E2E2E2'
                    }
                },
                axisLabel: {
                    color: '#858fa6'
                },
                axisLine: {
                    lineStyle: {
                        width: 0,
                        color: '#E2E2E2',
                        show: false
                    }
                }
            },
            series: [{
                name: '数量',
                type: 'bar',
                data: [119, 102, 126, 118, 107, 100, 104, 80, 140, 100],
                barGap: 0,
                barWidth: '60%'
            }]
        };
        ECharts02.setOption(option02);


        var ECharts03 = echarts.init(document.getElementById('ECharts03'));
        var option03 = {
            color: ['#4956ff', '#2d82ff', '#2dc6ff', '#2fca95', '#f4d040'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [{
                name: '2020年度',
                type: 'pie',
                radius: ['10%', '90%'],
                center: ['50%', '50%'],
                roseType: 'radius',
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 103, 255, 0.2)',
                    shadowOffsetX: -5,
                    shadowOffsetY: 5,
                },
                data: [{
                    value: 10000,
                    name: '其他'
                },
                {
                    value: 15000,
                    name: '漏款'
                },
                {
                    value: 20000,
                    name: '补贴'
                },
                {
                    value: 25000,
                    name: '聚餐'
                },
                {
                    value: 30000,
                    name: '活动'
                },
                {
                    value: 35000,
                    name: '投资'
                },
                {
                    value: 40000,
                    name: '工资'
                },
                {
                    value: 45,
                    name: 'rose8'
                }
                ]
            },

            ]
        };
        ECharts03.setOption(option03);


        var outname = ["南海诸岛", '北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门'];
        var outvalue = [0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 6398, 41, 0, 484, 404, 22, 3, 5, 225];
        var outdata = [];
        for (var i = 0; i < outname.length; i++) {
            outdata.push({
                name: outname[i],
                value: outvalue[i]
            })
        }
        var option04 = {
            tooltip: {
                show: true,
                formatter: function (params) {
                    return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '人&nbsp;&nbsp;';
                }
            },
            visualMap: {
                type: 'piecewise',
                left: '15',
                bottom: '15',
                itemWidth: 27,
                itemHeight: 15,
                textStyle: {
                    color: '#333333',
                    fontSize: 14,
                },
                pieces: [{
                    min: 500,
                    label: '>500',
                }, {
                    max: 500,
                    min: 200,
                    label: '200-500',
                }, {
                    max: 200,
                    min: 0,
                    label: '<200',
                }, {
                    value: 0,
                    label: '无数据',
                },],
                inRange: {
                    color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8']
                },
                outOfRange: {
                    color: ['#999999']
                }
            },
            geo: {
                map: 'china',
                show: true,
                roam: false,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0,63,140,0.2)',
                        shadowColor: 'rgba(0,63,140,0.2)',
                        shadowOffsetY: 20,
                        shadowBlur: 30
                    }
                }
            },
            series: [{
                type: 'map',
                map: 'china',
                aspectScale: 0.75,
                //zoom:1.1,
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false,
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#B2CAE0',
                        borderColor: '#fff',
                        borderWidth: 1,
                    },
                    emphasis: {
                        areaColor: '#FFAE00',
                    }
                },
                data: outdata
            }]
        };
        var ECharts04 = echarts.init(document.getElementById('ECharts04'));
        ECharts04.setOption(option04);


        let legendData = ['科目七', '科目六', '科目五', '科目四', '科目三', '科目二', '科目一']
        // 预约数
        let seriesData1 = [434, 231, 112, 140, 256, 341, 97]
        // 已考试数
        let seriesData2 = [200, 150, 100, 40, 210, 82, 62]
        // 计算百分比
        let seriesData3 = []
        let seriesData4 = []
        for (let i in seriesData1) {
            seriesData3.push(Math.round(seriesData2[i] / seriesData1[i] * 10000) / 100)
            seriesData4.push(100)
        }
        var option05 = {
            grid: {
                left: 120,
                top: 0,
                bottom: 0,
                right: 60
            },
            yAxis: [{
                type: 'category',
                data: legendData,
                axisPointer: {
                    type: 'line'
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        fontSize: 14,
                    },
                    formatter: function (value, index) {
                        let res = '{grey|' + value + '}{blue|' + seriesData3[index] + '%}';
                        return res;
                    },
                    rich: {
                        blue: {
                            color: '#6bb6fd',
                            width: 60,
                            align: 'right',
                        },
                        grey: {
                            color: '#adb1b3'
                        }
                    }
                },
            }],
            xAxis: [{
                min: 0,
                max: 100,
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: [{
                type: 'bar',
                data: seriesData3,
                barWidth: '12px',
                z: 100,
                itemStyle: {
                    normal: {
                        color: '#2c96f8',
                        barBorderRadius: [10, 10, 10, 10],
                    }
                }
            },
            {
                name: '进度条背景',
                type: 'bar',
                barGap: '-100%',
                data: seriesData4,
                barWidth: 12,
                itemStyle: {
                    barBorderRadius: [10, 10, 10, 10],
                    color: '#f7b534'
                },
                z: 90,
                yAxisIndex: 0,
                xAxisIndex: 0,
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        distance: 10,
                        color: '#6bb6fd',
                        formatter: function (params) {
                            let res = '{blue|' + seriesData2[params.dataIndex] + '/}{orange|' + seriesData1[params.dataIndex] + '}';
                            return res;
                        },
                        rich: {
                            blue: {
                                color: '#6bb6fd'
                            },
                            orange: {
                                color: '#f7b534'
                            }
                        }
                    }
                }
            }
            ]
        };
        var ECharts05 = echarts.init(document.getElementById('ECharts05'));
        ECharts05.setOption(option05);


        var option06 = {
            backgroundColor: "#fff",
            legend: {
                show: true
            },
            grid: {
                left: '30',
                right: '0',
                top: '64',
                bottom: '30'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: "item",
                    crossStyle: {
                        color: '#999'
                    }
                },
                confine: true,
                formatter: function (params) {
                    var html = params[0].name + '月';
                    for (var i = 0; i < params.length; i++) {
                        html += '<br />' + params[i].marker + params[i].seriesName + '年：' + params[i].value;
                    }

                    return html;
                }
            },
            xAxis: [{
                type: 'category',
                name: '月',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee'
                    }
                },
                axisLabel: {
                    show: true,
                    color: '#333'
                },
                axisTick: {
                    show: false
                }
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: [
                {
                    name: '2018',
                    type: 'bar',
                    symbol: 'bar',
                    itemStyle: {
                        normal: {
                            color: 'rgba(49,150,250,0.4)'
                        }
                    },
                    data: [3, 34, 47, 10, 20, 53, 65, 77, 40, 20, 73, 45]
                },
                {
                    name: '2019',
                    type: 'bar',
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            color: 'rgba(49,150,250,1)'
                        }
                    },
                    data: [3, 34, 47, 10, 20, 53, 65, 77, 40, 20, 73, 45]
                }
            ]
        };
        var ECharts06 = echarts.init(document.getElementById('ECharts06'));
        ECharts06.setOption(option06);


        var option07 = {
            color: ['#327bfa', '#35b1fa', '#62d56b', '#ffb84f', '#ff7a32'],
            tooltip: {
                trigger: 'item',
                formatter: "{a}:{b} <br/>占比:{d}%<br/>点击查看详情->"
            },
            legend: {
                show: true,
                orient: 'horizontal',
                x: 'center',
                y: 'bottom',
                data: ['优秀', '安全', '良好', '警示', '严重警示'],

            },
            grid: {
                top: 'bottom',
                left: '90',
                width: '90%',
                height: '80%',

            },
            series: [
                {
                    name: '健康度22等级',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['30%', '55%'],
                    label: {
                        normal: {
                            formatter: '{b|{b}}',
                            rich: {
                                b: {
                                    fontSize: 16,
                                    lineHeight: 30
                                }

                            }
                        }
                    },
                    data: [

                        { value: 310, name: '优秀' },
                        { value: 310, name: '安全' },
                        { value: 251, name: '良好' },
                        { value: 147, name: '警示' },
                        { value: 102, name: '严重警示' }
                    ]
                }
            ]
        };
        var ECharts07 = echarts.init(document.getElementById('ECharts07'));
        ECharts07.setOption(option07);

        
        // 宽度改变后350ms 进行刷新图表的大小
        // 为了解决点击侧边伸缩造成卡顿情况
        let time = performance.now();
        const timeout = 350;
        window.addEventListener('resize', function () {
            const now = performance.now()
            if (now - time > timeout) {
               setTimeout(() => {
                    ECharts01.resize();
                    ECharts02.resize();
                    ECharts03.resize();
                    ECharts04.resize();
                    ECharts05.resize();
                    ECharts06.resize();
                    ECharts07.resize();
                }, timeout);
            }
            time = now;
        });


    </script>
</body>

</html>