• uni-app 搜索栏


    uni-app 搜索栏

     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">
    14             
    15         </view>
    16     </view>
    17 </template>
    18 
    19 <script>
    20     export default {
    21         data() {
    22             return {
    23                 
    24             }
    25         },
    26         methods: {
    27             
    28         }
    29     }
    30 </script>
    31 
    32 <style>
    33 .content1{
    34     height: 150upx;
    35 }
    36 
    37 page{
    38     background-color: #FFFFFF;
    39 }
    40 /* 搜索框 */
    41 .search-ico, .search-ico-1{
    42     width: 40upx;
    43     height: 40upx;
    44 }
    45 .search-text{
    46     font-size: 14px;
    47     background-color: #FFFFFF;
    48     height: 60upx;
    49     width: 480upx;
    50 }
    51 .search-block{
    52     display: flex;
    53     flex-direction: row;
    54     padding-left: 60upx;
    55     position: relative;
    56     top: -32upx;
    57 }
    58 .search-ico-wapper{
    59     background-color: #FFFFFF;
    60     display: flex;
    61     flex-direction:column;
    62     justify-content: center;
    63     padding: 0upx 0upx 0upx 40upx;
    64     border-bottom-left-radius:18px;
    65     border-top-left-radius: 18px;
    66 }
    67 .search-ico-wapper1{
    68     background-color: #FFFFFF;
    69     display: flex;
    70     flex-direction:column;
    71     justify-content: center;
    72     padding: 0upx 40upx 0upx 0upx;
    73     border-bottom-right-radius:18px;
    74     border-top-right-radius: 18px;
    75 }
    76 .shadow{
    77     width: 638upx;
    78     height: 60upx;
    79     border-radius:18px;
    80     -moz-box-shadow:0 0 10px #e6e6e6;
    81     -webkit-box-shadow:0 0 10px #e6e6e6;
    82     box-shadow:0 0 10px #e6e6e6;
    83     position: relative;
    84     top: -90upx;
    85     left: 60upx;
    86 }
    87 </style>

    调这个太费劲了,各种位置样式!!!!粘下来的话可以直接拿去用!!!下面上效果图!!!

    效果图

  • 相关阅读:
    flowable的多人会签和一票否决
    排序
    Java数组的三种打印方式
    CF446B DZY Loves Modification(优先队列)
    2019CCPC哈尔滨 Interesting Permutation(思维)
    2019沈阳网络赛 Fish eating fruit (换根dp)
    AcWing287 积蓄程度(换根dp)
    CF1358E Are You Fired?(前缀和+贪心)
    android android studio error
    cocos2D-X 打包
  • 原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11174998.html
Copyright © 2020-2023  润新知