fix

pages/index/index.vue

@@ -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'}">
+			<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>
-				<uni-search-bar class="search" radius="30" placeholder="请输入" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="initList" />
+					<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;