global search ui

src/components/SearchInput.vue

@@ -264,12 +264,7 @@ export default {
 .search-wrapper >>> .el-input input::-ms-input-placeholder{text-align: center;}
 .search-wrapper >>> .el-input input::-webkit-input-placeholder{text-align: center;}
 .search-wrapper >>> .el-input .el-input__inner {
-  /* height: 30px; */
-  padding: 10px 20px;
-  /* position:relative;
-  top:-3px; */
-  
-
+  padding: 10px 20px 10px 30px;
 }
 .search-sug {
   position: absolute;

src/views/Layout/SideMenu.vue

@@ -323,45 +323,32 @@ export default {
 };
 </script>
 <style scoped>
+.eContainer-menu-search {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 40px;
+}
 .eContainer-menu-search .el-button {
   border: none;
   font-size: 20px;
-  padding: 9.01px 20px;
 }
 
-.eContainer-menu-search .el-input {
-  width: auto;
-  position: absolute;
-  right: 20px;
-  top: 5px;
-  left: 60px;
+.eContainer-menu-search >>> .search-wrapper{
+  margin-right: 20px;
 }
 
-.eContainer-scroller .el-scrollbar__wrap {
-  overflow: auto;
-  margin-right: 0px !important;
+.eContainer-menu-search >>> .search-wrapper .el-input .el-input__inner {
+  height: 28px;
 }
 
-.eContainer-menu-search {
-  width: 100%;
-  position: relative;
+.eContainer-menu-search >>> .search-wrapper .el-input--small .el-input__icon {
+  line-height: 28px;
 }
 
-.eContainer-menu-search .el-input,
-.eContainer-menu-search .search-wrapper {
-  width: auto;
-  position: absolute;
-  right: 20px;
-  top: 5px;
-  left: 60px;
-}
-
-.eContainer-menu-search .el-input .el-input__inner {
-  height: 30px;
-}
-
-.eContainer-menu-search .el-icon-search {
-  line-height: 30px;
+.eContainer-scroller .el-scrollbar__wrap {
+  overflow: auto;
+  margin-right: 0px !important;
 }
 
 .eContainer-scroller {