|
|
|
|
@ -2,9 +2,13 @@ |
|
|
|
|
<view :class="[{oh: !per}]"> |
|
|
|
|
<view class="page"> |
|
|
|
|
<!-- <view class="bg"></view> --> |
|
|
|
|
<view class="search-wrap" :style="{paddingRight: menuBtnInfo.width + 8 + 'px', paddingTop: menuBtnInfo.top + 'px'}"> |
|
|
|
|
<image class="logo" src="http://124.71.79.122/images/logo2.png" mode="widthFix"></image> |
|
|
|
|
<uni-search-bar class="search" radius="30" placeholder="请输入" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="initList" /> |
|
|
|
|
<view :class="['search-wrap', {expand}]" :style="{paddingRight: menuBtnInfo.width + 8 + 'px', paddingTop: menuBtnInfo.top + 'px'}"> |
|
|
|
|
<view class="platform"> |
|
|
|
|
<image class="logo" src="http://124.71.79.122/images/logo2.png" mode="widthFix"></image> |
|
|
|
|
<text class="name">幼教产业B2B产业平台</text> |
|
|
|
|
</view> |
|
|
|
|
<uni-icons class="icon" type="search" size="22" color="#fff" @click="showSearch"></uni-icons> |
|
|
|
|
<uni-search-bar class="search-bar" ref="searchBar" radius="30" placeholder="请输入" :focus="expand" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="initList" @clear="clearKeyword" /> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="banner"> |
|
|
|
|
@ -116,6 +120,7 @@ |
|
|
|
|
scrollLeft: 0, |
|
|
|
|
headerTop: 0, |
|
|
|
|
menuBtnInfo: {}, |
|
|
|
|
expand: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 下拉刷新 |
|
|
|
|
@ -246,6 +251,16 @@ |
|
|
|
|
this.hots = data.records |
|
|
|
|
}).catch(e => {}) |
|
|
|
|
}, |
|
|
|
|
// 展开keyword输入框 |
|
|
|
|
showSearch() { |
|
|
|
|
this.expand = true |
|
|
|
|
}, |
|
|
|
|
// 清除keyword回调 |
|
|
|
|
clearKeyword() { |
|
|
|
|
this.expand = false |
|
|
|
|
this.keyword = '' |
|
|
|
|
this.initList() |
|
|
|
|
}, |
|
|
|
|
// 图片切换 |
|
|
|
|
bannerChange(e) { |
|
|
|
|
this.curBanner = e.detail.current; |
|
|
|
|
@ -279,11 +294,6 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// keyword清除回调 |
|
|
|
|
clearKeyword() { |
|
|
|
|
this.keyword = '' |
|
|
|
|
this.initList() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 跳转活动详情 |
|
|
|
|
toDetail(item) { |
|
|
|
|
@ -355,13 +365,42 @@ |
|
|
|
|
/deep/.search-wrap { |
|
|
|
|
padding-bottom: 30rpx; |
|
|
|
|
background-color: $uni-primary; |
|
|
|
|
.platform { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
.logo { |
|
|
|
|
width: 70rpx; |
|
|
|
|
margin: 0 10rpx 0 10rpx; |
|
|
|
|
} |
|
|
|
|
.name { |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.icon { |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
} |
|
|
|
|
.search-bar { |
|
|
|
|
display: none; |
|
|
|
|
width: 0; |
|
|
|
|
height: 0; |
|
|
|
|
transition: .5s; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.uni-searchbar { |
|
|
|
|
padding: 0 10rpx !important; |
|
|
|
|
} |
|
|
|
|
&.expand { |
|
|
|
|
.icon, .name { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
.search-bar { |
|
|
|
|
flex: 1; |
|
|
|
|
display: block; |
|
|
|
|
width: auto; |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.banner { |
|
|
|
|
position: relative; |
|
|
|
|
|
