junzitang/components/PageDesign/components/Search.vue

<template>
	<view class="search-box" @click="goPage('/pagesT/search/index')">
		<view class="search-in" :style="{ textAlign: modelData.textStyle, borderRadius: modelData.boxStyle === 3 ? '80rpx' : modelData.boxStyle === 2 ? '10rpx' : '0' }">
			<text class="ibonfont ibonsousuo1 primary-color"></text>
			<text>{{ modelData.tipText }}</text>
		</view>
	</view>
</template>

<script>

export default {
	props: {
		fixed: {
			type: Boolean,
			default: false
		},
		modelData: {
			type: Object,
			default: () => {
				return {
					tipText: '请输入关键词',
					boxStyle: '1',
					textStyle: 'center'
				};
			}
		}
	}
};
</script>

<style lang="scss">
.search-box {
	padding: 20upx 0;
	.search-in {
		background: #fff;
		width: 710upx;
		margin: 0 auto;
		height: 70upx;
		line-height: 70upx;
		font-size: 24upx;
		color: #999;
		font-weight: 300;
		padding: 0 20upx;
		border-radius: 10upx;
		.ibonfont {
			vertical-align: middle;
			margin-right: 10upx;
		}
	}
}

.nav-center {
	padding: 16upx 0;
	color: #9c9c9c;
	text-align: left;
	.like-input {
		width: 540upx;
		/* #ifdef APP-PLUS||H5 */
		margin: 0 auto;
		/* #endif */
		/* #ifdef MP */
		margin-left: 10upx;
		/* #endif */
		background: #fff;
		height: 56upx;
		line-height: 56upx;
		border-radius: 56upx;
		font-size: 20upx;
		.icon-sousuo {
			font-size: 24upx;
			padding-left: 23upx;
			padding-right: 13upx;
			vertical-align: middle;
		}
		span {
			font-weight: 300;
			vertical-align: middle;
		}
	}
}
</style>