diff --git a/src/assets/images/public/bigScreen/back.png b/src/assets/images/public/bigScreen/back.png new file mode 100644 index 0000000..406138d Binary files /dev/null and b/src/assets/images/public/bigScreen/back.png differ diff --git a/src/assets/images/public/bigScreen/bg10.png b/src/assets/images/public/bigScreen/bg10.png new file mode 100644 index 0000000..709fb5f Binary files /dev/null and b/src/assets/images/public/bigScreen/bg10.png differ diff --git a/src/assets/images/public/bigScreen/bg11.png b/src/assets/images/public/bigScreen/bg11.png new file mode 100644 index 0000000..e7947d0 Binary files /dev/null and b/src/assets/images/public/bigScreen/bg11.png differ diff --git a/src/assets/images/public/bigScreen/bg12.png b/src/assets/images/public/bigScreen/bg12.png new file mode 100644 index 0000000..744094c Binary files /dev/null and b/src/assets/images/public/bigScreen/bg12.png differ diff --git a/src/assets/images/public/bigScreen/bg13.png b/src/assets/images/public/bigScreen/bg13.png new file mode 100644 index 0000000..7e42ac3 Binary files /dev/null and b/src/assets/images/public/bigScreen/bg13.png differ diff --git a/src/assets/images/public/bigScreen/bg14.png b/src/assets/images/public/bigScreen/bg14.png new file mode 100644 index 0000000..44cc8c3 Binary files /dev/null and b/src/assets/images/public/bigScreen/bg14.png differ diff --git a/src/assets/images/public/bigScreen/bg9.png b/src/assets/images/public/bigScreen/bg9.png new file mode 100644 index 0000000..ed1376a Binary files /dev/null and b/src/assets/images/public/bigScreen/bg9.png differ diff --git a/src/assets/images/public/bigScreen/ico6.png b/src/assets/images/public/bigScreen/ico6.png new file mode 100644 index 0000000..6d7b787 Binary files /dev/null and b/src/assets/images/public/bigScreen/ico6.png differ diff --git a/src/assets/images/public/bigScreen/ico7.png b/src/assets/images/public/bigScreen/ico7.png new file mode 100644 index 0000000..7c84ea9 Binary files /dev/null and b/src/assets/images/public/bigScreen/ico7.png differ diff --git a/src/assets/images/public/bigScreen/ico8.png b/src/assets/images/public/bigScreen/ico8.png new file mode 100644 index 0000000..8ffc382 Binary files /dev/null and b/src/assets/images/public/bigScreen/ico8.png differ diff --git a/src/assets/images/public/bigScreen/ico9.png b/src/assets/images/public/bigScreen/ico9.png new file mode 100644 index 0000000..b2f038e Binary files /dev/null and b/src/assets/images/public/bigScreen/ico9.png differ diff --git a/src/assets/images/public/bigScreen/imgok.png b/src/assets/images/public/bigScreen/imgok.png new file mode 100644 index 0000000..d43d764 Binary files /dev/null and b/src/assets/images/public/bigScreen/imgok.png differ diff --git a/src/assets/images/public/bigScreen/more1.png b/src/assets/images/public/bigScreen/more1.png new file mode 100644 index 0000000..5aa6771 Binary files /dev/null and b/src/assets/images/public/bigScreen/more1.png differ diff --git a/src/assets/images/public/bigScreen/tablebg1.png b/src/assets/images/public/bigScreen/tablebg1.png new file mode 100644 index 0000000..48e56a2 Binary files /dev/null and b/src/assets/images/public/bigScreen/tablebg1.png differ diff --git a/src/assets/images/public/bigScreen/tablebg2.png b/src/assets/images/public/bigScreen/tablebg2.png new file mode 100644 index 0000000..e7368e3 Binary files /dev/null and b/src/assets/images/public/bigScreen/tablebg2.png differ diff --git a/src/assets/images/public/bigScreen/w_ico1.png b/src/assets/images/public/bigScreen/w_ico1.png new file mode 100644 index 0000000..56c7297 Binary files /dev/null and b/src/assets/images/public/bigScreen/w_ico1.png differ diff --git a/src/assets/images/public/bigScreen/w_ico2.png b/src/assets/images/public/bigScreen/w_ico2.png new file mode 100644 index 0000000..fd13619 Binary files /dev/null and b/src/assets/images/public/bigScreen/w_ico2.png differ diff --git a/src/pages/Container/Bi/components/Header/index.js b/src/pages/Container/Bi/components/Header/index.js new file mode 100644 index 0000000..53d613b --- /dev/null +++ b/src/pages/Container/Bi/components/Header/index.js @@ -0,0 +1,112 @@ +import { useMount } from "ahooks"; +import { useContext, useState } from "react"; +import { CSSTransition } from "react-transition-group"; +import backImg from "~/assets/images/public/bigScreen/back.png"; +import imgOk from "~/assets/images/public/bigScreen/imgok.png"; +import guangImg from "~/assets/images/map_bi/guang.png"; +import topImg from "~/assets/images/public/bigScreen/title.png"; +import { Context } from "~/pages/Container/Map/js/context"; +import mitt from "~/pages/Container/Map/js/mitt"; +import { + changeBottomUtilsAnimationMittKey, + changeContentAnimationKeyMittKey, + changePeopleTrajectorySelectVisibleMittKey, + clickBackMittKey, + clickBranchOfficePointMittKey, + clickPortPointMittKey, + deletePeoplePositionPointMittKey, + initBottomUtilsMittKey, + resetAllBottomUtilsCheckMittKey, + resetBottomCurrentIndexMittKey, +} from "~/pages/Container/Map/js/mittKey"; +import "./index.less"; + +function Header() { + const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context); + + const [animationKey, setAnimationKey] = useState(0); + + useMount(() => { + setAnimationKey(Math.random()); + }); + + const onBack = () => { + mitt.emit(deletePeoplePositionPointMittKey); + if (currentPort !== "00003" && currentBranchOffice) { + mitt.emit(clickPortPointMittKey, { id: "" }); + mitt.emit(clickBranchOfficePointMittKey, { id: "" }); + mapMethods.current.removeWall(); + mapMethods.current.removeFourColorDiagram(); + mapMethods.current.removeBranchOfficePoint(); + mapMethods.current.removeMarkPoint(); + mapMethods.current.flyTo(); + mapMethods.current.addPortPoint(); + } + else if (currentBranchOffice) { + mitt.emit(clickBranchOfficePointMittKey, { id: "" }); + mapMethods.current.removeBranchOfficePoint(); + mapMethods.current.removeMarkPoint(); + mapMethods.current.returnPreviousCenterPoint(); + setTimeout(() => { + mapMethods.current.addBranchOfficePoint(area); + }, 2000); + } + else if (currentPort) { + mitt.emit(clickPortPointMittKey, { id: "" }); + mapMethods.current.removeWall(); + mapMethods.current.removeFourColorDiagram(); + mapMethods.current.removeBranchOfficePoint(); + mapMethods.current.removeMarkPoint(); + mapMethods.current.flyTo(); + mapMethods.current.addPortPoint(); + } + mitt.emit(changeBottomUtilsAnimationMittKey); + mitt.emit(initBottomUtilsMittKey); + mitt.emit(resetBottomCurrentIndexMittKey); + mitt.emit(resetAllBottomUtilsCheckMittKey); + mitt.emit(clickBackMittKey); + mitt.emit(changeContentAnimationKeyMittKey); + mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false); + }; + + return ( +
+ +
+ + + +
返回 返回
+
秦港股份安全监管平台
+
+
企业已连续平安运行 1095 天
+
+ +
+ ); +} + +export default Header; diff --git a/src/pages/Container/Bi/components/Header/index.less b/src/pages/Container/Bi/components/Header/index.less new file mode 100644 index 0000000..ad32841 --- /dev/null +++ b/src/pages/Container/Bi/components/Header/index.less @@ -0,0 +1,75 @@ +.header_container { + + header { + width: 100%; + height: 70px; + background-size: 100% 100%; + background-repeat: no-repeat; + font-size: 40px; + color: #fff; + text-align: center; + padding-top: 10px; + font-weight: bold; + position: absolute; + + .back { + position: absolute; + top: 10px; + left: 10px; + cursor: pointer; + font-size: 14px; + font-weight: normal; + } + + .title { + background-image: linear-gradient(to bottom, #5bb4f7, #ffffff); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 34px; + } + + .guang { + background-size: 100% 100%; + background-repeat: no-repeat; + width: 707px; + height: 85px; + position: absolute; + top: 25px; + left: 50%; + animation: headerContainerScale 2s infinite; + + @keyframes headerContainerScale { + 0% { + transform: translateX(-50%) scale(1); + } + + 50% { + transform: translateX(-50%) scale(0.5); + } + + 100% { + transform: translateX(-50%) scale(1); + } + } + } + .time{ + position: absolute; + right: 20px; + top: 20px; + font-size: 14px; + border-style: solid; + border-width: 1px; + border-color: rgba(12,108,177,0.2); + background-image: -moz-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(14,26,90) 0%, rgb(16,26,74) 100%); + box-shadow: inset 0px 3px 7px 0px rgba(21, 50, 102, 0.35); + font-weight: normal; + padding: 5px 10px; + border-radius: 20px; + color: #ffffff; + z-index: 9999; + } + } +} diff --git a/src/pages/Container/Bi/components/LeftPanel/echarts.js b/src/pages/Container/Bi/components/LeftPanel/echarts.js new file mode 100644 index 0000000..f3bb338 --- /dev/null +++ b/src/pages/Container/Bi/components/LeftPanel/echarts.js @@ -0,0 +1,146 @@ +import * as echarts from "echarts"; +import { textFormatter } from "~/pages/Container/Map/js/utils"; + +export const initEcharts1 = (main1Ref, chartInstance, data) => { + const XAxisData = []; + const seriesData1 = []; + const seriesData2 = []; + + data.forEach((e) => { + XAxisData.push(e.AREA_NAME); + seriesData1.push(Number(e.CAR_IN) + Number(e.PEOPLE_IN)); + seriesData2.push(Number(e.CAR_OUT) + Number(e.PEOPLE_OUT)); + }); + + chartInstance.current = echarts.init(main1Ref.current); + + const option = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + grid: { + left: "2%", + right: "4%", + bottom: "5%", + top: "10%", + containLabel: true, + }, + dataZoom: [ + { + type: "slider", + height: 6, + bottom: 0, + show: true, + start: 0, + end: 25, + handleSize: 3, + handleStyle: { + color: "#DCE2E8", + }, + xAxisIndex: [0], + filterMode: "filter", + showDetail: false, + }, + ], + legend: { + top: "0%", + right: "0%", + textStyle: { + color: "#fff", + fontSize: 14, + }, + itemWidth: 12, + itemHeight: 10, + }, + xAxis: { + type: "category", + data: XAxisData, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + rotate: 0, + color: "#fff", + fontSize: 14, + interval: 0, + formatter(value) { + return textFormatter(value, 3); + }, + }, + }, + yAxis: { + type: "value", + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + splitLine: { + show: true, + lineStyle: { + color: "#8c9493", + }, + }, + axisLabel: { + fontSize: 14, + color: "#fff", + }, + }, + series: [ + { + name: "进", + type: "bar", + barWidth: "30%", + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00f0ff", + }, + { + offset: 1, + color: "#0066ff", + }, + ], + false, + ), + data: seriesData1, + }, + { + name: "出", + type: "bar", + barWidth: "30%", + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#003cff", + }, + { + offset: 1, + color: "#00ff9c", + }, + ], + false, + ), + data: seriesData2, + }, + ], + }; + + chartInstance.current.setOption(option); +}; diff --git a/src/pages/Container/Bi/components/LeftPanel/index.js b/src/pages/Container/Bi/components/LeftPanel/index.js new file mode 100644 index 0000000..37d1106 --- /dev/null +++ b/src/pages/Container/Bi/components/LeftPanel/index.js @@ -0,0 +1,169 @@ + +import "./index.less"; +import img1 from "~/assets/images/public/bigScreen/smalltitle.png"; +import img2 from "~/assets/images/public/weather/1.png"; +import img3 from "~/assets/images/public/bigScreen/w_ico1.png"; +import img4 from "~/assets/images/public/bigScreen/w_ico2.png"; +import img5 from "~/assets/images/public/bigScreen/tablebg1.png"; +import img6 from "~/assets/images/public/bigScreen/tablebg2.png"; +import img7 from "~/assets/images/public/bigScreen/ico3.png"; +import img8 from "~/assets/images/public/bigScreen/bg10.png"; +import img9 from "~/assets/images/public/bigScreen/bg9.png"; + + + + + + +function LeftScreen() { + return ( +
+
+
+ 天气预报情况 +
+
+
+ +
晴
+
+
+ +
+
温度：
+
28.5°
+
+
+
+ +
+
风速：
+
8级
+
+
+
+
+ 秦皇岛市气象台发布大风橙色预警[工级/严重] +
+
+
+
公司名称
+
处置状态
+
预防措施
+
+
+
新益公司
+
未处置
+
远离大树、电线杆、简易房等...
+
+
+
新益公司
+
已处置
+
远离大树、电线杆、简易房等...
+
+
+
新益公司
+
处置中
+
远离大树、电线杆、简易房等...
+
+
+ + +
+
+
+ 重大危险源运行情况 +
+
+
北区二号罐液位过低
+
+
+
二级重大危险源（1个）
+
+
储罐数：3
+
再用数：3
+
停用数： 2
+
+
+
+
三级重大危险源（2个）
+
+
储罐数：10
+
再用数：10
+
停用数： 0
+
+
+
+
+
+
+
东罐区二号罐
+
正常
+
+
+
东罐区二号罐
+
液位低
+
+
+
东罐区二号罐
+
正常
+
+ +
+
+
报警处置情况
+
+
温度待处置数/报警个数：0/0
+
压力待处置数/报警个数：0/0
+
液位待处置数/报警个数：1/1
+ +
+
+
+
+
+
+
+ 领域整改情况统计 +
+
+ 这里是echart +
+
+
+
+ 当前各公司作业中情况 +
+
+
+
+
公司名称
+
发现隐患数
+
整改隐患数
+
待整改
+
待验收
+
+
+
新益公司
+
123
+
123
+
123
+
123
+
+
+
新益公司
+
123
+
123
+
123
+
123
+
+ +
+
+
+ +
+ ); +} + +export default LeftScreen; diff --git a/src/pages/Container/Bi/components/LeftPanel/index.less b/src/pages/Container/Bi/components/LeftPanel/index.less new file mode 100644 index 0000000..8849a29 --- /dev/null +++ b/src/pages/Container/Bi/components/LeftPanel/index.less @@ -0,0 +1,261 @@ +.left-container{ + width: 360px; + height: calc(100vh - 80px); + position: absolute; + left: 20px; + top: 60px; + .item{ + width: 100%; + + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + width: 100%; + display: flex; + align-items: center; + margin-top: 10px; + + .list1{ + display: flex; + color: #ffffff; + align-items: center; + width: 33%; + text-align: center; + .img1{ + width: 40px; + height: 40px; + } + + .img{ + width: 42px; + height: 42px; + margin-right: 5px; + } + .temp{ + font-size: 18px; + color: #00e7ff; + } + + } + + + + } + .info{ + color: #fe9e00; + font-weight: bold; + margin-top: 10px; + } + + .table{ + width: 360px; + margin-top: 10px; + + .head{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 2fr; + color: #ffffff; + padding: 5px; + font-size: 12px; + } + .table-container{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 2fr; + color: #ffffff; + padding: 5px; + font-size: 12px; + margin: 5px auto; + + .fc1{ + color: #0c90ff; + } + .fc2{ + color: #62b13f; + } + .fc3{ + color: #ffa105; + } + } + + } + + } + +.block2{ + width: 100%; + margin-top: 10px; + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + .warning{ + width: 100%; + border-style: solid; + border-width: 1px; + border-color: rgb(255, 0, 0,0.5); + border-radius: 2px; + background-color: rgba(16, 36, 93, 0.659); + color: #ffffff; + padding: 5px; + vertical-align: middle; + font-weight: bold; + margin: 10px auto; + } + .mt10{ + margin-top: 10px; + } + .main_item{ + width: 100%; + display: flex; + justify-content: space-between; + + .list{ + width: 48%; + height: 91px; + background-size: 100% 100%; + padding: 5px; + color: #ffffff; + .title{ + font-weight: bold; + } + .main_con{ + width: 100%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + + .item{ + width: 50%; + margin: 2px 0; + font-size: 12px; + .fcr{ + color: #f90102; + } + } + + } + .fcb{ + color: #00aeff; + } + + .main_con1{ + .item{ + width: 100%; + margin: 2px 0; + font-size: 12px; + line-height: 22px; + .fcr{ + color: #f90102; + } + } + } + .item_list{ + width: 100%; + display: flex; + justify-content: space-between; + border-bottom: 1px solid #163682; + font-size: 12px; + line-height: 30px; + + .info{ + width: 60%; + } + .state{ + width: 40%; + text-align: right; + color: #7ccf41; + } + .fcr{ + color: #f90102; + } + } + } + } + } + +} + .block3{ + width: 100%; + margin-top: 20px; + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + width: 360px; + height: 100px; + } + } + .block4{ + width: 100%; + margin-top: 20px; + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + width: 360px; + .table{ + width: 360px; + margin-top: 10px; + + .head{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + color: #ffffff; + padding: 5px; + font-size: 12px; + background: rgba(39,101,175,0.5); + text-align: center; + } + .table-container{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + color: #ffffff; + padding: 5px; + font-size: 12px; + margin: 5px auto; + background: rgba(17,51,122,0.5); + text-align: center; + + .fc1{ + color: #0c90ff; + } + .fc2{ + color: #62b13f; + } + .fc3{ + color: #ffa105; + } + } + + } + } + + } + +} diff --git a/src/pages/Container/Bi/components/bottom/index.js b/src/pages/Container/Bi/components/bottom/index.js new file mode 100644 index 0000000..d32527c --- /dev/null +++ b/src/pages/Container/Bi/components/bottom/index.js @@ -0,0 +1,75 @@ + +import "./index.less"; +import img1 from "~/assets/images/public/bigScreen/smalltitle.png"; +import img2 from "~/assets/images/public/bigScreen/bg13.png"; +import img3 from "~/assets/images/public/bigScreen/bg14.png"; + + +function BottomScreen() { + return ( +
+
+
分子公司考核情况
+
+
+
+
公司名称
+
检查任务完成情况
+
安全会议召开情况
+
重要事项传达情况
+
专项任务完成情况
+
+
+
新益公司
+
23/26
+
23/26
+
23/26
+
23/26
+
+ +
+
新益公司
+
23/26
+
23/26
+
23/26
+
23/26
+
+
+
新益公司
+
23/26
+
23/26
+
23/26
+
23/26
+
+
+
新益公司
+
23/26
+
23/26
+
23/26
+
23/26
+
+
+
+
+
+
视频巡屏
+
+
+
新益公司
+
二公司
+
六公司
+
七公司
+
九公司
+
+
+ 这里是视频 +
+
+
+ + +
+ ); +} + +export default BottomScreen; diff --git a/src/pages/Container/Bi/components/bottom/index.less b/src/pages/Container/Bi/components/bottom/index.less new file mode 100644 index 0000000..33f5e8a --- /dev/null +++ b/src/pages/Container/Bi/components/bottom/index.less @@ -0,0 +1,125 @@ +.bottom-container{ + width: 1120px; + height: 200px; + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + .left{ + width: 670px; + .title{ + width: 360px; + height: 30px; + background-size: 100% 100%; + padding-left: 20px; + color: #ffffff; + font-weight: bold; + } + .main{ + width: 670px; + height: 160px; + background-size: 100% 100%; + margin-top: 10px; + color: #ffffff; + .table{ + width: 100%; + margin-top: 10px; + + .head{ + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; + color: #ffffff; + padding:10px 5px; + font-size: 12px; + text-align: center; + font-weight: bold; + } + .table-container{ + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; + color: #ffffff; + padding: 5px; + font-size: 12px; + margin: 0px auto; + text-align: center; + + .fc1{ + color: #0c90ff; + } + .fc2{ + color: #62b13f; + } + .fc3{ + color: #ffa105; + } + &:hover{ + background-color: rgba(14,197,208,0.1); + box-shadow: 0 0 1px #00e7ff; + + } + } + + } + } + + } + + .right{ + width: 440px; + .title{ + width: 360px; + height: 30px; + background-size: 100% 100%; + color: #ffffff; + font-weight: bold; + padding-left: 20px; + } + .main{ + display: flex; + justify-content: space-between; + margin-top: 10px; + .menu{ + width: 120px; + border-radius: 5px; + background-color: rgb(13, 56, 119); + box-shadow: inset 0px 2px 2px 0px rgba(35, 24, 21, 0.17); + height: 180px; + color: #ffffff; + text-align: center; + line-height: 30px; + padding: 5px; + + .list{ + width: 100%; + border-radius: 5px; + background-color: rgba(18, 96, 181, 0.4); + box-shadow: 0 2px 1px 0 rgba(2, 32, 95, 0.4); + margin-bottom: 5px; + &:hover{ + border-radius: 5px; + background-color: rgb(18, 96, 181); + box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4); + cursor: pointer; + } + } + .active{ + border-radius: 5px; + background-color: rgb(18, 96, 181); + box-shadow: 0px 2px 1px 0px rgba(2, 32, 95, 0.4); + cursor: pointer; + } + + } + .video-container{ + flex: 1; + margin-left: 10px; + padding: 10px; + + } + } + } +} diff --git a/src/pages/Container/Bi/components/rightPanel/index.js b/src/pages/Container/Bi/components/rightPanel/index.js new file mode 100644 index 0000000..13e8b03 --- /dev/null +++ b/src/pages/Container/Bi/components/rightPanel/index.js @@ -0,0 +1,220 @@ + +import "./index.less"; +import img1 from "~/assets/images/public/bigScreen/smalltitle.png"; +import img5 from "~/assets/images/public/bigScreen/tablebg1.png"; +import img6 from "~/assets/images/public/bigScreen/tablebg2.png"; +import img2 from "~/assets/images/public/bigScreen/ico6.png"; +import img3 from "~/assets/images/public/bigScreen/ico7.png"; +import img4 from "~/assets/images/public/bigScreen/ico8.png"; +import img7 from "~/assets/images/public/bigScreen/ico9.png"; +import img8 from "~/assets/images/public/bigScreen/bg11.png"; +import img9 from "~/assets/images/public/bigScreen/bg12.png"; + + + + + + + +function RightScreen() { + return ( +
+
+
+ 相关方申请审批管理 +
+
+
+
+
单位名称
+
待审批项目数
+
待提交培训人员数
+
待培训人数
+
+
+
方宇物业
+
2
+
3
+
4
+ +
+
+
方宇物业
+
2
+
3
+
4
+ +
+
+
方宇物业
+
2
+
3
+
4
+ +
+
+
方宇物业
+
2
+
3
+
4
+ +
+ +
+ +
+ + + +
+
+
+ 当前重点作业统计 +
+
+
+
+ +
+
+
三人以上作业
+
+

当前作业数：13

+

申请数：14

+
+
+
+
+
+ +
+
+
危险作业
+
+

当前作业数：13

+

申请数：14

+
+
+
+
+
+ +
+
+
夜间作业
+
+

当前作业数：13

+

申请数：14

+
+
+
+
+
+ +
+
+
四新作业
+
+

当前作业数：13

+

申请数：14

+
+
+
+
+
+
+
+ 当前口门、封闭区情况 +
+
+
+
一级口门进出统计
+
+
人数：2100
+
车数：1125
+
+
+
+
进入申请待审批
+
+
人数：2100
+
车数：1125
+
+
+
+
封闭区域人员情况
+
+
人数：2100
+
车数：1125
+
+
+
+
封闭区域作业情况
+
+
人数：2100
+
车数：1125
+
+
+
+
+
+
+ 物联网设备报警情况 +
+
+
+
+
公司名称
+
检测系统
+
报警原因
+
处置状态
+
+ +
+
新益公司
+
火灾检测系统
+
燃气泄露
+
未处置
+
+
+
新益公司
+
火灾检测系统
+
燃气泄露
+
未处置
+
+
+
新益公司
+
火灾检测系统
+
燃气泄露
+
未处置
+
+
+
新益公司
+
火灾检测系统
+
燃气泄露
+
未处置
+
+
+
新益公司
+
火灾检测系统
+
燃气泄露
+
未处置
+
+
+
新益公司
+
火灾检测系统
+
燃气泄露
+
未处置
+
+ + + +
+
+
+ +
+ ); +} + +export default RightScreen; diff --git a/src/pages/Container/Bi/components/rightPanel/index.less b/src/pages/Container/Bi/components/rightPanel/index.less new file mode 100644 index 0000000..76f866b --- /dev/null +++ b/src/pages/Container/Bi/components/rightPanel/index.less @@ -0,0 +1,205 @@ +.right-container{ + width: 360px; + height: calc(100vh - 80px); + position: absolute; + right: 20px; + top: 60px; + .block1{ + width: 100%; + + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + width: 100%; + display: flex; + align-items: center; + + + .table{ + width: 360px; + margin-top: 10px; + + .head{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 1.5fr 1fr ; + color: #ffffff; + padding: 5px; + font-size: 12px; + background: rgba(39,101,175,0.5); + text-align: center; + } + .table-container{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 1.5fr 1fr ; + color: #ffffff; + padding: 5px; + font-size: 12px; + margin: 5px auto; + background: rgba(17,51,122,0.5); + text-align: center; + + .fc1{ + color: #0c90ff; + } + .fc2{ + color: #62b13f; + } + .fc3{ + color: #ffa105; + } + } + + } + + + + } + + + + + } + + .block2{ + width: 100%; + margin-top: 10px; + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + .item{ + width: 50%; + display: flex; + align-items: center; + margin-top: 10px; + .title{ + font-weight: bold; + } + + .info{ + padding-left: 10px; + width: 100%; + color: #ffffff; + font-size: 12px; + p{ + margin: 0; + } + } + + } + + + + } + + } + .block3{ + width: 100%; + margin-top: 20px; + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + width: 360px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + .item{ + width: 49%; + text-align: center; + background-size: 100% 100%; + color: #ffffff; + padding:5px 10px; + font-size: 12px; + margin-top: 10px; + + .title{ + font-weight: bold; + } + .num{ + width: 100%; + display: flex; + justify-content: space-between; + margin-top: 5px; + } + + } + + } + } + .block4{ + width: 100%; + margin-top: 20px; + .top{ + color: #ffffff; + font-weight: bold; + padding-left: 30px; + width: 360px; + height: 30px; + background-size: 100% 100%; + } + .main{ + width: 360px; + .table{ + width: 360px; + margin-top: 10px; + + .head{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr ; + color: #ffffff; + padding: 5px; + font-size: 12px; + background: rgba(39,101,175,0.5); + text-align: center; + } + .table-container{ + width: 360px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr ; + color: #ffffff; + padding: 5px; + font-size: 12px; + margin: 5px auto; + background: rgba(17,51,122,0.5); + text-align: center; + + .fc1{ + color: #0c90ff; + } + .fc2{ + color: #62b13f; + } + .fc3{ + color: #ffa105; + } + } + + } + } + + } + +} diff --git a/src/pages/Container/Bi/index.js b/src/pages/Container/Bi/index.js index c4adc1d..519ea3b 100644 --- a/src/pages/Container/Bi/index.js +++ b/src/pages/Container/Bi/index.js @@ -1,145 +1,21 @@ -import { useMount } from "ahooks"; -import autofit from "autofit.js"; -import { Connect } from "@cqsjjb/jjb-dva-runtime"; -import { NS_BI } from "~/enumerate/namespace"; - -import { useState } from "react"; import backgroundimg from "../../../assets/images/public/bigScreen/backgroundimg.jpg"; -import ico1 from "../../../assets/images/public/bigScreen/ico1.png"; -import ico2 from "../../../assets/images/public/bigScreen/ico2.png"; -import icobg1 from "../../../assets/images/public/bigScreen/icobg1.png"; - -import icobg2 from "../../../assets/images/public/bigScreen/icobg2.png"; -// import RightPanel from './components/rightPanel'; -// import CenterArea from './components/centerArea'; -import Bubble from "./bubble"; -import LeftPanel from "./components/leftPanel"; -import TopTitleArea from "./components/topTitleArea"; import "./index.less"; +import Header from "../Bi/components/Header/index"; +import Leftpanel from "~/pages/Container/Bi/components/LeftPanel/index"; +import Rightpanel from "~/pages/Container/Bi/components/rightPanel/index"; +import Bottom from "~/pages/Container/Bi/components/Bottom/index"; -const mockPoints = [ - { - id: "00002", - name: "沧州黄骅港矿石港务有限公司", - title: "沧州港", - type: "港口", - descr: "公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。", - position: { x: 117.91412, y: 38.35902 }, - CORP_INFO_ID: "f8da1790b1034058ae2efefd69af3284", - style: { top: "58%", left: "30%" }, - description: "公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。", - }, - { - id: "00003", - name: "秦皇岛港", - title: "秦皇岛港", - type: "港口", - descr: "秦皇岛港分为东、西两个港区，现有生产性泊位50个，年设计通过能力2.26亿吨，经营货类主要包括煤炭、金属矿石、油品及液体化工、集装箱及其他杂货等。", - position: { x: 119.61254, y: 39.92572 }, - style: { top: "30%", right: "46.8%" }, - CORP_INFO_ID: "", - description: "秦皇岛港分为东、西两个港区，现有生产性泊位50个，年设计通过能力2.26亿吨，经营货类主要包括煤炭、金属矿石、油品及液体化工、集装箱及其他杂货等。", - }, - { - id: "00004", - name: "曹妃甸实业港务", - title: "曹实业", - type: "港口", - descr: "公司现共有6个泊位(5-30万吨级)，设计年通过能力6550万吨。堆场面积146万平米，堆存能力1350万吨，大型装卸设备23台套。", - position: { x: 118.51022, y: 38.93503 }, - CORP_INFO_ID: "8854edee3aa94be496cee676b6d4845a", - style: { top: "49%", left: "38.5%" }, - description: "公司现共有6个泊位(5-30万吨级)，设计年通过能力6550万吨。堆场面积146万平米，堆存能力1350万吨，大型装卸设备23台套。", - }, -]; -const BiScreen = () => { - const [bubbleVisibleMeta, setBubbleVisibleMeta] = useState({}); - - const handleBubbleVisible = (id) => { - const newVisibleMeta = {}; - newVisibleMeta[id] = true; - setBubbleVisibleMeta(newVisibleMeta); - }; - - const handleBubbleClose = (id) => { - setBubbleVisibleMeta(prev => ({ - ...prev, - [id]: false, - })); - }; - - useMount(() => { - autofit.init({ - dw: 1920, - dh: 1080, - el: "#screenContainerId", - resize: true, - }); - - return () => { - autofit.off(); - }; - }); - +function BiScreen() { return ( -
- {/* 顶部标题区 */} - - - {/* 左中右面板 */} -
- {/* 左侧面板 */} - - - {/* 中间面板 */} - {/* */} - - {/* 右侧面板 */} - {/* */} +
+
+
+ + +
- - {/* 地图三个点位信息坐标 start */} - {mockPoints.map((item, index) => ( -
- {item.id === "00003" - ? ( -
- handleBubbleVisible(item.id)} - /> - -
- ) - : ( -
- handleBubbleVisible(item.id)} - /> - -
- )} -
- {bubbleVisibleMeta[item.id] && ( - handleBubbleClose(item.id)} - /> - )} -
-
- ))} - {/* 地图三个点位信息坐标 end */}
); -}; +} -export default Connect([NS_BI], true)(BiScreen); \ No newline at end of file +export default BiScreen; diff --git a/src/pages/Container/Bi/index.less b/src/pages/Container/Bi/index.less index f48990c..4e74528 100644 --- a/src/pages/Container/Bi/index.less +++ b/src/pages/Container/Bi/index.less @@ -1,818 +1,9 @@ -/* 顶部标题区域样式 */ -.top-title-area { - box-sizing: border-box; - width: 100%; - height: 75px; - - .top-title-area__back { - width: 65px; - height: 32px; +.screen-container{ + width: 100vw; + height: 100vh; + .screen-content{ + width: 100%; display: flex; - justify-content: center; - align-items: center; - gap: 6px; - position: absolute; - top: 30px; - left: 17px; - color: #fff; - font-size: 17px; - cursor: pointer; - - .icon-arrow__left { - font-size: 20px; - } - } - - .top-title-area__img { - width: 100%; - height: 100%; - text-align: center; - line-height: 80px; - position: relative; - background-origin: border-box; - background-repeat: no-repeat; - background-size: 100% 100%; - - .top-title-area__img__text { - user-select: none; - background-image: linear-gradient(to bottom, #5bb4f7, #ffffff); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-size: 40px; - font-weight: bold; - } - - .top-title-area__img__box { - position: absolute; - top: 53px; - left: 50%; - } - - .top-title-area__right { - position: absolute; - top: 30px; - right: 17px; - width: 110px; - height: 32px; - cursor: pointer; - background-image: url("../../../assets/images/public/bigScreen/bg7.png"); - background-origin: border-box; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - color: #fff; - - .top-title-area__right__text { - user-select: none; - width: 60px; - position: absolute; - top: -24px; - left: 40px; - height: 32px; - } - } - - .top-title-area__img__guang { - animation: scale 2s infinite; - } + justify-content: space-between; } } - -@keyframes scale { - 0% { - transform: translateX(-50%) scale(1.2); - } - - 50% { - transform: translateX(-50%) scale(0.6); - } - - 100% { - transform: translateX(-50%) scale(1.2); - } -} - -/* 主容器样式 */ -.screen-container { - background-origin: border-box; - background-repeat: no-repeat; - position: relative; - background-size: 100% 100%; - width: 100%; - height: 100%; -} - -.screen-body { - box-sizing: border-box; - padding-top: 10px; - width: 100%; - display: grid; - grid-template-columns: 422px 1fr 450px; - gap: 8px; -} - -/* 地图点位样式 */ -.center-area__point { - position: absolute; - - .img { - cursor: pointer; - animation: moveUpDown 1.3s infinite ease-in-out; - position: relative; - - img:nth-child(1) { - width: 52px; - height: 54px; - position: absolute; - top: -52px; - left: 21px; - } - - img:nth-child(2) { - width: 96px; - height: 31px; - position: absolute; - top: 0; - left: 0; - } - } - - .bubble-box { - width: 380px; - position: absolute; - top: 0; - left: 45px; - } -} - -/* 左侧面板样式 */ -.left-panel { - display: flex; - flex-direction: column; - gap: 5px; - z-index: 100; -} - -/* 通用卡片样式 */ -.card { - width: 100%; - background: rgba(4, 24, 52, 0); - overflow: hidden; -} - -.card-header { - width: 100%; - background-origin: border-box; - background-position: left; - background-repeat: no-repeat; - background-size: contain; -} - -.card-header__text { - line-height: 35px; - padding-left: 30px; - font-size: 14px; - font-weight: bold; - color: #fff; -} - -.weather-card__content { - padding: 5px 20px; - padding-bottom: 0; -} - -.weather-main { - display: flex; - align-items: center; - gap: 45px; - margin-bottom: 15px; -} - -.weather-icon { - width: 62px; - height: 53px; - text-align: center; - - .buttom { - width: 100%; - height: 20%; - color: #fff; - font-size: 12px; - text-align: center; - } -} - - - - -.weather-info { - display: flex; - justify-content: flex-start; - align-items: center; - gap: 45px; - - .weather-info__item { - display: flex; - justify-content: space-around; - align-items: center; - gap: 8px; - - &>img { - animation: zooming 1.3s infinite ease-in-out; - } - - .weather-info__text { - color: #fff; - - &>p:nth-child(1) { - font-size: 12px; - margin: 0; - } - - &>p:nth-child(2) { - font-size: 18px; - color: #00e7ff; - margin: 0; - } - } - } -} - -.temperature { - display: flex; - align-items: baseline; - gap: 5px; -} - -.temp-value { - font-size: 36px; - font-weight: bold; - color: #fff; -} - -.temp-unit { - font-size: 18px; - color: #fff; -} - -.wind-speed { - display: flex; - align-items: center; - gap: 10px; -} - -.wind-label { - font-size: 14px; - color: #fff; -} - -.wind-value { - font-size: 24px; - font-weight: bold; - color: #05e3fb; -} - -.weather-alert { - border-radius: 4px; -} - -.weather-alert p { - margin: 0; - font-size: 14px; - color: #FE9E00; -} - -.alert-control-card { - - .card-body { - margin: 0 18px; - padding: 0 10px; - border: 2px solid transparent; - border-image: linear-gradient(to bottom, #24529B, transparent) 1 1; - } -} - -.table-header { - display: flex; - justify-content: space-between; - padding: 4px 0; - border-bottom: 1px solid #42698f; - font-weight: bold; - color: #fff; - font-size: 12px; -} - -.table-header span:first-child { - width: 30%; -} - -.table-header span:nth-child(2) { - width: 20%; - text-align: center; -} - -.table-header span:last-child { - width: 50%; - padding-left: 30px; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.table-body { - margin-top: 10px; - height: 70px; - overflow: hidden; - position: relative; - -} - -.table-row { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(66, 105, 143, 0.3); - font-size: 12px; - color: #fff; -} - -.table-row span:first-child { - width: 30%; -} - -.table-row span:nth-child(2) { - width: 20%; - text-align: center; -} - -.table-row span:last-child { - width: 50%; - padding-left: 30px; - text-align: right; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.status-done { - color: #52c41a; - padding: 2px 8px; - border-radius: 10px; -} - -.status-processing { - color: #faad14; - padding: 2px 8px; - border-radius: 10px; -} - -.status-pending { - color: #ff4d4f; - padding: 2px 8px; - border-radius: 10px; -} - -/* 重大危险源样式 */ -.hazards-card { - .card-body { - margin: 5px 18px; - padding: 0 10px; - } -} - -.hazard-item { - display: flex; - align-items: center; - gap: 10px; - padding: 5px 10px; - background: rgba(19, 47, 112, 0.1); - border: 1px solid #ff4d4f; - border-radius: 4px; - cursor: pointer; - margin-bottom: 8px; - color: #fff; -} - -.hazard-icon { - font-size: 20px; -} - -.hazard-name { - font-size: 14px; -} - -.selected-hazard { - margin-bottom: 5px; -} - -/* 危险源等级统计 */ -.hazard-levels { - display: flex; - gap: 15px; - margin-bottom: 5px; -} - -.hazard-level { - flex: 1; - background: rgba(19, 47, 112, 0.1); - border: 1px solid #42698f; - border-radius: 4px; - padding: 5px 10px; -} - -.hazard-level__title { - font-size: 14px; - font-weight: bold; - color: #05e3fb; - margin-bottom: 8px; -} - -.hazard-level__content { - display: flex; - flex-direction: column; - gap: 4px; -} - -.hazard-level__item { - font-size: 12px; - color: #fff; -} - -.tank-status-scroller { - height: 114px; - overflow: hidden; - position: relative; -} - -.tank-status-scroll-content { - animation: scroll-up 10s linear infinite; -} - -@keyframes scroll-up { - 0% { - transform: translateY(0); - } - - 100% { - transform: translateY(-50%); - } -} - -.tank-status-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 10px; - background: rgba(19, 47, 112, 0.1); - border-bottom: 1px solid rgba(66, 105, 143, 0.3); - font-size: 12px; - color: #fff; - // height: 38px; - box-sizing: border-box; - flex-shrink: 0; -} - -.tank-status-item:last-child { - border-bottom: none; -} - -.tank-status.normal { - color: #52c41a; - padding: 2px 8px; - border-radius: 10px; - font-weight: bold; -} - -.tank-status.warning { - color: #faad14; - padding: 2px 8px; - border-radius: 10px; - font-weight: bold; -} - -/* 储罐状态和报警处置情况容器 */ -.tank-alarm-container { - display: flex; - gap: 15px; -} - -.tank-status-list { - flex-basis: 50%; -} - -/* 报警处置情况 */ -.alarm-handling { - flex-basis: 50%; - background: rgba(19, 47, 112, 0.1); - border: 1px solid #42698f; - border-radius: 4px; - padding: 5px 10px; -} - -.alarm-handling__title { - font-size: 14px; - font-weight: bold; - color: #05e3fb; - margin-bottom: 8px; -} - -.alarm-handling__content { - display: flex; - flex-direction: column; - gap: 6px; -} - -.alarm-handling__item { - display: flex; - justify-content: space-between; - font-size: 12px; - color: #fff; -} - -.item-label { - color: #c0c0c0; -} - -.item-value { - color: #fff; - font-weight: bold; -} - -.stat-label { - font-size: 13px; - margin-bottom: 5px; -} - -.stat-value { - font-size: 24px; - font-weight: bold; - color: #05e3fb; -} - -.tank-stats { - display: flex; - gap: 20px; -} - -.tank-group { - flex: 1; - padding: 10px; - background: rgba(66, 105, 143, 0.2); - border: 1px solid #42698f; - border-radius: 4px; -} - -.tank-group-label { - font-size: 14px; - font-weight: bold; - color: #fff; - margin-bottom: 10px; - text-align: center; -} - -.tank-info { - display: flex; - flex-direction: column; - gap: 5px; - color: #fff; - font-size: 13px; -} - -/* 储罐状态样式 */ -.tank-status-card { - @extend .card; -} - -.tank-list { - margin-bottom: 15px; -} - -.tank-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - border-bottom: 1px solid rgba(66, 105, 143, 0.3); - color: #fff; - font-size: 14px; -} - -.tank-status { - padding: 2px 12px; - border-radius: 10px; - font-size: 12px; -} - -.tank-status.normal { - color: #52c41a; - background: rgba(82, 196, 26, 0.2); -} - -.tank-status.warning { - color: #faad14; - background: rgba(250, 173, 20, 0.2); -} - -.handling-status { - padding: 12px; - background: rgba(66, 105, 143, 0.2); - border: 1px solid #42698f; - border-radius: 4px; -} - -.handling-header h4 { - margin: 0 0 10px 0; - font-size: 14px; - color: #fff; -} - -.handling-list { - display: flex; - flex-direction: column; - gap: 8px; -} - -.handling-item { - display: flex; - justify-content: space-between; - align-items: center; - color: #fff; - font-size: 13px; -} - -.flow-machine-tooltip { - background: rgba(35, 53, 93, 0.95); - border: 1px solid #42698f; - border-radius: 4px; - padding: 10px; - color: #fff; - font-size: 13px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -} - -.tooltip-content { - display: flex; - flex-direction: column; - gap: 5px; -} - -.tooltip-title { - font-weight: bold; - margin-bottom: 5px; - color: #05e3fb; -} - -.operation-status-card .table-header span { - width: 20%; - text-align: center; -} - -.operation-status-card .table-row span { - width: 20%; - text-align: center; - font-size: 12px; -} - -/* 右侧面板样式 */ -.right-panel { - height: 100%; - display: flex; - flex-direction: column; - gap: 20px; - z-index: 100; -} - -/* 气泡样式 */ -.bubble-wrap { - width: 100%; - z-index: 1500; - - .bubble-box { - width: 100%; - border-radius: 4px; - border: 1px solid #42698f; - background-color: rgb(35 53 93 / 74%); - animation: slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; - - .bubble-wrap__header { - display: flex; - padding: 10px 14px; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid #42698f; - - .bubble-wrap__title { - text-align: start; - font-size: 16px; - font-weight: bold; - color: #ffffff; - } - - .bubble-wrap__close { - width: 12px; - height: 12px; - background-repeat: no-repeat; - background-size: 100% 100%; - cursor: pointer; - } - } - - .bubble-wrap__content { - background-color: rgb(74 101 161 / 38%); - padding: 25px 10px; - display: flex; - justify-content: space-between; - align-items: flex-start; - color: #fff; - font-size: 14px; - - .content__label { - width: 110px; - color: #fff; - font-size: 14px; - } - - .content__text { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; - text-overflow: ellipsis; - white-space: normal; - height: 48px; - } - } - - .bubble-wrap__footer { - background-color: rgb(74 101 161 / 38%); - padding: 10px 14px; - text-align: right; - - .footer__text { - color: #05e3fb; - font-size: 14px; - cursor: pointer; - margin: 0; - display: inline-flex; - align-items: center; - - &:hover { - text-decoration: underline; - } - } - } - } -} - -/* 动画效果 */ -@keyframes moveUpDown { - - 0%, - 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(-5px); - } -} - -@keyframes moveUpDown__2 { - - 0%, - 100% { - transform: translateX(12px) translateY(-10px); - } - - 50% { - transform: translateX(12px) translateY(-15px); - } -} - -@keyframes zooming { - - 0%, - 100% { - transform: scale(1); - } - - 50% { - transform: scale(1.1); - } -} - -@keyframes slide-in-elliptic-bottom-fwd { - 0% { - transform: translateY(600px) rotateX(30deg) scale(0); - transform-origin: 50% 100%; - opacity: 0; - } - - 100% { - transform: translateY(0) rotateX(0) scale(1); - transform-origin: 50% 100%; - opacity: 1; - } -} \ No newline at end of file