学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

56 lines
986 B

  1. <template>
  2. <view class="searchBg">
  3. <view class="flex">
  4. <view class="searchIcon">
  5. <image src="@/static/images/index/searchIcon.png" mode=""></image>
  6. </view>
  7. <view class="inputBox">
  8. <u-search :placeholder="placeholder" v-model="keyword" :color="'#fff'" placeholderColor="#fff" searchIcon="" :bgColor="'transparent'" :showAction="false" @search="searchFn" @clear="searchFn"></u-search>
  9. </view>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: ['placeholder'],
  16. data() {
  17. return {
  18. keyword: ''
  19. }
  20. },
  21. methods: {
  22. searchFn() {
  23. this.$emit('searchFn', this.keyword)
  24. }
  25. }
  26. }
  27. </script>
  28. <style lang="scss" scoped>
  29. .searchBg {
  30. background: #8ABAED;
  31. width: 100%;
  32. height: 72rpx;
  33. border-radius: 16rpx;
  34. line-height: 72rpx;
  35. .flex {
  36. height: 100%;
  37. padding: 0 28rpx;
  38. .searchIcon {
  39. width: 40rpx;
  40. height: 40rpx;
  41. }
  42. .inputBox {
  43. flex: 1;
  44. color: #fff;
  45. font-size: 28rpx;
  46. }
  47. }
  48. }
  49. </style>