index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <!-- 搜索框 -->
  3. <view class="search-wrapper">
  4. <view class="index-search" @click="onClick">
  5. <view class="index-cont-search t-c">
  6. <text class="search-icon iconfont icon-sousuo"></text>
  7. <text class="search-text">{{ tips }}</text>
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. props: {
  15. tips: {
  16. type: String,
  17. default: '搜索关键字...'
  18. },
  19. itemStyle: Object,
  20. },
  21. data() {
  22. return {}
  23. },
  24. methods: {
  25. onClick() {
  26. this.$emit('event')
  27. }
  28. }
  29. }
  30. </script>
  31. <style lang="scss" scoped>
  32. .search-wrapper {
  33. padding: 0rpx 10rpx 10rpx 10rpx;
  34. display: block;
  35. position: fixed;
  36. z-index: 999999;
  37. width: 100%;
  38. background: #ffffff;
  39. }
  40. .index-search {
  41. border-bottom: 0;
  42. background: #f5f5f5;
  43. border-radius: 100rpx;
  44. overflow: hidden;
  45. font-size: 28rpx;
  46. color: #6d6d6d;
  47. box-sizing: border-box;
  48. height: 82rpx;
  49. line-height: 82rpx;
  50. border: solid 2rpx #ffffff;
  51. text-align: left;
  52. display: block;
  53. margin-top: 10rpx;
  54. .index-cont-search {
  55. width: 100%;
  56. font-size: 28rpx;
  57. background: #f5f5f5;
  58. text-align: center;
  59. padding-left: 30rpx;
  60. }
  61. .index-cont-search .search-icon {
  62. font-size: 30rpx;
  63. font-weight: bold;
  64. float: left;
  65. }
  66. .index-cont-search .search-text {
  67. margin-left: 5rpx;
  68. text-align: center;
  69. }
  70. }
  71. </style>