superviseDetail.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. 、<template>
  2. <view class="content">
  3. <view class="top"></view>
  4. <view class="title-box">
  5. <view class="title-item flex">
  6. <view class="title-font">订单号:</view>
  7. <view class="title-main">9876543211025666</view>
  8. </view>
  9. <view class="title-item flex">
  10. <view class="title-font">名称:</view>
  11. <view class="title-main">豆豆鞋</view>
  12. </view>
  13. <view class="title-item flex">
  14. <view class="title-font">数量:</view>
  15. <view class="title-main">2000</view>
  16. </view>
  17. <view class="title-item flex">
  18. <view class="title-font">进行阶段:</view>
  19. <view class="title-main">打样</view>
  20. </view>
  21. <view class="title-item flex">
  22. <view class="title-font">阶段预警时间:</view>
  23. <view class="title-main">2022年03月22日</view>
  24. </view>
  25. </view>
  26. <view class="main-box flex">
  27. <view class="main" v-for="(item,index) in 7">
  28. <view class="main-title">下料:</view>
  29. <view class="main-font">计划:2022年02月25日</view>
  30. <view class="main-font">实际:2022年02月25日</view>
  31. <view class="main-font">已完成数量:230</view>
  32. <view class="main-font">剩余完成数量:653</view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {};
  41. },
  42. onLoad() {},
  43. onShow() {},
  44. onReachBottom() {},
  45. onReady() {},
  46. methods: {}
  47. };
  48. </script>
  49. <style lang="scss">
  50. page,
  51. .content {
  52. min-height: 100%;
  53. height: auto;
  54. background: #ffffff;
  55. }
  56. .top {
  57. width: 100%;
  58. height: 20rpx;
  59. background: #f8f8f8;
  60. }
  61. .title-box {
  62. margin: 20rpx auto 0;
  63. width: 702rpx;
  64. background: #FFFFFF;
  65. border: 2px dashed #EAECED;
  66. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  67. border-radius: 20rpx;
  68. padding: 0 20rpx;
  69. .title-item {
  70. padding: 20rpx 0;
  71. border-bottom: 2px dashed #EAECED;
  72. }
  73. .title-item:last-child {
  74. border-bottom: none;
  75. }
  76. .title-font {
  77. font-size: 28rpx;
  78. font-family: PingFang SC;
  79. font-weight: 500;
  80. color: #666666;
  81. }
  82. .title-main {
  83. font-size: 28rpx;
  84. font-family: PingFang SC;
  85. font-weight: bold;
  86. color: #333333;
  87. }
  88. }
  89. .main-box {
  90. padding: 0 20rpx;
  91. flex-wrap: wrap;
  92. .main {
  93. padding: 0 20rpx;
  94. margin-top: 20rpx;
  95. width: 342rpx;
  96. background: #FFFFFF;
  97. border: 2px dashed #EAECED;
  98. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  99. border-radius: 20rpx;
  100. .main-title {
  101. padding: 20rpx 0;
  102. border-bottom: 1px dashed #EAECED;
  103. font-size: 28rpx;
  104. font-family: PingFang SC;
  105. font-weight: bold;
  106. color: #333333;
  107. }
  108. .main-font {
  109. padding: 20rpx 0;
  110. border-bottom: 1px dashed #EAECED;
  111. font-size: 28rpx;
  112. font-family: PingFang SC;
  113. font-weight: 500;
  114. color: #333333;
  115. }
  116. .main-font:last-child {
  117. border-bottom: none;
  118. }
  119. }
  120. }
  121. </style>