index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <!-- 扫码出库确认页面 -->
  3. <view class="">
  4. <view class="header">
  5. </view>
  6. <view class="content" style="margin-bottom: 50rpx;">
  7. <view class="content-one">
  8. <view>胎号</view>
  9. <view>物料</view>
  10. </view>
  11. <view v-for="(item,index) in datalist" :key="index">
  12. <view class="content-two">
  13. <view>{{item.order}}</view>
  14. <view>{{item.size}}</view>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="tail">
  19. 扫码确认
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. datalist: [
  28. {
  29. order: '202134103765',
  30. size: 'SAILUN 185/6R14 SA10',
  31. sum: '100'
  32. },
  33. {
  34. order: '202134103765',
  35. size: 'SAILUN 185/6R14 SA10',
  36. sum: '100'
  37. },
  38. {
  39. order: '202134103765',
  40. size: 'SAILUN 185/6R14 SA10',
  41. sum: '100'
  42. },
  43. {
  44. order: '202134103765',
  45. size: 'SAILUN 185/6R14 SA10',
  46. sum: '100'
  47. },
  48. {
  49. order: '202134103765',
  50. size: 'SAILUN 185/6R14 SA10',
  51. sum: '100'
  52. },
  53. {
  54. order: '202134103765',
  55. size: 'SAILUN 185/6R14 SA10',
  56. sum: '100'
  57. },
  58. ]
  59. }
  60. },
  61. onLoad() {
  62. },
  63. methods: {
  64. },
  65. }
  66. </script>
  67. <style lang="scss" scoped>
  68. .header {
  69. width: 100%;
  70. height: 280rpx;
  71. background-color: #0094FE;
  72. }
  73. .content {
  74. width: 711rpx;
  75. // height: 792rpx;
  76. position: absolute;
  77. top: 40rpx;
  78. left: 20rpx;
  79. background: #FFFFFF;
  80. box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
  81. border-radius: 20px;
  82. }
  83. .content-one {
  84. display: flex;
  85. justify-content: space-between;
  86. }
  87. .content-one:nth-child(1) {
  88. margin-left: 90rpx;
  89. margin-right: 180rpx;
  90. font-weight: bold;
  91. margin-top: 30rpx;
  92. }
  93. .content-two {
  94. display: flex;
  95. justify-content: space-between;
  96. margin-top: 30rpx;
  97. line-height: 115rpx;
  98. width: 666rpx;
  99. margin: 0 auto;
  100. color: #9c9c9c;
  101. font-size: 28rpx;
  102. border-bottom: 1rpx solid #E8E8E8;
  103. }
  104. .tail {
  105. width: 678rpx;
  106. line-height: 83rpx;
  107. background: #0095FF;
  108. border-radius: 10rpx;
  109. position: fixed;
  110. top: 1100rpx;
  111. left: 36rpx;
  112. color: #fff;
  113. text-align: center;
  114. }
  115. </style>