文章管理

src/assets/styles/btn.scss

+@import './variables.scss';
+
+@mixin colorBtn($color) {
+  background: $color;
+
+  &:hover {
+    color: $color;
+
+    &:before,
+    &:after {
+      background: $color;
+    }
+  }
+}
+
+.blue-btn {
+  @include colorBtn($blue)
+}
+
+.light-blue-btn {
+  @include colorBtn($light-blue)
+}
+
+.red-btn {
+  @include colorBtn($red)
+}
+
+.pink-btn {
+  @include colorBtn($pink)
+}
+
+.green-btn {
+  @include colorBtn($green)
+}
+
+.tiffany-btn {
+  @include colorBtn($tiffany)
+}
+
+.yellow-btn {
+  @include colorBtn($yellow)
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    background: #fff;
+
+    &:before,
+    &:after {
+      width: 100%;
+      transition: 600ms ease all;
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2px;
+    width: 0;
+    transition: 400ms ease all;
+  }
+
+  &::after {
+    right: inherit;
+    top: inherit;
+    left: 0;
+    bottom: 0;
+  }
+}
+/** 四个字的绿色按钮*/
+.fourWordsBtn{
+  padding: 7px 13px 7px 11px;
+  width: 105px;
+  height: 32px;
+  background: #5BB647;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #5BB647;
+  opacity: 1;
+  font-size: 14px;
+  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  i{
+    font-size: 11px;
+    width: 11px;
+    height: 11px;
+  }
+  &:hover {
+    background: #83C374!important;
+    color: #FFFFFF!important;
+    border: 1px solid #83C374!important;
+  }
+  &:focus {
+    background: #55A343!important;
+    color: #FFFFFF!important;
+    border: 1px solid #55A343!important;
+  }
+}
+/** 查询按钮样式*/
+.queryBtn{
+  padding: 7px 13px 7px 11px;
+  width: 80px;
+  height: 32px;
+  background: #5BB647;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #5BB647;
+  opacity: 1;
+  font-size: 14px;
+  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  i{
+    width: 10px;
+    font-size: 10px;
+    height: 11px;
+  }
+  &:hover {
+    background: #83C374!important;
+    color: #FFFFFF!important;
+    border: 1px solid #83C374!important;
+  }
+  &:focus {
+    background: #55A343!important;
+    color: #FFFFFF!important;
+    border: 1px solid #55A343!important;
+  }
+}
+/** 删除按钮(四个字的删除)样式*/
+.delBtn{
+  padding: 7px 13px 7px 11px;
+  width: 105px;
+  height: 32px;
+  background: #DB4747;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #DB4747;
+  opacity: 1;
+  font-size: 14px;
+  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  i{
+    width: 10px;
+    font-size: 10px;
+    height: 11px;
+  }
+  &:hover {
+    background: #E07171 !important;
+    color: #FFFFFF!important;
+    border: 1px solid #E07171 !important;
+  }
+  &:focus {
+    background: #DB4747!important;
+    color: #FFFFFF!important;
+    border: 1px solid #DB4747!important;
+  }
+}
+/** 重置按钮样式*/
+.resetBtn{
+  padding: 7px 13px 7px 11px;
+  width: 80px;
+  height: 32px;
+  background: #FFFFFF;
+  border-radius: 4px 4px 4px 4px;
+  opacity: 1;
+  border: 1px solid #E5E5E5;
+  font-size: 14px;
+  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+  font-weight: 400;
+  color: #333333;
+  i{
+    width: 10px;
+    font-size: 10px;
+    height: 11px;
+  }
+  &:hover {
+    background: rgba(95,181,75,0.08);
+    opacity: 1;
+    border: 1px solid #5FB54B;
+    color: #333333!important;
+  }
+  &:focus {
+    background: rgba(85,163,67,0.08);
+    opacity: 1;
+    border: 1px solid #55A343;
+    color: #333333!important;
+  }
+}
+/** 两个按钮间的间距*/
+.el-button + .el-button{
+  margin-left: 16px;
+}
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}