From 97b0aeec9f31fd319b588e6a8042496d71638e27 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期一, 18 七月 2022 16:32:36 +0800 Subject: [PATCH] css --- src/components/equipmentDailog/Dailog.vue | 30 +++++++++++++++++++++++------- 1 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/equipmentDailog/Dailog.vue b/src/components/equipmentDailog/Dailog.vue index 12c2dd3..a6af807 100644 --- a/src/components/equipmentDailog/Dailog.vue +++ b/src/components/equipmentDailog/Dailog.vue @@ -1,5 +1,6 @@ <template> - <el-dialog v-model="dialogVisible" title="新建仪器仪表" width="60%"> + <el-dialog v-model="dialogVisible" :fullscreen="full" title="新建仪器仪表" width="60%"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> <el-form :model="form" label-width="120px" class="formType"> <el-form-item label="装置设施名称"> <el-input v-model="form.name" placeholder="请填写装置设施名称" /> @@ -297,7 +298,7 @@ </template> <script lang="ts"> import { defineComponent, ref, reactive } from 'vue'; -import { Search } from '@element-plus/icons-vue'; +import { Search, FullScreen } from '@element-plus/icons-vue'; import categoryDailog from './categoryDailog.vue'; import regionDailog from './regionDailog.vue'; import maintenanceDailog from './maintenanceDailog.vue'; @@ -321,10 +322,10 @@ resource: '', desc: '', }); - const Dailogtype=ref(false) - const openDailog = (type:boolean) => { + const Dailogtype = ref(false); + const openDailog = (type: boolean) => { dialogVisible.value = true; - Dailogtype.value=type + Dailogtype.value = type; }; const activeName = ref('first'); const tableData = [ @@ -407,6 +408,15 @@ () => false ); }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; return { dialogVisible, Dailogtype, @@ -433,7 +443,10 @@ handleRemove, handlePreview, handleExceed, - beforeRemove + beforeRemove, + full, + toggleFullscreen, + FullScreen, }; }, }); @@ -444,7 +457,7 @@ } .formType:after { content: ''; - width: 250px; + width: 400px; } .formType { padding: 20px 20px; @@ -452,4 +465,7 @@ justify-content: space-between; flex-wrap: wrap; } +.el-form .el-form-item:last-of-type { + margin-bottom: 22px!important; +} </style> \ No newline at end of file -- Gitblit v1.9.2