<template> <div id="oneMapIndex"> <!-- 内容 --> <div id="oneMapBody"> <!-- 顶部 --> <div id="oneMapHeader" :class="['oneMapHeader', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']" > <!-- 标题 --> <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> <!-- 标题左侧展示组件 --> <div class="Location"> <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon> 延安 </div> <div class="Timer"> <span class="date">{{ dates }}</span> <span class="time">{{ times }}</span> <span class="date week">{{ weeks }}</span> </div> <div class="Wather"></div> <!-- 标题右侧功能组件 --> <router-link to="/index"> <div class="goHome header_icon"></div> </router-link> <div class="goUser_com header_icon" @click="toRYBox"></div> <div class="goClose_com header_icon"></div> </div> <!-- 地图组件 --> <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap> <!-- 桥梁BIM --> <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM> <!-- 降雨效果 --> <CanvasRain v-if="showRainFlow"></CanvasRain> <!-- 地图标注点弹窗popup --> <PopupInfo></PopupInfo> <!-- 前端专题组件 --> <!-- <transition name="fade" mode="out-in"> </transition> --> <!-- 图例 --> <img id="TuChengImg" src="@/assets/images/Sponge_screen/TuCheng.png" alt="" @click="ShowTuCheng = !ShowTuCheng" /> <LayerControl :ShowTuCheng="ShowTuCheng"></LayerControl> <!-- 1:总体概览 --> <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL> <!-- 2:智慧燃气 --> <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ> <!-- 3:智慧排水 --> <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS> <!-- 4:智慧桥梁 --> <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL> <!-- 5:智慧隧道 --> <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD> <!-- 6:智慧海绵 --> <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM> <!-- 智慧海绵-监测分析 --> <ZHHMJCFX v-if="AllData.ComShowID == 61" :isActive="AllData.ComShowID == 61 ? true : false" :showPanel="showPanel" ></ZHHMJCFX> <!-- 智慧海绵-建设评估 --> <ZHHMJSPG v-if="AllData.ComShowID == 62" :isActive="AllData.ComShowID == 62 ? true : false" :showPanel="showPanel" ></ZHHMJSPG> <!-- 7:防洪排涝 --> <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL> </div> <!-- 底部菜单 --> <div id="BottomMenuBox"> <Transition name="slide-fade"> <div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div> </Transition> <!-- 菜单List --> <div class="MenuList" :class="['MenuList' + index, 'animate__animated', showPanel ? 'animate__bounceInUp' : 'animate__bounceInUp']" v-for="(item, index) in AllData.MenuListData" @click="MenuClick(item, index)" v-if="BottomshowPanel" @mouseenter="handleMouseEnter(item)" @mouseleave="handleMouseLeave(item)" > <img class="MenuImg" v-if="AllData.AC_MenuIndex == item.id" :src="item.AC_icon" /> <img class="MenuImg" v-else :src="item.iocn" /> <div class="MenuFont" :class="AllData.AC_MenuIndex == item.id ? 'AC_Font' : ''"> {{ item.name }} <!-- 二级菜单 --> <!-- <Transition name="slide-fade2"> --> <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox"> <span class="ErJiMenuList" :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''" v-for="item2 in item.children" @click.stop="ErJiMenuClick(item, item2)" > {{ item2.name }} </span> </div> <!-- </Transition> --> </div> </div> </div> <!-- 语音组件 --> <Voice></Voice> </div> <!-- 融云弹窗 --> <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun> <!-- 前端组件公共弹窗 --> <el-dialog modal-class="publicDialogVisible" v-model="dialogConfig.visible" :title="dialogConfig.title" width="1400px" :append-to-body="true" :destroy-on-close="true" :draggable="true" > <DialogTabs :dataID="dialogConfig.getSiteId" :SiteNo="dialogConfig.SiteNo" :comIDs="dialogConfig.comIDs" :customComponents="dialogConfig.customData" :RefName="dialogConfig.RefName" ></DialogTabs> </el-dialog> </template> <script setup name="oneMapIndex"> import bus from '@/bus'; import { fullscreenToggel } from '@/utils/util'; import { ref, reactive, toRefs, onMounted } from 'vue'; // 菜单的图片资源 import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png'; import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png'; import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png'; import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png'; import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png'; import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png'; import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png'; import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png'; import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png'; import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png'; import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png'; import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png'; import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png'; import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png'; // 引用地图 import OneMap from './map/newfiberMapBox.vue'; // 引用王家坪大桥BIm import WangJiaPingBIM from './BIM/WangJiaPIng.vue'; // 引用语音识别 import Voice from './../voice/recordPage/index.vue'; // 引入融云通讯录 import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用 // 子系统引入 import ComZTGL from './components/ZTGL.vue'; //总体概览 import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气 import ComZHPS from './components/ZHPS.vue'; //智慧排水 import ComZHQL from './components/ZHQL.vue'; //智慧桥梁 import ComZHSD from './components/ZHSD.vue'; //智慧隧道 import ComZHHM from './components/ZHHM.vue'; //智慧海绵 import ComFHPL from './components/FHPL.vue'; //防洪排涝 import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析 import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估 import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗 // 降雨效果 import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果 // 图层控制面板 import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板 // 前端共同弹窗 import DialogTabs from '@/views/DialogTabs/dialogTabs.vue'; // 时间以及天气 const timer = ref(null); const dates = ref(null); const weeks = ref(null); const times = ref(null); const weather = ref({ temperature: null, imgNum: '', text: '', }); const showPanel = ref(false); const ShowTuCheng = ref(false); //图层面板显隐 const AllData = reactive({ MapShowBol: true, //是否展示中心地图 MenuListData: [ { name: '总体概览', iocn: ZTGL, AC_icon: AC_ZTGL, id: 1, Layers: [], }, { name: '智慧燃气', iocn: ZHRQ, AC_icon: AC_ZHRQ, id: 2, Layers: ['燃气管网'], }, { name: '智慧排水', iocn: ZHPS, AC_icon: AC_ZHPS, id: 3, Layers: ['雨水管网', '污水管网'], }, { name: '智慧海绵', iocn: ZHHM, AC_icon: AC_ZHHM, id: 6, children: [ { name: '城市概览', id: 6, Layers: [], }, { name: '监测分析', id: 61, Layers: [], }, { name: '建设评估', id: 62, Layers: [], }, ], }, { name: '智慧桥梁', iocn: ZHQL, AC_icon: AC_ZHQL, id: 4, Layers: [], }, { name: '智慧隧道', iocn: ZHSD, AC_icon: AC_ZHSD, id: 5, Layers: [], }, { name: '防汛排涝', iocn: FXPL, AC_icon: AC_FXPL, id: 7, Layers: [], }, ], AC_MenuIndex: 1, BottmBackGroundShow: false, RYDialog: false, ZhuDongBoHao: false, ErJiMenuShowID: 1, //一级菜单选中的ID ErJiMenuCheckID: null, //二级菜单选中的ID ComShowID: 1, //最终展示组件的ID }); // 降雨效果 const showRainFlow = ref(false); const BottomshowPanel = ref(true); // 公共弹窗 const dialogConfig = reactive({ visible: false, getSiteId: '', SiteNo: '', data: {}, comIDs: ['spjk'], customData: [], RefName: '', title: '详情', }); onMounted(() => { fullscreenToggel(); AllData.BottmBackGroundShow = true; console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow'); bus.emit('BottomHidden', AllData.BottmBackGroundShow); // 降雨特征点击 bus.on('checkRainL', params => { if (params == 1) { showRainFlow.value = false; } else { showRainFlow.value = true; } }); // 底部隐藏 bus.on('checkBottom', params => { if (params == 1) { BottomshowPanel.value = false; } else { BottomshowPanel.value = true; } }); // 共同弹窗触发事件 bus.on('publicDialog', params => { dialogConfig.getSiteId = params.getSiteId; dialogConfig.title = params.title ?? '详情'; dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs; // 打开弹窗 dialogConfig.visible = true; }); // 共同弹窗触发事件 bus.on('publicDialog_Close', params => { // 打开弹窗 dialogConfig.visible = false; }); // 获取天气 getWeather(); // 获取时间 currentTime(); //initRainImage(); // 打开融云通讯录主动拨号 bus.on('OpenRY', params => { AllData.ZhuDongBoHao = true; AllData.RYDialog = true; bus.emit('showRy'); }); // 切换专题图 bus.on('ChangeZhuanTiTu', params => { if (params.num == 1) { // 一级 MenuClick(params.MenuData1); } else if (params.num == 2) { // 二级 ErJiMenuClick(params.MenuData1, params.MenuData2); } }); }); onBeforeUnmount(() => { bus.off('BottomHidden'); bus.off('publicDialog'); bus.off('publicDialog_Close'); bus.off('OpenRY'); bus.off('ChangeZhuanTiTu'); }); // 菜单点击 const MenuClick = (item, index) => { // 改变菜单选中索引 AllData.AC_MenuIndex = item.id; // 二级也选中一级菜单默认展示的那个 AllData.ErJiMenuCheckID = item.id; // 最终展示的组件ID AllData.ComShowID = item.id; // 当选择的是智慧桥梁时 将隐藏地图展示BIM if (AllData.ComShowID == 4) { AllData.MapShowBol = false; } else { AllData.MapShowBol = true; // 点击菜单时隐藏所有图层 bus.emit('clearAllLayer'); // 打开默认的菜单 bus.emit('SetLayerShow', item.Layers); } }; // 二级菜单点击 const ErJiMenuClick = (item, item2) => { console.log(22); // 改变菜单选中索引 AllData.AC_MenuIndex = item.id; // 二级也选中点击的那个 AllData.ErJiMenuCheckID = item2.id; // 最终展示的组件ID AllData.ComShowID = item2.id; }; // 打开融云通讯录 const toRYBox = () => { AllData.RYDialog = true; AllData.ZhuDongBoHao = false; bus.emit('showRy'); }; // 关闭融云通讯录弹窗 const dialogHide = val => { if (!val) { AllData.RYDialog = false; AllData.ZhuDongBoHao = false; } }; //地图点击事件 const mapClick = async (point, properties, feature) => { console.log('point', point); console.log('properties', properties); console.log('feature---', feature); if (properties) { if (feature == 'rq_pipeline_info') { if (!!newfiberMapbox.getLayerByName('rqLine')) { newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine')); } let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]); let layer = new mapboxL7.LineLayer({ name: 'rqLine', }) .source(rqLine) .size(4) .shape('line') .texture('arrow') .color('rgb(241, 159, 27)') .animate({ interval: 2, // 间隔 duration: 2, // 持续时间,延时 trailLength: 3, // 流线长度 }) .style({ opacity: 1, lineTexture: true, // 开启线的贴图功能 iconStep: 50, // 设置贴图纹理的间距 borderWidth: 0, // 默认文 0,最大有效值为 0.5 borderColor: '#fff', // 默认为 #ccc }); newfiberMapbox.addLayer(layer); } bus.emit('popupcontent', { popupShow: true, point: point, popupInfo: properties, }); } }; // 获取当前时间 const formatTime = () => { let date = new Date(); let year = date.getFullYear(); // 年 let month = date.getMonth() + 1; // 月 let day = date.getDate(); // 日 let hour = date.getHours(); // 时 hour = hour < 10 ? '0' + hour : hour; // 如果只有一位,则前面补零 let minute = date.getMinutes(); // 分 minute = minute < 10 ? '0' + minute : minute; // 如果只有一位,则前面补零 let second = date.getSeconds(); // 秒 second = second < 10 ? '0' + second : second; // 如果只有一位,则前面补零 let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'); weeks.value = weekAry[date.getDay()]; dates.value = `${year}-${month}-${day}`; times.value = `${hour}:${minute}:${second}`; }; const currentTime = () => { clearInterval(timer.value); timer.value = setInterval(() => { formatTime(); }, 500); }; // 获取天气 const getWeather = async () => { // let res = await getAppService(); // if (res.code == 200) { // weather.value.temperature = res.data.tempFc; // weather.value.imgNum = new URL( // `/src/assets/images/weather_icon/icon__${res.data.code}.png`, // import.meta.url // ).href; // } }; // 二级菜单展示 const handleMouseEnter = item => { AllData.ErJiMenuShowID = item.id; }; // 二级菜单展示 const handleMouseLeave = item => { AllData.ErJiMenuShowID = null; }; // async function urlToFile(url, fileName) { // // 使用 fetch 获取图片并转换为 Blob // const response = await fetch(url); // const blob = await response.blob(); // // 将 Blob 转换为 File 对象 // const file = new File([blob], fileName, { type: blob.type }); // return file; // } // const createCanvas = (id)=>{ // let canvas = document.createElement("canvas"); // canvas.id = "canvas"+id; // canvas.style.display = 'none'; // document.body.append(canvas); // return canvas; // } // const createPlot = async (e,canvas)=>{ // var tif = await GeoTIFF.fromArrayBuffer( e.target.result); // var tifImg = await tif.getImage(); // var readRasters = await tifImg.readRasters(); // plot == null &&(plot = new plotty.plot({canvas, data: readRasters[0], width: tifImg.getWidth(), height: tifImg.getHeight(), domain: [0, 256], colorScale: "mycolorscale"})); // plot.setData(readRasters[0],tifImg.getWidth(),tifImg.getHeight()); // plot.render(); // } // const createCanvasLayer = (canvasId,i,bbox)=>{ // bbox = [[bbox[0],bbox[3]],[bbox[2],bbox[3]],[bbox[2],bbox[1]],[bbox[0],bbox[1]]]; // newfiberMapbox.map.addSource('canvas-source'+i, { // type: 'canvas', // canvas: canvasId , // coordinates: bbox, // animate: true // }); // newfiberMapbox.map.addLayer({ // id: 'canvas-layer'+i, // type: 'raster', // source: 'canvas-source'+i // }); // newfiberMapbox.map.moveLayer('canvas-layer'+i); // } // const plotInit =(colorScale=colorScale)=>{ // const minVal = colorScale[0].value; // const maxVal = colorScale[colorScale.length -1].value; // let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); // if(color[color.length-1].value / maxVal < 1) color.push({value:maxVal,color:colorScale[color.length].color}); // plotty.addColorScale("mycolorscale",color.map(i => i.color), color.map(i => (i.value / maxVal).toFixed(5))); // } // let colorScale = [ // {value: "0", color: "rgba(7, 213, 118, 0)"}, // {value: "0.1", color: "rgba(7, 213, 118, 0)"}, // {value: "5", color: "rgba(7, 213, 118, 1)"}, // {value: "15", color: "rgba(38, 129, 240,1)"}, // {value: "30", color: "rgba(247, 223, 56, 1)"}, // {value: "70", color: "rgba(230, 85, 41, 1)"}, // {value: "140", color: "rgba(255, 26, 26, 1)"}, // ] // let imageFiles = []; // let canvas = []; // let plot = null; // const initRainImage = async ()=>{ // const images = [ // "http://192.168.16.133:9994/tif/0819_0.tif", // "http://192.168.16.133:9994/tif/0819_1.tif", // "http://192.168.16.133:9994/tif/0819_2.tif", // "http://192.168.16.133:9994/tif/0819_3.tif", // "http://192.168.16.133:9994/tif/0819_4.tif", // "http://192.168.16.133:9994/tif/0819_5.tif", // "http://192.168.16.133:9994/tif/0819_6.tif", // "http://192.168.16.133:9994/tif/0819_7.tif", // "http://192.168.16.133:9994/tif/0819_8.tif", // "http://192.168.16.133:9994/tif/0819_9.tif", // "http://192.168.16.133:9994/tif/0819_10.tif", // "http://192.168.16.133:9994/tif/0819_11.tif", // "http://192.168.16.133:9994/tif/0819_12.tif", // "http://192.168.16.133:9994/tif/0819_13.tif", // "http://192.168.16.133:9994/tif/0819_14.tif", // "http://192.168.16.133:9994/tif/0819_15.tif", // "http://192.168.16.133:9994/tif/0819_16.tif", // "http://192.168.16.133:9994/tif/0819_17.tif", // "http://192.168.16.133:9994/tif/0819_18.tif", // "http://192.168.16.133:9994/tif/0819_19.tif", // "http://192.168.16.133:9994/tif/0819_20.tif", // "http://192.168.16.133:9994/tif/0819_21.tif", // "http://192.168.16.133:9994/tif/0819_22.tif", // "http://192.168.16.133:9994/tif/0819_23.tif", // ]; // imageFiles = await Promise.all(images.map(url => urlToFile(url,_.last(_.split(url,"/"))))); // canvas = createCanvas(0); // plotInit(colorScale); // createCanvasLayer(canvas.id,0,[109.36903069276376,36.53005543707354,109.62694602722712,36.7105574823517]); // let i = 0; // let interval = setInterval(()=>{ // if(i >= imageFiles.length) i = 0; // setRainImage(i++); // },1000) // } // const setRainImage = (index) => { // var reader = new FileReader(); // reader.onload = e => createPlot(e,canvas); // reader.readAsArrayBuffer(imageFiles[index]); // } </script> <style lang="scss" scoped> #oneMapIndex { width: 100%; height: 100vh; background: black; position: relative; #oneMapBody { width: 100%; height: 100vh; background: rgba(255, 192, 203, 0.304); // margin-top: -30px; z-index: 99; position: relative; #oneMapHeader { width: 100%; height: 100px; background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center; background-size: cover; z-index: 100; position: absolute; top: 0; left: 0; #titleFont { width: 634px; height: 47px; position: absolute; left: 50%; margin-left: -317px; top: 20px; } .Location { position: absolute; top: 15px; left: 20px; height: 15px; font-family: Adobe Heiti Std; font-weight: normal; font-size: 14px; color: #ffffff; line-height: 13px; font-style: italic; height: 18px; line-height: 18px; display: inline-block; } .Timer { position: absolute; top: 15px; left: 90px; height: 18px; line-height: 18px; .time { display: inline-block; width: auto; font-family: Adobe Heiti Std; font-weight: normal; font-size: 12px; color: #ffffff; height: 18px; line-height: 18px; font-style: italic; margin: 0 10px; } .date { display: inline-block; width: auto; font-family: Adobe Heiti Std; font-weight: normal; font-size: 12px; color: #ffffff; height: 18px; line-height: 18px; font-style: italic; } } .header_icon { width: 22px; height: 22px; position: absolute; top: 10px; cursor: pointer; } .goHome { background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center; right: 150px; } .goUser_com { background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center; right: 100px; } .goClose_com { background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center; right: 50px; } } #TuChengImg { width: 36px; height: 36px; position: absolute; right: 470px; top: 100px; cursor: pointer; } } #BottomMenuBox { position: absolute; bottom: 0; width: 952px; height: 162px; left: 50%; margin-left: -476px; z-index: 999; .BottmBackGround { position: absolute; bottom: 0; width: 952px; height: 62px; background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center; background-size: cover; } // 图标菜单样式 从左到右按照顺序进行设定 .MenuList { position: absolute; width: 100px; height: 110px; text-align: center; cursor: pointer; .MenuImg { width: 83px; height: 66px; } .MenuFont { margin: 0; padding: 0; display: inline-block; width: 100%; height: 44px; line-height: 44px; font-family: PangMenZhengDao; font-weight: 400; font-size: 20px; color: #ffffff; text-shadow: 0px 0px 20px #00303c; position: relative; .ErJiMenuBox { position: absolute; background: linear-gradient(0deg, #044854 0%, #006878 100%); border-radius: 6px; border: 1px solid #00cee0; opacity: 0.8; left: 50%; margin-left: -120px; bottom: 115px; height: 36px; font-size: 0; line-height: 0; text-align: center; display: flex; align-items: center; width: 240px; .ErJiMenuList { font-family: Source Han Sans CN; font-weight: bold; font-size: 14px; color: #ffffff; text-shadow: 0px 0px 20px #00303c; height: 30px; line-height: 30px; display: inline-block; margin: 5px 0; width: 120px; &:hover { color: #ffd97f; } } .ErJiMenuCheck { font-family: Source Han Sans CN; font-weight: bold; font-size: 14px; color: #ffd97f; } .ErJiMenuJT { width: 28px; height: 21px; margin-bottom: 10px; } } } .AC_Font { color: #ffd97f; } } .MenuList0 { left: 70px; top: 39px; } .MenuList1 { left: 190px; top: 26px; } .MenuList2 { left: 310px; top: 13px; } .MenuList3 { left: 430px; top: 0px; } .MenuList4 { left: 550px; top: 13px; } .MenuList5 { left: 670px; top: 26px; } .MenuList6 { left: 780px; top: 39px; } } } /* 进入和离开动画可以使用不同 持续时间和速度曲线。 */ .slide-fade-enter-active { transition: all 0.3s ease-out; } .slide-fade-leave-active { transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateY(80px); opacity: 0; } // .slide-fade2-leave-active, // .slide-fade2-enter-active { // transition: all 0.1s ease-out; // } // .slide-fade2-enter-from, // .slide-fade2-leave-to { // transform: translateY(80px); // opacity: 0; // } </style> <style lang="scss"> .publicDialogVisible { .el-dialog { background: rgba(14, 69, 89, 0.9); height: 800px; border: 1px solid #15d2fd; .el-dialog__header { background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center; background-size: cover; padding: 0; height: 60px; margin: 0; .el-dialog__title { font-family: PangMenZhengDao; font-weight: 400; font-size: 24px; color: #ebfeff; height: 60px; line-height: 60px; margin-left: 40px; } } .el-dialog__body { width: 100%; height: calc(100% - 60px); } } } </style>