From f4a7273ff26a21a14fce6441b1b09bdc9cc591dd Mon Sep 17 00:00:00 2001
From: lightstarts <1286518974@qq.com>
Date: Fri, 17 Feb 2023 09:51:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=93=9D=E6=A1=86=E6=A1=86=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/Navs/SearchBox.vue | 311 +++++++++++++++++--------
 1 file changed, 210 insertions(+), 101 deletions(-)

diff --git a/frontend/components/Navs/SearchBox.vue b/frontend/components/Navs/SearchBox.vue
index eff584d..34157b8 100644
--- a/frontend/components/Navs/SearchBox.vue
+++ b/frontend/components/Navs/SearchBox.vue
@@ -7,25 +7,37 @@ export default {
 <template>
   <li class="nav-item search">
     <form role="search" class="search-form isResourceVisible">
-      <input type="search" maxlength="32" placeholder="探索稀土掘金" value="" class="search-input isResourceVisible"> <div class="seach-icon-container">
-        <img src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/1e8ab9a22f0ddc36349f60b38900d0bd.svg" alt="搜索" class="search-icon">
-      </div> <div class="typehead" style="display: none;">
-        <!----> <div class="title">
+      <input type="search" maxlength="32" placeholder="探索稀土掘金" value="" class="search-input isResourceVisible">
+      <div class="seach-icon-container">
+        <img
+          src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/1e8ab9a22f0ddc36349f60b38900d0bd.svg" alt="搜索"
+          class="search-icon"
+        >
+      </div>
+      <div class="typehead" style="display: none;">
+        <!---->
+        <div class="title">
           <span>搜索历史</span> <span class="clear">
             清空
           </span>
-        </div> <div class="list">
+        </div>
+        <div class="list">
           <div>
             调试safari
-          </div><div>
+          </div>
+          <div>
             safari优化
-          </div><div>
+          </div>
+          <div>
             camera
-          </div><div>
+          </div>
+          <div>
             设备优化
-          </div><div>
+          </div>
+          <div>
             高数
-          </div><div>
+          </div>
+          <div>
             青训营笔记
           </div>
         </div>
@@ -35,135 +47,232 @@ export default {
 </template>
 
 <style>
-@media (max-width: 799px){
-.nav-item.search {
+@media (max-width: 799px) {
+  .nav-item.search {
     padding-left: 4.133rem;
-}}
+  }
+}
 
 .nav-item.search {
-    cursor: auto;
-    padding-left: 0;
+  cursor: auto;
+  padding-left: 0;
 }
+
 .nav-item {
-    color: #86909c;
-    padding: 0 1rem;
-    font-size: 1.167rem;
-    margin: 0;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+  color: #86909c;
+  padding: 0 1rem;
+  font-size: 1.167rem;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
+
 .nav-item {
-    position: relative;
-    cursor: pointer;
+  position: relative;
+  cursor: pointer;
 }
 
 li {
-    list-style: none;
+  list-style: none;
 }
+
 .search-form .search-icon {
-    display: inline-block;
-    width: 1.33rem;
-    padding: 0 .8333rem 0 0;
-    cursor: pointer;
-    margin: 7px 15px;
+  display: inline-block;
+  width: 1.33rem;
+  padding: 0 .8333rem 0 0;
+  cursor: pointer;
+  margin: 7px 15px;
 }
 
 img {
-    border-style: none;
+  border-style: none;
 }
+
 .search-form .seach-icon-container {
-    position: relative;
-    left: -2px;
-    width: 44px;
-    height: 30px;
-    background: var(--juejin-background);
-    border-radius: 2px;
+  position: relative;
+  left: -2px;
+  width: 44px;
+  height: 30px;
+  background: var(--juejin-background);
+  border-radius: 2px;
 }
+
 .search-form .search-input {
-    border: none;
-    width: calc(100% - 44px);
-    padding: .6rem 0 .6rem 1rem;
-    box-shadow: none;
-    outline: none;
-    font-size: 1.1rem;
-    color: #8a919f;
-    background-color: transparent;
-    transition: width .3s;
+  border: none;
+  width: calc(100% - 44px);
+  padding: .6rem 0 .6rem 1rem;
+  box-shadow: none;
+  outline: none;
+  font-size: 1.1rem;
+  color: #8a919f;
+  background-color: transparent;
+  transition: width .3s;
 }
 
-a, button, input {
-    margin: initial;
+a,
+button,
+input {
+  margin: initial;
 }
-button, input {
-    overflow: visible;
+
+button,
+input {
+  overflow: visible;
 }
-button, input, select, textarea {
-    font: inherit;
-    margin: 0;
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  margin: 0;
 }
-a, button, input {
-    margin: initial;
+
+a,
+button,
+input {
+  margin: initial;
 }
-button, input {
-    overflow: visible;
+
+button,
+input {
+  overflow: visible;
 }
-button, input, select, textarea {
-    font: inherit;
-    margin: 0;
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  margin: 0;
 }
-@media (max-width: 799px){
-.search-form {
+
+@media (max-width: 799px) {
+  .search-form {
     transition: width .2s ease-in;
-}}
+  }
+}
 
-@media screen and (max-width: 799px){
-.search-form {
+@media screen and (max-width: 799px) {
+  .search-form {
     width: 220px;
-}}
-@media screen and (max-width: 1069px){
-.search-form {
+  }
+}
+
+@media screen and (max-width: 1069px) {
+  .search-form {
     width: 240px;
-}}
-@media screen and (max-width: 1350px){
-.search-form {
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  .search-form {
     width: 180px;
-}}
-.search-form{
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 4px;
-    position: relative;
-    height: 2.834rem;
-    border: 1px solid #c2c8d1;
-    transition: width .2s;
-}
-@media (max-width: 799px){
-.nav-item.search {
+  }
+}
+
+.search-form {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  position: relative;
+  height: 2.834rem;
+  border: 1px solid #c2c8d1;
+  transition: width .2s;
+}
+
+@media (max-width: 799px) {
+  .nav-item.search {
     padding-left: 4.133rem;
-}}
+  }
+}
 
 .nav-item.search {
-    cursor: auto;
-    padding-left: 0;
+  cursor: auto;
+  padding-left: 0;
 }
+
 .nav-item {
-    color: #86909c;
-    padding: 0 1rem;
-    font-size: 1.167rem;
-    margin: 0;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+  color: #86909c;
+  padding: 0 1rem;
+  font-size: 1.167rem;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
+
 .nav-item {
-    position: relative;
-    cursor: pointer;
+  position: relative;
+  cursor: pointer;
+}
+
+@media screen and (max-width: 799px) {
+  .search-form.active {
+    width: 26.833rem;
+  }
+}
+
+@media screen and (max-width: 1069px) {
+  .search-form.active {
+    width: 31.833rem;
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  .search-form.active {
+    width: 27.083rem;
+  }
+}
+
+.search-form.active {
+  border: 1px solid #1e80ff;
+}
+
+.search-form.active {
+  background-color: #fff;
+}
+
+@media (max-width: 799px) {
+  .search-form {
+    transition: width .2s ease-in;
+  }
+}
+
+@media screen and (max-width: 799px) {
+  .search-form {
+    width: 220px;
+  }
+}
+
+@media screen and (max-width: 1069px) {
+  .search-form {
+    width: 240px;
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  .search-form {
+    width: 180px;
+  }
+}
+
+.search-form {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  position: relative;
+  height: 2.834rem;
+  border: 1px solid #c2c8d1;
+  transition: width .2s;
 }
 </style>