stockQuery.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <view class="sockQuery flex flex_column">
  3. <view class="search-box">
  4. <u-search placeholder="请输入货位号/产品编码/产品名称搜索" v-model="queryWord"></u-search>
  5. </view>
  6. <view class="list-box">
  7. <view class="list-item flex align_center justify_between" v-for="item in 35">
  8. <view>
  9. <u-image src="@/static/def_imgs.png" width='120' height="120"></u-image>
  10. </view>
  11. <view>
  12. <view class="flex align_center justify_between">
  13. <view class="vin-text">
  14. <text class="hj-no">A01</text>
  15. <text>JO-21026E</text>
  16. </view>
  17. <view class="time-text">
  18. 库存:<text>3个</text>
  19. </view>
  20. </view>
  21. <view>箭牌机油滤清器 10款进口大众途锐 5.0L V10 TDI</view>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. queryWord: ""
  32. }
  33. },
  34. methods: {
  35. }
  36. }
  37. </script>
  38. <style lang="less">
  39. .sockQuery{
  40. width: 100%;
  41. height: 100vh;
  42. background: #f8f8f8;
  43. .search-box{
  44. padding: 20rpx 30rpx;
  45. }
  46. .list-box{
  47. flex-grow: 1;
  48. overflow: auto;
  49. }
  50. .list-item{
  51. margin: 20rpx 30rpx;
  52. border:2rpx solid #f8f8f8;
  53. box-shadow: 2rpx 2rpx 6rpx #eee;
  54. border-radius: 20rpx;
  55. padding: 20rpx 15rpx;
  56. background: #ffffff;
  57. > view{
  58. padding: 0 10rpx;
  59. &:last-child{
  60. >view{
  61. padding: 10rpx 0;
  62. }
  63. }
  64. }
  65. .time-text{
  66. color: #999;
  67. text{
  68. color: #333;
  69. }
  70. }
  71. .vin-text{
  72. .hj-no{
  73. background: #f1f1f1;
  74. display: inline-block;
  75. border-radius: 10rpx;
  76. padding: 0 10rpx;
  77. margin-right: 10rpx;
  78. }
  79. }
  80. &:first-child{
  81. margin-top: 0;
  82. }
  83. &:active{
  84. opacity: 0.6;
  85. transform:scale(0.9);
  86. }
  87. }
  88. }
  89. </style>