72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="loss-list">
|
||
|
|
<template v-for="item in modelValue">
|
||
|
|
<van-field v-model="item.value" label="塌方及损失" placeholder="请填写" type="digit" @click="cubeCalculateDialog.show()">
|
||
|
|
<template #button>
|
||
|
|
<span class="field-unit">方/万元</span>
|
||
|
|
</template>
|
||
|
|
</van-field>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<CubeCalculateDialog ref="cubeCalculateDialog" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, computed } from 'vue'
|
||
|
|
import CubeCalculateDialog from './CubeCalculateDialog.vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const cubeCalculateDialog = ref(null)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.field-unit {
|
||
|
|
color: #969799;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loss-dialog-content {
|
||
|
|
padding: 16px;
|
||
|
|
|
||
|
|
:deep(.van-field) {
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.calculation-preview {
|
||
|
|
background-color: #f7f8fa;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 12px;
|
||
|
|
margin-top: 12px;
|
||
|
|
|
||
|
|
.preview-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-label {
|
||
|
|
color: #646566;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-value {
|
||
|
|
color: #ee0a24;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|