456

xs-app/pages/search/search-nav.vue

@@ -2,6 +2,9 @@
 	<view class="nav_content" :style="{height: height + 'rpx'}">
 		<view class="container">
 			<view class="container__content">
+				<view class="container__content__icon">
+					<image class="image" src="../../static/imgs/bookstore/img_search.png" mode="aspectFit"></image>
+				</view>
 				<input class="container__content__input"
 				v-model="search_content"
 				placeholder="输入关键字"
@@ -10,8 +13,8 @@
 				@input="onInput"
 				@confirm="clickSearch"
 				type="text" />
-				<view class="container__content__btn" @click="clickSearch">搜索</view>
 			</view>
+			<view class="container__btn" @click="clickSearch">搜索</view>
 		</view>
 	</view>
 	
@@ -25,7 +28,7 @@
 		searchContent:String,
 	})
 	watch(()=>props.searchContent, (new_v,old_v)=>{
-	    console.log('searchContent 观察 新值:',new_v,'旧值:',old_v)
+	    // console.log('searchContent 观察 新值:',new_v,'旧值:',old_v)
 		if(new_v) {
 			search_content.value = new_v
 		}
@@ -63,7 +66,8 @@
 		
 		.container{
 			display: flex;
-			flex-direction: column;
+			flex-direction: row;
+			align-items: center;
 			height: 100%;
 			// background-color: yellow;
 			
@@ -72,26 +76,38 @@
 				flex-direction: row;
 				align-items: center;
 				margin-left: 3%;
-				height: 100%;
+				width: 85%;
+				height: 80%;
+				padding: 0 1%;
+				border-radius: 25rpx;
+				border: 2rpx solid #000000;
 				// background-color: green;
+				&__icon{
+					padding: 0 4%;
+					flex-shrink: 0;
+					width: 53rpx;
+					height: 53rpx;
+					.image {
+						width: 100%;
+						height: 100%;
+					}
+				}
 				&__input {
-					padding: 0 2%;
 					width: 80%;
 					height: 70%;
-					border-radius: 5rpx;
-					border: #eee solid 2rpx;
 					// background-color: skyblue;
 				}
-				&__btn {
-					display: flex;
-					width: 15%;
-					height: 100%;
-					justify-content: center;
-					align-items: center;
-					// background-color: blue;
-				}
+			}
+			&__btn {
+				display: flex;
+				width: 15%;
+				height: 100%;
+				justify-content: center;
+				align-items: center;
+				// background-color: blue;
 			}
 		}
+		
 	}
 	
 </style>