bt-search.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template name="bt-search">
  2. <view class="search-input">
  3. <template>
  4. <view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
  5. <text class="iconfont icon-sousuo"></text>
  6. <text>{{toestText}}</text>
  7. </view>
  8. </template>
  9. </view>
  10. </template>
  11. <script>
  12. export default{
  13. name:"bt-search",
  14. props:{
  15. clickPath:{ //选择块级显示还是圆形显示
  16. type: String,
  17. default: ''
  18. },
  19. toestText:{
  20. type: String,
  21. default: ''
  22. }
  23. },
  24. data() {
  25. return {
  26. };
  27. },
  28. methods:{
  29. }
  30. }
  31. </script>
  32. <style lang="scss">
  33. .search-input{
  34. width: 100%;
  35. height: 70rpx;
  36. padding: 12rpx 0;
  37. background: #FFFFFF;
  38. .gosearch-btn{
  39. /* #ifndef APP-NVUE */
  40. display: flex;
  41. /* #endif */
  42. flex: 1;
  43. flex-direction: row;
  44. justify-content: center;
  45. align-items: center;
  46. width: 662rpx;
  47. height: 100%;
  48. border-radius: 40rpx;
  49. background: #F0F0F0;
  50. margin: 0 auto;
  51. padding:0 20rpx;
  52. font-size: 28rpx;
  53. line-height: 70rpx;
  54. color: #8A8A8A;
  55. .icon-sousuo{
  56. margin:0 6rpx;
  57. font-size: 34rpx;
  58. color: #8A8A8A;
  59. z-index: 10;
  60. }
  61. }
  62. }
  63. </style>