1430 lines
31 KiB
Vue
1430 lines
31 KiB
Vue
<template>
|
||
<!-- <Resize> -->
|
||
<div>
|
||
<!-- <div class="bgPicture" :style="{ height: vdaH }">
|
||
<div class="title"></div>
|
||
<div class="titTop">
|
||
<div class="titLeft">
|
||
<span @click="goBack(1)">首页</span>
|
||
<span>/</span>
|
||
<span @click="goBack(2)">安全管理</span>
|
||
</div>
|
||
<div class="titRight">
|
||
<span>2023年2月17日 星期四 14:26</span>
|
||
<span></span>
|
||
<span> 天气 </span>
|
||
<span>晴 12℃</span>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div
|
||
@click="disBox"
|
||
class="screenBox"
|
||
:style="{
|
||
'background-image': !boxNone
|
||
? `url(${require(`../assets/pic/exitFull.png`)}`
|
||
: `url(${require(`../assets/pic/fullScreen.png`)}`,
|
||
right: boxNone ? '483px' : '10px',
|
||
}"
|
||
></div>
|
||
<!-- 左侧模块1 -->
|
||
<div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>安全检查统计</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="concet">
|
||
<div class="ftahBox">
|
||
<span class="iconBox1"></span>
|
||
<div class="ftahBox1">
|
||
<div>检查项</div>
|
||
<div style="color: #1cd1ff">{{ checkNum }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" style="margin-left: 25px">
|
||
<span class="iconBox2"></span>
|
||
<div class="ftahBox1">
|
||
<div>问题项</div>
|
||
<div style="color: #ffb54f">{{ questionNum }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" style="margin-left: 17px">
|
||
<span class="iconBox3"></span>
|
||
|
||
<div class="ftahBox1">
|
||
<div>已处理</div>
|
||
<div style="color: #00d896">{{ resolvedNum }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" style="margin-left: 4px">
|
||
<span class="iconBox4"></span>
|
||
<div class="ftahBox1">
|
||
<div>待处理</div>
|
||
<div style="color: #ecda4b">{{ unresolvedNum }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 左侧模块2 -->
|
||
<div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>检查次数统计</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="seleChange">
|
||
<div
|
||
:class="[timeType === 1 ? 'timeBoxType2' : 'timeBoxType1']"
|
||
@click="chooseType(0)"
|
||
>
|
||
年
|
||
</div>
|
||
<div
|
||
:class="[timeType === 2 ? 'timeBoxType2' : 'timeBoxType1']"
|
||
@click="chooseType(1)"
|
||
>
|
||
月
|
||
</div>
|
||
<div
|
||
:class="[timeType === 3 ? 'timeBoxType2' : 'timeBoxType1']"
|
||
@click="chooseType(2)"
|
||
>
|
||
日
|
||
</div>
|
||
</div>
|
||
<div class="pie2Box">
|
||
<lineChart
|
||
ref="lineRef"
|
||
style="width: 100%; height: 100%"
|
||
grid-bottom="1%"
|
||
:color-array="['#021C9F', '#01B1FF']"
|
||
:chart-data="qyList"
|
||
:x-axis-data="qyList.map((item) => item.name)"
|
||
:checkCountList="checkCountList"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 左侧模块3 -->
|
||
<div class="leftThreeBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>安全告警</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="seleChange">
|
||
<div
|
||
:class="[time2Type === 1 ? 'timeBoxType2' : 'timeBoxType1']"
|
||
@click="choose2Type(0)"
|
||
>
|
||
年
|
||
</div>
|
||
<div
|
||
:class="[time2Type === 2 ? 'timeBoxType2' : 'timeBoxType1']"
|
||
@click="choose2Type(1)"
|
||
>
|
||
月
|
||
</div>
|
||
<div
|
||
:class="[time2Type === 3 ? 'timeBoxType2' : 'timeBoxType1']"
|
||
@click="choose2Type(2)"
|
||
>
|
||
日
|
||
</div>
|
||
</div>
|
||
<div class="pieBox">
|
||
<threeBarChart
|
||
style="width: 100%; height: 100%"
|
||
grid-bottom="1%"
|
||
:color-array="['#021C9F', '#01B1FF']"
|
||
:chart-data3="aq3List"
|
||
:chart-data2="aq2List"
|
||
:chart-data="aqList"
|
||
:x-axis-data="aqList.map((item) => item.name)"
|
||
:safeList="safeList"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧模块1 -->
|
||
<div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>隐患检查统计</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="concet" style="left: 48px">
|
||
<div class="ftahBox">
|
||
<span class="iconBox1"></span>
|
||
<div class="ftahBox1">
|
||
<div>整改项</div>
|
||
<div style="color: #1cd1ff">{{ total }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" style="margin-left: 53px">
|
||
<span class="iconBox2"></span>
|
||
<div class="ftahBox1">
|
||
<div>已处理</div>
|
||
<div style="color: #00d896">{{ resolve }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
<div class="ftahBox" style="margin-left: 43px">
|
||
<span class="iconBox3"></span>
|
||
<div class="ftahBox1">
|
||
<div>待处理</div>
|
||
<div style="color: #fde54a">{{ unresolve }}</div>
|
||
<div>项</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧模块2 -->
|
||
<div class="rightTwoBox" :style="{ right: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span>高频问题项</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="pie3Box">
|
||
<RankBarChart
|
||
style="width: 100%; height: 100%"
|
||
:color-array="['#021C9F', '#01B1FF']"
|
||
:highIssues="highIssues"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧模块3 -->
|
||
<div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-444px' }">
|
||
<div class="titName">
|
||
<span></span>
|
||
<span @click="gantDialog">隐患整改记录</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="yhBox">
|
||
<swiper></swiper>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧菜单 -->
|
||
<!-- <div class="container" :style="{ right: !type ? '-13px' : '0' }">
|
||
<div class="box" id="box" :style="{ width: !type ? '267px' : '0' }">
|
||
<div v-if="!type" :class="[menuType === 1 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(1)">
|
||
<span class="icon1"></span>
|
||
<span>人员管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 2 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(2)">
|
||
<span class="icon2"></span>
|
||
<span>视频监控</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 3 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(3)">
|
||
<span class="icon3"></span>
|
||
<span>进度管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 4 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(4)">
|
||
<span class="icon4"></span>
|
||
<span>安全管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
</div>
|
||
<div class="switchBtn" ref="switchBtn" @click="switchDiv()">
|
||
</div>
|
||
<div class="closeBtn" :style="{ display: type ? 'none' : 'block' }" @click="switchDiv()"></div>
|
||
</div> -->
|
||
</div>
|
||
|
||
<!-- </Resize> -->
|
||
</template>
|
||
|
||
<script>
|
||
import threeBarChart from "@/components/common/threeBarChart";
|
||
import lineChart from "@/components/common/lineChart";
|
||
import pieChart from "@/components/common/pieChart";
|
||
import pieDateChart from "@/components/common/pieDateChart";
|
||
import Resize from "../utils/Resize.vue";
|
||
import tabGtt from "@/components/common/tableGantt";
|
||
import RankBarChart from "@/components/common/RankBarChart";
|
||
import swiper from "./swiper.vue";
|
||
import {
|
||
getCheckTotalCensus,
|
||
getCheckTimesCensus,
|
||
getResolveTroubleCensus,
|
||
getWarnSurveillance,
|
||
getMostTroubleCensus
|
||
} from "../api/api";
|
||
export default {
|
||
name: "report",
|
||
components: {
|
||
pieChart,
|
||
lineChart,
|
||
pieDateChart,
|
||
Resize,
|
||
threeBarChart,
|
||
RankBarChart,
|
||
tabGtt,
|
||
swiper,
|
||
},
|
||
data() {
|
||
return {
|
||
highIssues:[], //高频问题项
|
||
safeList:[], //安全告警
|
||
resolve:0,//已处理
|
||
total: 0, //整改项
|
||
unresolve:0, //待处理
|
||
checkCountList: [], //检查次数统计
|
||
checkNum: 0, //检查项
|
||
questionNum: 0, //问题项
|
||
resolvedNum: 0, //已处理
|
||
unresolvedNum: 0, //待处理
|
||
dialogShow: false,
|
||
timeType: 1,
|
||
time2Type: 1,
|
||
colorList: ["#00A572", "#007EC1", "#DA9300", "#878787"],
|
||
iconPicList: [
|
||
{
|
||
icon: "wendu",
|
||
name: "温度",
|
||
val: "19.8",
|
||
tem: "℃",
|
||
},
|
||
{
|
||
icon: "shidu",
|
||
name: "湿度",
|
||
val: "19.8",
|
||
tem: "%",
|
||
},
|
||
{
|
||
icon: "yangqi",
|
||
name: "氧气值",
|
||
val: "19.8",
|
||
tem: "%VOL",
|
||
},
|
||
{
|
||
icon: "co2",
|
||
name: "二氧化碳",
|
||
val: "19.8",
|
||
tem: "%VOL",
|
||
},
|
||
{
|
||
icon: "ch4",
|
||
name: "甲烷",
|
||
val: "19.8",
|
||
tem: "ppm",
|
||
},
|
||
{
|
||
icon: "h2s",
|
||
name: "硫化氢",
|
||
val: "19.8",
|
||
tem: "ppm",
|
||
},
|
||
],
|
||
tableData: [
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
{
|
||
entName: "我打打死",
|
||
},
|
||
],
|
||
aq3List: [
|
||
{
|
||
name: "2月",
|
||
value: 1,
|
||
},
|
||
{
|
||
name: "3月",
|
||
value: 2,
|
||
},
|
||
{
|
||
name: "4月",
|
||
value: 13,
|
||
},
|
||
{
|
||
name: "5月",
|
||
value: 24,
|
||
},
|
||
{
|
||
name: "6月",
|
||
value: 24,
|
||
},
|
||
{
|
||
name: "7月",
|
||
value: 31,
|
||
},
|
||
],
|
||
aq2List: [
|
||
{
|
||
name: "2月",
|
||
value: 10,
|
||
},
|
||
{
|
||
name: "3月",
|
||
value: 6,
|
||
},
|
||
{
|
||
name: "4月",
|
||
value: 3,
|
||
},
|
||
{
|
||
name: "5月",
|
||
value: 14,
|
||
},
|
||
{
|
||
name: "6月",
|
||
value: 4,
|
||
},
|
||
{
|
||
name: "7月",
|
||
value: 3,
|
||
},
|
||
],
|
||
aqList: [
|
||
{
|
||
name: "2月",
|
||
value: 12,
|
||
value2: 10,
|
||
},
|
||
{
|
||
name: "3月",
|
||
value: 13,
|
||
value2: 6,
|
||
},
|
||
{
|
||
name: "4月",
|
||
value: 12,
|
||
value2: 3,
|
||
},
|
||
{
|
||
name: "5月",
|
||
value: 10,
|
||
value2: 14,
|
||
},
|
||
{
|
||
name: "6月",
|
||
value: 7,
|
||
value2: 4,
|
||
},
|
||
{
|
||
name: "7月",
|
||
value: 11,
|
||
value2: 3,
|
||
},
|
||
],
|
||
qyList: [
|
||
{
|
||
name: "1月",
|
||
value: 12,
|
||
},
|
||
{
|
||
name: "2月",
|
||
value: 112,
|
||
},
|
||
{
|
||
name: "3月",
|
||
value: 132,
|
||
},
|
||
{
|
||
name: "4月",
|
||
value: 12,
|
||
},
|
||
{
|
||
name: "5月",
|
||
value: 132,
|
||
},
|
||
{
|
||
name: "6月",
|
||
value: 132,
|
||
},
|
||
{
|
||
name: "7月",
|
||
value: 132,
|
||
},
|
||
{
|
||
name: "8月",
|
||
value: 32,
|
||
},
|
||
{
|
||
name: "9月",
|
||
value: 22,
|
||
},
|
||
{
|
||
name: "10月",
|
||
value: 152,
|
||
},
|
||
{
|
||
name: "11月",
|
||
value: 132,
|
||
},
|
||
{
|
||
name: "12月",
|
||
value: 132,
|
||
},
|
||
],
|
||
xArry: [],
|
||
chartData: [],
|
||
peopleList: [
|
||
{
|
||
name: "姓名",
|
||
value: "：王刚",
|
||
},
|
||
{
|
||
name: "岗位",
|
||
value: "：项目经理",
|
||
},
|
||
{
|
||
name: "体温",
|
||
value: "：36.5℃",
|
||
},
|
||
{
|
||
name: "入场时间",
|
||
value: "：2022-11-26",
|
||
},
|
||
{
|
||
name: "考勤类型",
|
||
value: "：进场",
|
||
},
|
||
{
|
||
name: "打卡设备",
|
||
value: "：1号打卡机",
|
||
},
|
||
],
|
||
vdaH: 0,
|
||
type: false,
|
||
menuType: 4,
|
||
numberList: [5, 5],
|
||
boxNone: true,
|
||
};
|
||
},
|
||
created() {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
},
|
||
methods: {
|
||
//获取数据
|
||
getData() {
|
||
let projectId = sessionStorage.getItem("projectId");
|
||
//获取安全检查统计
|
||
getCheckTotalCensus({
|
||
projectId: projectId,
|
||
}).then((res) => {
|
||
this.checkNum = res.data.data.checkNum; //检查项
|
||
this.questionNum = res.data.data.questionNum; //问题项
|
||
this.resolvedNum = res.data.data.resolvedNum; //已处理
|
||
this.unresolvedNum = res.data.data.unresolvedNum; //待处理
|
||
});
|
||
//隐患检查统计
|
||
getResolveTroubleCensus({
|
||
projectId: projectId,
|
||
}).then((res) => {
|
||
this.resolve = res.data.data.resolve;
|
||
this.total = res.data.data.total;
|
||
this.unresolve = res.data.data.unresolve;
|
||
});
|
||
//高频问题项
|
||
getMostTroubleCensus({
|
||
projectId: projectId,
|
||
}).then((res)=>{
|
||
this.highIssues = res.data.data
|
||
}).catch((err)=>{
|
||
console.log(err);
|
||
})
|
||
},
|
||
disBox() {
|
||
this.boxNone = !this.boxNone;
|
||
this.$refs.screenBox.style.animationPlayState = "running";
|
||
},
|
||
goBack(val) {
|
||
if (val === 1) {
|
||
this.$router.push("/");
|
||
} else {
|
||
this.$router.go(0);
|
||
}
|
||
},
|
||
chooseType(val) {
|
||
this.timeType = val + 1;
|
||
//检查次数统计
|
||
getCheckTimesCensus({
|
||
projectId: sessionStorage.getItem("projectId"),
|
||
type: val,
|
||
}).then((res) => {
|
||
this.checkCountList = res.data.data;
|
||
this.$refs.lineRef.resetOption();
|
||
});
|
||
},
|
||
|
||
choose2Type(val) {
|
||
this.time2Type = val + 1;
|
||
getWarnSurveillance({
|
||
projectId: sessionStorage.getItem("projectId"),
|
||
type: val,
|
||
}).then((res)=>{
|
||
// this.$refs.lineRef.resetOption();
|
||
this.safeList = res.data.data
|
||
})
|
||
},
|
||
//查看甘特图
|
||
gantDialog() {
|
||
this.dialogShow = true;
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex === 1) {
|
||
return "warning-row";
|
||
} else if (rowIndex === 3) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
// 菜单点击
|
||
childBoxClick(val) {
|
||
this.menuType = val;
|
||
if (val === 3) {
|
||
this.$router.push("/progress");
|
||
} else if (val === 2) {
|
||
this.$router.push("/videoSurveillance");
|
||
} else if (val === 1) {
|
||
this.$router.push("/personnel");
|
||
}
|
||
},
|
||
switchDiv() {
|
||
if (this.type) {
|
||
this.type = false;
|
||
this.$refs.switchBtn.style.display = "none";
|
||
} else {
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800);
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
//获取数据
|
||
this.getData();
|
||
//获取年的检查次数
|
||
this.chooseType(0);
|
||
//默认获取年的安全告警统计
|
||
this.choose2Type(0);
|
||
this.switchDiv();
|
||
window.onresize = () => {
|
||
return (() => {
|
||
let h =
|
||
document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
})();
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.fathe {
|
||
width: 100%;
|
||
height: 144px;
|
||
}
|
||
|
||
.yhBox {
|
||
width: 100%;
|
||
height: 60%;
|
||
position: absolute;
|
||
top: 83px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 60px;
|
||
}
|
||
}
|
||
|
||
.timeBoxType1 {
|
||
background: url("~@/assets/pic/tap1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.timeBoxType2 {
|
||
background: url("~@/assets/pic/tap2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.seleChange {
|
||
width: 130px;
|
||
height: 22px;
|
||
position: absolute;
|
||
right: 27px;
|
||
top: 63px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
z-index: 1;
|
||
|
||
div {
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
width: 43px;
|
||
height: 21px;
|
||
font-size: 12px;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 21px;
|
||
}
|
||
}
|
||
|
||
.tabGtBox {
|
||
position: absolute;
|
||
top: 50px;
|
||
width: 660px;
|
||
padding: 0 40px;
|
||
}
|
||
|
||
.gttBox {
|
||
width: 739px;
|
||
height: 628px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
background: url("~@/assets/pic/boxDialog.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.closeIcon {
|
||
width: 33px;
|
||
height: 33px;
|
||
color: #0dffff;
|
||
float: right;
|
||
font-size: 50px;
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.tableBox {
|
||
width: 90%;
|
||
height: 75%;
|
||
bottom: 15px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.dh1 {
|
||
animation: mytest 0.5s linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes mytest {
|
||
100% {
|
||
right: 10px;
|
||
}
|
||
90% {
|
||
right: 120px;
|
||
}
|
||
|
||
80% {
|
||
right: 160px;
|
||
}
|
||
|
||
70% {
|
||
right: 200px;
|
||
}
|
||
|
||
60% {
|
||
right: 240px;
|
||
}
|
||
|
||
50% {
|
||
right: 300px;
|
||
}
|
||
|
||
40% {
|
||
right: 340px;
|
||
}
|
||
|
||
30% {
|
||
right: 380px;
|
||
}
|
||
|
||
20% {
|
||
right: 420px;
|
||
}
|
||
|
||
10% {
|
||
right: 460px;
|
||
}
|
||
1% {
|
||
right: 480px;
|
||
}
|
||
}
|
||
|
||
@keyframes myt2est {
|
||
1% {
|
||
right: 10px;
|
||
}
|
||
|
||
10% {
|
||
right: 120px;
|
||
}
|
||
|
||
20% {
|
||
right: 160px;
|
||
}
|
||
|
||
30% {
|
||
right: 200px;
|
||
}
|
||
|
||
40% {
|
||
right: 240px;
|
||
}
|
||
|
||
50% {
|
||
right: 300px;
|
||
}
|
||
|
||
60% {
|
||
right: 340px;
|
||
}
|
||
|
||
70% {
|
||
right: 380px;
|
||
}
|
||
|
||
80% {
|
||
right: 420px;
|
||
}
|
||
|
||
90% {
|
||
right: 460px;
|
||
}
|
||
|
||
100% {
|
||
right: 480px;
|
||
}
|
||
}
|
||
|
||
.dh2 {
|
||
animation-fill-mode: forwards;
|
||
animation: myt2est 0.5s linear;
|
||
}
|
||
|
||
.screenBox {
|
||
width: 46px;
|
||
height: 46px;
|
||
background: url("~@/assets/pic/fullScreen.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
bottom: 34px;
|
||
right: 480px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
cursor: pointer;
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: 157px;
|
||
}
|
||
}
|
||
|
||
.nameMessage {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
margin-top: 10px;
|
||
margin-left: 18px;
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 56px;
|
||
text-align-last: justify;
|
||
}
|
||
}
|
||
|
||
.meeting {
|
||
width: 76px;
|
||
height: 29px;
|
||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
line-height: 29px;
|
||
position: absolute;
|
||
top: 305px;
|
||
left: 29px;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
padding-right: 6px;
|
||
}
|
||
|
||
.mettiogBox {
|
||
text-align: center;
|
||
line-height: 29px;
|
||
position: absolute;
|
||
top: 345px;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
padding: 0 22px 0 33px;
|
||
height: 260px;
|
||
}
|
||
|
||
.lookFor {
|
||
width: 57px;
|
||
height: 24px;
|
||
background: url("~@/assets/pic/view.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
float: right;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.videoBox {
|
||
width: 100%;
|
||
height: 239px;
|
||
position: absolute;
|
||
top: 21px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.fxBox {
|
||
width: 385px;
|
||
height: 208px;
|
||
background: rgba(0, 38, 36, 0.2);
|
||
position: absolute;
|
||
bottom: 18px;
|
||
box-shadow: inset 0px 0px 25px 0px rgba(255, 255, 255, 0.2);
|
||
border: 1px solid #007b7b52;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.fxBoxChild {
|
||
font-weight: 500;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-size: 14px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 10px auto 0;
|
||
width: 90%;
|
||
border-bottom: 1px solid rgba(96, 213, 205, 0.4);
|
||
}
|
||
|
||
.pie3Box {
|
||
width: 100%;
|
||
height: 90%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.pie2Box {
|
||
width: 100%;
|
||
height: 90%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 50px;
|
||
}
|
||
}
|
||
|
||
.pieBox {
|
||
width: 100%;
|
||
height: 90%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
height: 262px;
|
||
top: 38px;
|
||
}
|
||
}
|
||
|
||
.kqjk {
|
||
width: 100%;
|
||
height: 170px;
|
||
position: absolute;
|
||
top: 48px;
|
||
display: flex;
|
||
|
||
.oneKqjk {
|
||
width: 135px;
|
||
height: 140px;
|
||
padding: 5px;
|
||
border: 1px solid #00ebeb;
|
||
margin-top: 52px;
|
||
margin-left: 13px;
|
||
margin-right: 14px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.twoKqjk {
|
||
width: 226px;
|
||
height: 180px;
|
||
margin-top: 36px;
|
||
background: rgba(0, 84, 79, 0.3);
|
||
}
|
||
}
|
||
|
||
.concet {
|
||
position: absolute;
|
||
top: 58px;
|
||
left: 23px;
|
||
display: flex;
|
||
}
|
||
|
||
.ftahBox {
|
||
text-align: center;
|
||
padding-top: 27px;
|
||
width: 89px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
padding-top: 7px;
|
||
}
|
||
|
||
.iconBox1 {
|
||
background: url("~@/assets/pic/check.png") no-repeat;
|
||
}
|
||
|
||
.iconBox2 {
|
||
background: url("~@/assets/pic/question.png") no-repeat;
|
||
}
|
||
|
||
.iconBox3 {
|
||
background: url("~@/assets/pic/deal.png") no-repeat;
|
||
}
|
||
|
||
.iconBox4 {
|
||
background: url("~@/assets/pic/todo.png") no-repeat;
|
||
}
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 34px;
|
||
height: 37px;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
font-size: 18px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #e2e2e2;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
font-size: 30px;
|
||
font-weight: 500;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
span:nth-child(4) {
|
||
font-size: 17px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.ftahBox1 {
|
||
// text-align: center;
|
||
padding-top: 27px;
|
||
width: 89px;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
@media only screen and (max-height: 1000px) {
|
||
padding-top: 7px;
|
||
}
|
||
div:nth-child(1) {
|
||
display: inline-block;
|
||
font-size: 18px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #e2e2e2;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
display: inline-block;
|
||
font-size: 30px;
|
||
font-weight: 500;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
div:nth-child(3) {
|
||
font-size: 17px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.bgPicture {
|
||
width: 100%;
|
||
background: url("~@/assets/pic/BG.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 168px;
|
||
background: url("~@/assets/pic/title1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.titTop {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 9px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.titLeft {
|
||
width: 138px;
|
||
height: 40px;
|
||
background: #025a5f;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
|
||
span:nth-child(1),
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #3cfff9;
|
||
letter-spacing: 1px;
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.titRight {
|
||
padding-top: 11px;
|
||
padding-right: 25px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #d1fffe;
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: 80px;
|
||
width: 17.5px;
|
||
height: 18px;
|
||
background: url("~@/assets/pic/sun.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.titName {
|
||
width: 100%;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 15px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
background: url("~@/assets/pic/titleMark.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
font-size: 22px;
|
||
font-family: ht2;
|
||
font-weight: bold;
|
||
color: #86eee7;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 248px;
|
||
height: 12px;
|
||
background: url("~@/assets/pic/4words.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.leftOneBox {
|
||
width: 444px;
|
||
height: 242px;
|
||
background: url("~@/assets/pic/boxOneCz.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
top: 96px;
|
||
left: 27px;
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
height: 222px;
|
||
}
|
||
}
|
||
.rightTwoBox {
|
||
width: 444px;
|
||
height: 362px;
|
||
background: url("~@/assets/pic/second.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
top: 360px;
|
||
right: 27px;
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 317px;
|
||
height: 342px;
|
||
}
|
||
}
|
||
|
||
.leftTwoBox {
|
||
width: 444px;
|
||
height: 322px;
|
||
background: url("~@/assets/pic/second.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
top: 361px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
height: 302px;
|
||
top: 317px;
|
||
}
|
||
}
|
||
|
||
.leftThreeBox {
|
||
width: 444px;
|
||
height: 342px;
|
||
background: url("~@/assets/pic/second.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 707px;
|
||
left: 27px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
height: 279px;
|
||
top: 638px;
|
||
}
|
||
}
|
||
|
||
.rightOneBox {
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
width: 444px;
|
||
height: 240px;
|
||
background: url("~@/assets/pic/boxOneCz.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 96px;
|
||
right: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
height: 222px;
|
||
}
|
||
}
|
||
|
||
.securityCheck {
|
||
width: 100%;
|
||
height: 80%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.rightThreeBox {
|
||
width: 442px;
|
||
height: 300px;
|
||
background: url("~@/assets/pic/boxOneCz.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 746px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
right: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 678px;
|
||
height: 240px;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 0;
|
||
}
|
||
|
||
.box {
|
||
height: 784px;
|
||
overflow-x: hidden;
|
||
transition: width 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
background: url("~@/assets/pic/closeMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
flex-direction: column;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.childBoxChoose {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.childBox:hover {
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
}
|
||
|
||
.childBox {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon1 {
|
||
background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon2 {
|
||
background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon3 {
|
||
background: url("~@/assets/pic/jinduguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon4 {
|
||
background: url("~@/assets/pic/anquanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.closeBtn {
|
||
position: relative;
|
||
top: 343px;
|
||
height: 53px;
|
||
width: 14px;
|
||
cursor: pointer;
|
||
left: -265px;
|
||
}
|
||
|
||
.switchBtn {
|
||
position: absolute;
|
||
transform: rotateY(358deg);
|
||
left: -14px;
|
||
top: 44%;
|
||
height: 53px;
|
||
width: 14px;
|
||
background: url("~@/assets/pic/openMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
display: none;
|
||
}
|
||
</style>
|