CarDetail.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view class="box">
  3. <view class="mainBox">
  4. <view class="workBox2" v-for="(item,index) in itemList" :key="index">
  5. <view class="titleBox">分组1</view>
  6. <view class="comtent2">
  7. <view class="left2">标题</view>
  8. <view class="right2">1201D0</view>
  9. </view>
  10. <view class="comtent2">
  11. <view class="left2">零件编号</view>
  12. <view class="right2">12</view>
  13. </view>
  14. <view class="comtent2">
  15. <view class="left2">名称</view>
  16. <view class="right2">1201D0</view>
  17. </view>
  18. <view class="comtent2">
  19. <view class="left2">位置</view>
  20. <view class="right2">12</view>
  21. </view>
  22. <view class="comtent2">
  23. <view class="left2">用量</view>
  24. <view class="right2">1201D0</view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. itemList:[1,2,3,4]
  35. }
  36. },
  37. methods: {
  38. }
  39. }
  40. </script>
  41. <style>
  42. .box {
  43. min-height: 100vh;
  44. background: #F4F5F7;
  45. padding-top: 20rpx;
  46. }
  47. .mainBox {
  48. background: #FFFFFF;
  49. }
  50. .titleBox{
  51. font-size: 30rpx;
  52. color: #333333;
  53. font-weight: bold;
  54. padding-bottom: 20rpx;
  55. }
  56. .comtent2 {
  57. display: flex;
  58. align-items: baseline;
  59. font-size: 26rpx;
  60. padding-bottom: 20rpx;
  61. }
  62. .workBox2{
  63. background: #FFFFFF;
  64. border-bottom: 1rpx solid #EEEEEE;
  65. padding: 20rpx 24rpx 0rpx;
  66. }
  67. .left2 {
  68. width: 40%;
  69. color: #999999;
  70. white-space: nowrap;
  71. }
  72. .right2 {
  73. width: 60%;
  74. color: #333333;
  75. }
  76. </style>