jiluxiang.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <div class="stepsViewScroll">
  3. <div class="recordBox">
  4. <div class="leftMsg">
  5. <div class="msgHeader">
  6. <div class="titleText">外围尺寸</div>
  7. <div class="describeText">单位:cm</div>
  8. </div>
  9. <div class="msgFooter">
  10. <div class="describeText">单位:cm</div>
  11. <div class="describeText">单位:cm</div>
  12. <div class="describeText">单位:cm</div>
  13. </div>
  14. </div>
  15. <div class="rightOperate">
  16. <div></div>
  17. <div class="operate">
  18. <div class="describeText operateText">实际值</div>
  19. <div class="operateBox">
  20. <div class="leftBox">
  21. <svg-icon :icon-class="jianDisabled ? 'bujian' : 'jian'" size="25" class="svgStyle" />
  22. </div>
  23. <div class="showSum">1212</div>
  24. <div class="rightBox">
  25. <svg-icon :icon-class="jiaDisabled ? 'bujia' : 'jia'" size="25" class="svgStyle" />
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <script lang="ts" setup>
  34. defineOptions({
  35. name: "Jiluxiang",
  36. });
  37. const input = ref("");
  38. const jianDisabled = ref(true);
  39. const jiaDisabled = ref(false);
  40. </script>
  41. <style lang="scss" scoped>
  42. .titleText {
  43. font-size: $f24;
  44. font-weight: $Medium;
  45. }
  46. .describeText {
  47. font-size: $f20;
  48. color: $font-default-60;
  49. line-height: 25px;
  50. }
  51. .recordBox {
  52. width: 600px;
  53. height: 210px;
  54. background-color: white;
  55. border-radius: 16px;
  56. display: flex;
  57. padding: $p20;
  58. justify-content: space-between;
  59. align-items: center;
  60. position: relative;
  61. .leftMsg {
  62. display: flex;
  63. flex-direction: column;
  64. justify-content: space-between;
  65. height: 170px;
  66. }
  67. .rightOperate {
  68. height: 100%;
  69. display: flex;
  70. flex-direction: column;
  71. justify-content: space-between;
  72. .operate {
  73. .operateText {
  74. margin-bottom: $p5;
  75. }
  76. .operateBox {
  77. width: 290px;
  78. height: 70px;
  79. border: 2px solid black;
  80. border-radius: 16px;
  81. display: flex;
  82. justify-content: space-between;
  83. .leftBox {
  84. width: 70px;
  85. height: 70px;
  86. @include flex;
  87. }
  88. .showSum {
  89. flex: 1;
  90. @include flex;
  91. border: 2px solid black;
  92. border-top: 0px;
  93. border-bottom: 0px;
  94. font-weight: bold;
  95. font-size: $f38;
  96. }
  97. .rightBox {
  98. width: 70px;
  99. height: 70px;
  100. @include flex;
  101. }
  102. }
  103. }
  104. }
  105. }
  106. </style>