no message

css/common.css

@@ -74,6 +74,9 @@ body {
   padding: 0 20px;
   position: relative;
 }
+.base .left.input-active {
+  border: 1px solid #c4c7ce;
+}
 .base .left .text {
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
@@ -88,8 +91,40 @@ body {
   height: 20px;
 }
 .base .left .hint-list {
-  top: auto;
+  position: absolute;
+  width: 750px;
+  height: 0;
+  max-height: 400px;
   bottom: 54px;
+  left: -1px;
+  background-color: #ffffff;
+  border-radius: 0 0 10px 10px;
+  z-index: 10;
+  overflow: auto;
+  animation: hintShow 0.3s forwards;
+  border: 0px solid #c4c7ce;
+  border-top: none;
+  box-shadow: 0px 5px 5px #dfdfdf;
+}
+@keyframes hintShow {
+  0% {
+    height: 0;
+  }
+  100% {
+    border-width: 1px;
+    height: auto;
+  }
+}
+.base .left .hint-list .item {
+  color: #333333;
+  font-size: 14px;
+  padding: 10px 20px;
+  cursor: pointer;
+  line-height: 30px;
+  display: block;
+}
+.base .left .hint-list .item:not(:last-of-type) {
+  border-bottom: 1px #e6e4e4 dotted;
 }
 .base .rigth {
   width: 175px;

css/common.less

@@ -87,6 +87,11 @@ body {
         margin-right: 5px;
         padding: 0 20px;
         position: relative;
+
+        &.input-active {
+            border: 1px solid #c4c7ce;
+        }
+
         .text {
             font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
             font-weight: 400;
@@ -104,8 +109,44 @@ body {
         }
 
         .hint-list {
-            top: auto;
+            position: absolute;
+            width: 750px;
+            height: 0;
+            max-height: 400px;
             bottom: 54px;
+            left: -1px;
+            background-color: rgba(255, 255, 255, 1);
+            border-radius: 0 0 10px 10px;
+            z-index: 10;
+            overflow: auto;
+            animation: hintShow 0.3s forwards;
+            border: 0px solid #c4c7ce;
+            border-top: none;
+            box-shadow: 0px 5px 5px #dfdfdf;
+
+            @keyframes hintShow {
+                0% {
+                    height: 0;
+                }
+
+                100% {
+                    border-width: 1px;
+                    height: auto;
+                }
+            }
+
+            .item {
+                color: #333333;
+                font-size: 14px;
+                padding: 10px 20px;
+                cursor: pointer;
+                line-height: 30px;
+                display: block;
+
+                &:not(:last-of-type) {
+                    border-bottom: 1px #e6e4e4 dotted;
+                }
+            }
         }
     }
 
@@ -855,5 +896,3 @@ body {
     left: 0;
     z-index: -1;
 }
-
-

css/index.css

@@ -59,6 +59,7 @@
   outline: none;
   font-size: 16px;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  padding-right: 10px;
 }
 .header-box .search .input::placeholder {
   color: #ffffff;

css/index.less

@@ -63,6 +63,7 @@
             outline: none;
             font-size: 16px;
             font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+            padding-right: 10px;
             &::placeholder {
                 color: #ffffff;
             }