123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <template>
- <div class="stepsViewScroll">
- <div class="recordBox">
- <div class="leftMsg">
- <div class="msgHeader">
- <div class="titleText">外围尺寸</div>
- <div class="describeText">单位:cm</div>
- </div>
- <div class="msgFooter">
- <div class="describeText">单位:cm</div>
- <div class="describeText">单位:cm</div>
- <div class="describeText">单位:cm</div>
- </div>
- </div>
- <div class="rightOperate">
- <div></div>
- <div class="operate">
- <div class="describeText operateText">实际值</div>
- <div class="operateBox">
- <div class="leftBox">
- <svg-icon :icon-class="jianDisabled ? 'bujian' : 'jian'" size="25" class="svgStyle" />
- </div>
- <div class="showSum">1212</div>
- <div class="rightBox">
- <svg-icon :icon-class="jiaDisabled ? 'bujia' : 'jia'" size="25" class="svgStyle" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- defineOptions({
- name: "Jiluxiang",
- });
- const input = ref("");
- const jianDisabled = ref(true);
- const jiaDisabled = ref(false);
- </script>
- <style lang="scss" scoped>
- .titleText {
- font-size: $f24;
- font-weight: $Medium;
- }
- .describeText {
- font-size: $f20;
- color: $font-default-60;
- line-height: 25px;
- }
- .recordBox {
- width: 600px;
- height: 210px;
- background-color: white;
- border-radius: 16px;
- display: flex;
- padding: $p20;
- justify-content: space-between;
- align-items: center;
- position: relative;
- .leftMsg {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 170px;
- }
- .rightOperate {
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .operate {
- .operateText {
- margin-bottom: $p5;
- }
- .operateBox {
- width: 290px;
- height: 70px;
- border: 2px solid black;
- border-radius: 16px;
- display: flex;
- justify-content: space-between;
- .leftBox {
- width: 70px;
- height: 70px;
- @include flex;
- }
- .showSum {
- flex: 1;
- @include flex;
- border: 2px solid black;
- border-top: 0px;
- border-bottom: 0px;
- font-weight: bold;
- font-size: $f38;
- }
- .rightBox {
- width: 70px;
- height: 70px;
- @include flex;
- }
- }
- }
- }
- }
- </style>
|