<template> <div id="GongDanPaiFa"> <el-form :model="AllData.form" label-width="auto" style="max-width: 100%; padding: 0 40px 0 0px" class="GongDanPaiForm" > <el-form-item label="工单类型:" class="cell2"> <el-input v-model="AllData.form.GDType" /> </el-form-item> <el-form-item label="警情时间:" class="cell2"> <el-input v-model="AllData.form.JQTimer" /> </el-form-item> <el-form-item label="风险位置:" class="cell1"> <el-input v-model="AllData.form.FXWZ" /> </el-form-item> <el-form-item label="辅助研判:" class="cell1"> <el-input v-model="AllData.form.FZYP" /> </el-form-item> <el-form-item label="要求反馈时间:" class="cell2"> <el-input v-model="AllData.form.FKSJ" /> </el-form-item> <el-form-item label="要求完成时间:" class="cell2"> <el-input v-model="AllData.form.WCSJ" /> </el-form-item> </el-form> <el-button color="#03B6A0" :dark="isDark" style="width: 110px; height: 34px" >派发工单</el-button > </div> </template> <script setup name="GongDanPaiFa"> import { ref, reactive, toRefs, onMounted } from "vue"; const AllData = reactive({ form: { GDType: "预警工单", JQTimer: "2024-09-26 17:26", FXWZ: "车城大道与车辆西路路口", FZYP: "压力检测超标,并且该地点管网发生过管道泄漏事件", FKSJ: "2小时内", WCSJ: "2024-09-30", }, }); onMounted(() => {}); </script> <style lang="scss" scoped> #GongDanPaiFa { width: 100%; height: 100%; text-align: center; :deep(.GongDanPaiForm) { width: 100%; height: calc(100% - 60px); overflow: auto; .cell1 { float: left; width: 100%; } .cell2 { float: left; width: 50%; .el-form-item__label { width: 200px !important; } } .el-form-item__label { font-family: Source Han Sans CN; font-weight: 400; font-size: 16px; color: #ffffff; } .el-input__wrapper { background: rgba(14, 69, 89, 0.9); border: 1px solid #1cf5fc; box-shadow: none; .el-input__inner { font-family: Source Han Sans CN; font-weight: 400; font-size: 16px; color: #c1d3d4; } } } } </style>