自定义button 颜色 自定义动画

最近在做vue-element-admin项目的时候遇到了很多问题，
首先是跨域问题：
在 vue.config.js 文件里面，

 devServer: {
   port: port,
   open: true,
   overlay: {
     warnings: false,
     errors: true
   },
   proxy: {
     '/api/sys': {
       target: 'http://182.16.40.112:18010', // 田
       // target: 'http://182.16.40.233:18010', // 门
       // target: 'http://dev.yun.com',
       changeOrigin: true, //  是否支持跨域
       ws: true,
       pathRewrite: {
         '^/api/sys': ''
       }
     },
      ···

自定义button 颜色

.el-button--addbtn.is-active,
.el-button--addbtn:active {
  background: #873df2;
  border-color: #873df2;
  color: #ffffff;
}

.el-button--addbtn.is-disabled{
  background: #9674c7;
  border-color: #9674c7;
  color: #ffffff;

}
.el-button--addbtn:focus,
.el-button--addbtn:hover {
  background: #9674c7 !important;
  border-color: #9674c7 !important;
  color: #ffffff !important;
}

.el-button--addbtn {
  background: #873df2;
  border-color: #873df2;
  color: #ffffff;
}
//  用法
  <el-button type="addbtn" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
  

// 自定义弹窗动画 放在公共样式文件中就可以了，他会覆盖 的默认动画

.el-dialog__wrapper {
	transition-duration: 0.8s;
}
.dialog-fade-enter-active{
	animation: none !important;
}
.dialog-fade-leave-active {
	transition-duration: 0.5s !important;
	animation: none !important;
  }

.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog{
	animation-fill-mode: forwards;
}

.dialog-fade-enter-active .el-dialog{
	animation-duration: 0.5s;
	animation-name: anim-open;
	animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}
.dialog-fade-leave-active .el-dialog{
	animation-duration: 0.5s;
	animation-name: anim-close;
}
@keyframes anim-open {
	0% { opacity: 0;  transform: scale3d(0, 0, 1); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes anim-close {
	0% { opacity: 1; }
	100% { opacity: 0; transform: scale3d(0.5, 0.5, 1); }
}