热门推荐问题

<template>
<div class="hot">
<div class="hot-title">
<h4>热门推荐</h4>
<div class="loading-container" v-if="!hots.length">
<me-loading/>
</div>
<ul class="hot-list" v-else>
<li
class="hot-item"
v-for="(item,index) in hots"
:key="index"
>{{item.hotWord}}</li>
</ul>
</div>
</div>
</template>

<script>
import MeLoading from "base/loading";
import {getSearchHotKeyword} from "api/search"
export default {
name: "SearchHot",
components: {
MeLoading
},
data(){
return{
hots:[]
};
},
created(){
this.getHotKeyword().then(()=>{
this.$emit('loaded');
})
},
methods:{
getHotKeyword(){
return getSearchHotKeyword().then(data=>{
return new Promise(resolve => {
if (data){
this.hots=data;
resolve();
}
})
})
}
}
}
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";

.hot {
padding-left: 10px;
background-color: #fff;
border-bottom: 1px solid $border-color;
margin-bottom: 10px;

&-title {
height: 34px;
line-height: 34px;
font-size: $font-size-l;
font-weight: bold;
}

&-list {
display: flex;
flex-wrap: wrap;
}

&-item {
padding: 8px;
background-color: #f0f2f5;
border-radius: 4px;
margin: 0 10px 10px 0;
color: #686868;
}
}

.loading-container {
padding: 10px 0;
}
</style>

------------------------------------

<template>
<transition name="search">
<div class="search">
<header class="g-header-container">
<search-header/>
</header>
<div class="g-content-container">
<me-scroll ref="scroll">
<search-hot></search-hot>
</me-scroll>
</div>
</div>
</transition>
</template>

<script>
import SearchHeader from "./header";
import SearchHot from "./hot";
import MeScroll from "base/scroll"
export default {
name: "Search",
components:{
SearchHeader,
SearchHot,
MeScroll
}
}
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";

.search {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $search-z-index;
background-color: $bgc-theme;

}
.search-enter-active,
.search-leave-active {
transition: all 0.3s;
}

.search-enter,
.search-leave-to {
transform: translate3d(100%, 0, 0);
}
</style>