xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

适配

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

2
src/main.js
View File

@ -5,6 +5,6 @@ import App from './App.vue'
import router from "./router"; import router from "./router";
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import './assets/css/common.css'
createApp(App).use(router).use(ElementPlus).mount('#app') createApp(App).use(router).use(ElementPlus).mount('#app')

1
src/view/education.vue
View File

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

159
src/view/home.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div id="m" class="content">
<div class="content"> <div id="container">
<div class="ydool_body">
<!-- <div id="header"> <!-- <div id="header">
<img class="title" src="../assets/img_07.png" alt="" /> <img class="title" src="../assets/img_07.png" alt="" />
</div> --> </div> -->
@ -9,7 +8,6 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@ -18,66 +16,119 @@ import Header from "../components/header.vue";
import { ref, onMounted, onBeforeMount } from "vue"; import { ref, onMounted, onBeforeMount } from "vue";
// 监听缩放 // 监听缩放
window.addEventListener("resize", () => // window.addEventListener("resize", () =>
setTimeout(function () { // setTimeout(function () {
//监测分辨率发生改变就对页面进行刷新，可以改变zoom的值 // //监测分辨率发生改变就对页面进行刷新，可以改变zoom的值
location.reload(); // location.reload();
// bodyScale(); // // bodyScale();
}, 10) // }, 10)
); // );
const insertCss = (select, styles) => { // const insertCss = (select, styles) => {
console.log(styles); // console.log(styles);
if (document.styleSheets.length === 0) { // if (document.styleSheets.length === 0) {
//如果没有style标签,则创建一个style标签 // //如果没有style标签,则创建一个style标签
var style = document.createElement("style"); // var style = document.createElement("style");
document.head.appendChild(style); // document.head.appendChild(style);
} // }
var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中 // var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串 // var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
for (var prop in styles) { // for (var prop in styles) {
str += // str +=
prop.replace(/([A-Z])/g, function (item) { // prop.replace(/([A-Z])/g, function (item) {
//使用正则把大写字母替换成 '-小写字母' // //使用正则把大写字母替换成 '-小写字母'
return "-" + item.toLowerCase(); // return "-" + item.toLowerCase();
}) + // }) +
":" + // ":" +
styles[prop] + // styles[prop] +
";"; // ";";
} // }
str += "}"; // str += "}";
styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面 // styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
}; // };
onBeforeMount(() => { // onBeforeMount(() => {
let zoom = document.body.clientWidth / 1920; // let zoom = document.body.clientWidth / 1920;
document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom); // document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
//解决zoom放大缩小导致echarts位置偏移问题 // //解决zoom放大缩小导致echarts位置偏移问题
let strScale = `scale(${zoom})`; // let strScale = `scale(${zoom})`;
var obj = { // var obj = {
zoom: 1 / zoom, // zoom: 1 / zoom,
transform: strScale, // transform: strScale,
transformOrigin: "0 0", // 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 + ")";
}; };
insertCss("canvas", obj); onMounted(() => {
reset_font();
reset_font();
});
window.addEventListener("resize", function () {
reset_font();
reset_font();
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
background-image: url("../assets/bgImg.png"); background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
background-size: 100% 100%; // background-image: url("../assets/bgImg.png");
background-repeat: no-repeat; // background-size: 100% 100%;
height: 100vh; // background-repeat: no-repeat;
width: 100vw; // 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; overflow: hidden;
} }
.main {
:root { * {
--zoom: 1; pointer-events: all;
} }
.ydool_body {
zoom: var(--zoom);
} }
</style> </style>

1
src/view/hygiene.vue
View File

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

1
src/view/yl.vue
View File

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