有了上一章的基础，接下来我们来引入我们开发所需要的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-data

npm install element-china-area-data

其次我们在plugins 引入城市选择插件。 新建 city.client.ts

import { 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);

走到这一步我们的所有布局已经基本完成，剩下的就是具体业务需求的开发了，下一节我们来配合着黑暗模式实现一个完成的首页功能，效果如下：

基础模式

黑暗模式