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