效果如图

搜索栏 - 图1

页面代码

  1. <template>
  2.     <view>
  3.         <view class="content1"></view>
  4.         <view class="search-block">
  5.             <view class="search-ico-wapper">
  6.                 <image src="../../static/chongzhi_sousuo/chongzhi-icon-sousuo@3x.png" class="search-ico" mode=""></image>
  7.             </view>
  8.             <input type="text" value="" placeholder="点击输入搜索内容" class="search-text" maxlength="10" focus/>
  9.             <view class="search-ico-wapper1">
  10.                 <image src="../../static/chongzhi_sousuo/chongzhi-icon-sys@3x.png" class="search-ico-1" mode=""></image>
  11.             </view>
  12.         </view>
  13.         <view class="shadow">
  15.         </view>
  16.     </view>
  17. </template>

js

  1. <script>
  2.     export default {
  3.         data() {
  4.             return {
  6.             }
  7.         },
  8.         methods: {
  10.         }
  11.     }
  12. </script>

css

  2. <style>
  3. .content1{
  4.     height: 150upx;
  5. }
  7. page{
  8.     background-color: #FFFFFF;
  9. }
  10. /* 搜索框 */
  11. .search-ico, .search-ico-1{
  12.     width: 40upx;
  13.     height: 40upx;
  14. }
  15. .search-text{
  16.     font-size: 14px;
  17.     background-color: #FFFFFF;
  18.     height: 60upx;
  19.     width: 480upx;
  20. }
  21. .search-block{
  22.     display: flex;
  23.     flex-direction: row;
  24.     padding-left: 60upx;
  25.     position: relative;
  26.     top: -32upx;
  27. }
  28. .search-ico-wapper{
  29.     background-color: #FFFFFF;
  30.     display: flex;
  31.     flex-direction:column;
  32.     justify-content: center;
  33.     padding: 0upx 0upx 0upx 40upx;
  34.     border-bottom-left-radius:18px;
  35.     border-top-left-radius: 18px;
  36. }
  37. .search-ico-wapper1{
  38.     background-color: #FFFFFF;
  39.     display: flex;
  40.     flex-direction:column;
  41.     justify-content: center;
  42.     padding: 0upx 40upx 0upx 0upx;
  43.     border-bottom-right-radius:18px;
  44.     border-top-right-radius: 18px;
  45. }
  46. .shadow{
  47.     width: 638upx;
  48.     height: 60upx;
  49.     border-radius:18px;
  50.     -moz-box-shadow:0 0 10px #e6e6e6;
  51.     -webkit-box-shadow:0 0 10px #e6e6e6;
  52.     box-shadow:0 0 10px #e6e6e6;
  53.     position: relative;
  54.     top: -90upx;
  55.     left: 60upx;
  56. }
  57. </style>