Skip to content

Y
yindong-tongbai-automation
Commit 789bd382 authored by forevertyler's avatar forevertyler
Browse files
Options

fix:sth

parents 94a56373 9010d2c3
Hide whitespace changes
Inline Side-by-side
Showing with 480 additions and 426 deletions
src/api/tyler/hjjc.js
View file @ 789bd382
......@@ -42,3 +42,12 @@ export function getDeviceStatus(query) {
params: query,
});
}
// 查询近7日报警信息
export function getRecentSevDaysAlarms(query) {
return request({
url: "/business/screen/env/recentSevDaysAlarms",
method: "get",
params: query,
});
}
src/views/Screen/items/hjjc.vue
View file @ 789bd382
......@@ -86,14 +86,14 @@
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
<span class="scroll-title">{{ sssjName }}</span>
<span class="scroll-title">{{ rightTopLssjData.name }}</span>
</div>
<div class="sub-con">
<div class="sub-con">
<span
v-for="(item, i) in sssjData"
v-for="(item, i) in rightTopLssjData.list"
:key="i"
:class="i == sssjMark ? 'active' : ''"
:class="i == rightTopLssjData.mark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
......@@ -105,19 +105,19 @@
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
<span class="scroll-title">1</span>
<span class="scroll-title">{{ rightCenterLssjData.name }}</span>
</div>
<div class="sub-con">
<div class="sub-con">
<span
v-for="(item, i) in sssjData"
v-for="(item, i) in rightCenterLssjData.list"
:key="i"
:class="i == sssjMark ? 'active' : ''"
:class="i == rightCenterLssjData.mark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
</div>
<div class="left-chart" ref="right" id="right"></div>
<div class="left-chart" ref="right" id="rclssj"></div>
</div>
</div>
<!-- 近7日设备监测报警信息 -->
......@@ -145,13 +145,13 @@
:key="i"
>
<span class="custom-item-content custom-item-content2">{{
item.name
item.placeName
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.alertTime
item.alarmTime
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.alertLocation
item.value
}}</span>
</li>
</ul>
......@@ -162,9 +162,9 @@
<!-- 弹窗内容 -->
<transition name="el-fade-in">
<div v-show="upWindowData.upWindowVisible" class="up-window">
<p><span></span>四中温度设备一</p>
<p><span></span>{{ upWindowData.title }}</p>
<i class="el-icon-close close-button" @click="closeUpWindow"></i>
<p class="date-title">2025-3-13</p>
<p class="date-title">{{ upWindowData.date }}</p>
<div class="chart-box" id="chartBox"></div>
</div>
</transition>
......@@ -178,6 +178,8 @@ import {
getRtData,
getDeviceStatus,
getDeviceData,
getRcData,
getRecentSevDaysAlarms,
} from "@/api/tyler/hjjc";
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
......@@ -194,6 +196,8 @@ export default {
upWindowData: {
upWindowActive: "",
upWindowVisible: false,
title: "",
date: "2025-03-19",
},
// 左边列表数据
tableData1: [],
......@@ -204,77 +208,66 @@ export default {
autoPlay: true,
},
// 设备定位分类开关
checkList: ["1", "2"],
checkList: ["2"],
// 右下滚动 参数
classOption2: {
singleHeight: 47,
hoverStop: true,
},
// 左侧实施数据列表
sssjData: [
{
name: "",
value: [
{
data: {
xData: {
data: [],
rightTopLssjData: {
list: [
{
name: "",
value: [
{
data: {
xData: {
data: [],
},
yData: {
data: [],
},
},
yData: {
data: [],
},
],
},
],
// 右上设备轮播下标
mark: 0,
// 右上设备轮播名称
name: "",
},
// 左侧实施数据列表
rightCenterLssjData: {
list: [
{
name: "",
value: [
{
data: {
xData: {
data: [],
},
yData: {
data: [],
},
},
},
},
],
},
],
// 右上设备轮播下标
sssjMark: 0,
// 右上设备轮播名称
sssjName: "",
],
},
],
// 右上设备轮播下标
mark: 0,
// 右上设备轮播名称
name: "",
},
// 右下 列表数据
tableData2: [
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
},
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
},
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
},
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
},
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
},
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
},
{
name: "陈玉强",
department: "生产部",
alertTime: "2025-01-10 14:21:31",
alertLocation: "四中车场",
placeName: "",
alarmTime: "",
value: "",
},
],
// 中间图片数据列表
......@@ -298,196 +291,6 @@ export default {
},
],
},
{
isWarning: 0, //是否报警
x: 145,
y: 253,
name: "一中风机",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 185,
y: 258,
name: "一中主运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 270,
y: 270,
name: "一中运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 237,
y: 280,
name: "一中西采区",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 816,
y: 221,
name: "东风井",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 75,
y: 331,
name: "二中避险硐室",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 153,
y: 357,
name: "二中主运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 217,
y: 366,
name: "二中中运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 317,
y: 379,
name: "二中运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 128,
y: 396,
name: "二中西采区",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
],
};
},
......@@ -497,13 +300,23 @@ export default {
}
// this.initEchartBox("right", this.salvProName, this.salvProValue, 28);
// this.initEchartBox("sssj", this.salvProName, this.salvProValue, 28);
this.initRealData();
getRtData().then((res) => {
this.sssjData = res.data;
this.playFun(this.sssjData);
this.rightTopLssjData.list = res.data || [];
this.rtPlayFun(this.rightTopLssjData);
});
getRcData().then((res) => {
this.rightCenterLssjData.list = res.data || [];
this.rcPlayFun(this.rightTopLssjData);
});
getDeviceStatus().then((res) => {
console.log(res, "中间图片");
this.equipmentList = res.data;
});
getRecentSevDaysAlarms().then((res) => {
//数据空
});
//初始化获取左侧环境监测实施数据
getRealData().then((res) => {
this.tableData1 = res.data;
});
},
created() {},
......@@ -512,16 +325,10 @@ export default {
getItemField(item, fieldKey) {
return item[this.fieldMap[fieldKey]] || "";
},
//初始化获取左侧环境监测实施数据
initRealData() {
getRealData().then((res) => {
this.tableData1 = res.data;
});
},
// 初始化eChartDOM
initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
let that = this;
let myChart = echarts.init(document.getElementById(id));
let myChart = null;
myChart = echarts.init(document.getElementById(id));
let option = {
grid: grid,
xAxis: {
......@@ -551,6 +358,7 @@ export default {
},
yAxis: {
type: "value",
max: 50,
boundaryGap: false,
axisTick: {
alignWithLabel: true,
......@@ -621,10 +429,16 @@ export default {
setTimeout(() => {
myChart.resize();
}, 600);
this.$on("hook:deactivated", () => {
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();
}
myChart = null;
});
},
// 轮播eChart
// 更改数据达到轮播效果
playFun(list = []) {
rtPlayFun(data) {
// 启动定时器，每隔 3 秒执行一次
let i = 0;
let l = 0;
......@@ -636,17 +450,21 @@ export default {
containLabel: true,
};
const timer = setInterval(() => {
if (i < list.length) {
if (Array.isArray(list[i].value) && l < list[i].value.length) {
this.sssjMark = i;
this.sssjName = list[i].value[l].tpName;
// this.initEchartBox(
// "sssj",
// list[i].value[l].data.xData.data,
// list[i].value[l].data.yData.data,
// "",
// grid
// );
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"sssj",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData.data,
data.list[i].value[l].data.yData.alarm,
4,
grid
);
l++;
} else {
i++;
......@@ -656,6 +474,114 @@ export default {
l = 0;
}
}, 15000);
this.$on("hook:activated", () => {
if (timer === null) {
// 避免重复开启定时器
timer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"sssj",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData.data,
data.list[i].value[l].data.yData.alarm,
4,
grid
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
}
});
this.$on("hook:deactivated", () => {
clearInterval(timer);
timer = null;
});
},
// 更改数据达到轮播效果
rcPlayFun(data) {
// 启动定时器，每隔 3 秒执行一次
let i = 0;
let l = 0;
let grid = {
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
};
const timer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightCenterLssjData.mark = i;
this.rightCenterLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"rclssj",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData.data,
data.list[i].value[l].data.yData.alarm,
4,
grid
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
this.$on("hook:activated", () => {
if (timer === null) {
// 避免重复开启定时器
timer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightCenterLssjData.mark = i;
this.rightCenterLssjData.name = data.list[i].value[l].tpName;
this.initEchartBox(
"rclssj",
data.list[i].value[l].data.xData.data,
data.list[i].value[l].data.yData.data,
data.list[i].value[l].data.yData.alarm,
4,
grid
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
}
});
this.$on("hook:deactivated", () => {
clearInterval(timer);
timer = null;
});
},
//自动滚动
autoScroll() {
......@@ -676,41 +602,6 @@ export default {
},
// 查看设备24H实时数据
lookRealData(item, i) {
this.upWindowData.upWindowActive = i;
this.upWindowData.upWindowVisible = true;
this.classOption.autoPlay = false;
console.log(item);
getDeviceData({ tpName: item.tpName }).then((res) => {});
let a = [
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
];
let b = [
29.1, 28, 27, 26, 25, 24, 29, 25, 28, 26, 28, 27, 26, 24, 28, 21, 29,
28, 24, 26, 28, 24, 24, 26,
];
let grid = {
left: 0,
right: "1.7%",
......@@ -718,7 +609,27 @@ export default {
top: "7%",
containLabel: true,
};
this.initEchartBox("chartBox", a, b, 25, 0, grid);
let xData = [];
let yData = [];
getDeviceData({ id: item.id }).then((res) => {
if (res.code == 200) {
this.upWindowData.upWindowActive = i;
this.upWindowData.upWindowVisible = true;
this.upWindowData.title = item.tpName;
this.upWindowData.date = res.data.day;
this.classOption.autoPlay = false;
let threshold = 0;
res.data.envScreenEditDto.forEach((i) => {
xData.push(i.time);
yData.push(i.value);
});
threshold = res.data.threshold || 0;
this.initEchartBox("chartBox", xData, yData, threshold, 0, grid);
} else {
this.$message.error("数据请求失败！");
}
});
},
// 关闭弹窗
closeUpWindow() {
......@@ -790,6 +701,15 @@ export default {
},
immediate: true,
},
tableData2: {
handler() {
// 数据更改时也要加
this.$nextTick(() => {
this.$refs.RightScroll.reset();
});
},
immediate: true,
},
},
};
</script>
......@@ -963,6 +883,7 @@ export default {
bottom: 10px;
left: -81px;
padding: 9px 14px 14px 14px;
z-index: 999;
display: none;
p {
font-family: Source Han Sans SC;
......@@ -1105,6 +1026,8 @@ export default {
overflow: hidden;
.item {
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.custom-item2 {
width: 100%;
......@@ -1210,7 +1133,7 @@ export default {
}
}
.date-title {
width: 108px;
width: 118px;
height: 18px;
font-weight: 500;
font-size: 22px;
......
src/views/Screen/items/psxt.vue
View file @ 789bd382
<template>
<div class="app-container home">
<div id="cesiumContainer">
<div class="center-title-box">
<div class="control-state">
<p>
<span class="icon-img"></span>
<span>已开启智能控制</span>
</p>
</div>
<div class="title-box top">
<p class="title">液体高度:10m</p>
<p class="name">蓄水池</p>
</div>
<div class="title-box center">
<p class="title">液体高度:10m</p>
<p class="name">二中水仓</p>
</div>
<div class="title-box bottom">
<p class="title">液体高度:10m</p>
<p class="name">五中水仓</p>
</div>
</div>
<div class="water-pump pst1">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
<div>
<div class="app-container home">
<div id="cesiumContainer">
<div class="center-title-box">
<div class="control-state">
<p>
<span class="icon-img"></span>
<span>已开启智能控制</span>
</p>
</div>
</div>
</div>
<div class="water-pump pst2">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
<div class="title-box top">
<p class="title">液体高度:10m</p>
<p class="name">蓄水池</p>
</div>
<div class="title-box center">
<p class="title">液体高度:10m</p>
<p class="name">二中水仓</p>
</div>
<div class="title-box bottom">
<p class="title">液体高度:10m</p>
<p class="name">五中水仓</p>
</div>
</div>
</div>
<div class="water-pump pst3">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
<div class="water-pump pst1">
<div class="H36">
<div class="button on" @click="openWaterPump">开启</div>
<div class="button off" @click="closeWaterPump">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
<div class="phd-left"></div>
</div>
</div>
<div class="water-pump pst4">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
<div class="water-pump pst2">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
<div class="water-pump pst3">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
</div>
</div>
<div class="water-pump pst5">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
<div class="water-pump pst4">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
<div class="water-pump pst5">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
</div>
<div class="water-pump pst6">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
<div class="water-pump pst6">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
<div class="water-pump pst7">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
<div class="phd-left"></div>
</div>
</div>
<div class="water-pump pst7">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="up-window" v-show="upWindowShow">
<div class="up-window-box">
<p><span></span>开启/关闭水泵</p>
<i class="el-icon-close close-button" @click="upWindowShow = false"></i>
<div class="W400">
<span>请输入密码</span>
<el-input placeholder="" v-model="password" show-password></el-input>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
<div>
<div class="button close">关闭</div>
<div class="button">开启</div>
</div>
</div>
</div>
......@@ -126,10 +142,22 @@
export default {
name: "cesium",
data() {
return {};
return {
password: "",
upWindowShow: false,
};
},
created() {},
methods: {},
methods: {
// 水泵开启按钮
openWaterPump() {
this.upWindowShow = true;
},
// 水泵关闭按钮
closeWaterPump() {
this.upWindowShow = true;
},
},
};
</script>
......@@ -223,6 +251,7 @@ export default {
border: 2px solid #d8efff;
border-radius: 2px;
background: RGBA(0, 26, 49, 1);
cursor: pointer;
}
.on {
&.active {
......@@ -307,4 +336,97 @@ export default {
}
}
}
.up-window {
width: 100%;
height: 100%;
background: RGBA(4, 21, 42, 0.6);
position: absolute;
z-index: 9999;
top: 0;
left: 0;
.up-window-box {
width: 588px;
height: 350px;
background: linear-gradient(0deg, #062451 0%, #09162d 100%);
box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
border: 2px solid #11b9ff;
opacity: 1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px 37px 37px 27px;
color: #ffffff;
p {
width: 500px;
height: 37px;
margin: 0px;
background: url("~@/assets/images/screen/psxt/title.png") no-repeat center;
background-size: 100%;
font-weight: 500;
font-size: 22px;
color: #ffffff;
height: 37px;
background-position-y: 9px;
span {
width: 27px;
display: inline-block;
}
}
.close-button {
font-size: 30px;
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
&:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: -webkit-transform 1s linear;
transition: transform 1s linear;
}
}
.W400 {
width: 400px;
margin: auto;
::v-deep .el-input__inner {
border-radius: 0px !important;
height: 52px;
}
span {
font-weight: 400;
font-size: 21px;
color: #ffffff;
margin-top: 60px;
display: inline-block;
margin-bottom: 15px;
}
}
.button {
width: 110px;
height: 42px;
background: #11b9ff;
border-radius: 4px;
font-weight: 400;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 42px;
float: left;
margin-left: 100px;
margin-top: 55px;
cursor: pointer;
&:hover {
background: #66d2ff;
}
&.close {
background: none;
color: #fff;
&:hover {
color: #66d2ff;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment