Nuxt3服务端渲染elementplus黑暗模式（二）

　　有了上一章的基础，接下来我们来引入我们开发所需要的UI组件elementplus，实现顶部和底部整体布局以及配置黑暗模式。效果如下：
　　基础模式
　　黑暗模式
　　一、引入组件安装elementplus1、npminstallelementplussave安装elementplusicons图标库2、npminstallelementplusicons
　　二、然后在我们的plugins创建elementplus。client。ts文件。注意：如果我们在文件命名时加上。client，例如elementplus。client。ts，此时代表该插件只在客户端加载importasElementPlusfromelementplusdistindex。fullimportzhCnfromelementpluseslocalelangzhcntsignoreimport｛defineNuxtPlugin｝fromappexportdefaultdefineNuxtPlugin（nuxtApp｛nuxtApp。vueApp。use（ElementPlus，｛locale：zhCn，｝）｝）
　　三、找到我们的整体布局组件default。vue，我们来使用一下引入的elementplus，看是否引入成功。（我做了一个简单布局，使用了scss，所以复制的时候需要大家提前安装一下scss）
　　1、首先处理顶部布局，在这里我没增加一个城市下啦选择功能
　　首先引入elementchinaareadatanpminstallelementchinaareadata
　　其次我们在plugins引入城市选择插件。新建city。client。tsimport｛regionData，CodeToText，TextToCode｝fromelementchinaareadatatsignoreimport｛defineNuxtPlugin｝fromappexportdefaultdefineNuxtPlugin（nuxtApp｛tsignorereturnnuxtApp。vueApp。use（regionData）return｛provide：｛regionData，CodeToText，TextToCode｝｝｝）
　　最后我们在default。vue引入const｛router，regionData，TextToCode，CodeToText｝useNuxtApp（）使用consthandleChange（value）｛ruleForm。regionCodeToText〔value〔0〕〕CodeToText〔value〔1〕〕CodeToText〔value〔2〕〕ruleForm。shengCodeToText〔value〔0〕〕ruleForm。shiCodeToText〔value〔1〕〕ruleForm。xianCodeToText〔value〔2〕〕｝默认赋值state。selectedOptions〔TextToCode〔河南省〕。code，TextToCode〔河南省〕〔郑州市〕。code，TextToCode〔河南省〕〔郑州市〕〔金水区〕。code〕
　　2、接下来我们言归正传，我们来在顶部引入一个模式切换组件。如图：
　　新增模式切换功能
　　首先我们引入图标及切换组件：引入我们需要的图标import｛Moon，Sunny，Search｝fromelementplusiconsvue引入样式文件importthemefromutilsthemeimport｛colorMix｝fromutilstool在页面使用elswitchclasschangeicovmodelisDarksizesmallinlinepromptstyleelswitchoncolor：f2f2f2；elswitchoffcolor：141414：activeiconSunny：inactiveiconMoonchangethemeChange设置switch的背景颜色constblackColorvar（bgcolormute）constthemeColorObj｛defaultTheme：｛title：浅色主题｝，darkTheme：｛title：深色主题｝｝模式切换事件constthemeChange（val：boolean）｛if（val）｛state。currentSkinNamedefaultThemeswitchTheme（state。currentSkinName）｝else｛state。currentSkinNamedarkThemeswitchTheme（state。currentSkinName）｝｝constswitchTheme（type？：string）｛typetypedarkThemeconstcolorObjtheme〔type〕for（leti1；i10；i1）｛colorObj〔elcolorprimarylight｛10i｝〕colorMix（colorObj〔elcolorwhite〕，colorObj〔elcolorprimary〕，i0。1）｝Object。keys（colorObj）。map（item｛document。documentElement。style。setProperty（item，colorObj〔item〕）｝）｝
　　3、事件处理完毕，接下来我们就需要配置主题的样式
　　首先：在utils创建样式文件theme。ts及tool。ts，我们只处理两种模式，如果要多种可自行拓展，完整代码如下：可以直接拷贝到自己项目中，也可以在最下方直接下载
　　theme。tsexportdefault｛defaultTheme：｛elbackgroundcolorbase：ffffff，elcolorwhite：ffffff，eltextcolorbar：ffffff，elcolorblack：ffffff，elcolorprimary：409eff，elnavbarbg：0440D7，导航elsliderbg：0440D7，elbackgroundtopcolor：e3e4e5，elboxcolorbase：f5f7fa，分类框ellogobg：333，logoelenbg：666666，英文bgcolormute：f2f2f2，模式切换按钮eltextcolorcls：666666，顶部选项颜色eltextcolorth：rgba（0，0，0，0。3），最次要文字颜色elcolorprimarylight1：53a8ff，elcolorprimarylight2：66b1ff，elcolorprimarylight3：79bbff，elcolorprimarylight4：8cc5ff，elcolorprimarylight5：a0cfff，elcolorprimarylight6：b3d8ff，elcolorprimarylight7：c6e2ff，elcolorprimarylight8：d9ecff，elcolorprimarylight9：ecf5ff，elinputbgcolor：fff，输入框背景色elfillcolorblank：fff，elselectbox：fff，下拉框BGelselectboxactive：fff，下拉框激活BGelinputbordercolor：00adff，下拉边框elhoverbgcolor：2590F9，鼠标放入背景色elswitchbg：f2f2f2，模式切换elswitchcolor：666666，模式颜色elfooterbg：F6F7F8，底部颜色elbtncolor：ffffff，按钮颜色elcolorsuccess：67c23a，elcolorsuccesslight：e1f3d8，elcolorsuccesslighter：f0f9eb，elcolorwarning：e6a23c，elcolorwarninglight：faecd8，elcolorwarninglighter：fdf6ec，elcolordanger：f56c6c，elcolordangerlight：fde2e2，elcolordangerlighter：fef0f0，elcolorerror：f56c6c，elcolorerrorlight：fde2e2，elcolorerrorlighter：fef0f0，elcolorinfo：909399，elcolorinfolight：e9e9eb，elcolorinfolighter：f4f4f5，eltextcolorprimary：303133，eltextcolorregular：606266，eltextcolorsecondary：909399，eltextcolorplaceholder：c0c4cc，elbordercolorbase：dcdfe6，elbordercolorlight：e4e7ed，elbordercolorlighter：ebeef5，elbordercolorextralight：f2f6fc，colorinputbg：f4f5f5，colorinputerrorbg：ffece8，colorinputplaceholder：86909c，colorinputtext：4e5969，colorinputicon：f53f3f，elpopupmodalbackgroundcolor：var（elcolorblack），elpopupmodalopacity：。5，elborderwidthbase：1px，elborderstylebase：solid，elbordercolorhover：var（eltextcolorplaceholder），elborderbase：var（elborderwidthbase）var（elborderstylebase）var（elbordercolorbase），elborderradiusbase：4px，elborderradiussmall：2px，elborderradiusround：20px，elborderradiuscircle：100，elboxshadowbase：02px4pxrgba（0，0，0，。12），006pxrgba（0，0，0，。04），elboxshadowlight：02px12px0rgba（0，0，0，。1），elsvgmonochromegrey：dcdde0，elfillbase：var（elcolorwhite），elfontsizeextralarge：20px，elfontsizelarge：18px，elfontsizemedium：16px，elfontsizebase：14px，elfontsizesmall：13px，elfontsizeextrasmall：12px，elfontweightprimary：500，elfontlineheightprimary：24px，elfontcolordisabledbase：bbb，elindexnormal：1，elindextop：1000，elindexpopper：2000，eldisabledfillbase：var（elbackgroundcolorbase），eldisabledcolorbase：var（eltextcolorplaceholder），eldisabledborderbase：var（elbordercolorlight），eltransitionduration：。3s，eltransitiondurationfast：。2s，eltransitionfunctioneaseinoutbezier：cubicbezier（。645，。045，。355，1），eltransitionfunctionfastbezier：cubicbezier（。23，1，。32，1），eltransitionall：allvar（eltransitionduration）var（eltransitionfunctioneaseinoutbezier），eltransitionfade：opacityvar（eltransitionduration）var（eltransitionfunctionfastbezier），eltransitionmdfade：transformvar（eltransitionduration）var（eltransitionfunctionfastbezier），opacityvar（eltransitionduration）var（eltransitionfunctionfastbezier），eltransitionfadelinear：opacityvar（eltransitiondurationfast）linear，eltransitionborder：bordercolorvar（eltransitiondurationfast）var（eltransitionfunctioneaseinoutbezier），eltransitioncolor：colorvar（eltransitiondurationfast）var（eltransitionfunctioneaseinoutbezier）｝，darkTheme：｛elcolorprimary：409eff，主题色elbackgroundtopcolor：262727，elboxcolorbase：262727，分类框elbackgroundcolorbase：14161a，基础背景色elcolorwhite：1d1e1f，基础白色elcolorblack：262727，基础黑色elnavbarbg：14161a，导航色elswitchbg：2c2c2c，模式切换ellogobg：fff，logoelsliderbg：1B222C，elenbg：fff，英文elbtncolor：E5EAF3，按钮颜色eltextcolorbar：ffffff，eltextcolorprimary：FAFAFA，主要文字颜色eltextcolorregular：FAFAFA，常规文字颜色eltextcolorplaceholder：c0c4cc，占位文字颜色eltextcolorsecondary：rgba（255，255，255，0。5），次要文字颜色eltextcolorth：rgba（255，255，255，0。3），最次要文字颜色eltextcolorcls：fff，顶部选项颜色elbordercolorbase：4C4D4F，一级边框颜色elbordercolorlight：414243，二级边框颜色elbordercolorlighter：363637，三级边框颜色elbordercolorextralight：2B2B2C，四级边框颜色elinputbgcolor：2c2c2c，输入框背景色elfillcolorblank：414243，elselectbox：4C4D4F，下拉框BGelselectboxactive：414243，下拉框激活BGelinputbordercolor：fff，下拉边框elswitchcolor：ffffff，模式颜色elfooterbg：rgba（255，255，255，0。02），底部颜色bgcolormute：2c2c2c，模式切换按钮elhoverbgcolor：2590F9，鼠标放入背景色elcolorsuccess：67c23a，成功颜色elcolorsuccesslight：e1f3d8，elcolorsuccesslighter：f0f9eb，elcolorwarning：e6a23c，警告颜色elcolorwarninglight：faecd8，elcolorwarninglighter：fdf6ec，elcolordanger：f56c6c，危险颜色elcolordangerlight：fde2e2，elcolordangerlighter：fef0f0，elcolorerror：f56c6c，错误颜色elcolorerrorlight：fde2e2，elcolorerrorlighter：fef0f0，elcolorinfo：7B88A9，信息颜色elcolorinfolight：e9e9eb，elcolorinfolighter：f4f4f5，colorinputbg：f4f5f5，input输入框colorinputerrorbg：ffece8，colorinputplaceholder：86909c，colorinputtext：4e5969，colorinputicon：f53f3f，elsvgmonochromegrey：dcdde0，elfontcolordisabledbase：bbb，elpopupmodalbackgroundcolor：var（elcolorblack），elpopupmodalopacity：。5，elborderwidthbase：1px，elborderstylebase：solid，elbordercolorhover：var（eltextcolorplaceholder），elborderbase：var（elborderwidthbase）var（elborderstylebase）var（elbordercolorbase），elborderradiusbase：4px，elborderradiussmall：2px，elborderradiusround：20px，elborderradiuscircle：100，elboxshadowbase：02px4pxrgba（0，0，0，。12），006pxrgba（0，0，0，。04），elboxshadowlight：02px12px0rgba（0，0，0，。1），elfillbase：var（elcolorwhite），elfontsizeextralarge：20px，elfontsizelarge：18px，elfontsizemedium：16px，elfontsizebase：14px，elfontsizesmall：13px，elfontsizeextrasmall：12px，elfontweightprimary：500，elfontlineheightprimary：24px，elindexnormal：1，elindextop：1000，elindexpopper：2000，eldisabledfillbase：var（elbackgroundcolorbase），eldisabledcolorbase：var（eltextcolorplaceholder），eldisabledborderbase：var（elbordercolorlight），eltransitionduration：。3s，eltransitiondurationfast：。2s，eltransitionfunctioneaseinoutbezier：cubicbezier（。645，。045，。355，1），eltransitionfunctionfastbezier：cubicbezier（。23，1，。32，1），eltransitionall：allvar（eltransitionduration）var（eltransitionfunctioneaseinoutbezier），eltransitionfade：opacityvar（eltransitionduration）var（eltransitionfunctionfastbezier），eltransitionmdfade：transformvar（eltransitionduration）var（eltransitionfunctionfastbezier），opacityvar（eltransitionduration）var（eltransitionfunctionfastbezier），eltransitionfadelinear：opacityvar（eltransitiondurationfast）linear，eltransitionborder：bordercolorvar（eltransitiondurationfast）var（eltransitionfunctioneaseinoutbezier），eltransitioncolor：colorvar（eltransitiondurationfast）var（eltransitionfunctioneaseinoutbezier）｝｝
　　tool。tsexportconstcolorMix（color1，color2，weight）｛weightMath。max（Math。min（Number（weight），1），0）letr1parseInt（color1。substring（1，3），16）letg1parseInt（color1。substring（3，5），16）letb1parseInt（color1。substring（5，7），16）letr2parseInt（color2。substring（1，3），16）letg2parseInt（color2。substring（3，5），16）letb2parseInt（color2。substring（5，7），16）letr：numberstringMath。round（r1（1weight）r2weight）letg：numberstringMath。round（g1（1weight）g2weight）letb：numberstringMath。round（b1（1weight）b2weight）r（0（r0）。toString（16））。slice（2）g（0（g0）。toString（16））。slice（2）b（0（b0）。toString（16））。slice（2）｝
　　最后我们来简单配置一下公共样式和模式切换重置公共样式：在assetscss创建common。cssresetElStyle。scss
　　resetElStyle。scss。mt10｛margintop：10｝body｛background：var（elcolorblack）｝。maincolor｛backgroundcolor：var（elbackgroundcolorbase）；｝。elbasecolor｛backgroundcolor：var（elbackgroundtopcolor）；｝。elmenuitem｛borderbottom：none！｝。rightmenu。rightmenuitem｛width：62height：62backgroundcolor：var（elsliderbg）；borderradius：6overflow：｝。rightmenuitem。rightmenuqrcode。qrcodebox｛background：var（elsliderbg）；padding：5px｝。rightmenuitem。rightmenuqrcodep｛padding：12px05px0；textalign：color：fontsize：12px｝。logoWall。logoanimate｛width：100；height：450background：var（elbackgroundcolorbase）；position：｝body｛p｛color：var（eltextcolorprimary）｝span｛color：var（eltextcolorprimary）｝。changeico｛marginleft：22width：42height：24｝。changeico。elswitchaction｛backgroundcolor：var（elswitchcolor）！｝。changeico。elicon｛fontsize：16color：var（elswitchcolor）！｝下拉框。elscrollbar｛background：var（elselectbox）；。selected｛background：var（elselectboxactive）；color：var（elcolorprimary）；｝。elselectdropdownitem。hover，。elselectdropdownitem：hover｛background：var（elselectboxactive）；color：var（elcolorprimary）；｝｝数字输入框。elinputnumberdecrease，。elinputnumberincrease｛background：var（elcolorblack）｝复合输入框。elinputgroupappend，。elinputgroupprepend｛border：1pxsolidvar（elbordercolorbase）；borderright：｝日期选择eldatepicker。elpickerpanel｛border：1pxsolidvar（elbordercolorlight）；background：var（elcolorblack）｝日期和时间范围。eldateeditor。elrangeinput｛background：var（elcolorwhite）｝。elpickerpanelfooter｛background：var（elcolorblack）｝时间选择。eltimepanelcontent｛。eltimespinneritem：hover，。elscrollbarthumb：hover｛background：var（elselectboxactive）｝｝表格分页。elpagination。isbackground。btnnext，。elpagination。isbackground。btnprev，。elpagination。isbackground。elpagerli｛background：var（elcolorblack）｝menu。elmenu｛borderright：｝｝
　　common。cssbody｛margin：0；｝a｛textdecoration：｝ul｛liststyle：｝h4｛fontweight：400；｝。hjcontainer｛maxwidth：1200minwidth：1100margin：0padding：022｝。hjipb｛width：6height：26marginright：12marginleft：22backgroundcolor：00｝。hjiph4｛fontsize：16px！｝keyframesimgmove｛0｛transform：scale（0。9）；开始为原始大小｝25｛transform：scale（1。3）；放大1。1倍｝50｛transform：scale（0。9）；｝75｛transform：scale（1。3）；｝｝webkitkeyframesimgmoveSafariandChrome｛0｛transform：scale（0。9）；｝25｛transform：scale（1。1）；放大1。1倍｝50｛transform：scale（0。9）；｝75｛transform：scale（1。1）；｝｝。hjblock。eltimelineitemcontent｛fontsize：14｝。hjuserlf。elmenuitem：focus，。elmenuitem：hover｛fontsize：14display：alignitems：｝。elmenuitem｛padding：04px04px！borderbottom：2pxsolidf6f6f6；｝。elmenu。elmenuhorizontal｛borderbottom：｝。elmenuhorizontal。elmenuitem。isactive｛borderbottom：2pxsolid409eff！｝。elmenutabs｛height：48｝。dplayerlogo｛maxheight：97px！maxwidth：98px！｝。elmenuhorizontal。elmenuitem：not（。isdisabled）：focus，。elmenuhorizontal。elmenuitem：not（。isdisabled）：hover｛color：｝。intro｛margin：0width：910｝。logoWall。logoanimate。standbrowser｛display：position：width：230opacity：0；height：filter：alpha（opacity0）；｝。standbrowser：hover｛cursor：｝。logoWall。logoanimate。img1｛left：330top：420animation：animate15500webkitanimation：animate15500mozanimation：animate15500msanimation：animate15500oanimation：animate15500｝。logoWall。logoanimate。img2｛left：390top：420animation：animate25500animationplaystate：webkitanimationplaystate：mozanimationplaystate：oanimationplaystate：webkitanimation：animate25500mozanimation：animate25500msanimation：animate25500oanimation：animate25500｝。logoWall。logoanimate。img3｛left：450top：420animation：animate35500animationplaystate：webkitanimationplaystate：mozanimationplaystate：oanimationplaystate：webkitanimation：animate35500msanimation：animate35500mozanimation：animate35500oanimation：animate35500｝。logoWall。logoanimate。img4｛left：450top：420animation：animate45500animationplaystate：webkitanimationplaystate：mozanimationplaystate：oanimationplaystate：webkitanimation：animate45500mozanimation：animate45500oanimation：animate45500msanimation：animate45500｝keyframesanimate1｛0｛width：30left：280top：420opacity：0；｝48｛width：100height：left：82opacity：1；｝50｛width：100height：left：80top：200opacity：1；｝52｛width：100height：left：82opacity：1；｝100｛width：40left：250top：40opacity：0；｝｝khtmlkeyframesanimate1｛0｛width：30left：280top：420opacity：0；｝48｛width：100height：left：82opacity：1；｝50｛width：100height：left：80top：200opacity：1；｝52｛width：100height：left：82opacity：1；｝100｛width：40left：250top：40opacity：0；｝｝webkitkeyframesanimate1｛0｛width：30left：280top：420opacity：0；｝48｛width：100height：left：82opacity：1；｝50｛width：100height：left：80top：200opacity：1；｝52｛width：100height：left：82opacity：1；｝100｛width：40left：250top：40opacity：0；｝｝mozkeyframesanimate1｛0｛width：30left：280top：420opacity：0；｝48｛width：100height：left：82opacity：1；｝50｛width：100height：left：80top：200opacity：1；｝52｛width：100height：left：82opacity：1；｝100｛width：40left：250top：40opacity：0；｝｝mskeyframesanimate1｛0｛width：30left：280top：420opacity：0；｝48｛width：100height：left：82opacity：1；｝50｛width：100height：left：80top：200opacity：1；｝52｛width：100height：left：82opacity：1；｝100｛width：40left：250top：40opacity：0；｝｝okeyframesanimate1｛0｛width：30left：280top：420opacity：0；｝48｛width：100height：left：82opacity：1；｝50｛width：100height：left：80top：200opacity：1；｝52｛width：100height：left：82opacity：1；｝100｛width：40left：250top：40opacity：0；｝｝keyframesanimate2｛0｛width：30left：380top：410opacity：0；｝48｛width：100height：left：292opacity：1；｝50｛width：100height：left：290opacity：1；｝52｛width：100height：left：292opacity：1；｝100｛width：40left：360top：40opacity：0；｝｝khtmlkeyframesanimate2｛0｛width：30left：380top：410opacity：0；｝48｛width：100height：left：292opacity：1；｝50｛width：100height：left：290opacity：1；｝52｛width：100height：left：292opacity：1；｝100｛width：40left：360top：40opacity：0；｝｝webkitkeyframesanimate2｛0｛width：30left：380top：410opacity：0；｝48｛width：100height：left：292opacity：1；｝50｛width：100height：left：290opacity：1；｝52｛width：100height：left：292opacity：1；｝100｛width：40left：360top：40opacity：0；｝｝mskeyframesanimate2｛0｛width：30left：380top：410opacity：0；｝48｛width：100height：left：292opacity：1；｝50｛width：100height：left：290opacity：1；｝52｛width：100height：left：292opacity：1；｝100｛width：40left：360top：40opacity：0；｝｝mozkeyframesanimate2｛0｛width：30left：380top：410opacity：0；｝48｛width：100height：left：292opacity：1；｝50｛width：100height：left：290opacity：1；｝52｛width：100height：left：292opacity：1；｝100｛width：40left：360top：40opacity：0；｝｝okeyframesanimate2｛0｛width：30left：380top：410opacity：0；｝48｛width：100height：left：292opacity：1；｝50｛width：100height：left：290opacity：1；｝52｛width：100height：left：292opacity：1；｝100｛width：40left：360top：40opacity：0；｝｝keyframesanimate3｛0｛width：30left：580top：420opacity：0；｝48｛width：100height：left：718opacity：1；｝50｛width：100height：left：720top：200opacity：1；｝52｛width：100height：left：718opacity：1；｝100｛width：40left：630top：40opacity：0；｝｝khtmlkeyframesanimate3｛0｛width：30left：580top：420opacity：0；｝48｛width：100height：left：718opacity：1；｝50｛width：100height：left：720top：200opacity：1；｝52｛width：100height：left：718opacity：1；｝100｛width：40left：630top：40opacity：0；｝｝webkitkeyframesanimate3｛0｛width：30left：580top：420opacity：0；｝48｛width：100height：left：718opacity：1；｝50｛width：100height：left：720top：200opacity：1；｝52｛width：100height：left：718opacity：1；｝100｛width：40left：630top：40opacity：0；｝｝mskeyframesanimate3｛0｛width：30left：580top：420opacity：0；｝48｛width：100height：left：718opacity：1；｝50｛width：100height：left：720top：200opacity：1；｝52｛width：100height：left：718opacity：1；｝100｛width：40left：630top：40opacity：0；｝｝mozkeyframesanimate3｛0｛width：30left：580top：420opacity：0；｝48｛width：100height：left：718opacity：1；｝50｛width：100height：left：720top：200opacity：1；｝52｛width：100height：left：718opacity：1；｝100｛width：40left：630top：40opacity：0；｝｝okeyframesanimate3｛0｛width：30left：580top：420opacity：0；｝48｛width：100height：left：718opacity：1；｝50｛width：100height：left：720top：200opacity：1；｝52｛width：100height：left：718opacity：1；｝100｛width：40left：630top：40opacity：0；｝｝keyframesanimate4｛0｛width：30left：460top：420opacity：0；｝48｛width：100height：left：508opacity：1；｝50｛width：100height：left：510opacity：1；｝52｛width：100height：left：508opacity：1；｝100｛width：40left：490top：40opacity：0；｝｝khtmlkeyframesanimate4｛0｛width：30left：460top：420opacity：0；｝48｛width：100height：left：508opacity：1；｝50｛width：100height：left：510opacity：1；｝52｛width：100height：left：508opacity：1；｝100｛width：40left：490top：40opacity：0；｝｝webkitkeyframesanimate4｛0｛width：30left：460top：420opacity：0；｝48｛width：100height：left：508opacity：1；｝50｛width：100height：left：510opacity：1；｝52｛width：100height：left：508opacity：1；｝100｛width：40left：490top：40opacity：0；｝｝mozkeyframesanimate4｛0｛width：30left：460top：420opacity：0；｝48｛width：100height：left：508opacity：1；｝50｛width：100height：left：510opacity：1；｝52｛width：100height：left：508opacity：1；｝100｛width：40left：490top：40opacity：0；｝｝mskeyframesanimate4｛0｛width：30left：460top：420opacity：0；｝48｛width：100height：left：508opacity：1；｝50｛width：100height：left：510opacity：1；｝52｛width：100height：left：508opacity：1；｝100｛width：40left：490top：40opacity：0；｝｝okeyframesanimate4｛0｛width：30left：460top：420opacity：0；｝48｛width：100height：left：508opacity：1；｝50｛width：100height：left：510opacity：1；｝52｛width：100height：left：508opacity：1；｝100｛width：40left：490top：40opacity：0；｝｝。pause｛animationplaystate：paused！webkitanimationplaystate：paused！mozanimationplaystate：paused！oanimationplaystate：paused！｝。play｛animationplaystate：running！webkitanimationplaystate：running！mozanimationplaystate：running！oanimationplaystate：running！｝。elpagination｛display：justifycontent：aligncontent：｝。eloverlay｛zindex：1000！｝。nodata｛display：justifycontent：alignitems：｝。nodataimg｛width：20；margintop：200｝
　　到此为止我们已经处理完毕，如果要在某个地方使用如下：例如backgroundcolor：var（elbackgroundcolorbase）；color：var（elcolorprimary）；
　　走到这一步我们的所有布局已经基本完成，剩下的就是具体业务需求的开发了，下一节我们来配合着黑暗模式实现一个完成的首页功能，效果如下：
　　基础模式
　　黑暗模式