find.page.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <ion-header>
  2. <ion-toolbar>
  3. <ion-title>商品库</ion-title>
  4. </ion-toolbar>
  5. <ion-buttons slot="start">
  6. <ion-back-button defaultHref="/tab1"></ion-back-button>
  7. </ion-buttons>
  8. </ion-header>
  9. <ion-content>
  10. <ion-segment value="category">
  11. <ion-segment-button value="category">
  12. 分类
  13. </ion-segment-button>
  14. <ion-segment-button value="theme">
  15. 主题
  16. </ion-segment-button>
  17. <ion-segment-button value="region">
  18. 地区
  19. </ion-segment-button>
  20. </ion-segment>
  21. <ion-list>
  22. <ion-item>
  23. <ion-label>发布时间</ion-label>
  24. <ion-select>
  25. <ion-select-option value="latest">最新发布</ion-select-option>
  26. <ion-select-option value="oldest">最早发布</ion-select-option>
  27. </ion-select>
  28. </ion-item>
  29. <ion-item>
  30. <ion-label>卖家</ion-label>
  31. <ion-input type="text" placeholder="搜索卖家"></ion-input>
  32. </ion-item>
  33. <ion-item>
  34. <ion-label>分类</ion-label>
  35. <ion-select>
  36. <ion-select-option value="electronics">电子产品</ion-select-option>
  37. <ion-select-option value="apparel">服饰鞋包</ion-select-option>
  38. <ion-select-option value="furniture">家具家居</ion-select-option>
  39. <ion-select-option value="others">其他</ion-select-option>
  40. </ion-select>
  41. </ion-item>
  42. <ion-item>
  43. <ion-label>状态</ion-label>
  44. <ion-select>
  45. <ion-select-option value="onsale">售卖中</ion-select-option>
  46. <ion-select-option value="sold">已售出</ion-select-option>
  47. <ion-select-option value="offshelf">下架</ion-select-option>
  48. </ion-select>
  49. </ion-item>
  50. </ion-list>
  51. <ion-list>
  52. <!-- 示例商品卡片 -->
  53. <ion-item>
  54. <ion-thumbnail slot="start">
  55. <img src="https://img.zcool.cn/community/01468058774ec8a801219c774ef6fb.jpg@1280w_1l_2o_100sh.jpg">
  56. </ion-thumbnail>
  57. <ion-label>
  58. <h2>商品名称</h2>
  59. <p>发布时间/卖家</p>
  60. <p>描述信息</p>
  61. </ion-label>
  62. </ion-item>
  63. <!-- 示例商品卡片 -->
  64. </ion-list>
  65. </ion-content>