uniapp如何实现搜索栏

<template>    <view>        <view></view>        <view>            <view>                <image></image>            </view>            <input>            <view>                <image></image>            </view>        </view>        <view>        </view>    </view></template><script>    export default {        data() {            return {            }        },        methods: {        }    }</script><style>.content1{    height: 150upx;}page{    background-color: #FFFFFF;}/* 搜索框 */.search-ico, .search-ico-1{    width: 40upx;    height: 40upx;}.search-text{    font-size: 14px;    background-color: #FFFFFF;    height: 60upx;    width: 480upx;}.search-block{    display: flex;    flex-direction: row;    padding-left: 60upx;    position: relative;    top: -32upx;}.search-ico-wapper{    background-color: #FFFFFF;    display: flex;    flex-direction:column;    justify-content: center;    padding: 0upx 0upx 0upx 40upx;    border-bottom-left-radius:18px;    border-top-left-radius: 18px;}.search-ico-wapper1{    background-color: #FFFFFF;    display: flex;    flex-direction:column;    justify-content: center;    padding: 0upx 40upx 0upx 0upx;    border-bottom-right-radius:18px;    border-top-right-radius: 18px;}.shadow{    width: 638upx;    height: 60upx;    border-radius:18px;    -moz-box-shadow:0 0 10px #e6e6e6;    -webkit-box-shadow:0 0 10px #e6e6e6;    box-shadow:0 0 10px #e6e6e6;    position: relative;    top: -90upx;    left: 60upx;}</style>