This commit is contained in:
姚宇浩 2024-04-18 10:46:44 +08:00
parent 5591c01730
commit 5dab5d3d6a
6 changed files with 166 additions and 63 deletions

55
src/assets/css/common.css Normal file
View File

@ -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;
}

View File

@ -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')

View File

@ -345,7 +345,6 @@ onBeforeMount(() => {
.module {
display: flex;
width: 100%;
height: calc(100vh - 112px);
}
.left_bg {

View File

@ -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);
// //zoomecharts
// 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);
//zoomecharts
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>

View File

@ -139,7 +139,6 @@ const change = (name, index) => {
.module {
display: flex;
width: 100%;
height: calc(100vh - 112px);
}
.yd_title {

View File

@ -216,7 +216,6 @@ const change = (name, index) => {
.module {
display: flex;
width: 100%;
height: calc(100vh - 112px);
}
.yd_title {