<template><view class="search-hot"><view class="search-hot-title" v-show="hotWord.length > 0">热词</view><view class="search-hot-list"><viewclass="search-hot-list-item"v-for="(item, index) in hotWord":key="index"@click="clickHot(item, index)":class="[activeIndex == index ? 'active' : '']"><span class="sort-style" :class="[`background_${item.sort > 4 ? 4 : item.sort}`]">{{ item.sort }}</span>{{ item.keyword }}</view></view></view>
</template>
<script>
// searchKeyword
export default {name: "hot-search",data() {return {hotWord: [],activeIndex: 0,};},created() {this.hotSearch();},methods: {clickHot(item, index) {this.activeIndex = index;this.$emit("searchHot", item);},hotSearch() {this.$d.api.market.getKeyWords().then(res => {console.log(res, "res");this.hotWord = res;});},},
};
</script><style scoped lang="scss">
.search-hot {// flex: 1;padding: 29rpx;display: flex;flex-direction: column;background: #fff;&-title {font-family: PingFangSC, PingFang SC;font-weight: 500;font-size: 25rpx;color: $d-main-color;line-height: 36rpx;}&-list {display: flex;flex-wrap: wrap;flex-direction: row;&-item {background: #eef0f5;border-radius: 7rpx;padding: 18rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 25rpx;color: $d-main-color;line-height: 36rpx;margin-right: 18rpx;margin-top: 18rpx;display: flex;justify-content: center;align-items: center;&:last-child {margin-right: 0;}.sort-style {padding: 0 3px;color: #ffffff;display: inline-block;margin: 0 5px;height: 13px;line-height: 13px;font-size: 10px;}.background_1 {background: green;}.background_2 {background: blue;}.background_3 {background: #f76560;}.background_4 {background: #ccc;}}}
}
</style>
通过添加动态样式去控制前三个元素的不同样式，第四个样式以后走一个默认样式
:class="[`background_${item.sort > 4 ? 4 : item.sort}`]"
.background_1 {
background: green;
}
.background_2 {
background: blue;
}
.background_3 {
background: #f76560;
}
.background_4 {
background: #ccc;
}
)
