1.封装一个全局组件
<template>
<section class="screen-adapter">
<div class="container1" :style="containerStyle">
<slot></slot>
</div>
</section>
</template>
<script>
import { debounce } from '@/utils/common.js'
// 设计稿宽高
const Design_Width = 1920
const Design_Height = 1080
export default {
data() {
return {
containerStyle: {
width: Design_Width + 'px',
height: Design_Height + 'px',
// 默认不缩放，垂直水平居中
transform: 'scale(1) translate(-50%, -50%)',
}
}
},
mounted() {
this.setScale()
this.onResize = debounce(() => this.setScale(), 300)
window.addEventListener('resize', this.onResize)
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize)
},
methods: {
calcScale() {
console.log(window.innerWidth, window.innerHeight)
const w = window.innerWidth / Design_Width
const h = window.innerHeight / Design_Height
return Math.min(w, h)
},
setScale() {
this.containerStyle.transform = `scale(${this.calcScale()}) translate(-50%, -50%)`
}
}
}
</script>
<style lang="scss" scoped>
.screen-adapter {
width: 100vw;
min-height: 100%;
max-height: 100vh;
overflow: hidden;
background:url("@/assets/image/screen/screen.png") no-repeat;
background-size: 100% 100%;
}
.container1 {
transform-origin: 0 0;
position: absolute;
top: 50%;
left: 50%;
}
</style>
common.js
// 防抖
const debounce = function(fn, delay=500, immediate=false) {
let timer
return function () {
const context = this
const args = arguments
//清除前一个定时器
timer && clearTimeout(timer)
if (immediate) {
// 立即执行
const callNow = !timer
timer = setTimeout(() => timer = null, delay)
callNow && fn.apply(context, args)
} else {
// 非立即执行
timer = setTimeout(() => {
timer = null
fn.apply(context, args)
}, delay)
}
}
}
export {
debounce,
}
2.将此组件作为外壳，包在我们的页面上,再根据美工给的设计图写相应的尺寸即可完成大屏的适配
3.使用echarts图表
1.使用npm安装
npm install echarts --save
2.main.js文件下添加
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.vue文件中的使用，去 echarts.apache.org/zh/index.ht… 或 www.isqqw.com/ 寻找需要的图表
<template>
<div id="main"></div>
</template>
<script>
export default {
data() {
return {
myChart: null,
};
},
mounted() {
this.drawChart();
},
methods: {
drawChart() {
let myChart = this.$echarts.init(document.getElementById("main"));
let option;
// {此处为代码粘贴处}
myChart.setOption(option);
},
},
};
</script>
<style scoped>
#main {
width: 100%;
height: 100%;
}
</style>
4.引用相关字体
下载相关字体到font文件夹下，并新建index.css,并引入所有字体进行统一管理。再在需要用到的字体的vue文件中引入index.css文件
5.实现如下边框样式
html部分
<div class="border-bg">
目前累计完成点次:<span class="num">{{
statistical.finishNum
}}</span>
(点次)
<div class="panel-footer"></div>
</div>
css部分
.border-bg {
background: rgb(6, 25, 87);
padding: 10px 20px;
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
align-items: center;
position: relative;
box-sizing: border-box;
font-family: MicrosoftYaHei;
p {
flex-grow: 0;
flex-shrink: 0;
}
.num {
color: rgb(0, 255, 207);
font-weight: bold;
font-size: 24px;
margin: 0 6px;
}
&::before {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid rgb(54, 155, 255);
border-top: 2px solid rgb(54, 155, 255);
opacity: 0.5;
content: "";
}
&::after {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid rgb(54, 155, 255);
border-top: 2px solid rgb(54, 155, 255);
opacity: 0.8;
content: "";
}
.panel-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&::before {
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid rgb(54, 155, 255);
border-bottom: 2px solid rgb(54, 155, 255);
opacity: 0.5;
content: "";
}
&::after {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid rgb(54, 155, 255);
border-bottom: 2px solid rgb(54, 155, 255);
opacity: 0.8;
content: "";
}
}
6.使用自定义样式地图（高德）
html
<div id="mapContainer"></div>
js
data(){
return {
map: null,
aMap: null,
}
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "bec7dbb5743b84fa923cca9f48372f16",
version: "2.0",
})
.then((AMap) => {
this.map = new AMap.Map("mapContainer", {
mapStyle: "复制自己的地图样式id", //设置地图的显示样式
//是否监控地图容器尺寸变化
resizeEnable: true,
zoom: 19,
});
this.aMap = AMap;
this.map.setZoom(19, false, 2500);
this.getPoints();
fn && fn();
})
.catch((e) => {
console.log(e);
})
.finally(() => {});
},
}
并在index.html文件下加入下面那段代码
<script>
window._AMapSecurityConfig = {
securityJsCode:'自己的密钥',//密钥
};
AMapLoader.load({
"key": "自己的Key", // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI，缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins":[], // 需要加载的 AMapUI ui插件
},
"Loca":{ // 是否加载 Loca， 缺省不加载
"version": '1.3.2' // Loca 版本，缺省 1.3.2
},
}).then((AMap)=>{
map = new AMap.Map('mapContainer');
}).catch(e => {
console.log(e);
})
</script>
