home-search.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334
  1. <template>
  2. <view class="flex items-center justify-between px-12 mt-11 relative zi-10">
  3. <view class="scs-search w-283 h-34">
  4. <view class="search-input">
  5. <image class="icon-search" src="/static/images/search.png" mode="aspectFit"></image>
  6. <input class="input-value" type="text" v-model="keyword" placeholder="搜索商品" confirm-type="search"
  7. @confirm="onSearch" />
  8. <button class="w-60 h-30 rounded-15 fs-14 color-white lh-30" @click="onSearch">搜索</button>
  9. </view>
  10. </view>
  11. <view class="w-24 h-24 relative">
  12. <image class="w-all h-all" src="/static/images/share_icon.png" mode=""></image>
  13. <button class="w-all h-all absolute top-0 left-0 opacity-0" open-type="contact"></button>
  14. </view>
  15. <view class="w-24 h-24 relative">
  16. <image class="w-all h-all" src="/static/images/new_hall_icon.png" mode=""></image>
  17. <button class="w-all h-all absolute top-0 left-0 opacity-0" open-type="contact"></button>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. data() {
  24. return {
  25. keyword: '',
  26. }
  27. },
  28. methods: {
  29. onSearch() {
  30. this.$emit('onSearch', this.keyword)
  31. }
  32. }
  33. }
  34. </script>