到热门搜索

1

src/components/hotSearch/index.module.less

@@ -1,6 +1,6 @@
 .wrap {
   // margin-top: 20px;
-  padding:  0 2px 0 0;
+  padding: 0 2px 0 0;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -19,10 +19,10 @@
       flex-direction: row;
     }
     h5 {
-      font-weight: 500;
-      color: #333;
-      line-height: 28px;
-      font-size: 20px;
+      font-size: 18px;
+      font-weight: 400;
+      color: #000000;
+      line-height: 25px;
     }
   }
   .wrapRight {
@@ -41,23 +41,34 @@
     }
   }
   .searchWrap {
+    width: 90px;
+    height: 36px;
     cursor: pointer;
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-radius: 2px;
-    border: 1px solid #e5e5e5;
-    padding: 0 8px;
+    justify-content: center;
+    border-radius: 18px;
+    background-color: #2dc7aa;
+    // border: 1px solid #e5e5e5;
+    // padding: 0 8px;
     span {
-      color: #666 !important;
+      color: #fff;
       line-height: 24px;
-      font-size: 13px;
+      font-size: 16px;
     }
     .search {
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
       margin-left: 8px;
     }
+    &:hover {
+      background-color: #fff;
+      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1000);
+      span {
+        color: #2dc7aa;
+      }
+    }
   }
 }
 
@@ -70,17 +81,18 @@
     align-items: center;
     margin-bottom: 18px;
     .resultTitle {
-      padding: 0 20px 0 14px;
+      // padding: 0 20px 0 14px;
+      width: 80px;
       display: flex;
       flex-direction: row;
       align-items: center;
       color: #999;
-      font-size: 18px;
-      img {
-        width: 14px;
-        height: 14px;
-        margin-left: 4px;
-      }
+      font-size: 16px;
+      // img {
+      //   width: 14px;
+      //   height: 14px;
+      //   margin-left: 4px;
+      // }
     }
     .tagList {
       width: 931px;

src/components/hotSearch/index.tsx

@@ -5,6 +5,7 @@ import tagItem from '@/components/tagItem'
 import hot from './images/hot.png'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
 import search from '@/components/hotSearch/images/search.png'
+import searchActive from '@/components/hotSearch/images/searchActive.png'
 
 import request from '@/helpers/request'
 import arrows from './images/arrow.png'
@@ -43,7 +44,8 @@ export default defineComponent({
       chioseTagList: [],
       chioseParentList: [],
       searchTagList: [],
-      searchType: props.searchType
+      searchType: props.searchType,
+      searchHover:false
     })
     const router = useRouter()
     const getHotList = async () => {
@@ -154,10 +156,10 @@ export default defineComponent({
 
     const clickHotTag = (key: string) => {
       if (props.isChiose) {
-        state.hotList.forEach((element : any)=> {
+        state.hotList.forEach((element: any) => {
           element.isCheck = false
         })
-        state.hotList.forEach((element : any) => {
+        state.hotList.forEach((element: any) => {
           if (element.key == key) {
             element.isCheck = true
           }
@@ -178,13 +180,14 @@ export default defineComponent({
         {state.showDetail ? (
           <div class={classes.wrap}>
             <div class={classes.wrapLeft}>
-              <img src={hot} class={classes.hotIcon} alt="" />
+              {/* <img src={hot} class={classes.hotIcon} alt="" /> */}
               <h5>热门搜索：</h5>
               <div class={classes.tagWrap}>
                 {state.hotList.map((item: any) => {
                   //
                   return (
                     <tagItem
+                      isSmall={true}
                       title={item.key}
                       onSearchTag={key => clickHotTag(key)}
                       isChiose={true}
@@ -206,9 +209,16 @@ export default defineComponent({
               <div
                 class={[classes.wrapRight, classes.searchWrap]}
                 onClick={() => (state.showDetail = false)}
+                onMouseover={() => {
+                  state.searchHover = true
+                }}
+                onMouseout={() => {
+                  state.searchHover = false
+                }}
+
               >
                 <span>筛选</span>
-                <img class={classes.search} src={search} alt="" />
+                <img class={classes.search} src={ state.searchHover?searchActive:search} alt="" />
               </div>
             ) : null}
           </div>
@@ -216,8 +226,8 @@ export default defineComponent({
           <div class={classes.searchDetail}>
             <div class={classes.searchResult}>
               <div class={classes.resultTitle}>
-                <span>已选类型</span>
-                <img src={arrow} alt="" />
+                <span>已选类型:</span>
+                {/* <img src={arrow} alt="" /> */}
               </div>
               <div class={classes.tagList}>
                 {state.searchTagList.map((item: any) => {
@@ -233,7 +243,7 @@ export default defineComponent({
                 })}
               </div>
               <div class={classes.searchResultRight}>
-              <div class={classes.clearBtn} onClick={clearSearch}>
+                <div class={classes.clearBtn} onClick={clearSearch}>
                   <span>清空</span>
                   <img src={clearIcon} class={classes.clearIcon} alt="" />
                 </div>
@@ -246,7 +256,6 @@ export default defineComponent({
                   <span>收起</span>
                   <img src={arrows} class={classes.clearIcon} alt="" />
                 </div>
-
               </div>
             </div>
             <div class={classes.searchChioseWrap}>

src/components/searchInput/index.module.less

@@ -1,69 +1,229 @@
+@img: './images';
+
 .wrap {
   // margin-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   border: 1px solid #2dc7aa;
-  padding: 0 10px 0 20px;
-  line-height: 54px;
-  height: 54px;
+  padding: 0 6px 0 20px;
+  line-height: 60px;
+  height: 60px;
   background: #fff;
   border-radius: 30px;
   overflow: hidden;
+  cursor: pointer;
+&:hover {
+  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1000);
+  .searchline,.searchBtn{
+    visibility: visible;
+  }
+}
+  .selectWrap {
+    :global {
+      .el-input__wrapper {
+        padding-right: 25px;
+        font-size: 16px;
+        box-shadow: none !important;
+        line-height: 60px;
+        height: 60px;
+        position: relative;
+      }
+      .el-input__wrapper.is-focus {
+        // font-size: 16px;
+        box-shadow: none !important;
+      }
+      .el-input.is-focus .el-input__wrapper {
+        box-shadow: none !important;
+        background-color: #fff;
+      }
+      // select 那层
+      // .el-input__suffix {
+      //   .el-input__suffix-inner {
+      //     color: #2dc7aa;
+      //     font-size: 20px;
+      //     font-weight: bold;
+      //   }
+      // }
+      // .el-select__caret {
+      //   color: #2dc7aa !important;
+      //   font-size: 20px !important;
+      //   font-weight: bold;
+      //   //  更换箭头
 
-  // .inputSelect {
-  :global {
-    .el-input__wrapper {
-      box-shadow: none !important;
-    }
+      // }
+      .el-select__caret {
+        //箭头样式
+
+        // transform: rotateZ(0deg); //转动图片
+        appearance: none;
+        background: url('@{img}/selectArrow.png') no-repeat; //自定义图片
+        background-size: 16px 16px;
+        width: 16px;
+        height: 16px !important;
+        position: absolute; //图片定位
+        top: -1px;
+        right: -1px;
+      }
+      .el-icon svg {
+        //隐藏原来箭头
 
-    // select 那层
-    .el-select .el-input.is-focus .el-input__wrapper .subSelect.el-select {
-      font-size: 16px;
-      .el-input {
-        font-size: 18px;
-        .el-input.is-focus {
-          .el-input__wrapper {
+        display: none;
+      }
+      .el-select .el-input.is-focus .el-input__wrapper {
+        font-size: 16px;
+        .el-input {
+          font-size: 18px;
+          .el-input.is-focus {
+            .el-input__wrapper {
+              box-shadow: none !important;
+              background-color: #fff;
+            }
+          }
+          .el-input__wrapper.is-focus {
             box-shadow: none !important;
             background-color: #fff;
           }
         }
-        .el-input__wrapper.is-focus {
-          box-shadow: none !important;
-          background-color: #fff;
-        }
-        .el-select__caret {
-          color: #2dc7aa;
-          font-size: 20px;
-          font-weight: bold;
-        }
-      }
 
-      // .el-input.is-focus {
-      //   .el-input__wrapper.is-focus {
-      //     box-shadow: none !important;
-      //     background-color: #fff;
-      //   }
-      // }
+        // .el-input.is-focus {
+        //   .el-input__wrapper.is-focus {
+        //     box-shadow: none !important;
+        //     background-color: #fff;
+        //   }
+        // }
+      }
     }
   }
-  // }
 
   .selectWrap {
     display: flex;
     flex-direction: row;
     position: relative;
+    align-items: center;
     .line {
       width: 1px;
-      height: 26px;
-      background: #d8d8d8 !important;
-      position: absolute;
-      right: -20px;
-      top: 2px;
+      height: 36px;
+      background: #2dc7aa !important;
+      //   position: absolute;
+      //   right: -13px;
+      //   top: 2px;
+      //   z-index: 1000;
     }
   }
+  .inputSelect {
+    width: 600px;
+    :global {
 
+      .el-input__wrapper {
+        width: 600px;
+        padding-right: 0;
+        font-size: 16px;
+        box-shadow: none !important;
+        line-height: 60px;
+        height: 60px;
+        position: relative;
+      }
+      .el-icon {
+        position: relative;
+        top: -5px;
+        left: -18px;
+        display: block;
+        font-size: 30px !important;
+        width: 16px;
+        height: 16px;
+        opacity: 0;
+        // visibility: hidden;
+        // svg {
+        //   //隐藏原来箭头
+
+        // }
+      }
+      .el-input__suffix {
+        cursor: pointer;
+        background: url('@{img}/closeIcon.png') no-repeat; //自定义图片
+        background-size: 16px 16px;
+        width: 16px;
+        height: 16px;
+        position: absolute; //图片定位
+        top: 20px;
+        right: 22px;
+      }
+
+      .el-input__wrapper.is-focus {
+        // font-size: 16px;
+        box-shadow: none !important;
+      }
+      .el-input.is-focus .el-input__wrapper {
+        box-shadow: none !important;
+        background-color: #fff;
+      }
+      .el-input__wrapper {
+        padding-left: 0;
+        .el-input__inner {
+          font-size: 18px !important;
+        }
+      }
+      .el-select .el-input.is-focus .el-input__wrapper {
+        font-size: 16px;
+        .el-input {
+          font-size: 18px;
+          .el-input.is-focus {
+            .el-input__wrapper {
+              box-shadow: none !important;
+              background-color: #fff;
+            }
+          }
+          .el-input__wrapper.is-focus {
+            box-shadow: none !important;
+            background-color: #fff;
+          }
+        }
+
+        // .el-input.is-focus {
+        //   .el-input__wrapper.is-focus {
+        //     box-shadow: none !important;
+        //     background-color: #fff;
+        //   }
+        // }
+      }
+    }
+  }
   .searchIcon {
     font-size: 20px !important;
   }
+  .searchWrap {
+    cursor: pointer;
+    width: 97px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 24px;
+      height: 25px;
+    }
+  }
+  .searchBtn {
+    width: 90px;
+    height: 50px;
+    background: #2dc7aa;
+    border-radius: 25px;
+    color: #fff;
+    text-align: center;
+    line-height: 50px;
+    cursor: pointer;
+    visibility: hidden;
+    &:active {
+      opacity: .9;
+    }
+
+  }
+  .searchline {
+    visibility: hidden;
+    width: 1px;
+    height: 36px;
+    background-color: #eee;
+    margin-right: 15px;
+  }
 }

src/components/searchInput/index.tsx

@@ -13,7 +13,7 @@ import {
 // import white from './while.module.less'
 import classes from './index.module.less'
 import request from '@/helpers/request'
-
+import searchIcon from './images/searchIcon.png'
 export default defineComponent({
   name: 'searchInput',
   props: {
@@ -89,7 +89,7 @@ export default defineComponent({
               clearable
               v-model={state.subject}
               placeholder="请选择声部"
-              style="width: 150px"
+              style="width: 175px"
               class="subSelect"
               v-slots={{
                 suffix: () => <div class={classes.san}></div>
@@ -101,29 +101,22 @@ export default defineComponent({
             </ElSelect>
             <div class={classes.line}></div>
           </div>
+          <div class={classes.searchWrap} >
+            <img src={searchIcon} alt="" />
+          </div>
           <ElInput
-            clearable
             v-model={state.search}
             placeholder={state.holder}
+            clearable
             class={classes.inputSelect}
-            v-slots={
-              {
-                // append: () => (
-                //   <ElButton
-                //     onClick={startSearch}
-                //     v-slots={{
-                //       icon: () => (
-                //         <ElIcon class={classStyle.searchIcon}>
-                //           <Search></Search>
-                //         </ElIcon>
-                //       )
-                //     }}
-                //     style={{ color: '#2DC7AA', font: '20px' }}
-                //   />
-                // )
-              }
-            }
+            // onKeyup={e => {
+            //   if (e.keyCode === 13) {
+            //     startSearch()
+            //   }
+            // }}
           ></ElInput>
+            <div class={classes.searchline}></div>
+          <div class={classes.searchBtn} onClick={startSearch}>搜索</div >
         </div>
       </>
     )

src/components/tagItem/index.module.less

@@ -24,9 +24,19 @@
     background: #2dc7aa;
   }
 }
+.tag.small {
+
+  font-size: 16px;
+  font-family: PingFang-SC-Regular, PingFang-SC;
+  font-weight: 400;
+  // color: #666666;
+  line-height: 36px;
+  margin-bottom: 0;
+}
 
 .active.tag {
   border: 1px solid #4bb39e;
   color: #ffffff;
   background: #2dc7aa;
+
 }

src/components/tagItem/index.tsx

@@ -18,12 +18,17 @@ export default defineComponent({
     item:{
       type: Object,
       default: {isCheck:false}
+    },
+    isSmall:{
+      type:Boolean,
+      default: false
     }
   },
   setup(props, conent) {
     const state = reactive({
       title:props.title,
-      isCheck:props.item.isCheck
+      isCheck:props.item.isCheck,
+      isSmall:props.isSmall
     })
     const shioseTag =(key:string)=>{
       conent.emit('searchTag',key)
@@ -47,7 +52,7 @@ export default defineComponent({
     return () => (
       <>
       {/* effect={state.isCheck ? 'dark' : 'light'} */}
-        <div  onClick={()=>shioseTag(state.title)} class={classes.tag}>{state.title}</div>
+        <div  onClick={()=>shioseTag(state.title)} class={[classes.tag,state.isSmall?classes.small:'']}>{state.title}</div>
       </>
     )
   }

src/views/home/index.tsx

@@ -127,12 +127,18 @@ export default defineComponent({
                     <img
                       src={searchIcon}
                       class={styles.searchIcon}
-                      onClick={() => gotoSearch(state.search,'music')}
+
                       alt=""
                     />
                     <ElInput
                       placeholder="搜索你想要的曲目"
                       v-model={state.search}
+                      onKeyup={e => {
+                        if (e.keyCode === 13) {
+                          gotoSearch(state.search,'music')
+                        }
+                      }}
+                      // onkeyup= { gotoSearch(state.search,'music')}
                     ></ElInput>
                   </div>
                   <div class={styles.chioseLineWrap}>