fitProductlist.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view>
  3. <view class="searchBox">
  4. <view class="searchBox_l"><u-search placeholder="请输入产品编码/产品名称" v-model="keyword" bg-color="#fff" :action-style="searchStyle"></u-search></view>
  5. <view class="searchBox_r" @click="sortShow=true">
  6. <text>排序</text>
  7. <uni-icons color="#666666" type="paixu" @click="clear"></uni-icons>
  8. <!-- <u-icon name="https://cdn.uviewui.com/uview/example/button.png" color="#2979ff" size="28"></u-icon> -->
  9. </view>
  10. </view>
  11. <view class="listBox">
  12. <view class="listBox_l"><image src="../../static/default/def_img@2x.png" width="100%" height="100%"></image></view>
  13. <view class="listBox_r">
  14. <view class="type">ddiididid</view>
  15. <view class="tit">标题踢踢踢踢i</view>
  16. <view class="bot u-flex u-row-between">
  17. <view>
  18. 适配有货
  19. <text>3</text>
  20. </view>
  21. <view>
  22. 适配无货
  23. <text>3</text>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <!-- 排序弹窗 -->
  29. <u-popup v-model="sortShow" mode="right">
  30. <view>出淤泥而不染,濯清涟而不妖</view>
  31. </u-popup>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. searchStyle: {
  39. border: '1rpx solid #189Dff',
  40. marginRight: '10rpx',
  41. borderRadius: '26rpx',
  42. color: '#189Dff',
  43. fontSize: '26rpx',
  44. padding: '4rpx 10rpx'
  45. },
  46. sortShow:false,
  47. keyword:''
  48. };
  49. },
  50. methods: {}
  51. };
  52. </script>
  53. <style lang="less" scoped>
  54. page {
  55. background: #ffffff;
  56. padding: 20rpx;
  57. display: inherit !important;
  58. .searchBox {
  59. width: 100%;
  60. display: flex;
  61. align-items: center;
  62. .searchBox_l {
  63. width: 80%;
  64. border: 1rpx solid #e0e0e0;
  65. border-radius: 36rpx;
  66. box-sizing: border-box;
  67. }
  68. .searchBox_r {
  69. width: 19%;
  70. color: #9da8b5;
  71. text-align: right;
  72. text {
  73. margin-right: 10rpx;
  74. }
  75. }
  76. }
  77. .listBox {
  78. width: 100%;
  79. display: flex;
  80. padding: 30rpx 0;
  81. border-bottom: 1rpx solid #e0e0e0;
  82. .listBox_l {
  83. width: 150rpx;
  84. height: 150rpx;
  85. overflow: hidden;
  86. border-radius: 20rpx;
  87. margin-right: 20rpx;
  88. image {
  89. width: 100%;
  90. height: 100%;
  91. background-color: red;
  92. }
  93. }
  94. .listBox_r {
  95. width: calc(100% - 170rpx);
  96. .type {
  97. color: #222;
  98. font-size: 32rpx;
  99. }
  100. .tit {
  101. margin: 10rpx 0;
  102. overflow: hidden;
  103. text-overflow: ellipsis;
  104. display: -webkit-box;
  105. -webkit-line-clamp: 1;
  106. -webkit-box-orient: vertical;
  107. }
  108. .bot {
  109. width: 100%;
  110. view {
  111. &::first-child {
  112. color: #999;
  113. text {
  114. color: green;
  115. }
  116. }
  117. &::last-child {
  118. color: #999;
  119. text {
  120. color: red;
  121. }
  122. }
  123. }
  124. }
  125. }
  126. }
  127. }
  128. </style>