You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.9 KiB
86 lines
1.9 KiB
<template>
|
|
<view>
|
|
<lf-nav title="搜索" :showIcon="true"></lf-nav>
|
|
<view class="head">
|
|
<u-search placeholder="请输入商品名或商户名" :focus="is_focus" v-model="value" @custom="customClick"></u-search>
|
|
</view>
|
|
<view class="content">
|
|
<!-- 大家都在搜 -->
|
|
<view>
|
|
<text class="title">大家都在搜</text>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item">秋上新</view>
|
|
<view class="item">纪梵希</view>
|
|
<view class="item">雅诗兰黛</view>
|
|
<view class="item">中秋</view>
|
|
<view class="item">苹果爱普</view>
|
|
<view class="item">基督教烧烤</view>
|
|
</view>
|
|
<!-- 我搜过的 -->
|
|
<view class="lf-row-between">
|
|
<text class="title">我搜过的</text>
|
|
<text class="lf-iconfont icon-shanchu lf-color-777"></text>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item item-2">秋上新</view>
|
|
<view class="item item-2">纪梵希</view>
|
|
<view class="item item-2">雅诗兰黛</view>
|
|
<view class="item item-2">中秋</view>
|
|
<view class="item item-2">苹果爱普</view>
|
|
<view class="item item-2">基督教烧烤</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: '',
|
|
is_focus: true // 是否自动获得焦点
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
customClick(event){
|
|
console.log("点击了", event);
|
|
this.$url('/pages/shop/searchList');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.head{
|
|
padding: 30rpx 32rpx;
|
|
}
|
|
.content{
|
|
padding: 20rpx 32rpx;
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
.list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 20rpx 0 40rpx;
|
|
.item{
|
|
padding: 4rpx 20rpx;
|
|
background-color: #15716E;
|
|
color: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
font-size: 28rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.item-2{
|
|
background-color: #F4F8F8;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|