绿藻头常用的两种搜索

第一种

html部分

<view class="search">
<input type="text" placeholder="请输入课程名称" v-model="searchInfo" />
<button>搜索</button>
</view>

js部分

<script>
	export default {
		data() {
			return {
			             searchInfo:''
			         }
		      }
	}
</script>

css部分

<style lang="scss">
.search {
	width: 68%;
	height: 60rpx;
	font-size: 26rpx;
	display: flex;
	margin-left: 20rpx;
    input {
		box-sizing: border-box;
		width: 80%;
		height: 60rpx;
		border: none;
		padding: 5rpx 20rpx;
		border-radius: 10rpx 0 0 10rpx;
		background-color: #fff;
		}

	button {
		width: 20%;
		height: 60rpx;
		line-height: 55rpx;
		border: none;
		font-size: 26rpx;
		padding: 0 10rpx;
		color: #fff;
		border-radius: 0 10rpx 10rpx 0;
		background-color: #517cc8;
		}
	}
</style>

第二种 跟项目里有点小改动 布局上可能会有点问题:D

html部分

<view class="searchbar">
			<input type="text" v-model="searchInfo" />
			<text class="iconfont search">&#xe6ad;</text>
			<!--这是一个小麦克风图标，项目里后来没用到，所以图中没显示，用的是阿里图标，用的话可以把注释打开:D-->
			<!-- <text class="iconfont micphone">&#xe736;</text> -->
			<button @click="mysearch">搜索</button>
</view>

js部分

<script>
	export default {
		data() {
			return {
			             searchInfo:''
			         }
		      }
	}
</script>

css部分

<style lang="scss">
.searchbar {
				position: relative;
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 750rpx;
				height: 80rpx;
				padding: 0 20rpx;
				background-color: #fff;

				input {
					width: 70%;
					height: 60rpx;
					box-sizing: border-box;
					padding: 10rpx 80rpx;
					border-radius: 50rpx;
					background-color: #eaeff9;
				}

				.search {
					position: absolute;
					left: 9vw;
				}

				.micphone {
					position: absolute;
					left: 49vw;
				}

				.clock {
					font-size: 50rpx;
					font-weight: 550;
				}

				button {
					position: absolute;
					left: 55vw;
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					border: none;
					border-radius: 50rpx;
					font-size: 24rpx;
					color: #fff;
					z-index: 30;
					background-image: linear-gradient(to right, #ff9d3e, #e6750f);
				}
			}
</style>