样式

components/NavBar.vue

@@ -53,19 +53,20 @@
 .header
 	_fj()
 	_wh(100%, 42px)
-	background-color $red
+	background-color #fff
 	z-index 200
 	padding 0 15px
+	box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
 .page_name
-	_font(16px, 20px, #fff,700,center)
+	_font(16px, 20px, #000,700,center)
 .icon_back {
 	font-size: 30px;
 	line-height: 30px;
-	color: #fff;
+	color: #666;
 }
 .icon_home {
 	font-size: 30px;
 	line-height: 30px;
-	color: #fff;
+	color: #666;
 }
 </style>

components/SearchBox.vue

@@ -1,17 +1,18 @@
 <template>
-	<view class="search_wraper">
+	<view class="zd-row search_wraper" :class="{'input_focus': focusState}">
+		<view class="iconfont icon_search" @tap="toSearch">&#xe6e1;</view>
 		<input 
+		ref="input"
 		type="text" 
 		class="search_input" 
 		:placeholder="placeholder"
 		:value="value"
-		:focus="focused"
+		:focus="focusState"
+		@blur="focusState=false"
+		@focus="focusState=true"
 		@input="handleChange($event)">
-		<view class="buttons_wraper">
-			<view class="iconfont icon-del" @tap="toDel">&#xe6dc;</view>
-			<view class="iconfont icon_scan" @tap="checkMpaasScan">&#xe6e2;</view>
-			<view v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</view>
-		</view>
+		<view class="iconfont icon-del" @tap="toDel">&#xe6dc;</view>
+		<view class="iconfont icon_scan" @tap="checkMpaasScan">&#xe6e2;</view>
 	</view>
 </template>
 
@@ -20,7 +21,8 @@
 	export default {
 		data() {
 			return {
-				cur: ''
+				cur: '',
+				focusState: true
 			};
 		},
 		model: {
@@ -33,10 +35,6 @@
 			seaShow: {
 			  type: Boolean,
 			  default: false
-			},
-			focused: {
-				type: Boolean,
-				default: false
 			}
 		},
 		methods: {
@@ -46,7 +44,10 @@
 				this.$emit('handleChange', this.cur)
 			},
 			toSearch () {
-				this.$emit('toSearch', this.cur)
+				// this.$emit('toSearch', this.cur)
+				this.$nextTick(() => {
+					this.focusState = true
+				})
 			},
 			toDel () {
 				this.$emit('input', '')
@@ -124,30 +125,30 @@
 <style lang="stylus">
 @import '../common/style/mixin.styl';
 .search_wraper
-	position relative
-	_wh(100%, 35px)
+	_wh(100%, 38px)
+	padding 0 2px 0 12px
+	border 1px solid #e1e1e1
+	background-color #fff
+	border-radius 12px
 .search_input
-	border 1px solid #e5e5e5
-	border-radius 4px
-	height: 35px;
-	line-height: 35px;
-	padding-left 10px;
-	padding-right 100px;
+	width 100%
+	height: 38px;
+	line-height: 38px;
 	font-size: 14px;
 	color: #6a6a6a
-.buttons_wraper
-	_fj()
-	position absolute
-	top 0
-	right 0
-	_wh(auto, 35px)
 .icon-del
-	_wh(30px, 35px)
-	_font(30px,35px,#6a6a6a,,center)
+	_wh(35px, 35px)
+	margin-right 5px
+	_font(20px,35px,#a2b6cc,,center)
 .icon_scan
-	_wh(30px, 35px)
-	_font(30px,35px,#6a6a6a,,center)
+	_wh(70px, 30px)
+	_font(20px,30px,#fff,,center)
+	background-color $red
+	border-radius 12px
 .icon_search
-	_wh(30px, 35px)
-	_font(30px,35px,#6a6a6a,,center)
+	_wh(35px, 35px)
+	_font(20px,35px,#a2b6cc,,center)
+.input_focus
+	border: 1px solid #889dc7;
+	box-shadow: 0 0 0 2px rgba(136, 157, 199,.2);
 </style>