bt-search.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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-iconfonticonfontsousuo1"></text>
  6. <text>美白/润肤</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. },
  20. data() {
  21. return {
  22. };
  23. },
  24. methods:{
  25. }
  26. }
  27. </script>
  28. <style lang="scss">
  29. .search-input{
  30. width: 100%;
  31. height: 80rpx;
  32. margin-bottom: 20rpx;
  33. background: #FFFFFF;
  34. .gosearch-btn{
  35. /* #ifndef APP-NVUE */
  36. display: flex;
  37. /* #endif */
  38. flex: 1;
  39. flex-direction: row;
  40. justify-content: center;
  41. align-items: center;
  42. width: 662rpx;
  43. height: 100%;
  44. border-radius: 40rpx;
  45. background: #F0F0F0;
  46. margin: 0 auto;
  47. padding:0 20rpx;
  48. font-size: 28rpx;
  49. line-height: 80rpx;
  50. color: #8A8A8A;
  51. .icon-iconfonticonfontsousuo1{
  52. margin:0 6rpx;
  53. font-size: 34rpx;
  54. color: #8A8A8A;
  55. z-index: 10;
  56. }
  57. }
  58. }
  59. </style>