导航列表新增el-button样式

src/views/navigate/List.vue

@@ -46,4 +46,145 @@ export default {
 .component-item{
   min-height: 100px;
 }
+// 自定义el-button样式
+// goon
+.el-button--goon.is-active,
+.el-button--goon:active {
+  background: #20B2AA;
+  border-color: #20B2AA;
+  color: #fff;
+}
+
+.el-button--goon:focus,
+.el-button--goon:hover {
+  background: #48D1CC ;
+  border-color: #48D1CC;
+  color: #fff;
+}
+
+.el-button--goon {
+  color: #FFF;
+  background-color: #20B2AA;
+  border-color: #20B2AA;
+}
+// blue
+.el-button--blue.is-active,
+.el-button--blue:active {
+  background: #324157;
+  border-color: #324157;
+  color: #fff;
+}
+
+.el-button--blue:focus,
+.el-button--blue:hover {
+  background: #324157 ;
+  border-color: #324157;
+  color: #fff;
+}
+
+.el-button--blue {
+  color: #FFF;
+  background-color: #324157;
+  border-color: #324157;
+}
+// light-blue
+.el-button--light-blue.is-active,
+.el-button--light-blue:active {
+  background: #3A71A8;
+  border-color: #3A71A8;
+  color: #fff;
+}
+
+.el-button--light-blue:focus,
+.el-button--light-blue:hover {
+  background: #3A71A8 ;
+  border-color: #3A71A8;
+  color: #fff;
+}
+
+.el-button--light-blue {
+  color: #FFF;
+  background-color: #3A71A8;
+  border-color: #3A71A8;
+}
+// red
+.el-button--red.is-active,
+.el-button--red:active {
+  background: #C03639;
+  border-color: #C03639;
+  color: #fff;
+}
+
+.el-button--red:focus,
+.el-button--red:hover {
+  background: #C03639 ;
+  border-color: #C03639;
+  color: #fff;
+}
+
+.el-button--red {
+  color: #FFF;
+  background-color: #C03639;
+  border-color: #C03639;
+}
+// pink
+.el-button--pink.is-active,
+.el-button--pink:active {
+  background: #E65D6E;
+  border-color: #E65D6E;
+  color: #fff;
+}
+
+.el-button--pink:focus,
+.el-button--pink:hover {
+  background: #E65D6E ;
+  border-color: #E65D6E;
+  color: #fff;
+}
+
+.el-button--pink {
+  color: #FFF;
+  background-color: #E65D6E;
+  border-color: #E65D6E;
+}
+// green
+.el-button--green.is-active,
+.el-button--green:active {
+  background: #30B08F;
+  border-color: #30B08F;
+  color: #fff;
+}
+
+.el-button--green:focus,
+.el-button--green:hover {
+  background: #30B08F ;
+  border-color: #30B08F;
+  color: #fff;
+}
+
+.el-button--green {
+  color: #FFF;
+  background-color: #30B08F;
+  border-color: #30B08F;
+}
+// yellow
+.el-button--yellow.is-active,
+.el-button--yellow:active {
+  background: #FEC171;
+  border-color: #FEC171;
+  color: #fff;
+}
+
+.el-button--yellow:focus,
+.el-button--yellow:hover {
+  background: #FEC171 ;
+  border-color: #FEC171;
+  color: #fff;
+}
+
+.el-button--yellow {
+  color: #FFF;
+  background-color: #FEC171;
+  border-color: #FEC171;
+}
 </style>