搜索组件带icon

　　　　　<view class="cate-search">
            <view class="icon"><image mode="heightFix" src="../../static/icon/sousuo.png"></image></view>
            <view class="left"><input placeholder="请输入搜索内容" placeholder-style="font-size:26rpx;color:#c0c0c0"></view>
            <view class="right">搜索</view>
        </view>

　　　　　.cate-search{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 110rpx;
            .icon{
                width: 50rpx;
                height: 60rpx;
                background-color: #fff;
                border-radius: 10rpx 0 0 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                image{
                    height: 30rpx;
                }
            }
            .left{
                width: 460rpx;
                height: 60rpx;
                background-color: #fff;
                input{
                    border: none;
                    outline: none;
                    height: 100%;
                    color: #C0C0C0;
                }
                .place{
                    color: #C0C0C0;
                    font-size: 24rpx;
                }
            }
            .right{
                background-color: #dfdfdf;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #a0a0a0;
                font-size: 24rpx;
                width: 100rpx;
                height: 60rpx;
                border-radius: 0 10rpx 10rpx 0;
            }
        }

效果图