1654 lines
39 KiB
Vue
1654 lines
39 KiB
Vue
<template>
|
||
<Resize>
|
||
<div style="width: 100%; height: 100%">
|
||
<!-- <div class="bgPicture"> -->
|
||
|
||
<div class="mapModuleApp" style="width: 100%; height: 100%">
|
||
<iframe
|
||
src="../static/unity/index.html"
|
||
frameborder="0"
|
||
style="width: 100%; height: 100%"
|
||
scrolling="no"
|
||
id="unityModule"
|
||
></iframe>
|
||
<!-- 标题 -->
|
||
<div class="header">
|
||
<div class="title"></div>
|
||
<div class="titTop">
|
||
<div class="titLeft" v-show="titLeftshow">
|
||
<span @click="goBack(1)">首页</span>
|
||
<span>/</span>
|
||
<span @click="goBack(japIndex)">{{ japIndex }}</span>
|
||
</div>
|
||
<div class="titRight">
|
||
<span>{{ dateNew }} {{ getWeek }} {{ time }}</span>
|
||
<span
|
||
><img
|
||
:src="weatherImg"
|
||
alt=""
|
||
style="width: 100%; height: 100%"
|
||
/></span>
|
||
<span
|
||
> 天气 </span
|
||
>
|
||
<span
|
||
>{{ weatherItem.weather }} {{
|
||
weatherItem.temperature
|
||
}}℃</span
|
||
>
|
||
</div>
|
||
<div class="closeIndex" @click="closeindex">
|
||
<img src="../assets/pic/closeIndex.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div @click="disBox" ref="screenBox" :class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
|
||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` }">
|
||
</div> -->
|
||
<!-- 首页 -->
|
||
<ModelScreenComponents v-if="indexShow" />
|
||
<!-- 人员管理 -->
|
||
<PersonnelComponents v-if="personnelShow" />
|
||
<!-- 视频监控 -->
|
||
<VideoSurveillanceComponents
|
||
v-if="videoSurveillanceShow"
|
||
@transfer="getUser"
|
||
/>
|
||
<!-- 视频监控子页面 -->
|
||
<VideoViewingComponents
|
||
v-if="videoViewingShow"
|
||
:videoName="videoName"
|
||
:videoId="videoId"
|
||
/>
|
||
<!-- 进度管理 -->
|
||
<ProgressComponents v-if="progressShow" />
|
||
<!-- 安全管理 -->
|
||
<ManagementComponents v-if="managementShow" />
|
||
<!-- 中间1 -->
|
||
|
||
<!-- 中间2 -->
|
||
|
||
<!-- 左侧模块1 -->
|
||
|
||
<!-- 左侧模块2 -->
|
||
</div>
|
||
<div class="container" :style="{ right: !type ? '-10px' : '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>
|
||
</Resize>
|
||
</template>
|
||
|
||
<script>
|
||
import BarChart from "@/components/common/BarChart";
|
||
import mdScreenPie from "@/components/common/mdScreenPie";
|
||
import PersonnelComponents from "./personnelComponents";
|
||
import ModelScreenComponents from "./modelScreenComponents";
|
||
import VideoSurveillanceComponents from "./videoSurveillanceComponents";
|
||
import ProgressComponents from "./progressComponents";
|
||
import ManagementComponents from "./managementComponents";
|
||
import VideoViewingComponents from "./videoViewingComponents";
|
||
import mqtt from "mqtt"; // mqtt协议
|
||
import Swiper from "@/components/common/carousel";
|
||
import Resize from "../utils/Resize.vue";
|
||
import axios from "axios";
|
||
export default {
|
||
name: "report",
|
||
components: {
|
||
mdScreenPie,
|
||
BarChart,
|
||
PersonnelComponents,
|
||
Swiper,
|
||
ModelScreenComponents,
|
||
VideoSurveillanceComponents,
|
||
ProgressComponents,
|
||
ManagementComponents,
|
||
VideoSurveillanceComponents,
|
||
VideoViewingComponents,
|
||
Resize,
|
||
},
|
||
data() {
|
||
return {
|
||
weatherImg: require("@/assets/pic/sun.png"),
|
||
videoName: "", //子传父的视频名称
|
||
videoId: "", //子传父的视频Id
|
||
//显示首页
|
||
indexShow: true,
|
||
//人员管理
|
||
personnelShow: false,
|
||
//视频监控
|
||
videoSurveillanceShow: false,
|
||
//视频监控子页面
|
||
videoViewingShow: false,
|
||
//进度管理
|
||
progressShow: false,
|
||
//安全管理
|
||
managementShow: false,
|
||
//左上角
|
||
titLeftshow: false,
|
||
japIndex: "人员管理",
|
||
getWeek: "星期四",
|
||
dateNew: "2023年2月17日",
|
||
time: "14:26",
|
||
temperature: "12",
|
||
weather: "晴",
|
||
weatherItem: {},
|
||
tienum: "",
|
||
showType: true,
|
||
boxList: [
|
||
{
|
||
c1: "开工",
|
||
c2: "2023-1-4",
|
||
c3: "2023-1-4",
|
||
c4: "正常完成",
|
||
},
|
||
{
|
||
c1: "勘察现场",
|
||
c2: "2023-1-4",
|
||
c3: "2023-1-4",
|
||
c4: "逾期完成",
|
||
},
|
||
{
|
||
c1: "启动会议",
|
||
c2: "2023-1-4",
|
||
c3: "2023-1-4",
|
||
c4: "正常完成",
|
||
},
|
||
{
|
||
c1: "结构施工",
|
||
c2: "2023-1-4",
|
||
c3: "--",
|
||
c4: "逾期中",
|
||
},
|
||
{
|
||
c1: "水电安装",
|
||
c2: "2023-1-4",
|
||
c3: "--",
|
||
c4: "未开始",
|
||
},
|
||
{
|
||
c1: "完工",
|
||
c2: "2023-1-4",
|
||
c3: "--",
|
||
c4: "实施中",
|
||
},
|
||
],
|
||
dataList: [
|
||
{
|
||
src: "@/assets/pic/23.png",
|
||
},
|
||
], // 专题数据列表
|
||
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: "开工建设",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "正常完成",
|
||
},
|
||
{
|
||
entName: "勘察现场",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "未完成",
|
||
},
|
||
{
|
||
entName: "临时设施",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "未完成",
|
||
},
|
||
{
|
||
entName: "桩基工程",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "实施中",
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "未开始",
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "实施中",
|
||
},
|
||
{
|
||
entName: "桩基工程",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "实施中",
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "未开始",
|
||
},
|
||
{
|
||
entName: "完工建设",
|
||
start: "2021-02-01",
|
||
end: "张三",
|
||
zt: "实施中",
|
||
},
|
||
],
|
||
qyList: [
|
||
{
|
||
name: "1月",
|
||
value: 12,
|
||
},
|
||
{
|
||
name: "2月",
|
||
value: 21,
|
||
},
|
||
{
|
||
name: "3月",
|
||
value: 22,
|
||
},
|
||
{
|
||
name: "4月",
|
||
value: 12,
|
||
},
|
||
{
|
||
name: "5月",
|
||
value: 10,
|
||
},
|
||
{
|
||
name: "6月",
|
||
value: 3,
|
||
},
|
||
{
|
||
name: "7月",
|
||
value: 4,
|
||
},
|
||
{
|
||
name: "8月",
|
||
value: 76,
|
||
},
|
||
{
|
||
name: "9月",
|
||
value: 22,
|
||
},
|
||
{
|
||
name: "10月",
|
||
value: 1,
|
||
},
|
||
{
|
||
name: "11月",
|
||
value: 32,
|
||
},
|
||
{
|
||
name: "12月",
|
||
value: 12,
|
||
},
|
||
],
|
||
xArry: [],
|
||
chartData: [],
|
||
peopleList: [
|
||
{
|
||
name: "姓名",
|
||
value: "：王刚",
|
||
},
|
||
{
|
||
name: "岗位",
|
||
value: "：项目经理",
|
||
},
|
||
{
|
||
name: "入岗时间",
|
||
value: "：2022-11-26 08:22:13",
|
||
},
|
||
],
|
||
vdaH: 0,
|
||
type: false,
|
||
menuType: null,
|
||
numberList: [5, 5],
|
||
boxNone: true,
|
||
topicSends: [],
|
||
};
|
||
},
|
||
created() {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
// this.createMqtt()
|
||
this.getWeather();
|
||
window.setInterval(() => {
|
||
this.getTime();
|
||
}, 1000);
|
||
window.openBig = this.openBig;
|
||
window.closeBig = this.closeBig;
|
||
window.createMqtt = this.createMqtt;
|
||
},
|
||
methods: {
|
||
createMqtt() {
|
||
this.topicSends = ["/SC/pub/uwb", "/SC/pub/env"];
|
||
window.PubScribe(this.topicSends, this.realInfo);
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
let time = new Date();
|
||
// console.log("topic",topic)
|
||
switch (topic) {
|
||
// 接收托片
|
||
case "/SC/pub/uwb":
|
||
try {
|
||
// console.log("message", message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", time.toLocaleString(), msg); //msg为转换后的JSON数据
|
||
} catch (error) {}
|
||
break;
|
||
case "/SC/pub/env":
|
||
try {
|
||
// console.log("环境message", message)
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("环境msg",time.toLocaleString(), msg); //msg为转换后的JSON数据
|
||
} catch (error) {}
|
||
break;
|
||
}
|
||
},
|
||
closeindex(){
|
||
// this.$router.push('/')
|
||
this.$confirm("确定退出登录？", "确认信息", {
|
||
distinguishCancelAndClose: true,
|
||
confirmButtonText: "退出",
|
||
cancelButtonText: "取消",
|
||
})
|
||
.then(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "返回登录",
|
||
});
|
||
this.$router.push("/");
|
||
sessionStorage.clear(); //清除所有session值
|
||
})
|
||
.catch((action) => {
|
||
this.$message({
|
||
type: "info",
|
||
message: action === "cancel" ? "取消退出" : "停留在当前页面",
|
||
});
|
||
});
|
||
},
|
||
//获取当前时间
|
||
getTime() {
|
||
let myDate = new Date();
|
||
let wk = myDate.getDay();
|
||
//年
|
||
let year = new Date().getFullYear();
|
||
//月份是从0月开始获取的，所以要+1;
|
||
let month = new Date().getMonth() + 1;
|
||
//日
|
||
let day = new Date().getDate();
|
||
//时
|
||
let hour = new Date().getHours();
|
||
//分
|
||
let minute = new Date().getMinutes();
|
||
//秒
|
||
// let second = new Date().getSeconds();
|
||
let weeks = [
|
||
"星期日",
|
||
"星期一",
|
||
"星期二",
|
||
"星期三",
|
||
"星期四",
|
||
"星期五",
|
||
"星期六",
|
||
];
|
||
let week = weeks[wk];
|
||
this.getWeek = week;
|
||
this.dateNew = year + "年" + month + "月" + day + "日";
|
||
this.time = hour + ":" + minute;
|
||
},
|
||
//获取天气数据
|
||
getWeather() {
|
||
axios({
|
||
url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100",
|
||
methods: "",
|
||
}).then((res) => {
|
||
this.weatherItem = res.data.lives[0];
|
||
this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
|
||
});
|
||
},
|
||
changeWeatherImg(weather) {
|
||
if (weather == "雾") {
|
||
return require("@/assets/weather/gale.png");
|
||
} else if (weather == "阴") {
|
||
return require("@/assets/weather/Cloudy.png");
|
||
} else if (weather == "多云") {
|
||
return require("@/assets/weather/Cloudy.png");
|
||
} else if (weather == "晴") {
|
||
return require("@/assets/weather/sun.png");
|
||
} else if (weather == "中雨") {
|
||
return require("@/assets/weather/middlerain.png");
|
||
} else if (weather == "小雨") {
|
||
return require("@/assets/weather/rain.png");
|
||
} else if (weather == "大雨") {
|
||
return require("@/assets/weather/rainstorm.png");
|
||
} else if (weather == "沙尘暴") {
|
||
return require("@/assets/weather/sand.png");
|
||
} else if (weather == "霾") {
|
||
return require("@/assets/weather/smog.png");
|
||
} else if (weather == "雷电") {
|
||
return require("@/assets/weather/thunder.png");
|
||
} else if (weather == "雷阵雨") {
|
||
return require("@/assets/weather/shower.png");
|
||
} else if (weather == "冰雹") {
|
||
return require("@/assets/weather/hail.png");
|
||
} else if (weather == "雪") {
|
||
return require("@/assets/weather/snow.png");
|
||
} else if (weather == "雨夹雪") {
|
||
return require("@/assets/weather/rainsnow.png");
|
||
} else if (weather == "中雪") {
|
||
return require("@/assets/weather/mieddlesnow.png");
|
||
} else if (weather == "大雪") {
|
||
return require("@/assets/weather/bigsnow.png");
|
||
} else if (weather == "小雪") {
|
||
return require("@/assets/weather/rainlitter.png");
|
||
}
|
||
},
|
||
changeMessage(val) {
|
||
this.tienum = val;
|
||
},
|
||
disBox() {
|
||
this.boxNone = !this.boxNone;
|
||
this.$refs.screenBox.style.animationPlayState = "running";
|
||
},
|
||
goBack(val) {
|
||
if (val === 1) {
|
||
this.indexShow = true;
|
||
this.personnelShow = false;
|
||
this.videoSurveillanceShow = false;
|
||
this.videoViewingShow = false;
|
||
this.managementShow = false;
|
||
this.progressShow = false;
|
||
this.titLeftshow = false;
|
||
} else {
|
||
if (val == "视频监控" && this.videoViewingShow == true) {
|
||
this.indexShow = false;
|
||
this.personnelShow = false;
|
||
this.videoSurveillanceShow = true;
|
||
this.videoViewingShow = false;
|
||
this.managementShow = false;
|
||
this.progressShow = false;
|
||
this.titLeftshow = true;
|
||
}
|
||
// this.$router.go(0)
|
||
}
|
||
},
|
||
//获取视频子传父数据
|
||
getUser(msg) {
|
||
// this.username= msg
|
||
if (msg != null) {
|
||
this.indexShow = false;
|
||
this.personnelShow = false;
|
||
this.videoSurveillanceShow = false;
|
||
this.videoViewingShow = true;
|
||
this.managementShow = false;
|
||
this.progressShow = false;
|
||
this.titLeftshow = true;
|
||
this.videoName = msg.videoName;
|
||
this.videoId = msg.videoId;
|
||
}
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex % 2 === 0) {
|
||
return "success-row";
|
||
} else {
|
||
return "warning-row";
|
||
}
|
||
},
|
||
//放大
|
||
openBig() {
|
||
document.getElementById("unityModule").contentWindow.fullScreen();
|
||
},
|
||
//关闭放大
|
||
closeBig() {
|
||
document.getElementById("unityModule").contentWindow.exitFullScreen();
|
||
},
|
||
// 菜单点击
|
||
childBoxClick(val) {
|
||
this.menuType = val;
|
||
if (val === 3) {
|
||
this.japIndex = "进度管理";
|
||
//进度管理
|
||
this.indexShow = false;
|
||
this.personnelShow = false;
|
||
this.videoSurveillanceShow = false;
|
||
this.videoViewingShow = false;
|
||
this.managementShow = false;
|
||
this.progressShow = true;
|
||
this.titLeftshow = true;
|
||
// this.$router.push('/progress')
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800);
|
||
} else if (val === 2) {
|
||
//视频监控
|
||
this.japIndex = "视频监控";
|
||
// this.$router.push('/videoSurveillance')
|
||
this.indexShow = false;
|
||
this.personnelShow = false;
|
||
this.videoSurveillanceShow = true;
|
||
this.videoViewingShow = false;
|
||
this.managementShow = false;
|
||
this.progressShow = false;
|
||
this.titLeftshow = true;
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800);
|
||
} else if (val === 4) {
|
||
//安全管理
|
||
this.japIndex = "安全管理";
|
||
// this.$router.push('/management')
|
||
this.indexShow = false;
|
||
this.personnelShow = false;
|
||
this.videoSurveillanceShow = false;
|
||
this.videoViewingShow = false;
|
||
this.managementShow = true;
|
||
this.progressShow = false;
|
||
this.titLeftshow = true;
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800);
|
||
} else if (val === 1) {
|
||
//人员管理
|
||
// this.$router.push('/personnel')
|
||
this.japIndex = "人员管理";
|
||
this.indexShow = false;
|
||
this.personnelShow = true;
|
||
this.videoSurveillanceShow = false;
|
||
this.videoViewingShow = false;
|
||
this.managementShow = false;
|
||
this.progressShow = false;
|
||
this.titLeftshow = true;
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800);
|
||
}
|
||
},
|
||
switchDiv() {
|
||
let that = this;
|
||
if (this.type) {
|
||
console.log("11111");
|
||
this.type = false;
|
||
this.$refs.switchBtn.style.display = "none";
|
||
} else {
|
||
console.log("2222");
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
that.$refs.switchBtn.style.display = "block";
|
||
}, 800);
|
||
}
|
||
},
|
||
},
|
||
|
||
mounted() {
|
||
this.switchDiv();
|
||
window.onresize = () => {
|
||
return (() => {
|
||
let h =
|
||
document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
})();
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.dh1 {
|
||
animation: mytest 0.4s linear;
|
||
animation-fill-mode: forwards;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
animation: mce2st 0.4s linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
}
|
||
|
||
@keyframes mce2st {
|
||
1% {
|
||
bottom: 339px;
|
||
}
|
||
|
||
100% {
|
||
bottom: 150px;
|
||
}
|
||
}
|
||
|
||
@keyframes mcest {
|
||
100% {
|
||
bottom: 339px;
|
||
}
|
||
|
||
1% {
|
||
bottom: 150px;
|
||
}
|
||
}
|
||
|
||
@keyframes mytest {
|
||
100% {
|
||
bottom: 20px;
|
||
}
|
||
|
||
90% {
|
||
bottom: 40px;
|
||
}
|
||
|
||
80% {
|
||
bottom: 60px;
|
||
}
|
||
|
||
70% {
|
||
bottom: 80px;
|
||
}
|
||
|
||
60% {
|
||
bottom: 100px;
|
||
}
|
||
|
||
50% {
|
||
bottom: 120px;
|
||
}
|
||
|
||
40% {
|
||
bottom: 140px;
|
||
}
|
||
|
||
30% {
|
||
bottom: 160px;
|
||
}
|
||
|
||
20% {
|
||
bottom: 180px;
|
||
}
|
||
|
||
10% {
|
||
bottom: 200px;
|
||
}
|
||
|
||
1% {
|
||
bottom: 220px;
|
||
}
|
||
}
|
||
|
||
@keyframes myt2est {
|
||
1% {
|
||
bottom: 20px;
|
||
}
|
||
|
||
10% {
|
||
bottom: 40px;
|
||
}
|
||
|
||
20% {
|
||
bottom: 60px;
|
||
}
|
||
|
||
30% {
|
||
bottom: 80px;
|
||
}
|
||
|
||
40% {
|
||
bottom: 100px;
|
||
}
|
||
|
||
50% {
|
||
bottom: 120px;
|
||
}
|
||
|
||
60% {
|
||
bottom: 140px;
|
||
}
|
||
|
||
70% {
|
||
bottom: 160px;
|
||
}
|
||
|
||
80% {
|
||
bottom: 180px;
|
||
}
|
||
|
||
90% {
|
||
bottom: 200px;
|
||
}
|
||
|
||
100% {
|
||
bottom: 220px;
|
||
}
|
||
}
|
||
|
||
.dh2 {
|
||
animation-fill-mode: forwards;
|
||
animation: myt2est 0.4s linear;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
animation: mcest 0.4s linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
}
|
||
|
||
.screenBox {
|
||
width: 46px;
|
||
height: 46px;
|
||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC)
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
bottom: 210px;
|
||
right: 484px;
|
||
cursor: pointer;
|
||
animation-play-state: paused;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: 339px;
|
||
animation-play-state: paused;
|
||
}
|
||
}
|
||
|
||
.smallBox {
|
||
width: 105px;
|
||
height: 28px;
|
||
background: rgba(0, 37, 35, 0.5);
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.swiperBox {
|
||
width: 380px;
|
||
height: 84px;
|
||
position: absolute;
|
||
bottom: 26px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.centerBottom2 {
|
||
width: calc(100% - 968px);
|
||
height: 166px;
|
||
position: absolute;
|
||
bottom: -205px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: url("~@/assets/pic/jdin.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
overflow-x: hidden;
|
||
transition: bottom 0.6s;
|
||
overflow-y: hidden; //重点
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: -64px;
|
||
}
|
||
}
|
||
.centerBottom {
|
||
width: calc(100% - 968px);
|
||
height: 166px;
|
||
position: absolute;
|
||
bottom: 35px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: url("~@/assets/pic/jdin.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
overflow-x: hidden;
|
||
transition: bottom 0.6s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: 164px;
|
||
}
|
||
}
|
||
|
||
.lineBox {
|
||
width: 810px;
|
||
height: 9px;
|
||
background: #ffffff;
|
||
border-radius: 5px;
|
||
opacity: 0.1;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 80px;
|
||
}
|
||
|
||
.boxChild {
|
||
margin-left: 88px;
|
||
text-align: center;
|
||
|
||
div:nth-child(1) {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #1dfffa;
|
||
margin-bottom: 12px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #00dad3;
|
||
}
|
||
|
||
div:nth-child(3) {
|
||
width: 24px;
|
||
height: 24px;
|
||
// background: url("~@/assets/pic/finish.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 6px auto;
|
||
}
|
||
|
||
div:nth-child(4) {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
color: #0afffc;
|
||
}
|
||
|
||
div:nth-child(5) {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #00fff6;
|
||
}
|
||
}
|
||
|
||
.chentChild {
|
||
width: 104px;
|
||
margin-left: 14px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.iconPic {
|
||
width: 24px;
|
||
height: 25px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.tempFather {
|
||
margin-left: 10px;
|
||
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #4fece7;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 10px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #e4e4e4;
|
||
}
|
||
}
|
||
|
||
.temperature {
|
||
font-size: 12px;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #e4e4e4;
|
||
}
|
||
|
||
.centerTop {
|
||
width: 124px;
|
||
position: absolute;
|
||
top: 124px;
|
||
right: 480px;
|
||
background: url("~@/assets/pic/icas.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
padding-bottom: 22px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
}
|
||
|
||
.tableBox {
|
||
width: 90%;
|
||
height: 75%;
|
||
bottom: 15px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.securityCheck {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.spoperBox {
|
||
width: 380px;
|
||
height: 84px;
|
||
position: absolute;
|
||
bottom: 24px;
|
||
left: 34px;
|
||
display: flex;
|
||
|
||
.spoChild {
|
||
margin: auto;
|
||
padding: 1px;
|
||
border: 1px solid #00ebeb;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.videoBox {
|
||
position: absolute;
|
||
bottom: 33px;
|
||
display: flex;
|
||
|
||
.videoFat {
|
||
background: gray;
|
||
flex: 1;
|
||
width: 180px;
|
||
height: 183px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pieBox {
|
||
width: 100%;
|
||
height: 273px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.passBox {
|
||
position: absolute;
|
||
right: 45px;
|
||
top: 128px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 118px;
|
||
}
|
||
|
||
div:nth-child(1) {
|
||
width: 50px;
|
||
height: 47px;
|
||
background: url("~@/assets/pic/pass.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
font-size: 12px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #7ffffc;
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
|
||
.nameMessage {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
margin-top: 10px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 56px;
|
||
text-align-last: justify;
|
||
}
|
||
}
|
||
|
||
.peopleMessage {
|
||
width: 380px;
|
||
height: 106px;
|
||
background: #002725;
|
||
box-shadow: inset 0px 0px 25px 0px rgba(255, 255, 255, 0.7);
|
||
opacity: 0.2;
|
||
position: absolute;
|
||
left: 33px;
|
||
top: 113px;
|
||
border: 1px solid #007b7b;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
height: 86px;
|
||
}
|
||
|
||
.firBox {
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 337px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.numT2otle {
|
||
position: absolute;
|
||
top: 65px;
|
||
right: 62px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
|
||
.num {
|
||
font-family: lcdD;
|
||
display: inline-block;
|
||
background: url("~@/assets/pic/number.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 20px;
|
||
height: 32px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
margin-right: 2px;
|
||
font-size: 26px;
|
||
letter-spacing: 0.1em;
|
||
color: #4bffdc;
|
||
padding: 0px 0px 0px 3px;
|
||
}
|
||
}
|
||
|
||
.numTotle {
|
||
// width: 100%;
|
||
position: absolute;
|
||
top: 65px;
|
||
left: 58px;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
|
||
.num {
|
||
font-family: lcdD;
|
||
display: inline-block;
|
||
background: url("~@/assets/pic/number.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 20px;
|
||
height: 32px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
margin-right: 2px;
|
||
font-size: 26px;
|
||
letter-spacing: 0.1em;
|
||
color: #4bffdc;
|
||
padding: 0px 0px 0px 3px;
|
||
}
|
||
}
|
||
|
||
.concet {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #d6eae9;
|
||
text-indent: 2em;
|
||
width: 90%;
|
||
height: 180px;
|
||
position: absolute;
|
||
top: 72px;
|
||
line-height: 26px;
|
||
overflow: hidden;
|
||
padding: 0 30px 0 22px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 52px;
|
||
}
|
||
}
|
||
|
||
.bgPicture {
|
||
width: 100%;
|
||
background: url("~@/assets/pic/BG.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.header {
|
||
position: absolute;
|
||
top: 0px;
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
.header .titTop {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 9px;
|
||
// right: 9px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.titLeft {
|
||
width: 138px;
|
||
height: 40px;
|
||
background: #025a5f;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
span:nth-child(1),
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #3cfff9;
|
||
letter-spacing: 1px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.titRight {
|
||
padding-top: 11px;
|
||
padding-right: 25px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #d1fffe;
|
||
position: absolute;
|
||
right: 80px;
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: 85px;
|
||
width: 18px;
|
||
height: 18px;
|
||
// background: url("~@/assets/pic/sun.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.closeIndex {
|
||
width: 40px;
|
||
height: 40px;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 22px;
|
||
}
|
||
}
|
||
|
||
.header .title {
|
||
width: 100%;
|
||
height: 168px;
|
||
background: url("~@/assets/pic/title1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.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 {
|
||
height: 282px;
|
||
width: 444px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 96px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
height: 242px;
|
||
}
|
||
}
|
||
|
||
.leftTwoBox {
|
||
width: 444px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
height: 342px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 401px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 337px;
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.leftThreeBox {
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
width: 442px;
|
||
height: 279px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 767px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 657px;
|
||
height: 259px;
|
||
}
|
||
}
|
||
|
||
.rightOneBox {
|
||
width: 444px;
|
||
height: 302px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 96px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
height: 282px;
|
||
}
|
||
}
|
||
|
||
.rightTwoBox {
|
||
width: 442px;
|
||
height: 299px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 422px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 378px;
|
||
height: 279px;
|
||
}
|
||
}
|
||
|
||
.rightThreeBox {
|
||
width: 442px;
|
||
height: 299px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 745px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 675px;
|
||
height: 239px;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 0px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.box {
|
||
height: 784px;
|
||
overflow-x: hidden;
|
||
transition: width 1s, 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;
|
||
}
|
||
|
||
.btn {
|
||
height: 53px;
|
||
width: 14px;
|
||
}
|
||
|
||
.tabHeader {
|
||
width: 398px;
|
||
height: 35px;
|
||
background: #368d87;
|
||
display: flex;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.el-table__footer-wrapper,
|
||
.el-table__header-wrapper {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-table {
|
||
&.el-table--scrollable-y ::-webkit-scrollbar {
|
||
display: none !important; //隐藏滚动条
|
||
}
|
||
}
|
||
|
||
/deep/ .el-table tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/deep/ .el-table,
|
||
.el-table__expanded-cell {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/deep/ .el-table th {
|
||
background-color: #2f807d !important;
|
||
border-bottom: none !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
/deep/ .el-table .cell {
|
||
// background-color: transparent !important;
|
||
color: rgba(255, 255, 255, 0.7) !important;
|
||
border: none !important;
|
||
padding-left: 0;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
/deep/ .el-table th > .cell {
|
||
color: rgba(254, 254, 254, 1) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.el-table::before {
|
||
//去除底部白线
|
||
left: 0 !important;
|
||
bottom: 0 !important;
|
||
width: 100% !important;
|
||
height: 0px !important;
|
||
}
|
||
|
||
/deep/ .el-form-item__label {
|
||
color: white !important;
|
||
}
|
||
|
||
//滚动条的宽度
|
||
::-webkit-scrollbar {
|
||
width: 0px;
|
||
height: 0px;
|
||
background-color: #070c4f;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
|
||
background-color: transparent !important;
|
||
/* color: #f19944; */
|
||
/* 设置文字颜色，可以选择不设置 */
|
||
}
|
||
|
||
/deep/ .el-table .warning-row {
|
||
background: rgba(44, 74, 64, 0.5) !important;
|
||
}
|
||
|
||
/deep/ .el-table .success-row {
|
||
background: transparent;
|
||
}
|
||
</style>
|
||
<style>
|
||
.el-carousel__indicators--outside {
|
||
display: none;
|
||
}
|
||
</style>
|