|
|
@@ -1,375 +1,537 @@
|
|
|
<template>
|
|
|
- <div class="appmian" >
|
|
|
- <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
|
|
|
+ <div class="apphome" >
|
|
|
+ <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
|
|
|
+
|
|
|
+ <el-container>
|
|
|
|
|
|
- <el-container>
|
|
|
-
|
|
|
- <el-header>
|
|
|
- <div class="bgk1">
|
|
|
- <div class="d-flex jc-center title_wrap">
|
|
|
- <div class="timers">
|
|
|
- {{ headertime.dateYear }} {{ headertime.dateWeek }} {{ headertime.dateDay }}
|
|
|
+ <el-header>
|
|
|
+ <div class="bgk1">
|
|
|
+ <div class="d-flex jc-center title_wrap">
|
|
|
+ <div class="timers">
|
|
|
+ {{ headertime.dateYear }} {{ headertime.dateWeek }} {{ headertime.dateDay }}
|
|
|
+ </div>
|
|
|
+ <div class="titlebtn titleanniu imgtupian" @click="handleSelect('1')">突水推演</div>
|
|
|
+ <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;" @click="handleSelect('2')">火灾推演</div>
|
|
|
+ <div class="d-flex jc-center s-content">
|
|
|
+ <div class="title tiletimg">
|
|
|
+ <div class="ve_logo_img">
|
|
|
+ <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
|
|
|
</div>
|
|
|
- <div class="titlebtn titleanniu imgtupian" @click="handleSelect('1')" >突水推演</div>
|
|
|
- <div class="titlebtn titleanniu imgtupian" style="margin-right: 20px;" @click="handleSelect('2')">火灾推演</div>
|
|
|
- <div class="d-flex jc-center s-content">
|
|
|
- <div class="title tiletimg">
|
|
|
- <div class="ve_logo_img">
|
|
|
- <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
|
|
|
- </div>
|
|
|
-
|
|
|
- <span class="title-text">矿道灾情软件推演</span>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <span class="title-text">矿道灾情软件推演</span>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')">瓦斯爆炸推演</div>
|
|
|
- <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')">模型库</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('3')" >瓦斯爆炸推演</div>
|
|
|
+ <div class="titlebtn titleanniu imgtupian2" @click="handleSelect('4')" >模型库</div>
|
|
|
</div>
|
|
|
- </el-header>
|
|
|
-
|
|
|
- <el-main>
|
|
|
- <div class="bgk2">
|
|
|
- <div>
|
|
|
- <ul>
|
|
|
- <li class="s1" @click="handleSelect('2')" >
|
|
|
- <el-image :src="s1" fit="contain"></el-image>
|
|
|
- <span class="stext">火灾推演</span>
|
|
|
- </li>
|
|
|
- <li class="s2" @click="handleSelect('1')">
|
|
|
- <el-image :src="s2" fit="contain"></el-image>
|
|
|
- <span class="stext">突水推演</span>
|
|
|
- </li>
|
|
|
- <li class="s3" @click="handleSelect('3')">
|
|
|
- <el-image :src="s3" fit="contain"></el-image>
|
|
|
- <span class="stext">瓦斯爆炸推演</span>
|
|
|
- </li>
|
|
|
- <li class="s4" @click="handleSelect('4')"> <el-image :src="s4" fit="contain"></el-image>
|
|
|
- <span class="stext">模型库</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <div class="bgk2">
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li class="s1" @click="handleSelect('2')" >
|
|
|
+ <el-image :src="s1" fit="contain"></el-image>
|
|
|
+ <span class="stext">火灾推演</span>
|
|
|
+ </li>
|
|
|
+ <li class="s2" @click="handleSelect('1')">
|
|
|
+ <el-image :src="s2" fit="contain"></el-image>
|
|
|
+ <span class="stext">突水推演</span>
|
|
|
+ </li>
|
|
|
+ <li class="s3" @click="handleSelect('3')">
|
|
|
+ <el-image :src="s3" fit="contain"></el-image>
|
|
|
+ <span class="stext">瓦斯爆炸推演</span>
|
|
|
+ </li>
|
|
|
+ <li class="s4" @click="handleSelect('4')"> <el-image :src="s4" fit="contain"></el-image>
|
|
|
+ <span class="stext">模型库</span>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <Dialoges ref="lliudialog"
|
|
|
- :addselect="addselect" :classradio="classradio"
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <source-disaster ref="sourcedis" :classradio="classradio" />
|
|
|
+ <info-boundary ref="boundary" :classradio="classradio" />
|
|
|
+ <info-animation ref="tanimation" :classradio="classradio" :aid="aid" />
|
|
|
+ <!-- <InfoVtkmodel ref="vtkmodel" /> -->
|
|
|
+ <Dialoges
|
|
|
+ ref="lliudialog"
|
|
|
+ :addselect="addselect"
|
|
|
+ :valzaiqing="valzaiqing"
|
|
|
+ :headerobj="headerobj"
|
|
|
+ :activeIndex="activeIndex"
|
|
|
+ @leftsimulation="leftsimulation"
|
|
|
+ @headerclick="headerclick"
|
|
|
+ @handleSelect="handleSelect"
|
|
|
+ @childfun="childfun"
|
|
|
+ @moxingclick="moxingclick"
|
|
|
+ :classradio="classradio"
|
|
|
></Dialoges>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- <!-- </v-scale-screen> -->
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <result ref="resultbidui" @titleclick="titleclick" :classradio="classradio"></result>
|
|
|
+ <MenuMine ref="menumine"/>
|
|
|
+ <MenuSensor ref="menusen"/>
|
|
|
+
|
|
|
|
|
|
- <script setup>
|
|
|
- import { ref, onMounted, reactive, nextTick } from "vue";
|
|
|
- import { RouterView, RouterLink, useRouter } from "vue-router";
|
|
|
- import '@/utils/flexible'
|
|
|
- // import NavigateBar from "@/components/layout/NavigateBar.vue";
|
|
|
- import Dialoges from "./InfoDialoges.vue";
|
|
|
- import logo from "@/assets/logo.png";
|
|
|
- import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
|
|
|
- import Vector from "@/assets/img/Vector.png";
|
|
|
- import s1 from "@/assets/img/s1.png";
|
|
|
- import s2 from "@/assets/img/s2.png";
|
|
|
- import s3 from "@/assets/img/s3.png";
|
|
|
- import s4 from "@/assets/img/s4.png";
|
|
|
- import b from "@/assets/img/Group1317.png";
|
|
|
- import { timestampToTime,formatTime } from "@/js/lindex.js";
|
|
|
+ </el-main>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- let lliudialog = ref();
|
|
|
- let sourcedis = ref();
|
|
|
- let classradio = ref();
|
|
|
- let boundary = ref();
|
|
|
- let tanimation = ref();
|
|
|
- let menumine=ref();
|
|
|
- let menusen=ref();
|
|
|
- const title = "灾情推演软件";
|
|
|
- const activeIndex = ref("1");
|
|
|
- const activeIndex2 = ref("1");
|
|
|
- let titlefalse = ref(false);
|
|
|
- let resultbidui = ref();
|
|
|
- let mnindex = ref("");
|
|
|
- let resultleft = ref({});
|
|
|
- let datares=ref({});
|
|
|
- let resultright = ref({});
|
|
|
- let headertime=ref({
|
|
|
- timing: null,
|
|
|
- loading: true,
|
|
|
- dateDay: null,
|
|
|
- dateYear: null,
|
|
|
- dateWeek: null,
|
|
|
- weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
|
- })
|
|
|
-
|
|
|
- let headerobj = ref({
|
|
|
- time: "",
|
|
|
- name: "",
|
|
|
- });
|
|
|
- let valzaiqing = ref("");
|
|
|
- let router = useRouter();
|
|
|
- let sgdata = ref({});
|
|
|
- let aid = ref();
|
|
|
- onMounted(() => {
|
|
|
- timeFn()
|
|
|
- });
|
|
|
- // 跳转页面,{ aid:aid.value}
|
|
|
- // 当前时间
|
|
|
- const timeFn=()=> {
|
|
|
- headertime.value.timing = setInterval(() => {
|
|
|
- headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss");
|
|
|
- headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
|
|
- headertime.value.dateWeek = headertime.value.weekday[new Date().getDay()];
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
+ </el-container>
|
|
|
+ <!-- </v-scale-screen> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, reactive, nextTick } from "vue";
|
|
|
+import { RouterView, RouterLink, useRouter,useRoute} from "vue-router";
|
|
|
+import VScaleScreen from 'v-scale-screen'
|
|
|
+import '@/utils/flexible'
|
|
|
+// import NavigateBar from "@/components/layout/NavigateBar.vue";
|
|
|
+import Dialoges from "./InfoDialoges.vue";
|
|
|
+import logo from "@/assets/logo.png";
|
|
|
+import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
|
|
|
+// import myIndex from "./index"
|
|
|
+import Index from "./index/index.vue"
|
|
|
+import SourceDisaster from "./components/InfoDisaster.vue";
|
|
|
+import InfoBoundary from "./components/InfoBoundary.vue";
|
|
|
+import InfoAnimation from "./components/InfoAnimation.vue";
|
|
|
+import InfoVtkmodel from "./components/InfoVtkmodel.vue";
|
|
|
+import MenuMine from "./components/MenuMine.vue"
|
|
|
+import MenuSensor from "./components/MenuSensor.vue"
|
|
|
+import result from "./result.vue";
|
|
|
+import firstLeft from "./index/first-left.vue"
|
|
|
+import Vector from "@/assets/img/Vector.png";
|
|
|
+import s1 from "@/assets/img/s1.png";
|
|
|
+import s2 from "@/assets/img/s2.png";
|
|
|
+import s3 from "@/assets/img/s3.png";
|
|
|
+import s4 from "@/assets/img/s4.png";
|
|
|
+import b from "@/assets/img/Group1317.png";
|
|
|
+import { timestampToTime,formatTime } from "@/js/lindex.js";
|
|
|
+import mitts from "@/utils/Bus";
|
|
|
+import { contains } from "@kitware/vtk.js/Common/DataModel/BoundingBox";
|
|
|
+
|
|
|
+// import { vtkmodel } from "@/control/vtkModel.js";
|
|
|
+
|
|
|
+let lliudialog = ref();
|
|
|
+let sourcedis = ref();
|
|
|
+let classradio = ref();
|
|
|
+let boundary = ref();
|
|
|
+let tanimation = ref();
|
|
|
+let menumine=ref();
|
|
|
+let menusen=ref();
|
|
|
+const title = "灾情推演软件";
|
|
|
+const activeIndex = ref("1");
|
|
|
+const activeIndex2 = ref("1");
|
|
|
+let titlefalse = ref(false);
|
|
|
+let resultbidui = ref();
|
|
|
+let mnindex = ref("");
|
|
|
+let resultleft = ref({});
|
|
|
+let datares=ref({});
|
|
|
+let resultright = ref({});
|
|
|
+let headertime=ref({
|
|
|
+ timing: null,
|
|
|
+ loading: true,
|
|
|
+ dateDay: null,
|
|
|
+ dateYear: null,
|
|
|
+ dateWeek: null,
|
|
|
+ weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
|
+})
|
|
|
|
|
|
+let headerobj = ref({
|
|
|
+ time: "",
|
|
|
+ name: "",
|
|
|
+});
|
|
|
+let valzaiqing = ref("");
|
|
|
+let router = useRouter();
|
|
|
+let route=useRoute();
|
|
|
+let sgdata = ref({});
|
|
|
+let aid = ref();
|
|
|
+onMounted(() => {
|
|
|
+ timeFn()
|
|
|
+ console.log(route.query )
|
|
|
+ if(route.query.classradio!=undefined){
|
|
|
+ classradio.value=route.query.classradio;
|
|
|
+ handleSelect(route.query.classradio)
|
|
|
+
|
|
|
+ }
|
|
|
+});
|
|
|
+// 跳转页面,{ aid:aid.value}
|
|
|
+
|
|
|
+// 当前时间
|
|
|
+const timeFn=()=> {
|
|
|
+ headertime.value.timing = setInterval(() => {
|
|
|
+ headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss");
|
|
|
+ headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
|
|
+ headertime.value.dateWeek = headertime.value.weekday[new Date().getDay()];
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+// const tiaozhuan = () => {
|
|
|
+// activeIndex.value = "1";
|
|
|
+// handleSelect( activeIndex.value);
|
|
|
+// const key = activeIndex.value;
|
|
|
+// sourcedis.value.changeModel();
|
|
|
+// sourcedis.value.accident3(key);
|
|
|
+// boundary.value.accident4(key);
|
|
|
+// lliudialog.value.accident2(key);
|
|
|
+// tanimation.value.monitor = false;
|
|
|
+// router.push({ path: "/configurator" });
|
|
|
+// };
|
|
|
+
|
|
|
const addselect = () => {
|
|
|
classradio.value = lliudialog.value.classradio;
|
|
|
};
|
|
|
- //点击头部弹出弹框
|
|
|
-
|
|
|
- const titleclick = (val, index) => {
|
|
|
- mnindex.value = index;
|
|
|
- valzaiqing.value = val;
|
|
|
- if (val == "模拟数据") {
|
|
|
- lliudialog.value.dialogVisible = true;
|
|
|
- } else {
|
|
|
- lliudialog.value.dialogVisible = true;
|
|
|
- clearInterval();
|
|
|
- }
|
|
|
- };
|
|
|
- const handleSelect = (key) => {
|
|
|
-
|
|
|
- activeIndex.value =key;
|
|
|
- switch (key) {
|
|
|
- case "1":
|
|
|
- classradio.value="Water";
|
|
|
- lliudialog.value.classclick( classradio.value);
|
|
|
- break;
|
|
|
- case "2":
|
|
|
- classradio.value="Fire";
|
|
|
- lliudialog.value.classclick( classradio.value);
|
|
|
- break;
|
|
|
- case "3":
|
|
|
- classradio.value="Gass";
|
|
|
- lliudialog.value.classclick( classradio.value);
|
|
|
- break;
|
|
|
- case "4":
|
|
|
- classradio.value="Model";
|
|
|
- break;
|
|
|
- case "5":
|
|
|
-
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- };
|
|
|
- </script>
|
|
|
-
|
|
|
- <style lang="scss" scoped>
|
|
|
-
|
|
|
- .title_wrap{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
+// 获取模拟数据对比
|
|
|
+const leftsimulation = (res,data) => {
|
|
|
+ if (mnindex.value == "1") {
|
|
|
+ resultleft.value.coids = res.coids;
|
|
|
+ resultleft.value.totaltime = res.totaltime;
|
|
|
+ resultleft.value.reportstep = res.reportstep;
|
|
|
+ resultleft.value.pickertime = res.acctime;
|
|
|
+ resultleft.value.aid = res.aid;
|
|
|
+ resultbidui.value.mntext1=data.name;
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ resultright.value.coids = res.coids;
|
|
|
+ resultright.value.totaltime = res.totaltime;
|
|
|
+ resultright.value.reportstep = res.reportstep;
|
|
|
+ resultright.value.pickertime = res.acctime;
|
|
|
+ resultright.value.aid = res.aid;
|
|
|
+ resultbidui.value.mntext2=data.name;
|
|
|
}
|
|
|
- .appmian {
|
|
|
- .el-main {
|
|
|
- --el-main-padding: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .el-container {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 206;
|
|
|
- top: 0;
|
|
|
+
|
|
|
+ //TODO
|
|
|
+ if(resultleft.value.aid==''||resultright.value.aid==''||resultleft.value.aid==undefined||resultright.value.aid==undefined){
|
|
|
+
|
|
|
+
|
|
|
+ }else{
|
|
|
+ if (resultleft.value.coids != resultright.value.coids) {
|
|
|
+ ElMessage.error('污染物不一样，无法进行比较')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (resultleft.value.totaltime != resultright.value.totaltime) {
|
|
|
+ ElMessage.error('模拟时长不一样，无法进行比较')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (resultleft.value.reportstep != resultright.value.reportstep) {
|
|
|
+ ElMessage.error('输出步长不一样，无法进行比较')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (resultleft.value.pickertime != resultright.value.pickertime ) {
|
|
|
+ ElMessage.error('事故时间不一样，无法进行比较')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+//TODO 获取物理量
|
|
|
+resultbidui.value.timeline=res.acctime;
|
|
|
+resultbidui.value.oldtime=res.acctime;
|
|
|
+// resultbidui.value.zdtime=res.acctime;
|
|
|
+resultbidui.value.endtime= Number(res.totaltime)/Number(res.reportstep);
|
|
|
+resultbidui.value.initAid(resultleft.value.aid,resultright.value.aid);
|
|
|
+resultbidui.value.clickflat=true;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+};
|
|
|
+//判断两个对象是否相等
|
|
|
+const objequality = () => {};
|
|
|
+const moxingclick = (val) => {
|
|
|
+ titlefalse.value = val;
|
|
|
+};
|
|
|
+// const qingsel=()=>{
|
|
|
+// lliudialog.value.dialogVisible = true;
|
|
|
+// }
|
|
|
+//点击头部弹出弹框
|
|
|
+
|
|
|
+const titleclick = (val, index) => {
|
|
|
+ mnindex.value = index;
|
|
|
+ valzaiqing.value = val;
|
|
|
+ if (val == "模拟数据") {
|
|
|
+ lliudialog.value.dialogVisible = true;
|
|
|
+ } else {
|
|
|
+ lliudialog.value.dialogVisible = true;
|
|
|
+ clearInterval();
|
|
|
}
|
|
|
-
|
|
|
- .ve_menu_logo {
|
|
|
+};
|
|
|
+//获取aid
|
|
|
+const aidlist = () => {
|
|
|
+ sgdata.value = lliudialog.value.sgdata;
|
|
|
+ aid.value = sgdata.value.aid;
|
|
|
+};
|
|
|
+// 获取子组件的方法
|
|
|
+const childfun = () => {
|
|
|
+
|
|
|
+ if(classradio.value=='Gass'){
|
|
|
+ sourcedis.value.Gassgetdata(aid.value);
|
|
|
+ }else{
|
|
|
+ sourcedis.value.handledisaster(aid.value);
|
|
|
+ }
|
|
|
+ boundary.value.addboundary(aid.value);
|
|
|
+ sourcedis.value.accident3(activeIndex.value);
|
|
|
+ boundary.value.accident4(activeIndex.value);
|
|
|
+};
|
|
|
+const headerclick = (data) => {
|
|
|
+ console.log(data);
|
|
|
+ headerobj.value.name = data.name;
|
|
|
+ headerobj.value.time = data.time;
|
|
|
+ aid.value = data.aid;
|
|
|
+};
|
|
|
+//首页组件调用的方法
|
|
|
+const handindodialoges=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const handleSelect = (key) => {
|
|
|
+
|
|
|
+ activeIndex.value =key;
|
|
|
+ switch (key) {
|
|
|
+ case "1":
|
|
|
+ classradio.value="Water";
|
|
|
+ lliudialog.value.classclick( classradio.value);
|
|
|
+ menumine.value.dialogVisible=false;
|
|
|
+ menusen.value.sendialogVisible=false;
|
|
|
+
|
|
|
+ break;
|
|
|
+ case "2":
|
|
|
+ classradio.value="Fire";
|
|
|
+ lliudialog.value.classclick( classradio.value);
|
|
|
+ menumine.value.dialogVisible=false;
|
|
|
+ menusen.value.sendialogVisible=false;
|
|
|
+ break;
|
|
|
+ case "3":
|
|
|
+ classradio.value="Gass";
|
|
|
+ console.log( classradio.value);
|
|
|
+ lliudialog.value.classclick( classradio.value);
|
|
|
+ menumine.value.dialogVisible=false;
|
|
|
+ menusen.value.sendialogVisible=false;
|
|
|
+ break;
|
|
|
+ case "4":
|
|
|
+ classradio.value="Model";
|
|
|
+ menumine.value.dialogVisible=true;
|
|
|
+ menusen.value.sendialogVisible=true;
|
|
|
+ boundary.value.accident4(key);
|
|
|
+ sourcedis.value.accident3(key);
|
|
|
+ lliudialog.value.accident2(key);
|
|
|
+ break;
|
|
|
+ case "5":
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+.title_wrap{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.apphome {
|
|
|
+ .el-main {
|
|
|
+ --el-main-padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-container {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
width: 100%;
|
|
|
- height: 70px;
|
|
|
- background: #0d1639;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 206;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ve_menu_logo {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ background: #0d1639;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ background: #0d1639;
|
|
|
+ box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border-bottom: 1px solid;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
|
|
|
+
|
|
|
+ .ve_title {
|
|
|
+ }
|
|
|
+
|
|
|
+ .ve_logo_img {
|
|
|
+ padding-left: 30px;
|
|
|
+ padding-right: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ve_logo_title {
|
|
|
+ width: 160px;
|
|
|
white-space: nowrap;
|
|
|
- text-align: left;
|
|
|
overflow: hidden;
|
|
|
- display: flex;
|
|
|
- background: #0d1639;
|
|
|
- box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- border-bottom: 1px solid;
|
|
|
- box-sizing: border-box;
|
|
|
- border-image: linear-gradient(28deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0)) 1 1;
|
|
|
-
|
|
|
- .ve_title {
|
|
|
- }
|
|
|
-
|
|
|
- .ve_logo_img {
|
|
|
- padding-left: 30px;
|
|
|
- padding-right: 30px;
|
|
|
- display: inline-block;
|
|
|
- box-sizing: border-box;
|
|
|
- vertical-align: middle;
|
|
|
- padding: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .ve_logo_title {
|
|
|
- width: 160px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: inline-block;
|
|
|
- margin: 0;
|
|
|
- vertical-align: middle;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0;
|
|
|
+ vertical-align: middle;
|
|
|
+ color: #68adff;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-menu-demo {
|
|
|
+ width: 60% !important;
|
|
|
+ height: 70px;
|
|
|
+ border: none !important;
|
|
|
+ background: rgba(12, 97, 197, 0);
|
|
|
+
|
|
|
+ .el-menu-item {
|
|
|
+ position: relative;
|
|
|
+ width: 97px;
|
|
|
+ font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 13px;
|
|
|
color: #68adff;
|
|
|
- font-size: 20px;
|
|
|
+ line-height: 15px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ width: 110px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border: none;
|
|
|
}
|
|
|
-
|
|
|
- .el-menu-demo {
|
|
|
- width: 60% !important;
|
|
|
+
|
|
|
+ .is-active {
|
|
|
+ width: 110px;
|
|
|
height: 70px;
|
|
|
- border: none !important;
|
|
|
- background: rgba(12, 97, 197, 0);
|
|
|
-
|
|
|
- .el-menu-item {
|
|
|
- position: relative;
|
|
|
- width: 97px;
|
|
|
+ background: radial-gradient(ellipse at 54px 0px, #3aa0ff -37%, #123066 53%);
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-left: 1px solid rgba(16, 92, 240, 1);
|
|
|
+ border-right: 1px solid rgba(18, 48, 102, 1);
|
|
|
+ border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1
|
|
|
+ 1;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ width: 24px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #fff;
|
|
|
+ -webkit-transition: all ease-out 0.2s;
|
|
|
+ transition: all ease-out 0.2s;
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 15px;
|
|
|
+ webkit-transform: translate(-50%, 0%);
|
|
|
+ -moz-transform: translate(-50%, 0%);
|
|
|
+ transform: translate(-50%, 0%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ve_right {
|
|
|
+ // width: 350px;
|
|
|
+ height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .ve_time {
|
|
|
+ width: 190px;
|
|
|
+ height: 55px;
|
|
|
+ padding-top: 15px;
|
|
|
+ height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border-left: 2px solid rgba(12, 97, 197, 0.2);
|
|
|
+ border-right: 2px solid rgba(12, 97, 197, 0.2);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px 5px;
|
|
|
+ // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 13px;
|
|
|
- color: #68adff;
|
|
|
- line-height: 15px;
|
|
|
+ color: #ffffff;
|
|
|
text-align: center;
|
|
|
font-style: normal;
|
|
|
text-transform: none;
|
|
|
- width: 110px;
|
|
|
- height: 70px;
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- border: none;
|
|
|
}
|
|
|
-
|
|
|
- .is-active {
|
|
|
- width: 110px;
|
|
|
- height: 70px;
|
|
|
- background: radial-gradient(ellipse at 54px 0px, #3aa0ff -37%, #123066 53%);
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- border: 1px solid;
|
|
|
- border-left: 1px solid rgba(16, 92, 240, 1);
|
|
|
- border-right: 1px solid rgba(18, 48, 102, 1);
|
|
|
- border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1
|
|
|
- 1;
|
|
|
-
|
|
|
- &:after {
|
|
|
- width: 24px;
|
|
|
- height: 1px;
|
|
|
- background-color: #fff;
|
|
|
- -webkit-transition: all ease-out 0.2s;
|
|
|
- transition: all ease-out 0.2s;
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 15px;
|
|
|
- webkit-transform: translate(-50%, 0%);
|
|
|
- -moz-transform: translate(-50%, 0%);
|
|
|
- transform: translate(-50%, 0%);
|
|
|
- }
|
|
|
+
|
|
|
+ .l_huoqing {
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 2;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l_time {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .ve_right {
|
|
|
- // width: 350px;
|
|
|
+
|
|
|
+ .ve_timeioc {
|
|
|
+ width: 150px;
|
|
|
height: 70px;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
+ // border-radius: 0px 0px 0px 0px;
|
|
|
+ // border: 1px solid;
|
|
|
+ // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
|
|
|
+ font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #68adff;
|
|
|
+ line-height: 15px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
display: flex;
|
|
|
-
|
|
|
- .ve_time {
|
|
|
- width: 190px;
|
|
|
- height: 55px;
|
|
|
- padding-top: 15px;
|
|
|
- height: 70px;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- border-left: 2px solid rgba(12, 97, 197, 0.2);
|
|
|
- border-right: 2px solid rgba(12, 97, 197, 0.2);
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15px 5px;
|
|
|
- // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
-
|
|
|
- .l_huoqing {
|
|
|
- font-size: 13px;
|
|
|
- line-height: 15px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 2;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .l_time {
|
|
|
- font-size: 12px;
|
|
|
- line-height: 14px;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ve_timeioc {
|
|
|
- width: 150px;
|
|
|
- height: 70px;
|
|
|
- font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 13px;
|
|
|
- color: #68adff;
|
|
|
- line-height: 15px;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- span {
|
|
|
- padding-left: 15px;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding-left: 15px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
- <style>
|
|
|
- @import '../../src/style/style.css';
|
|
|
- body {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background: #161a2a;
|
|
|
- }
|
|
|
-
|
|
|
- button:focus,
|
|
|
- button:focus-visible {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- .l_Dialog {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .main-conyeny{
|
|
|
- position: absolute;
|
|
|
- z-index: 206;
|
|
|
- top: 70px;
|
|
|
- }
|
|
|
- .L_aside {
|
|
|
- margin-top: 10px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+ @import '../../src/style/style.css';
|
|
|
+body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: #161a2a;
|
|
|
+}
|
|
|
+
|
|
|
+button:focus,
|
|
|
+button:focus-visible {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.l_Dialog {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.main-conyeny{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 206;
|
|
|
+ top: 70px;
|
|
|
+}
|
|
|
+.L_aside {
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
