update
This commit is contained in:
hzz
parent
482f6392a6
commit
87ee53fca4
@ -1,4 +1,4 @@
|
|||||||
import { createWebHistory, createRouter } from 'vue-router'
|
import { createWebHistory, createRouter,createWebHashHistory } from 'vue-router'
|
||||||
/* Layout */
|
/* Layout */
|
||||||
import Layout from '@/layout'
|
import Layout from '@/layout'
|
||||||
import ScaleScreen from '@/layout/scaleScreen'
|
import ScaleScreen from '@/layout/scaleScreen'
|
||||||
@ -83,6 +83,12 @@ export const constantRoutes = [
|
|||||||
component: () => import("../views/screen/R_D_Environment/index.vue"),
|
component: () => import("../views/screen/R_D_Environment/index.vue"),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/screen/R_D_Environment1",
|
||||||
|
name: "R_D_Environment1",
|
||||||
|
component: () => import("../views/screen/R_D_Environment1/index.vue"),
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -176,7 +182,7 @@ export const dynamicRoutes = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHashHistory(),
|
||||||
routes: constantRoutes,
|
routes: constantRoutes,
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior(to, from, savedPosition) {
|
||||||
if (savedPosition) {
|
if (savedPosition) {
|
||||||
|
|||||||
@ -83,9 +83,16 @@ const options = computed(() => {
|
|||||||
color: '#33FFFF'
|
color: '#33FFFF'
|
||||||
},
|
},
|
||||||
data: seriesData.map((item) => {
|
data: seriesData.map((item) => {
|
||||||
return {
|
let dataobj = {
|
||||||
value: item
|
value: item
|
||||||
};
|
}
|
||||||
|
if (item > 100) {
|
||||||
|
dataobj.itemStyle = {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return dataobj
|
||||||
}),
|
}),
|
||||||
z: 10
|
z: 10
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="abs-header">研发中心环境实时监测系统</div>
|
<div class="abs-header" ref="texstref">研发中心环境实时监测系统</div>
|
||||||
<div class="l-box">
|
<div class="l-box">
|
||||||
<div class="lbox1">
|
<div class="lbox1">
|
||||||
<ItemVue title="温湿度监测">
|
<ItemVue title="温湿度监测">
|
||||||
@ -93,12 +93,60 @@ import { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/
|
|||||||
let noiseDataList = ref([
|
let noiseDataList = ref([
|
||||||
{
|
{
|
||||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
|
||||||
"devName": "噪声监测7",
|
"devName": "办公区7",
|
||||||
"label": "noise-7",
|
"label": "noise-7",
|
||||||
"place": null,
|
"place": null,
|
||||||
"data": 0,
|
"data": 10,
|
||||||
"status": 0
|
"status": 0
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
|
||||||
|
"devName": "办公区6",
|
||||||
|
"label": "noise-6",
|
||||||
|
"place": null,
|
||||||
|
"data": 20,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e490",
|
||||||
|
"devName": "办公区5",
|
||||||
|
"label": "noise-5",
|
||||||
|
"place": null,
|
||||||
|
"data": 22,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
|
||||||
|
"devName": "办公区4",
|
||||||
|
"label": "noise-4",
|
||||||
|
"place": null,
|
||||||
|
"data": 22,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
|
||||||
|
"devName": "办公区3",
|
||||||
|
"label": "noise-3",
|
||||||
|
"place": null,
|
||||||
|
"data": 21,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e492",
|
||||||
|
"devName": "办公区2",
|
||||||
|
"label": "noise-2",
|
||||||
|
"place": null,
|
||||||
|
"data": 24,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e493",
|
||||||
|
"devName": "办公区1",
|
||||||
|
"label": "noise-1",
|
||||||
|
"place": null,
|
||||||
|
"data": 25,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
])
|
])
|
||||||
let sensor_list = reactive([
|
let sensor_list = reactive([
|
||||||
{
|
{
|
||||||
@ -186,7 +234,7 @@ let dustData = reactive({
|
|||||||
pm25: 0,
|
pm25: 0,
|
||||||
pm10: 0,
|
pm10: 0,
|
||||||
})
|
})
|
||||||
|
let texstref = ref(null)
|
||||||
let zd_config = ref({
|
let zd_config = ref({
|
||||||
header: ['报警时间', '报警内容', '报警位置'],
|
header: ['报警时间', '报警内容', '报警位置'],
|
||||||
rowNum: 4,
|
rowNum: 4,
|
||||||
@ -338,12 +386,23 @@ function errWebsocket(val) {
|
|||||||
// console.log(val);
|
// console.log(val);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let deltaY = ref(0)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getNoiseDataList()
|
getNoiseDataList()
|
||||||
getTopDataList()
|
getTopDataList()
|
||||||
|
|
||||||
|
//监听滚动事件
|
||||||
|
// window.addEventListener('wheel', function (event) {
|
||||||
|
// deltaY.value += event.deltaY
|
||||||
|
// console.log(event.deltaY,deltaY.value,'event.deltaY');
|
||||||
|
// if (deltaY.value <= -500 &&deltaY.value >= -1000) {
|
||||||
|
// texstref.value.style.display = 'none'
|
||||||
|
// }
|
||||||
|
// if (deltaY.value > -500 && deltaY.value < 0) {
|
||||||
|
// texstref.value.style.display = 'block'
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }, { passive: false });
|
||||||
|
|
||||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
});
|
});
|
||||||
|
|||||||
86
src/views/screen/R_D_Environment1/component/Lr1.vue
Normal file
86
src/views/screen/R_D_Environment1/component/Lr1.vue
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div class="lr-box">
|
||||||
|
<div class="lr-title">{{ props.data.title }}</div>
|
||||||
|
<div class="lr-content">
|
||||||
|
<TempHumiVue />
|
||||||
|
<div class="avg-th">
|
||||||
|
<div class="avg-th-title">当前平均温度</div>
|
||||||
|
<div class="avg-th-value temp-color">{{props.data.temp}}℃</div>
|
||||||
|
</div>
|
||||||
|
<div class="avg-th">
|
||||||
|
<div class="avg-th-title">当前平均湿度</div>
|
||||||
|
<div class="avg-th-value humi-color">{{props.data.humi}}%RH</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import TempHumiVue from './temp_humi_icon.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
title: '研发中心四楼',
|
||||||
|
temp: 25.5,
|
||||||
|
humi: 60
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.lr-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 134px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.lr-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 34px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: url('./../image/u803.png');
|
||||||
|
background-position: top left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-left: 60px;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #2affff;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 34px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.lr-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.avg-th {
|
||||||
|
width: 40%;
|
||||||
|
height: 34px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
.avg-th-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.temp-color {
|
||||||
|
color: #2affff;
|
||||||
|
}
|
||||||
|
.humi-color {
|
||||||
|
color: #ffd249;
|
||||||
|
}
|
||||||
|
.avg-th-value {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
240
src/views/screen/R_D_Environment1/component/Lr2.vue
Normal file
240
src/views/screen/R_D_Environment1/component/Lr2.vue
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container2">
|
||||||
|
<div class="title">
|
||||||
|
<img :src="u918" alt="">
|
||||||
|
<span>温湿度监测</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import u918 from './../image/u918.png';
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
Humiture: [],
|
||||||
|
bottom: {
|
||||||
|
"temp": -15,
|
||||||
|
"humidity": 15,
|
||||||
|
"name": "温湿度下限值"
|
||||||
|
},
|
||||||
|
top: {
|
||||||
|
"temp": 45,
|
||||||
|
"humidity": 75,
|
||||||
|
"name": "温湿度上限值"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = computed(() => {
|
||||||
|
|
||||||
|
let obj = {
|
||||||
|
bottom: prop.data.bottom,
|
||||||
|
top: prop.data.top
|
||||||
|
}
|
||||||
|
//x轴数据
|
||||||
|
let x = [];
|
||||||
|
//y轴数据
|
||||||
|
let y = { temp: [], humidity: [] };
|
||||||
|
prop.data.Humiture.forEach((res) => {
|
||||||
|
x.push(res.name);
|
||||||
|
y.temp.push(res.temp);
|
||||||
|
y.humidity.push(res.humidity);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// bottom: "3%",
|
||||||
|
top: '2%'
|
||||||
|
},
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
grid: {
|
||||||
|
top: "15%",
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
color: ["#4992FF", "#7CFFB2", "#FF6E76"],
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: x,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 25,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
name:'(°C/%RH)',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: `温度(°C)`,//(范围：${obj.bottom.temp}°C - ${obj.top.temp}°C)
|
||||||
|
type: "bar",
|
||||||
|
data: y.temp,
|
||||||
|
barWidth: '30%',
|
||||||
|
itemStyle: {
|
||||||
|
color: function (params) {
|
||||||
|
var index_color = params.value;
|
||||||
|
if (
|
||||||
|
index_color <= obj.bottom.temp ||
|
||||||
|
index_color >= obj.top.temp
|
||||||
|
) {
|
||||||
|
return "#FF6E76";
|
||||||
|
} else {
|
||||||
|
return "#4992FF";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: "{c} °C",
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
// 设置最大值和最小值
|
||||||
|
silent: true, //基线显示 隐藏
|
||||||
|
symbol: "none", // 不显示箭头和圆点
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '温度',
|
||||||
|
yAxis: obj.bottom.temp,
|
||||||
|
label: {
|
||||||
|
formatter: `温度下限值： ${obj.bottom.temp} °C`,
|
||||||
|
position: "middle",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "yellow", // 这儿设置安全基线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '温度',
|
||||||
|
yAxis: obj.top.temp,
|
||||||
|
label: {
|
||||||
|
formatter: `温度上限值：${obj.top.temp} °C`,
|
||||||
|
position: "middle",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "yellow", // 这儿设置安全基线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: `湿度(%RH)`,//(范围：${obj.bottom.humidity}%RH - ${obj.top.humidity}%RH)
|
||||||
|
type: "bar",
|
||||||
|
data: y.humidity,
|
||||||
|
barWidth: '30%',
|
||||||
|
itemStyle: {
|
||||||
|
color: function (params) {
|
||||||
|
var index_color = params.value;
|
||||||
|
|
||||||
|
if (
|
||||||
|
index_color <= obj.bottom.humidity ||
|
||||||
|
index_color >= obj.top.humidity
|
||||||
|
) {
|
||||||
|
return "#FF6E76";
|
||||||
|
} else {
|
||||||
|
return "#7CFFB2";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: "{c} %RH",
|
||||||
|
show: false,
|
||||||
|
position: "top",
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
// 设置最大值和最小值
|
||||||
|
silent: true, //基线显示 隐藏
|
||||||
|
symbol: "none", // 不显示箭头和圆点
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "湿度",
|
||||||
|
yAxis: obj.bottom.humidity,
|
||||||
|
label: {
|
||||||
|
formatter: `湿度下限值：` + obj.bottom.humidity + "%RH",
|
||||||
|
position: "middle",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "red", // 这儿设置安全基线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "湿度",
|
||||||
|
yAxis: obj.top.humidity,
|
||||||
|
label: {
|
||||||
|
formatter: `湿度上限值：` + obj.top.humidity + "%RH",
|
||||||
|
position: "middle",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "red", // 这儿设置安全基线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '超标',//(温湿度未达正常值均为超标)
|
||||||
|
type: "bar",
|
||||||
|
color: '#FF6E76'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container2 {
|
||||||
|
width: 408px;
|
||||||
|
height: 272px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 408px;
|
||||||
|
height: 35px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #2affff;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 237px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
41
src/views/screen/R_D_Environment1/component/Lr3.vue
Normal file
41
src/views/screen/R_D_Environment1/component/Lr3.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container2">
|
||||||
|
<div class="title">
|
||||||
|
<img :src="u918" alt="">
|
||||||
|
<span>噪音监测</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import u918 from './../image/u918.png';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container2 {
|
||||||
|
width: 408px;
|
||||||
|
height: 278px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 408px;
|
||||||
|
height: 35px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #2affff;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 243px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
41
src/views/screen/R_D_Environment1/component/Lr4.vue
Normal file
41
src/views/screen/R_D_Environment1/component/Lr4.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container2">
|
||||||
|
<div class="title">
|
||||||
|
<img :src="u918" alt="">
|
||||||
|
<span>甲醛/TVOC监测</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import u918 from './../image/u918.png';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container2 {
|
||||||
|
width: 408px;
|
||||||
|
height: 290px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 408px;
|
||||||
|
height: 35px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #2affff;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 255px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<div class="th-container">
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="65px"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" class="svg1">
|
||||||
|
<g transform="matrix(1 0 0 1 -61 -136 )">
|
||||||
|
<path
|
||||||
|
d="M 35.93451184846136 52.713638939642145 C 36.12334271529104 53.44934915784611 36.689835245706114 53.81720430107527 37.25632784619514 53.81720430107527 L 37.44515871302481 53.81720430107527 C 42.73242270395993 52.89756651125672 46.69787062708731 47.93152235068045 46.69787062708731 42.04584040028562 C 46.69787062708731 41.31013018208166 46.13137802659829 40.758347467237904 45.37605462935354 40.758347467237904 C 44.62073123210878 40.758347467237904 44.05423863161976 41.31013018208166 44.05423863161976 42.04584040028562 C 44.05423863161976 46.64402941763272 41.032944972566796 50.50650821677588 37.06749697936546 51.24221843497984 C 36.31217358212071 51.42614600659442 35.93451184846136 51.97792865318382 35.93451184846136 52.713638939642145 Z M 30.458417060770515 50.138653073546706 C 30.269586193940842 45.54046405619959 28.00361593213264 41.31013018208166 24 38.55121674437164 L 24 8.571024345808132 C 24.226998805760974 3.972835328461022 20.450381679389313 0.29428410093245916 15.729610288943224 0.29428410093245916 C 11.00883889849714 0.29428410093245916 7.232221772125477 3.972835328461021 8 8.571024345808132 L 8 37.815506526167674 C 2.889112115338741 40.574419963877695 0.24548011987118343 45.172608981224805 0.24548011987118343 50.138653073546706 C 0.24548011987118343 58.23146574680779 7.043390905295801 64.85285791540657 15.351948555283874 64.85285798366095 C 23.66050620527195 64.85285805191532 30.45841699069657 58.231465815062165 30.458417060770515 50.138653073546706 Z M 27.62595419847327 50.138653073546706 C 27.62595419847327 56.94397281376008 22.149859410782433 62.27787211756552 15.163117688454198 62.27787211756552 C 8.365206903029577 62.27787211756552 2.700281178435113 56.760045310399875 2.7002812485090626 50.13865307354671 C 2.7002812485090626 45.724391627814185 5.155082377146944 41.677985257056456 9.12053030027433 39.65478210580477 L 9.309361167104004 39.47085453419019 L 9.498192033933682 39.2869269625756 C 9.498192033933682 39.2869269625756 9.498192033933682 39.10299939096102 9.687022900763356 39.10299945921538 C 9.687022900763356 39.10299945921538 9.687022900763356 38.9190718876008 9.875853767593034 38.9190718876008 L 10 38.73514431598622 L 10 8.571024345808132 C 9.875853767593034 5.44425583312332 12.519485763060587 2.8692699670278903 15.729610288943224 2.8692699670278903 C 18.939734814825854 2.8692699670278903 21.583366810293413 5.44425583312332 21.583366810293413 8.571024345808132 L 21.583366810293413 12.801358219926076 L 17.051426286677 12.801358219926076 C 16.296102889432248 12.801358219926076 15.729610288943224 13.353140934769828 15.729610288943224 14.08885115297379 C 15.729610288943224 14.824561371177756 16.296102889432248 15.376344086021506 17.051426286677 15.376344086021506 L 21.583366810293413 15.376344086021506 L 21.583366810293413 21.26202603641633 L 17.051426286677 21.26202603641633 C 16.296102889432248 21.26202603641633 15.729610288943224 21.81380875126008 15.729610288943224 22.549518969464046 C 15.729610288943224 23.285229187668012 16.296102889432248 23.83701190251176 17.051426286677 23.83701190251176 L 21.583366810293413 23.83701190251176 L 21.583366810293413 29.170911138062834 L 17.051426286677 29.170911138062834 C 16.296102889432248 29.170911138062834 15.729610288943224 29.722693852906584 15.729610288943224 30.458404071110547 C 15.729610288943224 31.194114289314516 16.296102889432248 31.745897004158266 17.051426286677 31.745897004158266 L 21.583366810293413 31.745897004158266 L 21.583366810293413 38.73514431598622 C 21.394535943463737 39.10299945921538 21.583366810293413 39.65478210580477 21.96102854395276 39.83870967741935 L 22.149859410782437 40.022637249033934 C 25.548814803494746 42.2297679719002 27.62595419847327 46.09224677104336 27.62595419847327 50.138653073546706 Z "
|
||||||
|
fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 61 136 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="27px" height="59px"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" class="svg2">
|
||||||
|
<g transform="matrix(1 0 0 1 -89 -139 )">
|
||||||
|
<path
|
||||||
|
d="M 26.7347368125 38.145126100221894 C 27.11368420312499 34.4702584469767 26.7347368125 32.44908126155695 25.787368406250007 29.876673965652735 C 25.597894710937503 29.876673965652735 25.597894710937503 29.876673965652735 25.787368406250007 29.876673965652735 L 12.524210507812501 3.233883496671594 C 11.576842101562496 1.3964497041420094 9.871578914062505 0.2939894149870526 7.976842101562506 0.2939894149870526 C 6.082105289062507 0.2939894149870526 4.376842101562501 1.396449704142008 3.429473695312507 3.233883496671594 L 0.2084210859375048 9.664901906897187 C -0.17052630468748817 10.216132085567674 0.2084210859375048 11.134848981832468 0.7768421015625062 11.31859230653661 C 1.345263187500006 11.686079092316938 2.2926315937500057 11.31859230653661 2.482105289062502 10.767362196052142 L 5.703157898437499 4.336343785826549 C 6.082105289062497 3.417626889561756 6.840000000000001 2.866396710891267 7.787368406249999 2.866396779077287 C 8.734736812500005 2.866396847263309 9.49263159375 3.4176269577477765 9.871578914062505 4.336343785826549 L 22.9452631875 30.97913425480769 C 23.892631593750007 33.1840548331176 24.271578984374997 35.021488693833206 24.271578914062495 37.96138277551775 C 24.271578914062495 47.88352537791235 16.882105218750006 55.96823425596338 7.787368406249999 55.968234187777355 L 6.082105289062507 55.968234187777355 C 5.324210578125005 55.968234187777355 4.755789492187504 56.335720973557684 4.566315796875003 57.07069447693231 C 4.566315796875003 57.80566798030694 4.945263187500001 58.35689815897744 5.703157898437499 58.5406415518676 C 6.271578984374998 58.5406415518676 7.029473695312502 58.724384944757766 7.5978947109374975 58.724384944757766 C 18.208421015625 58.724384944757766 26.7347368125 49.53721584573779 26.7347368125 38.145126100221894 Z "
|
||||||
|
fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 89 139 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<img :src="u829" width="100" height="50" alt="" class="img1">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import u829 from './../image/u829.png'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.th-container {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
position: relative;
|
||||||
|
.img1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.svg1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 23px;
|
||||||
|
}
|
||||||
|
.svg2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 9px;
|
||||||
|
left: 49px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
BIN
src/views/screen/R_D_Environment1/image/u796.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u796.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/views/screen/R_D_Environment1/image/u797.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u797.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/views/screen/R_D_Environment1/image/u798.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u798.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/views/screen/R_D_Environment1/image/u799.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u799.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/views/screen/R_D_Environment1/image/u800.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u800.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
src/views/screen/R_D_Environment1/image/u801.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u801.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
src/views/screen/R_D_Environment1/image/u802.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u802.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
src/views/screen/R_D_Environment1/image/u803.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u803.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
6
src/views/screen/R_D_Environment1/image/u810.svg
Normal file
6
src/views/screen/R_D_Environment1/image/u810.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="27px" height="59px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -89 -139 )">
|
||||||
|
<path d="M 26.7347368125 38.145126100221894 C 27.11368420312499 34.4702584469767 26.7347368125 32.44908126155695 25.787368406250007 29.876673965652735 C 25.597894710937503 29.876673965652735 25.597894710937503 29.876673965652735 25.787368406250007 29.876673965652735 L 12.524210507812501 3.233883496671594 C 11.576842101562496 1.3964497041420094 9.871578914062505 0.2939894149870526 7.976842101562506 0.2939894149870526 C 6.082105289062507 0.2939894149870526 4.376842101562501 1.396449704142008 3.429473695312507 3.233883496671594 L 0.2084210859375048 9.664901906897187 C -0.17052630468748817 10.216132085567674 0.2084210859375048 11.134848981832468 0.7768421015625062 11.31859230653661 C 1.345263187500006 11.686079092316938 2.2926315937500057 11.31859230653661 2.482105289062502 10.767362196052142 L 5.703157898437499 4.336343785826549 C 6.082105289062497 3.417626889561756 6.840000000000001 2.866396710891267 7.787368406249999 2.866396779077287 C 8.734736812500005 2.866396847263309 9.49263159375 3.4176269577477765 9.871578914062505 4.336343785826549 L 22.9452631875 30.97913425480769 C 23.892631593750007 33.1840548331176 24.271578984374997 35.021488693833206 24.271578914062495 37.96138277551775 C 24.271578914062495 47.88352537791235 16.882105218750006 55.96823425596338 7.787368406249999 55.968234187777355 L 6.082105289062507 55.968234187777355 C 5.324210578125005 55.968234187777355 4.755789492187504 56.335720973557684 4.566315796875003 57.07069447693231 C 4.566315796875003 57.80566798030694 4.945263187500001 58.35689815897744 5.703157898437499 58.5406415518676 C 6.271578984374998 58.5406415518676 7.029473695312502 58.724384944757766 7.5978947109374975 58.724384944757766 C 18.208421015625 58.724384944757766 26.7347368125 49.53721584573779 26.7347368125 38.145126100221894 Z " fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 89 139 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
src/views/screen/R_D_Environment1/image/u811.svg
Normal file
6
src/views/screen/R_D_Environment1/image/u811.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="65px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -61 -136 )">
|
||||||
|
<path d="M 35.93451184846136 52.713638939642145 C 36.12334271529104 53.44934915784611 36.689835245706114 53.81720430107527 37.25632784619514 53.81720430107527 L 37.44515871302481 53.81720430107527 C 42.73242270395993 52.89756651125672 46.69787062708731 47.93152235068045 46.69787062708731 42.04584040028562 C 46.69787062708731 41.31013018208166 46.13137802659829 40.758347467237904 45.37605462935354 40.758347467237904 C 44.62073123210878 40.758347467237904 44.05423863161976 41.31013018208166 44.05423863161976 42.04584040028562 C 44.05423863161976 46.64402941763272 41.032944972566796 50.50650821677588 37.06749697936546 51.24221843497984 C 36.31217358212071 51.42614600659442 35.93451184846136 51.97792865318382 35.93451184846136 52.713638939642145 Z M 30.458417060770515 50.138653073546706 C 30.269586193940842 45.54046405619959 28.00361593213264 41.31013018208166 24 38.55121674437164 L 24 8.571024345808132 C 24.226998805760974 3.972835328461022 20.450381679389313 0.29428410093245916 15.729610288943224 0.29428410093245916 C 11.00883889849714 0.29428410093245916 7.232221772125477 3.972835328461021 8 8.571024345808132 L 8 37.815506526167674 C 2.889112115338741 40.574419963877695 0.24548011987118343 45.172608981224805 0.24548011987118343 50.138653073546706 C 0.24548011987118343 58.23146574680779 7.043390905295801 64.85285791540657 15.351948555283874 64.85285798366095 C 23.66050620527195 64.85285805191532 30.45841699069657 58.231465815062165 30.458417060770515 50.138653073546706 Z M 27.62595419847327 50.138653073546706 C 27.62595419847327 56.94397281376008 22.149859410782433 62.27787211756552 15.163117688454198 62.27787211756552 C 8.365206903029577 62.27787211756552 2.700281178435113 56.760045310399875 2.7002812485090626 50.13865307354671 C 2.7002812485090626 45.724391627814185 5.155082377146944 41.677985257056456 9.12053030027433 39.65478210580477 L 9.309361167104004 39.47085453419019 L 9.498192033933682 39.2869269625756 C 9.498192033933682 39.2869269625756 9.498192033933682 39.10299939096102 9.687022900763356 39.10299945921538 C 9.687022900763356 39.10299945921538 9.687022900763356 38.9190718876008 9.875853767593034 38.9190718876008 L 10 38.73514431598622 L 10 8.571024345808132 C 9.875853767593034 5.44425583312332 12.519485763060587 2.8692699670278903 15.729610288943224 2.8692699670278903 C 18.939734814825854 2.8692699670278903 21.583366810293413 5.44425583312332 21.583366810293413 8.571024345808132 L 21.583366810293413 12.801358219926076 L 17.051426286677 12.801358219926076 C 16.296102889432248 12.801358219926076 15.729610288943224 13.353140934769828 15.729610288943224 14.08885115297379 C 15.729610288943224 14.824561371177756 16.296102889432248 15.376344086021506 17.051426286677 15.376344086021506 L 21.583366810293413 15.376344086021506 L 21.583366810293413 21.26202603641633 L 17.051426286677 21.26202603641633 C 16.296102889432248 21.26202603641633 15.729610288943224 21.81380875126008 15.729610288943224 22.549518969464046 C 15.729610288943224 23.285229187668012 16.296102889432248 23.83701190251176 17.051426286677 23.83701190251176 L 21.583366810293413 23.83701190251176 L 21.583366810293413 29.170911138062834 L 17.051426286677 29.170911138062834 C 16.296102889432248 29.170911138062834 15.729610288943224 29.722693852906584 15.729610288943224 30.458404071110547 C 15.729610288943224 31.194114289314516 16.296102889432248 31.745897004158266 17.051426286677 31.745897004158266 L 21.583366810293413 31.745897004158266 L 21.583366810293413 38.73514431598622 C 21.394535943463737 39.10299945921538 21.583366810293413 39.65478210580477 21.96102854395276 39.83870967741935 L 22.149859410782437 40.022637249033934 C 25.548814803494746 42.2297679719002 27.62595419847327 46.09224677104336 27.62595419847327 50.138653073546706 Z " fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 61 136 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
src/views/screen/R_D_Environment1/image/u829.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u829.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/views/screen/R_D_Environment1/image/u918.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u918.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
224
src/views/screen/R_D_Environment1/index.vue
Normal file
224
src/views/screen/R_D_Environment1/index.vue
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">研发中心环境实时监测系统</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-content left-right" ref="leftContentRef">
|
||||||
|
<Lr1 :data="avg_temp_humi.four" />
|
||||||
|
<Lr2 :data="humi"/>
|
||||||
|
<Lr3 />
|
||||||
|
<Lr4 />
|
||||||
|
</div>
|
||||||
|
<div class="right-content left-right" ref="rightContentRef"></div>
|
||||||
|
<div class="bottom-content" ref="bottomContentRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import Lr1 from './component/Lr1.vue';
|
||||||
|
import Lr2 from './component/Lr2.vue';
|
||||||
|
import Lr3 from './component/Lr3.vue';
|
||||||
|
import Lr4 from './component/Lr4.vue';
|
||||||
|
|
||||||
|
let deltaY = ref(0)
|
||||||
|
let avg_temp_humi = reactive({
|
||||||
|
four: {
|
||||||
|
title: '研发中心四楼',
|
||||||
|
temp: 25.5,
|
||||||
|
humi: 60
|
||||||
|
},
|
||||||
|
five: {
|
||||||
|
title: '研发中心五楼',
|
||||||
|
temp: 25.5,
|
||||||
|
humi: 60
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let humi = ref({
|
||||||
|
"Humiture": [
|
||||||
|
{
|
||||||
|
"devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "服装军团",
|
||||||
|
"temp": "15.4",
|
||||||
|
"humidity": "14.6",
|
||||||
|
"status": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "50633690-158f-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "家纺军团",
|
||||||
|
"temp": "16.3",
|
||||||
|
"humidity": "54.1",
|
||||||
|
"status": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "e07dee00-158f-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "医防军团",
|
||||||
|
"temp": "15.2",
|
||||||
|
"humidity": "12.3",
|
||||||
|
"status": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "5b01df20-158f-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "配套中心",
|
||||||
|
"temp": "11.4",
|
||||||
|
"humidity": "20",
|
||||||
|
"status": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "c524cfd0-4bb2-11ee-864d-e941de71fb47",
|
||||||
|
"name": "东气泵房",
|
||||||
|
"temp": "26.9",
|
||||||
|
"humidity": "10",
|
||||||
|
"status": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "e7868a00-4bb2-11ee-864d-e941de71fb47",
|
||||||
|
"name": "西气泵房",
|
||||||
|
"temp": "34.4",
|
||||||
|
"humidity": "6",
|
||||||
|
"status": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "7cd36740-158f-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "东莞分公司",
|
||||||
|
"temp": "27.7",
|
||||||
|
"humidity": "38.9",
|
||||||
|
"status": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "c502b660-158f-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "东莞分公司",
|
||||||
|
"temp": "29.5",
|
||||||
|
"humidity": "56.3",
|
||||||
|
"status": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "57d4bbc0-1bc9-11ee-93b4-8d0afc6a8fe9",
|
||||||
|
"name": "微工厂",
|
||||||
|
"temp": "14.7",
|
||||||
|
"humidity": "17.1",
|
||||||
|
"status": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"top": {
|
||||||
|
"temp": 45,
|
||||||
|
"humidity": 75,
|
||||||
|
"name": "温湿度上限值"
|
||||||
|
},
|
||||||
|
"bottom": {
|
||||||
|
"temp": -15,
|
||||||
|
"humidity": 15,
|
||||||
|
"name": "温湿度下限值"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('wheel', function (event) {
|
||||||
|
deltaY.value += event.deltaY
|
||||||
|
if (deltaY.value <= -500 && deltaY.value >= -1000) {
|
||||||
|
|
||||||
|
this.document.querySelector('.left-content').style.transform = 'translateX(-100%)'
|
||||||
|
this.document.querySelector('.right-content').style.transform = 'translateX(100%)'
|
||||||
|
this.document.querySelector('.bottom-content').style.transform = 'translateY(100%)'
|
||||||
|
}
|
||||||
|
if (deltaY.value > -500 && deltaY.value < 0) {
|
||||||
|
this.document.querySelector('.left-content').style.transform = 'translateX(0)'
|
||||||
|
this.document.querySelector('.right-content').style.transform = 'translateX(0)'
|
||||||
|
this.document.querySelector('.bottom-content').style.transform = 'translateY(0)'
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deltaY.value >= 0) {
|
||||||
|
deltaY.value = 0
|
||||||
|
}
|
||||||
|
}, { passive: false });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
position: relative;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
// background-image: url('/src/assets/images/gif-bg.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
/* 如果你不想让背景平铺 */
|
||||||
|
background-size: cover;
|
||||||
|
/* 或者其他你需要的大小设置 */
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 72px;
|
||||||
|
background-image: url('./image/u796.png');
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 72px;
|
||||||
|
font-size: 36px;
|
||||||
|
color: #2affff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 557px;
|
||||||
|
height: 1080px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 72px;
|
||||||
|
background-image: url('./image/u801.png'), url('./image/u797.png');
|
||||||
|
background-position: center, 0% 78%;
|
||||||
|
background-repeat: no-repeat, no-repeat;
|
||||||
|
padding-left: 30px;
|
||||||
|
transition: transform 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 557px;
|
||||||
|
height: 1080px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 72px;
|
||||||
|
background-image: url('./image/u800.png'), url('./image/u798.png');
|
||||||
|
background-position: center, 100% 78%;
|
||||||
|
background-repeat: no-repeat, no-repeat;
|
||||||
|
padding-right: 38px;
|
||||||
|
transition: transform 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 1920px;
|
||||||
|
height: 236px;
|
||||||
|
background-image: url('./image/u799.png'), url('./image/u802.png');
|
||||||
|
background-position: bottom, 50% 100%;
|
||||||
|
background-repeat: no-repeat, no-repeat;
|
||||||
|
transition: transform 1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user