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

　　有了上一章的基础 ，接下来我们来引入我们开发所需要的UI组件elementplus,实现顶部和底部整体布局以及配置黑暗模式 。效果如下：
　　基础模式
　　黑暗模式
　　一、引入组件 //安装elementplus 1、npm install element-plus --save  //安装 @element-plus/icons 图标库 2、npm install  @element-plus/icons
　　二、然后在我们的plugins创建element-plus.client.ts文件。 注意：如果我们在文件命名时加上 .client,例如 element-plus.client.ts，此时代表该插件只在客户端加载 import *  as ElementPlus from ＂element-plus/dist/index.full＂ import zhCn from ＂element-plus/es/locale/lang/zh-cn＂ // @ts-ignore import { defineNuxtPlugin } from ＂#app＂  export default defineNuxtPlugin(nuxtApp => {   nuxtApp.vueApp.use(ElementPlus, {     locale: zhCn,   }) })
　　三、找到我们的整体布局组件default.vue，我们来使用一下引入的elementplus，看是否引入成功 。(我做了一个简单布局，使用了scss,所以复制的时候需要大家提前安装一下scss)
　　1、首先处理顶部布局，在这里我没增加一个城市下啦选择功能
　　首先引入 element-china-area-datanpm install element-china-area-data
　　其次我们在plugins 引入城市选择插件。 新建 city.client.tsimport { regionData ,CodeToText,TextToCode} from ＂element-china-area-data＂ // @ts-ignore import { defineNuxtPlugin } from ＂#app＂  export default defineNuxtPlugin(nuxtApp => {     // @ts-ignore     // return nuxtApp.vueApp.use(regionData)     return {         provide: {             regionData,             CodeToText,             TextToCode         }     } })
　　最后我们在default.vue 引入const { $router, $regionData,$TextToCode, $CodeToText } = useNuxtApp()  //使用 const handleChange = (value) => {   ruleForm.region = $CodeToText[value[0]]+＂/＂+$CodeToText[value[1]]+＂/＂+$CodeToText[value[2]]   ruleForm.sheng = $CodeToText[value[0]]   ruleForm.shi = $CodeToText[value[1]]   ruleForm.xian = $CodeToText[value[2]] }  //默认赋值 state.selectedOptions = [   $TextToCode [＂河南省＂].code,   $TextToCode [＂河南省＂][＂郑州市＂].code,   $TextToCode [＂河南省＂][＂郑州市＂][＂金水区＂].code ]
　　2、接下来我们言归正传，我们来在顶部引入一个模式切换组件。如图：
　　新增模式切换功能
　　首先我们引入图标及切换组件：//引入我们需要的图标 import { Moon, Sunny,  Search} from ＂@element-plus/icons-vue＂ //引入样式文件 import theme from ＂@/utils/theme＂ import { colorMix } from ＂@/utils/tool＂  //在页面使用       // 设置switch的背景颜色 const blackColor = ＂var(--bg-color-mute)＂ const themeColorObj = {   defaultTheme: {     title: ＂浅色主题＂   },   darkTheme: {     title: ＂深色主题＂   } }  //模式切换事件  const themeChange = (val: boolean) => {   if(val){     state.currentSkinName = ＂defaultTheme＂     switchTheme( state.currentSkinName )   }else{     state.currentSkinName = ＂darkTheme＂     switchTheme(state.currentSkinName)   } } const switchTheme = (type?:string) =>{   type = type || ＂darkTheme＂   const colorObj = theme[type]   for (let i = 1; i < 10; i += 1) {     colorObj[`--el-color-primary-light-${10 - i}`] = colorMix(colorObj[＂--el-color-white＂], colorObj[＂--el-color-primary＂], i * 0.1)   }   Object.keys(colorObj).map(item => {     document.documentElement.style.setProperty(item, colorObj[item])   }) }
　　3、事件处理完毕，接下来我们就需要配置主题的样式
　　首先：在utils创建样式文件theme.ts及tool.ts，我们只处理两种模式，如果要多种可自行拓展，完整代码如下 ：可以直接拷贝到自己项目中，也可以在最下方直接下载
　　theme.ts export default {   ＂defaultTheme＂: {     ＂--el-background-color-base＂: ＂#ffffff＂,     ＂--el-color-white＂: ＂#ffffff＂,     ＂--el-text-color-bar＂:＂#ffffff＂,     ＂--el-color-black＂: ＂#ffffff＂,     ＂--el-color-primary＂: ＂#409eff＂,     ＂--el-navbar_bg＂:＂#0440D7＂,//导航     ＂--el-slider_bg＂:＂#0440D7＂,     ＂--el-background-top-color＂:＂#e3e4e5＂,     ＂--el-box-color-base＂: ＂#f5f7fa＂, // 分类框     ＂--el-logo_bg＂:＂#333＂,//logo     ＂--el-en_bg＂:＂#666666＂,//英文     ＂--bg-color-mute＂: ＂#f2f2f2＂,//模式切换按钮     ＂--el-text-color-cls＂: ＂#666666＂,//顶部选项颜色     ＂--el-text-color-th＂: ＂rgba(0, 0, 0, 0.3)＂, // 最次要文字颜色     ＂--el-color-primary-light-1＂: ＂#53a8ff＂,     ＂--el-color-primary-light-2＂: ＂#66b1ff＂,     ＂--el-color-primary-light-3＂: ＂#79bbff＂,     ＂--el-color-primary-light-4＂: ＂#8cc5ff＂,     ＂--el-color-primary-light-5＂: ＂#a0cfff＂,     ＂--el-color-primary-light-6＂: ＂#b3d8ff＂,     ＂--el-color-primary-light-7＂: ＂#c6e2ff＂,     ＂--el-color-primary-light-8＂: ＂#d9ecff＂,     ＂--el-color-primary-light-9＂: ＂#ecf5ff＂,     ＂--el-input-bg-color＂: ＂#fff＂, //输入框背景色     ＂--el-fill-color-blank＂: ＂#fff＂,     ＂--el-select-box＂:＂#fff＂,//下拉框BG     ＂--el-select-box-active＂:＂#fff＂,//下拉框激活BG     ＂--el-input-border-color＂:＂#00adff＂,//下拉边框     ＂--el-hover-bg-color＂:＂#2590F9＂,//鼠标放入背景色     ＂--el-switch_bg＂:＂#f2f2f2＂, //模式切换     ＂--el-switch-color＂:＂#666666＂,//模式颜色     ＂--el-footer-bg＂:＂#F6F7F8＂,//底部颜色     ＂--el-btn-color＂:＂#ffffff＂,//按钮颜色      ＂--el-color-success＂: ＂#67c23a＂,     ＂--el-color-success-light＂: ＂#e1f3d8＂,     ＂--el-color-success-lighter＂: ＂#f0f9eb＂,     ＂--el-color-warning＂: ＂#e6a23c＂,     ＂--el-color-warning-light＂: ＂#faecd8＂,     ＂--el-color-warning-lighter＂: ＂#fdf6ec＂,     ＂--el-color-danger＂: ＂#f56c6c＂,     ＂--el-color-danger-light＂: ＂#fde2e2＂,     ＂--el-color-danger-lighter＂: ＂#fef0f0＂,     ＂--el-color-error＂: ＂#f56c6c＂,     ＂--el-color-error-light＂: ＂#fde2e2＂,     ＂--el-color-error-lighter＂: ＂#fef0f0＂,     ＂--el-color-info＂: ＂#909399＂,     ＂--el-color-info-light＂: ＂#e9e9eb＂,     ＂--el-color-info-lighter＂: ＂#f4f4f5＂,     ＂--el-text-color-primary＂: ＂#303133＂,     ＂--el-text-color-regular＂: ＂#606266＂,     ＂--el-text-color-secondary＂: ＂#909399＂,     ＂--el-text-color-placeholder＂: ＂#c0c4cc＂,     ＂--el-border-color-base＂: ＂#dcdfe6＂,     ＂--el-border-color-light＂: ＂#e4e7ed＂,     ＂--el-border-color-lighter＂: ＂#ebeef5＂,     ＂--el-border-color-extra-light＂: ＂#f2f6fc＂,     ＂--color-input-bg＂: ＂#f4f5f5＂,     ＂--color-input-error-bg＂: ＂#ffece8＂,     ＂--color-input-placeholder＂: ＂#86909c＂,     ＂--color-input-text＂: ＂#4e5969＂,     ＂--color-input-icon＂: ＂#f53f3f＂,     ＂--el-popup-modal-background-color＂: ＂var(--el-color-black)＂,     ＂--el-popup-modal-opacity＂: ＂.5＂,     ＂--el-border-width-base＂: ＂1px＂,     ＂--el-border-style-base＂: ＂solid＂,     ＂--el-border-color-hover＂: ＂var(--el-text-color-placeholder)＂,     ＂--el-border-base＂: ＂var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base)＂,     ＂--el-border-radius-base＂: ＂4px＂,     ＂--el-border-radius-small＂: ＂2px＂,     ＂--el-border-radius-round＂: ＂20px＂,     ＂--el-border-radius-circle＂: ＂100%＂,     ＂--el-box-shadow-base＂: ＂0 2px 4px rgba(0, 0, 0, .12),0 0 6px rgba(0, 0, 0, .04)＂,     ＂--el-box-shadow-light＂: ＂0 2px 12px 0 rgba(0, 0, 0, .1)＂,     ＂--el-svg-monochrome-grey＂: ＂#dcdde0＂,     ＂--el-fill-base＂: ＂var(--el-color-white)＂,     ＂--el-font-size-extra-large＂: ＂20px＂,     ＂--el-font-size-large＂: ＂18px＂,     ＂--el-font-size-medium＂: ＂16px＂,     ＂--el-font-size-base＂: ＂14px＂,     ＂--el-font-size-small＂: ＂13px＂,     ＂--el-font-size-extra-small＂: ＂12px＂,     ＂--el-font-weight-primary＂: ＂500＂,     ＂--el-font-line-height-primary＂: ＂24px＂,     ＂--el-font-color-disabled-base＂: ＂#bbb＂,     ＂--el-index-normal＂: ＂1＂,     ＂--el-index-top＂: ＂1000＂,     ＂--el-index-popper＂: ＂2000＂,     ＂--el-disabled-fill-base＂: ＂var(--el-background-color-base)＂,     ＂--el-disabled-color-base＂: ＂var(--el-text-color-placeholder)＂,     ＂--el-disabled-border-base＂: ＂var(--el-border-color-light)＂,     ＂--el-transition-duration＂: ＂.3s＂,     ＂--el-transition-duration-fast＂: ＂.2s＂,     ＂--el-transition-function-ease-in-out-bezier＂: ＂cubic-bezier(.645, .045, .355, 1)＂,     ＂--el-transition-function-fast-bezier＂: ＂cubic-bezier(.23, 1, .32, 1)＂,     ＂--el-transition-all＂: ＂all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier)＂,     ＂--el-transition-fade＂: ＂opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier)＂,     ＂--el-transition-md-fade＂: ＂transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier)＂,     ＂--el-transition-fade-linear＂: ＂opacity var(--el-transition-duration-fast) linear＂,     ＂--el-transition-border＂: ＂border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier)＂,     ＂--el-transition-color＂: ＂color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier)＂   },   ＂darkTheme＂:{     ＂--el-color-primary＂: ＂#409eff＂, // 主题色     ＂--el-background-top-color＂:＂#262727＂,     ＂--el-box-color-base＂: ＂#262727＂, // 分类框     ＂--el-background-color-base＂: ＂#14161a＂, // 基础背景色     ＂--el-color-white＂: ＂#1d1e1f＂, // 基础白色     ＂--el-color-black＂: ＂#262727＂, // 基础黑色     ＂--el-navbar_bg＂:＂#14161a＂, //导航色     ＂--el-switch_bg＂:＂#2c2c2c＂, //模式切换     ＂--el-logo_bg＂:＂#fff＂,//logo     ＂--el-slider_bg＂:＂#1B222C＂,     ＂--el-en_bg＂:＂#fff＂,//英文     ＂--el-btn-color＂:＂#E5EAF3＂,//按钮颜色     ＂--el-text-color-bar＂:＂#ffffff＂,     ＂--el-text-color-primary＂: ＂#FAFAFA＂, // 主要文字颜色     ＂--el-text-color-regular＂: ＂#FAFAFA＂, // 常规文字颜色     ＂--el-text-color-placeholder＂: ＂#c0c4cc＂,  // 占位文字颜色     ＂--el-text-color-secondary＂: ＂rgba(255, 255, 255, 0.5)＂, // 次要文字颜色     ＂--el-text-color-th＂: ＂rgba(255, 255, 255, 0.3)＂, // 最次要文字颜色     ＂--el-text-color-cls＂: ＂#fff＂,//顶部选项颜色     ＂--el-border-color-base＂: ＂#4C4D4F＂, // 一级边框颜色     ＂--el-border-color-light＂: ＂#414243＂, // 二级边框颜色     ＂--el-border-color-lighter＂: ＂#363637＂, // 三级边框颜色     ＂--el-border-color-extra-light＂: ＂#2B2B2C＂, // 四级边框颜色     ＂--el-input-bg-color＂: ＂#2c2c2c＂, //输入框背景色     ＂--el-fill-color-blank＂: ＂#414243＂,     ＂--el-select-box＂:＂#4C4D4F＂,//下拉框BG     ＂--el-select-box-active＂:＂#414243＂,//下拉框激活BG     ＂--el-input-border-color＂:＂#fff＂,//下拉边框     ＂--el-switch-color＂:＂#ffffff＂,//模式颜色     ＂--el-footer-bg＂:＂rgba(255, 255, 255, 0.02)＂,//底部颜色     ＂--bg-color-mute＂: ＂#2c2c2c＂,//模式切换按钮     ＂--el-hover-bg-color＂:＂#2590F9＂,//鼠标放入背景色     ＂--el-color-success＂: ＂#67c23a＂, // 成功颜色     ＂--el-color-success-light＂: ＂#e1f3d8＂,     ＂--el-color-success-lighter＂: ＂#f0f9eb＂,     ＂--el-color-warning＂: ＂#e6a23c＂, // 警告颜色     ＂--el-color-warning-light＂: ＂#faecd8＂,     ＂--el-color-warning-lighter＂: ＂#fdf6ec＂,     ＂--el-color-danger＂: ＂#f56c6c＂, // 危险颜色     ＂--el-color-danger-light＂: ＂#fde2e2＂,     ＂--el-color-danger-lighter＂: ＂#fef0f0＂,     ＂--el-color-error＂: ＂#f56c6c＂, // 错误颜色     ＂--el-color-error-light＂: ＂#fde2e2＂,     ＂--el-color-error-lighter＂: ＂#fef0f0＂,     ＂--el-color-info＂: ＂#7B88A9＂, // 信息颜色     ＂--el-color-info-light＂: ＂#e9e9eb＂,     ＂--el-color-info-lighter＂: ＂#f4f4f5＂,     ＂--color-input-bg＂: ＂#f4f5f5＂, // input 输入框     ＂--color-input-error-bg＂: ＂#ffece8＂,     ＂--color-input-placeholder＂: ＂#86909c＂,     ＂--color-input-text＂: ＂#4e5969＂,     ＂--color-input-icon＂: ＂#f53f3f＂,     ＂--el-svg-monochrome-grey＂: ＂#dcdde0＂,     ＂--el-font-color-disabled-base＂: ＂#bbb＂,     ＂--el-popup-modal-background-color＂: ＂var(--el-color-black)＂,     ＂--el-popup-modal-opacity＂: ＂.5＂,     ＂--el-border-width-base＂: ＂1px＂,     ＂--el-border-style-base＂: ＂solid＂,     ＂--el-border-color-hover＂: ＂var(--el-text-color-placeholder)＂,     ＂--el-border-base＂: ＂var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base)＂,     ＂--el-border-radius-base＂: ＂4px＂,     ＂--el-border-radius-small＂: ＂2px＂,     ＂--el-border-radius-round＂: ＂20px＂,     ＂--el-border-radius-circle＂: ＂100%＂,     ＂--el-box-shadow-base＂: ＂0 2px 4px rgba(0, 0, 0, .12),0 0 6px rgba(0, 0, 0, .04)＂,     ＂--el-box-shadow-light＂: ＂0 2px 12px 0 rgba(0, 0, 0, .1)＂,     ＂--el-fill-base＂: ＂var(--el-color-white)＂,     ＂--el-font-size-extra-large＂: ＂20px＂,     ＂--el-font-size-large＂: ＂18px＂,     ＂--el-font-size-medium＂: ＂16px＂,     ＂--el-font-size-base＂: ＂14px＂,     ＂--el-font-size-small＂: ＂13px＂,     ＂--el-font-size-extra-small＂: ＂12px＂,     ＂--el-font-weight-primary＂: ＂500＂,     ＂--el-font-line-height-primary＂: ＂24px＂,     ＂--el-index-normal＂: ＂1＂,     ＂--el-index-top＂: ＂1000＂,     ＂--el-index-popper＂: ＂2000＂,     ＂--el-disabled-fill-base＂: ＂var(--el-background-color-base)＂,     ＂--el-disabled-color-base＂: ＂var(--el-text-color-placeholder)＂,     ＂--el-disabled-border-base＂: ＂var(--el-border-color-light)＂,     ＂--el-transition-duration＂: ＂.3s＂,     ＂--el-transition-duration-fast＂: ＂.2s＂,     ＂--el-transition-function-ease-in-out-bezier＂: ＂cubic-bezier(.645, .045, .355, 1)＂,     ＂--el-transition-function-fast-bezier＂: ＂cubic-bezier(.23, 1, .32, 1)＂,     ＂--el-transition-all＂: ＂all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier)＂,     ＂--el-transition-fade＂: ＂opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier)＂,     ＂--el-transition-md-fade＂: ＂transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier)＂,     ＂--el-transition-fade-linear＂: ＂opacity var(--el-transition-duration-fast) linear＂,     ＂--el-transition-border＂: ＂border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier)＂,     ＂--el-transition-color＂: ＂color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier)＂   }  }
　　tool.ts export const colorMix = (color1, color2, weight) => {   weight = Math.max(Math.min(Number(weight), 1), 0)   let r1 = parseInt(color1.substring(1, 3), 16)   let g1 = parseInt(color1.substring(3, 5), 16)   let b1 = parseInt(color1.substring(5, 7), 16)   let r2 = parseInt(color2.substring(1, 3), 16)   let g2 = parseInt(color2.substring(3, 5), 16)   let b2 = parseInt(color2.substring(5, 7), 16)   let r: number | string = Math.round(r1 * (1 - weight) + r2 * weight)   let g: number | string = Math.round(g1 * (1 - weight) + g2 * weight)   let b: number | string = Math.round(b1 * (1 - weight) + b2 * weight)   r = (＂0＂ + (r || 0).toString(16)).slice(-2)   g = (＂0＂ + (g || 0).toString(16)).slice(-2)   b = (＂0＂ + (b || 0).toString(16)).slice(-2)   return ＂#＂ + r + g + b; }
　　最后我们来简单配置一下公共样式和模式切换重置公共样式：在assets/css 创建 common.css resetElStyle.scss
　　resetElStyle.scss .mt10 {   margin-top: 10px; } body{   background: var(--el-color-black) } .main_color{   background-color: var(--el-background-color-base); } .el_base_color{   background-color: var(--el-background-top-color); } .el-menu-item{   border-bottom:none !important; } .right-menu .right-menu-item{   width:62px;   height:62px;   background-color: var(--el-slider_bg);   border-radius: 6px;   overflow: hidden; } .right-menu-item .right-menu-qrcode .qrcode-box{   background:var(--el-slider_bg);   padding:5px } .right-menu-item .right-menu-qrcode p{   padding:-12px 0 5px 0;   text-align:center;   color:#fff;   font-size:12px } .logoWall .logo_animate{   width: 100%;   height: 450px;   background: var(--el-background-color-base);   position: relative; } body {   p{     color:var(--el-text-color-primary)   }   span{     color:var(--el-text-color-primary)   }   .change_ico{     margin-left:22px;     width:42px;     height:24px;   }   .change_ico  .el-switch__action{     background-color: var(--el-switch-color) !important;   }   .change_ico .el-icon{     font-size: 16px;     color:var(--el-switch-color) !important;   }   //下拉框   .el-scrollbar{     background: var( --el-select-box);     .selected{       background: var(--el-select-box-active);       color: var(--el-color-primary);     }     .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{       background: var(--el-select-box-active);       color: var(--el-color-primary);     }   }   /*数字输入框*/   .el-input-number__decrease, .el-input-number__increase {     background: var(--el-color-black)   }    // 复合输入框   .el-input-group__append, .el-input-group__prepend {     border: 1px solid var(--el-border-color-base);     border-right: none;   }    //  日期选择 el-date-picker   .el-picker-panel {     border: 1px solid var(--el-border-color-light);     background: var(--el-color-black)   }     // 日期和时间范围   .el-date-editor .el-range-input {     background: var(--el-color-white)   }    .el-picker-panel__footer {     background: var(--el-color-black)   }    // 时间选择   .el-time-panel__content {     .el-time-spinner__item:hover, .el-scrollbar__thumb:hover {       background: var(--el-select-box-active)     }   }    // 表格分页   .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {     background: var(--el-color-black)   }    // menu   .el-menu {     border-right: none;   } }
　　common.css body{     margin:0; } a{     text-decoration: none; } ul{     list-style: none; } h4{     font-weight: 400; } .hj_container{     max-width: 1200px;     min-width: 1100px;     margin:0 auto;     padding: 0 22px; } .hj_ip b{     width: 6px;     height: 26px;     margin-right: 12px;     margin-left:22px;     background-color: #00adff;  }  .hj_ip h4{     font-size: 16px !important; } @keyframes imgmove {     0%{         transform: scale(0.9);  /*开始为原始大小*/     }     25%{         transform: scale(1.3); /*放大1.1倍*/     }     50%{         transform: scale(0.9);     }     75%{         transform: scale(1.3);     }  }  @-webkit-keyframes imgmove /*Safari and Chrome*/ {     0%{         transform: scale(0.9);     }     25%{         transform: scale(1.1); /*放大1.1倍*/     }     50%{         transform: scale(0.9);     }     75%{         transform: scale(1.1);     } } .hj_block  .el-timeline-item__content{     font-size: 14px; } .hj_user_lf .el-menu-item:focus, .el-menu-item:hover{     font-size: 14px;     display: flex;     align-items: center; } .el-menu-item{     padding:0 4px 0 4px !important;     border-bottom: 2px solid #f6f6f6; } .el-menu.el-menu--horizontal{     border-bottom: none; } .el-menu--horizontal>.el-menu-item.is-active{     border-bottom:  2px solid #409eff !important; } .el-menu-tabs{     height:48px; } .dplayer-logo {     max-height: 97px !important;     max-width: 98px !important; } .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{     color:#fff; } .intro{     margin:0 auto;     width:910px; }  .logoWall .logo_animate .stand_browser{     display: block;     position: absolute;     width: 230px;     opacity: 0;     height: auto;     filter: alpha(opacity=0); } .stand_browser:hover{     cursor: pointer; } .logoWall .logo_animate .img1{     left:330px;     top: 420px;     animation: animate1 5500ms linear infinite;     -webkit-animation: animate1 5500ms linear infinite;     -moz-animation: animate1 5500ms linear infinite;     -ms-animation:animate1 5500ms linear infinite;     -o-animation: animate1 5500ms linear infinite; }  .logoWall .logo_animate .img2{     left:390px;     top: 420px;     animation: animate2 5500ms linear infinite;     animation-play-state: running;     -webkit-animation-play-state: running;     -moz-animation-play-state:running;     -o-animation-play-state:running;     -webkit-animation: animate2 5500ms linear infinite;     -moz-animation: animate2 5500ms linear infinite;     -ms-animation:animate2 5500ms linear infinite;     -o-animation: animate2 5500ms linear infinite; } .logoWall .logo_animate .img3{     left:450px;     top: 420px;     animation: animate3 5500ms linear infinite;     animation-play-state: running;     -webkit-animation-play-state: running;     -moz-animation-play-state:running;     -o-animation-play-state:running;     -webkit-animation: animate3 5500ms linear infinite;     -ms-animation:animate3 5500ms linear infinite;     -moz-animation: animate3 5500ms linear infinite;     -o-animation: animate3 5500ms linear infinite; } .logoWall .logo_animate .img4{     left:450px;     top: 420px;     animation: animate4 5500ms linear infinite;     animation-play-state: running;     -webkit-animation-play-state: running;     -moz-animation-play-state:running;     -o-animation-play-state:running;     -webkit-animation: animate4 5500ms linear infinite;     -moz-animation: animate4 5500ms linear infinite;     -o-animation: animate4 5500ms linear infinite;     -ms-animation:animate4 5500ms linear infinite; } @keyframes animate1 {     0% { width: 30px; left: 280px;top: 420px;opacity: 0;}     48%{ width: 100px;height:auto;left: 82px;opacity: 1;}     50% {width: 100px;height:auto;left: 80px;top: 200px;opacity: 1;  }     52%{ width: 100px;height:auto;left: 82px;opacity: 1;}     100% {width: 40px;left: 250px;top: 40px;opacity: 0;} }  @-khtml-keyframes animate1 {     0% { width: 30px; left: 280px;top: 420px;opacity: 0;}     48%{ width: 100px;height:auto;left: 82px;opacity: 1;}     50% {width: 100px;height:auto;left: 80px;top: 200px;opacity: 1;  }     52%{ width: 100px;height:auto;left: 82px;opacity: 1;}     100% {width: 40px;left: 250px;top: 40px;opacity: 0;} }  @-webkit-keyframes animate1 {     0% { width: 30px; left: 280px;top: 420px;opacity: 0;}     48%{ width: 100px;height:auto;left: 82px;opacity: 1;}     50% {width: 100px;height:auto;left: 80px;top: 200px;opacity: 1;  }     52%{ width: 100px;height:auto;left: 82px;opacity: 1;}     100% {width: 40px;left: 250px;top: 40px;opacity: 0;} }  @-moz-keyframes animate1 {     0% { width: 30px; left: 280px;top: 420px;opacity: 0;}     48%{ width: 100px;height:auto;left: 82px;opacity: 1;}     50% {width: 100px;height:auto;left: 80px;top: 200px;opacity: 1;  }     52%{ width: 100px;height:auto;left: 82px;opacity: 1;}     100% {width: 40px;left: 250px;top: 40px;opacity: 0;} }  @-ms-keyframes animate1 {     0% { width: 30px; left: 280px;top: 420px;opacity: 0;}     48%{ width: 100px;height:auto;left: 82px;opacity: 1;}     50% {width: 100px;height:auto;left: 80px;top: 200px;opacity: 1;  }     52%{ width: 100px;height:auto;left: 82px;opacity: 1;}     100% {width: 40px;left: 250px;top: 40px;opacity: 0;} }  @-o-keyframes animate1 {     0% { width: 30px; left: 280px;top: 420px;opacity: 0;}     48%{ width: 100px;height:auto;left: 82px;opacity: 1;}     50% {width: 100px;height:auto;left: 80px;top: 200px;opacity: 1;  }     52%{ width: 100px;height:auto;left: 82px;opacity: 1;}     100% {width: 40px;left: 250px;top: 40px;opacity: 0;} }  @keyframes animate2 {     0% {width: 30px;left: 380px;top: 410px;opacity: 0;  }     48%{width: 100px;height:auto;left: 292px;opacity: 1;  }     50% { width: 100px;height:auto;left: 290px;opacity: 1;}     52%{width: 100px;height:auto;left: 292px;opacity: 1;}     100% { width: 40px;left: 360px;top: 40px;opacity: 0;} } @-khtml-keyframes animate2 {     0% {width: 30px;left: 380px;top: 410px;opacity: 0;  }     48%{width: 100px;height:auto;left: 292px;opacity: 1;  }     50% { width: 100px;height:auto;left: 290px;opacity: 1;}     52%{width: 100px;height:auto;left: 292px;opacity: 1;}     100% { width: 40px;left: 360px;top:40px;opacity: 0;} } @-webkit-keyframes animate2 {     0% {width: 30px;left: 380px;top: 410px;opacity: 0;  }     48%{width: 100px;height:auto;left: 292px;opacity: 1;  }     50% { width: 100px;height:auto;left: 290px;opacity: 1;}     52%{width: 100px;height:auto;left: 292px;opacity: 1;}     100% { width: 40px;left: 360px;top: 40px;opacity: 0;} } @-ms-keyframes animate2 {     0% {width: 30px;left: 380px;top: 410px;opacity: 0;  }     48%{width: 100px;height:auto;left: 292px;opacity: 1;  }     50% { width: 100px;height:auto;left: 290px;opacity: 1;}     52%{width: 100px;height:auto;left: 292px;opacity: 1;}     100% { width: 40px;left: 360px;top: 40px;opacity: 0;} } @-moz-keyframes animate2 {     0% {width: 30px;left: 380px;top: 410px;opacity: 0;  }     48%{width: 100px;height:auto;left: 292px;opacity: 1;  }     50% { width: 100px;height:auto;left: 290px;opacity: 1;}     52%{width: 100px;height:auto;left: 292px;opacity: 1;}     100% { width: 40px;left: 360px;top: 40px;opacity: 0;} } @-o-keyframes animate2 {     0% {width: 30px;left: 380px;top: 410px;opacity: 0;  }     48%{width: 100px;height:auto;left: 292px;opacity: 1;  }     50% { width: 100px;height:auto;left: 290px;opacity: 1;}     52%{width: 100px;height:auto;left: 292px;opacity: 1;}     100% { width: 40px;left: 360px;top: 40px;opacity: 0;} } @keyframes animate3 {     0% {width: 30px; left: 580px;top: 420px;opacity: 0;}     48%{width: 100px;height:auto;left: 718px;opacity: 1;}     50% {width: 100px; height:auto;left: 720px;top: 200px;opacity: 1;}     52%{width: 100px;height:auto;left: 718px;opacity: 1;}     100% {width: 40px;left: 630px;top: 40px; opacity: 0;} } @-khtml-keyframes animate3 {     0% {width: 30px; left: 580px;top: 420px;opacity: 0;}     48%{width: 100px;height:auto;left: 718px;opacity: 1;}     50% {width: 100px; height:auto;left: 720px;top: 200px;opacity: 1;}     52%{width: 100px;height:auto;left: 718px;opacity: 1;}     100% {width: 40px;left: 630px;top: 40px; opacity: 0;}  } @-webkit-keyframes  animate3{     0% {width: 30px; left: 580px;top: 420px;opacity: 0;}     48%{width: 100px;height:auto;left: 718px;opacity: 1;}     50% {width: 100px; height:auto;left: 720px;top: 200px;opacity: 1;}     52%{width: 100px;height:auto;left: 718px;opacity: 1;}     100% {width: 40px;left: 630px;top: 40px; opacity: 0;} } @-ms-keyframes animate3 {     0% {width: 30px; left: 580px;top: 420px;opacity: 0;}     48%{width: 100px;height:auto;left: 718px;opacity: 1;}     50% {width: 100px; height:auto;left: 720px;top: 200px;opacity: 1;}     52%{width: 100px;height:auto;left: 718px;opacity: 1;}     100% {width: 40px;left: 630px;top: 40px; opacity: 0;} } @-moz-keyframes animate3 {     0% {width: 30px; left: 580px;top: 420px;opacity: 0;}     48%{width: 100px;height:auto;left: 718px;opacity: 1;}     50% {width: 100px; height:auto;left: 720px;top: 200px;opacity: 1;}     52%{width: 100px;height:auto;left: 718px;opacity: 1;}     100% {width: 40px;left: 630px;top: 40px; opacity: 0;} } @-o-keyframes animate3 {     0% {width: 30px; left: 580px;top: 420px;opacity: 0;}     48%{width: 100px;height:auto;left: 718px;opacity: 1;}     50% {width: 100px; height:auto;left: 720px;top: 200px;opacity: 1;}     52%{width: 100px;height:auto;left: 718px;opacity: 1;}     100% {width: 40px;left: 630px;top: 40px; opacity: 0;} } @keyframes animate4 {     0% { width: 30px;left: 460px;top: 420px;opacity: 0;}     48%{width: 100px; height:auto;left: 508px;opacity: 1;}     50% {width: 100px; height:auto; left: 510px; opacity: 1;  }     52%{width: 100px;height:auto;left: 508px;opacity: 1;}     100% {width: 40px;left: 490px; top: 40px;opacity: 0;} }  @-khtml-keyframes animate4 {     0% { width: 30px;left: 460px;top: 420px;opacity: 0;}     48%{width: 100px; height:auto;left: 508px;opacity: 1;}     50% {width: 100px; height:auto; left: 510px; opacity: 1;  }     52%{width: 100px;height:auto;left: 508px;opacity: 1;}     100% {width: 40px;left: 490px; top: 40px;opacity: 0;} }  @-webkit-keyframes animate4 {     0% { width: 30px;left: 460px;top: 420px;opacity: 0;}     48%{width: 100px; height:auto;left: 508px;opacity: 1;}     50% {width: 100px; height:auto; left: 510px; opacity: 1;  }     52%{width: 100px;height:auto;left: 508px;opacity: 1;}     100% {width: 40px;left: 490px; top: 40px;opacity: 0;} }  @-moz-keyframes animate4 {     0% { width: 30px;left: 460px;top: 420px;opacity: 0;}     48%{width: 100px; height:auto;left: 508px;opacity: 1;}     50% {width: 100px; height:auto; left: 510px; opacity: 1;  }     52%{width: 100px;height:auto;left: 508px;opacity: 1;}     100% {width: 40px;left: 490px; top: 40px;opacity: 0;} }  @-ms-keyframes animate4 {     0% { width: 30px;left: 460px;top: 420px;opacity: 0;}     48%{width: 100px; height:auto;left: 508px;opacity: 1;}     50% {width: 100px; height:auto; left: 510px; opacity: 1;  }     52%{width: 100px;height:auto;left: 508px;opacity: 1;}     100% {width: 40px;left: 490px; top: 40px;opacity: 0;} }  @-o-keyframes animate4 {     0% { width: 30px;left: 460px;top: 420px;opacity: 0;}     48%{width: 100px; height:auto;left: 508px;opacity: 1;}     50% {width: 100px; height:auto; left: 510px; opacity: 1;  }     52%{width: 100px;height:auto;left: 508px;opacity: 1;}     100% {width: 40px;left: 490px; top: 40px;opacity: 0;} } .pause{     animation-play-state: paused !important;     -webkit-animation-play-state: paused !important;     -moz-animation-play-state: paused !important;     -o-animation-play-state: paused !important; } .play{     animation-play-state: running !important;     -webkit-animation-play-state: running !important;     -moz-animation-play-state: running !important;     -o-animation-play-state: running !important; } .el-pagination{     display: flex;     justify-content: center;     align-content: center; } .el-overlay{     z-index: 1000 !important; } .no_data{     display: flex;     justify-content: center;     align-items: center; } .no_data img{     width:20%;     margin-top:-200px; }
　　到此为止我们已经处理完毕，如果要在某个地方使用如下：例如background-color: var(--el-background-color-base); color: var(--el-color-primary);
　　走到这一步我们的所有布局已经基本完成，剩下的就是具体业务需求的开发了，下一节我们来配合着黑暗模式实现一个完成的首页功能 ，效果如下：
　　基础模式
　　黑暗模式