From 523a973d568da02e4dfe1cca5ed8081e207c0182 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Wed, 18 Dec 2024 11:48:27 +0800
Subject: [PATCH] no message

---
 css/search.css   | 38 ++++++++++++++++++++++++++++++++++++++
 css/search.less  | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 html/search.html |  6 +++++-
 3 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/css/search.css b/css/search.css
index eb188d5..199e2f4 100644
--- a/css/search.css
+++ b/css/search.css
@@ -55,6 +55,7 @@
   border-radius: 183px;
   padding: 0 20px;
   margin-bottom: 30px;
+  position: relative;
 }
 .boxbox .body .left .input-box input {
   border: none;
@@ -68,6 +69,43 @@
   height: 18px;
   cursor: pointer;
 }
+.boxbox .body .left .input-box .hint-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.boxbox .body .left .input-box .hint-list {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  top: 48px;
+  left: 0;
+  background-color: #ffffff;
+  border-radius: 10px;
+  z-index: 2;
+  overflow: auto;
+  animation: show 0.3s forwards;
+  border: 0px solid #ebebeb;
+}
+@keyframes show {
+  0% {
+    height: 0;
+  }
+  100% {
+    border-width: 1px;
+    height: 300px;
+  }
+}
+.boxbox .body .left .input-box .hint-list .item {
+  color: #333333;
+  font-size: 14px;
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px #e6e4e4 dotted;
+}
 .boxbox .body .left .total {
   font-size: 14px;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
diff --git a/css/search.less b/css/search.less
index 85b7cab..620de99 100644
--- a/css/search.less
+++ b/css/search.less
@@ -57,6 +57,7 @@
                 border-radius: 183px;
                 padding: 0 20px;
                 margin-bottom: 30px;
+                position: relative;
                 input {
                     border: none;
                     outline: none;
@@ -70,6 +71,48 @@
                     height: 18px;
                     cursor: pointer;
                 }
+
+                .hint-mask {
+                    position: fixed;
+                    width: 100%;
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    z-index: 1;
+                }
+
+                .hint-list {
+                    position: absolute;
+                    width: 100%;
+                    height: 0;
+                    top: 48px;
+                    left: 0;
+                    background-color: rgba(255, 255, 255, 1);
+                    border-radius: 10px;
+                    z-index: 2;
+                    overflow: auto;
+                    animation: show 0.3s forwards;
+                    border: 0px solid rgba(235, 235, 235, 1);
+
+                    @keyframes show {
+                        0% {
+                            height: 0;
+                        }
+
+                        100% {
+                            border-width: 1px;
+                            height: 300px;
+                        }
+                    }
+
+                    .item {
+                        color: #333333;
+                        font-size: 14px;
+                        padding: 10px;
+                        cursor: pointer;
+                        border-bottom: 1px #e6e4e4 dotted;
+                    }
+                }
             }
 
             .total {
@@ -324,7 +367,7 @@
     color: #000000;
     left: 50%;
     transform: translateX(-50%);
-    
+
     .btn {
         line-height: 50px;
         margin: 0 24px;
diff --git a/html/search.html b/html/search.html
index 6e4a3a0..cbd0929 100644
--- a/html/search.html
+++ b/html/search.html
@@ -31,6 +31,10 @@
                         <div class="input-box flexacenter">
                             <input class="flex1" placeholder="请输入" v-model="kw" @keyup.enter="submit" />
                             <img class="search-icon" src="/img/search-black-icon.svg" />
+                            <div class="hint-mask"></div>
+                            <div class="hint-list scrollbar">
+                                <div class="item" v-for="item in 30">222222</div>
+                            </div>
                         </div>
                         <div class="total flexacenter">
                             共
@@ -199,7 +203,7 @@
                         count.value = 0
                         getList()
                     }
-                    
+
                     const selectKW = name => {
                         kw.value = name
                         if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)