330 lines
8.5 KiB
Vue
330 lines
8.5 KiB
Vue
<template>
|
||
<div id="app">
|
||
<div class="header">
|
||
<div class="left">
|
||
<div>{{ time }} {{ week }}</div>
|
||
</div>
|
||
<div class="middle">南京江北新区人民法院智慧运营平台</div>
|
||
<div class="right">
|
||
<div class="quit">
|
||
<img
|
||
src="./assets/images/quit.png"
|
||
style="width: 3%; height: 37%"
|
||
/>
|
||
</div>
|
||
<div class="storey">
|
||
<div
|
||
class="floor"
|
||
v-for="(item, index) in floorList"
|
||
:key="index"
|
||
@click="floorChange(index)"
|
||
:class="{ floorAct: floorAct == index }"
|
||
>
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="menu">
|
||
<div class="menuList">
|
||
<div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index)" :class="{menuAc : menuAc == index}">
|
||
<img :src="item.icon" style="width: 35%; height: 54%" />
|
||
<div style="font-size: 0.55rem">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<router-view />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import pdf from 'vue-pdf'
|
||
import axios from "axios"
|
||
import {getData} from './api/index.js'
|
||
export default {
|
||
data(){
|
||
return{
|
||
screenWidth:
|
||
window.innerWidth ||
|
||
document.documentElement.clientWidth ||
|
||
document.body.clientWidth,
|
||
time:'',
|
||
weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
|
||
week:'',
|
||
floorAct:0,
|
||
floorList:[
|
||
{
|
||
name:'楼顶',
|
||
},
|
||
{
|
||
name:'F5',
|
||
},
|
||
{
|
||
name:'F4',
|
||
},
|
||
{
|
||
name:'F3',
|
||
},
|
||
{
|
||
name:'F2',
|
||
},
|
||
{
|
||
name:'F1',
|
||
},
|
||
{
|
||
name:'B1',
|
||
},
|
||
],
|
||
menuBtn: [
|
||
{
|
||
name: "首页",
|
||
icon: require("./assets/images/shouYe.png"),
|
||
},
|
||
{
|
||
name: "智慧法庭",
|
||
icon: require("./assets/images/faTing.png"),
|
||
},
|
||
{
|
||
name: "智慧节能",
|
||
icon: require("./assets/images/jieNeng.png"),
|
||
},
|
||
{
|
||
name: "智慧安防",
|
||
icon: require("./assets/images/anFang.png"),
|
||
},
|
||
{
|
||
name: "智慧运维",
|
||
icon: require("./assets/images/yunWei.png"),
|
||
},
|
||
{
|
||
name: "告警管理",
|
||
icon: require("./assets/images/gaoJing.png"),
|
||
},
|
||
],
|
||
menuAc:0, //菜单点击
|
||
}
|
||
},
|
||
created() {
|
||
this.lastTime = new Date().getTime();
|
||
this.fun();
|
||
},
|
||
mounted() {
|
||
this.menuChange(0)
|
||
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
|
||
this.week = this.weekList[week]
|
||
window.setInterval(()=>{
|
||
this.time = this.$moment().format("YYYY-MM-DD HH:mm:ss")
|
||
},100)
|
||
const that = this;
|
||
window.onresize = () => {
|
||
return (() => {
|
||
(window.screenWidth =
|
||
window.innerWidth ||
|
||
document.documentElement.clientWidth ||
|
||
document.body.clientWidth),
|
||
(that.screenWidth = window.screenWidth);
|
||
that.fun();
|
||
});
|
||
};
|
||
|
||
},
|
||
methods:{
|
||
//菜单选中
|
||
//菜单选中
|
||
menuChange(index){
|
||
this.menuAc = index
|
||
this.menuBtn.forEach((item,index) => {
|
||
if (index == 0) {
|
||
item.icon = require("./assets/images/shouYe.png")
|
||
}else if (index == 1) {
|
||
item.icon = require("./assets/images/faTing.png")
|
||
}else if (index == 2) {
|
||
item.icon = require("./assets/images/jieNeng.png")
|
||
}else if (index == 3) {
|
||
item.icon = require("./assets/images/anFang.png")
|
||
}else if (index == 4) {
|
||
item.icon = require("./assets/images/yunWei.png")
|
||
}else if (index == 5) {
|
||
item.icon = require("./assets/images/gaoJing.png")
|
||
}
|
||
});
|
||
if (index == 0) {
|
||
this.menuBtn[index].icon = require("./assets/images/shouYeAc.png")
|
||
this.$router.push('/')
|
||
}else if (index == 1) {
|
||
this.menuBtn[index].icon = require("./assets/images/faTingAc.png")
|
||
this.$router.push('court')
|
||
}else if (index == 2) {
|
||
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png")
|
||
}else if (index == 3) {
|
||
this.menuBtn[index].icon = require("./assets/images/anFangAc.png")
|
||
}else if (index == 4) {
|
||
this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png")
|
||
}else if (index == 5) {
|
||
this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png")
|
||
}
|
||
},
|
||
//选中楼层
|
||
floorChange(index){
|
||
this.floorAct = index
|
||
},
|
||
// 设置html标签的字体大小自适应 为了使得rem单位自适应
|
||
fun() {
|
||
const that = this;
|
||
var htmlobj = document.getElementsByTagName("html")[0];
|
||
htmlobj.style.fontSize = (that.screenWidth / 1920) * 20 + "px";
|
||
}
|
||
},
|
||
watch: {
|
||
screenWidth(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
if (!this.timer) {
|
||
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
|
||
this.screenWidth = val;
|
||
this.timer = true;
|
||
let that = this;
|
||
setTimeout(function () {
|
||
that.timer = false;
|
||
}, 400);
|
||
}
|
||
},
|
||
},
|
||
components: {
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||
#app {
|
||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-align: center;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
transition: all 0.2s linear;
|
||
transform-origin: left top;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
#app {
|
||
// width: 6144px;
|
||
// height: 1920px;
|
||
background: rgba(1, 1, 7, 0);
|
||
// overflow: hidden;
|
||
.header {
|
||
height: 15%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 5px 0 5px;
|
||
box-sizing: border-box;
|
||
background: url("./assets/images/headerTop.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
.left {
|
||
width: 26%;
|
||
height: 38%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.55rem;
|
||
}
|
||
.middle {
|
||
width: 40%;
|
||
height: 64%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.3rem;
|
||
font-weight: 500;
|
||
letter-spacing: 0.5rem;
|
||
}
|
||
.right {
|
||
width: 26%;
|
||
height: 100%;
|
||
|
||
.quit {
|
||
height: 38%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-right: 1%;
|
||
}
|
||
.storey {
|
||
height: calc(100% - 38%);
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.floor {
|
||
height: 80%;
|
||
width: 35%;
|
||
font-size: 0.55rem;
|
||
background: url("./assets/images/floorBtn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.floorAct {
|
||
height: 80%;
|
||
width: 35%;
|
||
font-size: 0.55rem;
|
||
background: url("./assets/images/floorBtn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: yellow;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.menu {
|
||
width: 100%;
|
||
height: 12%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: url("./assets/images/bottomKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
.menuList {
|
||
width: 40%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.menuBtn {
|
||
width: 15%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
color: white;
|
||
}
|
||
.menuAc{
|
||
color: rgb(0,229,189);
|
||
width: 15%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
height: calc(100% - 15%);
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style> |