更改搜索栏样式

src/components/SearchBar/index.vue

@@ -1,84 +1,157 @@
 <template>
-    <div class="search-box">
-        <input 
-        placeholder="Search Bench" 
-        class="search-input"  
-        ref="input"
-        :value="value"
-        @keyup.enter="onFocus"
-        @input="onInput"/>
-        <div v-show="show" @click="onBlur" class="el-icon-close closeBtn"></div>
+  <div class="search-box">
+    <div class="iconBtnBox">
+      <div class="iconBtn mapBtn" @click="modeChange"></div>
+      <div class="iconBtn homeBtn" @click="goHome"></div>
     </div>
+    <input
+      placeholder="Search Bench"
+      class="search-input"
+      ref="input"
+      :value="value"
+      @keyup.enter="onFocus"
+      @input="onInput"
+    />
+    <!-- <div v-show="show" @click="onBlur" class="el-icon-close closeBtn"></div> -->
+    <div class="jumpBtnBox">
+      <div class="jumpBtn" @click="goKpm">K</div>
+      <div class="jumpBtn" @click="goMantis">M</div>
+      <div class="jumpBtn" @click="goAutoGo">A</div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  props: {
-    
-  },
+  props: {},
   data() {
     return {
-      value: '',
-      show: false
+      value: "",
+      show: false,
     };
   },
   methods: {
     onFocus() {
-      this.show = true
-      this.$emit('focus');
+      this.show = true;
+      this.$emit("focus");
     },
     onInput(event) {
       this.value = event.target.value;
-      this.$emit('input', this.value);
+      this.$emit("input", this.value);
     },
     onBlur() {
       this.show = false;
-      this.$emit('blur')
-    }
-  }
+      this.$emit("blur");
+    },
+    modeChange() {
+      if (window.location.href.indexOf("home") !== -1) {
+        window.location.href = "/?m=8b934420_ZJUb_b6f9";
+      } else {
+        window.location.href = "/home?m=8b934420_ZJUb_b6f9";
+      }
+    },
+    goMantis() {
+      window.location.href = "http://139.196.158.57:8080/mantis/#/dashboard";
+    },
+    goKpm() {
+      window.location.href = "http://106.14.237.165/kpm/#/list/kpm-list";
+    },
+    goAutoGo() {
+      window.location.href = "http://139.196.158.57/#/Overview";
+    },
+    goHome() {
+      window.location.href = "/?m=8b934420_ZJUb_b6f9";
+    },
+  },
 };
 </script>
 
 <style scoped>
 .search-box {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   background-image: url(../../images/search.png);
   background-color: transparent;
   background-size: 100% 100%;
   box-sizing: border-box;
-  padding-right: 1.56vw;
+  /* padding-right: 1.56vw; */
+  height: 6.7vh;
+  padding: 0 30px;
+  box-sizing: border-box;
 }
 .closeBtn {
   color: #fff;
   font-size: 30px;
   float: right;
 }
-.search-input{
-    width: calc(100% - 50px);
-    border: 0;
-    overflow: hidden;
-    position: relative;
-    padding: 1.25vh 1.56vw;
-    height: 4.2vh;
-    background-color: transparent;
-    color: #DFDFDF;
+.search-input {
+  width: calc(100% - 350px);
+  border: 0;
+  overflow: hidden;
+  position: relative;
+  padding: 0 20px;
+  height: 3.5vh;
+  background-color: rgba(255, 255, 255, 0.12);
+  color: #dfdfdf;
+  border-radius: 1.75vh;
 }
 .search-input::placeholder {
-    color: #DFDFDF;
+  color: #dfdfdf;
+}
+
+.search-input:before {
+  background: linear-gradient(
+    359deg,
+    rgba(255, 255, 255, 0.63) 0%,
+    rgba(255, 255, 255, 0) 66%,
+    rgba(84, 84, 84, 0) 100%
+  );
+  border-radius: 40px 40px 40px 40px;
+  opacity: 1;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
-    
-.search-input:before{
-    background: linear-gradient(359deg, rgba(255,255,255,0.63) 0%, rgba(255,255,255,0) 66%, rgba(84,84,84,0) 100%);
-    border-radius: 40px 40px 40px 40px;
-    opacity: 1;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
+
+.iconBtnBox,
+.jumpBtnBox {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+}
+
+.iconBtn {
+  height: 25px;
+  width: 25px;
+  margin: 0 10px;
+  background-size: contain;
+  cursor: pointer;
+}
+
+.mapBtn {
+  background-image: url(../../assets/3d.png);
+}
+
+.homeBtn {
+  height: 22px;
+  width: 22px;
+  background-image: url(../../assets/home.png);
+}
+
+.jumpBtn {
+  margin: 0 6px;
+  width: 30px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 15px;
+  background-color: #ddd;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
 }
 </style>