search.vue 994 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="index-search-box" id="searchBox">
  3. <view class="index-search diy-search t-c" :class="'diy-search-style-'+itemData.style.searchStyle+' diy-search-textAlign-'+itemData.style.textAlign"
  4. @click="gotoSearch">
  5. <span class="icon iconfont icon-sousuo"></span>
  6. <text class="ml10">{{itemData.params.placeholder}}</text>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {}
  14. },
  15. props: ['itemData'],
  16. methods: {
  17. /*跳转搜索页面*/
  18. gotoSearch() {
  19. let url = '/pages/product/search/search';
  20. this.gotoPage(url);
  21. }
  22. }
  23. }
  24. </script>
  25. <style>
  26. /*search*/
  27. .diy-search-style-3 {}
  28. .diy-search-style-6 {
  29. border-radius: 16rpx;
  30. }
  31. .diy-search-style-9 {
  32. border-radius: 50rpx;
  33. }
  34. .diy-search-textAlign-3 {
  35. justify-content: flex-start;
  36. }
  37. .diy-search-textAlign-6 {
  38. justify-content: center;
  39. }
  40. .diy-search-textAlign-9 {
  41. justify-content: flex-end;
  42. }
  43. .diy-search .svg-icon {
  44. margin-right: 10rpx;
  45. }
  46. </style>