按钮样式调整

 <template>
 <template>
-  <button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType">
+  <el-button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType">
     <slot></slot>
     <slot></slot>
-  </button>
+  </el-button>
 </template>
 </template>
 <script>
 <script>
-export default {
-  name: 'Button',
-  props: {
-    nativeType: {
-      type: String,
-      default: 'cx'
+  export default {
+    name: 'Button',
+    props: {
+      nativeType: {
+        type: String,
+        default: 'cx'
+      },
     },
     },
-  },
-  methods: {
-    handleClick (evt) {
-      this.$emit('click', evt);
+    methods: {
+      handleClick (evt) {
+        this.$emit('click', evt);
+      }
     }
     }
-  }
-};
+  };
 </script>
 </script>
 <style scoped lang="scss">
 <style scoped lang="scss">
-.button {
-  width: 76px;
-  height: 32px;
-  color: #ffffff;
-  margin: 0 5px;
-  cursor: pointer;
-  border: 0;
-  font-size: 14px;
-}
 
 
-.cx {
-  background: url('../image/btn.png') no-repeat 0 -34px;
-  background-size: cover;
-}
-
-.cz {
-  background: url('../image/btn.png') no-repeat 0 0;
-  background-size: cover;
-}
 </style>
 </style>

@@ -494,4 +494,61 @@
   color: white;
   color: white;
   cursor: text;
   cursor: text;
   font-weight: normal;
   font-weight: normal;
-}
\ No newline at end of file
+}
+
+.button {
+  width: 76px;
+  height: 32px;
+  color: #ffffff;
+  cursor: pointer;
+  border: 0;
+  font-size: 12px;
+}
+
+.button:hover {
+  //   width: 76px;
+  //   height: 32px;
+  //   color: #ffffff;
+  //   cursor: pointer;
+  //   border: 0;
+  //   font-size: 12px;
+  // background: none;
+}
+
+.cx {
+  background: url("../image/btn.png") no-repeat 0 -34px;
+  background-size: cover;
+}
+
+.cx:hover {
+  background: url("../image/btn.png") no-repeat 0 -34px;
+  background-size: cover;
+  color: white;
+}
+
+.cz {
+  background: url("../image/btn.png") no-repeat 0 0;
+  background-size: cover;
+}
+
+.cz:hover {
+  background: url("../image/btn.png") no-repeat 0 0;
+  background-size: cover;
+  color: white;
+}
+
+.el-button:focus {
+  background: none;
+}
+
+.cx:focus {
+  background: url("../image/btn.png") no-repeat 0 -34px;
+  background-size: cover;
+  color: white;
+}
+
+.cz:focus {
+  background: url("../image/btn.png") no-repeat 0 0;
+  background-size: cover;
+  color: white;
+}

@@ -68,4 +68,71 @@
 
 
 ::-webkit-scrollbar-thumb:hover {
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgb(162, 164, 167);
   background-color: rgb(162, 164, 167);
-}
\ No newline at end of file
+}
+
+// 搜索框按钮的位置
+.btnColRight {
+  box-sizing: border-box;
+  text-align: right;
+}
+
+// 按钮样式
+.button:hover {
+  width: 86px;
+  height: 32px;
+  color: #ffffff;
+  cursor: pointer;
+  border: 0;
+  font-size: 12px;
+  background: none;
+}
+
+.cx {
+  width: 86px;
+  height: 32px;
+  background-color: #4162D8;
+  color: white;
+  border: none;
+}
+
+.cx:hover {
+  width: 86px;
+  height: 32px;
+  background-color: #4162D8;
+  color: white;
+  border: none;
+}
+
+.cz {
+  width: 86px;
+  height: 32px;
+  background-color: white;
+  color: #4162D8;
+
+  border: 1px solid rgba(65, 98, 216, 0.3);
+}
+
+.cz:hover {
+  width: 86px;
+  height: 32px;
+  background-color: white;
+  color: #4162D8;
+  border: 1px solid rgba(65, 98, 216, 0.3);
+}
+
+.el-button:focus {
+  //  background: none;
+}
+
+.cx:focus {
+  color: white;
+  background-color: #4162D8;
+  background-size: cover;
+}
+
+.cz:focus {
+  color: #4162D8;
+  background-color: white;
+  ;
+  background-size: cover;
+}