This commit is contained in:
parent
5591c01730
commit
5dab5d3d6a
|
|
@ -0,0 +1,55 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
/* color: #8FFDFF; */
|
||||
}
|
||||
|
||||
span,
|
||||
p,
|
||||
a {
|
||||
font-size: 14px;
|
||||
}
|
||||
em {
|
||||
font-family: dsFont;
|
||||
font-size: 32px;
|
||||
font-size: normal;
|
||||
font-weight: bold;
|
||||
color: #8FFDFF;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
background: none;
|
||||
overflow: hidden;
|
||||
/* width: 1920px;
|
||||
height: 1080px; */
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#app {
|
||||
flex: 1;
|
||||
/* height: 1080px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#m {
|
||||
width: 1920px !important;
|
||||
height: 1080px !important;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
}
|
||||
|
|
@ -5,6 +5,6 @@ import App from './App.vue'
|
|||
import router from "./router";
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
import './assets/css/common.css'
|
||||
|
||||
createApp(App).use(router).use(ElementPlus).mount('#app')
|
||||
|
|
|
|||
|
|
@ -345,7 +345,6 @@ onBeforeMount(() => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100vh - 112px);
|
||||
}
|
||||
|
||||
.left_bg {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<div class="ydool_body">
|
||||
<div id="m" class="content">
|
||||
<div id="container">
|
||||
<!-- <div id="header">
|
||||
<img class="title" src="../assets/img_07.png" alt="" />
|
||||
</div> -->
|
||||
|
|
@ -9,7 +8,6 @@
|
|||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -18,66 +16,119 @@ import Header from "../components/header.vue";
|
|||
import { ref, onMounted, onBeforeMount } from "vue";
|
||||
|
||||
// 监听缩放
|
||||
window.addEventListener("resize", () =>
|
||||
setTimeout(function () {
|
||||
//监测分辨率发生改变就对页面进行刷新，可以改变zoom的值
|
||||
location.reload();
|
||||
// bodyScale();
|
||||
}, 10)
|
||||
);
|
||||
// window.addEventListener("resize", () =>
|
||||
// setTimeout(function () {
|
||||
// //监测分辨率发生改变就对页面进行刷新，可以改变zoom的值
|
||||
// location.reload();
|
||||
// // bodyScale();
|
||||
// }, 10)
|
||||
// );
|
||||
|
||||
const insertCss = (select, styles) => {
|
||||
console.log(styles);
|
||||
if (document.styleSheets.length === 0) {
|
||||
//如果没有style标签,则创建一个style标签
|
||||
var style = document.createElement("style");
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
|
||||
var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
|
||||
for (var prop in styles) {
|
||||
str +=
|
||||
prop.replace(/([A-Z])/g, function (item) {
|
||||
//使用正则把大写字母替换成 '-小写字母'
|
||||
return "-" + item.toLowerCase();
|
||||
}) +
|
||||
":" +
|
||||
styles[prop] +
|
||||
";";
|
||||
}
|
||||
str += "}";
|
||||
styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
|
||||
// const insertCss = (select, styles) => {
|
||||
// console.log(styles);
|
||||
// if (document.styleSheets.length === 0) {
|
||||
// //如果没有style标签,则创建一个style标签
|
||||
// var style = document.createElement("style");
|
||||
// document.head.appendChild(style);
|
||||
// }
|
||||
// var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
|
||||
// var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
|
||||
// for (var prop in styles) {
|
||||
// str +=
|
||||
// prop.replace(/([A-Z])/g, function (item) {
|
||||
// //使用正则把大写字母替换成 '-小写字母'
|
||||
// return "-" + item.toLowerCase();
|
||||
// }) +
|
||||
// ":" +
|
||||
// styles[prop] +
|
||||
// ";";
|
||||
// }
|
||||
// str += "}";
|
||||
// styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
|
||||
// };
|
||||
|
||||
// onBeforeMount(() => {
|
||||
// let zoom = document.body.clientWidth / 1920;
|
||||
// document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
|
||||
// //解决zoom放大缩小导致echarts位置偏移问题
|
||||
// let strScale = `scale(${zoom})`;
|
||||
// var obj = {
|
||||
// zoom: 1 / zoom,
|
||||
// transform: strScale,
|
||||
// transformOrigin: "0 0",
|
||||
// };
|
||||
// insertCss("canvas", obj);
|
||||
// });
|
||||
|
||||
const reset_font = () => {
|
||||
let width = document.documentElement.clientWidth || document.body.clientWidth;
|
||||
let height =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
document.querySelector("#m").style.transformOrigin = "top left";
|
||||
document.querySelector("#m").style.transform =
|
||||
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
let zoom = document.body.clientWidth / 1920;
|
||||
document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
|
||||
//解决zoom放大缩小导致echarts位置偏移问题
|
||||
let strScale = `scale(${zoom})`;
|
||||
var obj = {
|
||||
zoom: 1 / zoom,
|
||||
transform: strScale,
|
||||
transformOrigin: "0 0",
|
||||
};
|
||||
insertCss("canvas", obj);
|
||||
onMounted(() => {
|
||||
reset_font();
|
||||
reset_font();
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
reset_font();
|
||||
reset_font();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
background-image: url("../assets/bgImg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
|
||||
// background-image: url("../assets/bgImg.png");
|
||||
// background-size: 100% 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// height: 100vh;
|
||||
// width: 100vw;
|
||||
// overflow: hidden;
|
||||
}
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
// color: #ccffff;
|
||||
}
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#m {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// position: absolute;
|
||||
z-index: 101;
|
||||
|
||||
}
|
||||
#emap {
|
||||
width: 100%;
|
||||
height: 980px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
--zoom: 1;
|
||||
}
|
||||
|
||||
.ydool_body {
|
||||
zoom: var(--zoom);
|
||||
.main {
|
||||
* {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -139,7 +139,6 @@ const change = (name, index) => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100vh - 112px);
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
|
|
|
|||
|
|
@ -216,7 +216,6 @@ const change = (name, index) => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100vh - 112px);
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
|
|
|
|||
Loading…
Reference in New Issue