监管平台bi
parent
518449613a
commit
6ac4ffc4e8
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
.index_info_container {
|
||||
.bottom-container_con {
|
||||
width: 1120px;
|
||||
width: 1350px;
|
||||
height: 240px;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
.top_container {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
|
|
@ -46,13 +45,14 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 670px;
|
||||
width: 890px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
padding: 10px;
|
||||
|
||||
.main {
|
||||
width: 670px;
|
||||
width: 870px;
|
||||
height: 160px;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 10px;
|
||||
|
|
@ -66,7 +66,6 @@
|
|||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
color: #ffffff;
|
||||
padding: 10px 5px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -76,8 +75,7 @@
|
|||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.fc1 {
|
||||
|
|
@ -106,6 +104,7 @@
|
|||
background: rgba(0, 41, 82, 0.68);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
padding: 10px;
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import img1 from "~/assets/images/public/bigScreen/btnbg.png";
|
||||
import "./index.less";
|
||||
|
||||
function Btn() {
|
||||
return (
|
||||
<div className="index_info_btn" >
|
||||
<div className="item" style={{ backgroundImage: `url(${img1})` }}>秦皇岛港</div>
|
||||
<div className="item" style={{ backgroundImage: `url(${img1})` }}>沧州港</div>
|
||||
<div className="item" style={{ backgroundImage: `url(${img1})` }}>曹实业</div>
|
||||
<div className="item" style={{ backgroundImage: `url(${img1})` }}>曹煤炭</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Btn;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.index_info_btn{
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
right: 450px;
|
||||
|
||||
.item{
|
||||
width: 127px;
|
||||
height: 43px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
|||
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
|
||||
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
|
||||
import img2 from "~/assets/images/public/weather/1.png";
|
||||
import left from "~/assets/images/public/bigScreen/leftbg.png";
|
||||
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||
import { initEcharts1 } from "./echarts";
|
||||
import "./index.less";
|
||||
|
|
@ -65,7 +66,8 @@ function LeftScreen() {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="left-container">
|
||||
<div className="left-container" >
|
||||
<div className="left-container_bg" style={{ backgroundImage: `url(${left})` }}></div>
|
||||
<div className="block1">
|
||||
<Title title="天气预报情况" />
|
||||
<div className="main">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,29 @@
|
|||
.index_info_container {
|
||||
|
||||
|
||||
|
||||
.left-container {
|
||||
width: 360px;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 60px;
|
||||
max-height: calc(100vh - 75px);
|
||||
|
||||
.left-container_bg{
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.block1 {
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
|
@ -55,7 +69,8 @@
|
|||
grid-template-columns: 1fr 1fr 2fr;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
|
|
@ -67,7 +82,7 @@
|
|||
grid-template-columns: 1fr 1fr 2fr;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
margin: 5px auto;
|
||||
|
||||
.fc1 {
|
||||
|
|
@ -87,10 +102,10 @@
|
|||
}
|
||||
|
||||
.block2 {
|
||||
margin-top: 10px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
margin-top: 20px;
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
.warning {
|
||||
|
|
@ -115,7 +130,7 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.list {
|
||||
width: 48%;
|
||||
width: 49%;
|
||||
background-size: 100% 100%;
|
||||
padding: 5px;
|
||||
color: #ffffff;
|
||||
|
|
@ -133,7 +148,7 @@
|
|||
.item {
|
||||
width: 50%;
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
|
||||
|
||||
.fcr {
|
||||
color: #f90102;
|
||||
|
|
@ -148,8 +163,9 @@
|
|||
.main_con1 {
|
||||
.item {
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
width: 100%;
|
||||
|
||||
.fcr {
|
||||
color: #f90102;
|
||||
|
|
@ -161,7 +177,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #163682;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
|
||||
.info {
|
||||
|
|
@ -184,17 +199,15 @@
|
|||
}
|
||||
|
||||
.block3 {
|
||||
margin-top: 20px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
margin-top: 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
}
|
||||
|
||||
.block4 {
|
||||
margin-top: 20px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
.table {
|
||||
|
|
@ -205,9 +218,9 @@
|
|||
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;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
|
|
@ -219,7 +232,7 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import img4 from "~/assets/images/public/bigScreen/ico8.png";
|
|||
import img7 from "~/assets/images/public/bigScreen/ico9.png";
|
||||
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
|
||||
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
|
||||
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
|
||||
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
|
||||
import "./index.less";
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ function RightScreen() {
|
|||
|
||||
return (
|
||||
<div className="right-container">
|
||||
<div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
|
||||
<div className="block1">
|
||||
<Title title="相关方申请审批管理" />
|
||||
<div className="main">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,26 @@
|
|||
.index_info_container {
|
||||
.right-container_bg{
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
transform: rotate(180deg);
|
||||
|
||||
}
|
||||
.right-container {
|
||||
width: 360px;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 60px;
|
||||
max-height: calc(100vh - 75px);
|
||||
|
||||
.block1 {
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
|
@ -24,9 +35,10 @@
|
|||
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;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
|
|
@ -38,7 +50,7 @@
|
|||
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;
|
||||
|
|
@ -62,9 +74,9 @@
|
|||
|
||||
.block2 {
|
||||
margin-top: 10px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
|
@ -84,7 +96,7 @@
|
|||
.info {
|
||||
padding-left: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -96,9 +108,9 @@
|
|||
|
||||
.block3 {
|
||||
margin-top: 20px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
|
@ -111,7 +123,7 @@
|
|||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
.title {
|
||||
|
|
@ -129,9 +141,9 @@
|
|||
|
||||
.block4 {
|
||||
margin-top: 20px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
||||
|
||||
.main {
|
||||
.table {
|
||||
|
|
@ -142,9 +154,10 @@
|
|||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
background: rgba(39, 101, 175, 0.5);
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
|
|
@ -156,7 +169,7 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
min-height: 200px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 400px;
|
||||
left: 480px;
|
||||
background: rgba(0, 41, 82, 0.68);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(44, 105, 172, 0.6);
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
color: #4371af;
|
||||
line-height: 30px;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import Bottom from "./Bottom";
|
|||
import LeftPanel from "./LeftPanel";
|
||||
import RightPanel from "./RightPanel";
|
||||
import Search from "./Search";
|
||||
import Btn from "./Btn";
|
||||
import "./index.less";
|
||||
|
||||
function IndexInfo() {
|
||||
|
|
@ -11,6 +12,7 @@ function IndexInfo() {
|
|||
<RightPanel />
|
||||
<Bottom />
|
||||
<Search />
|
||||
<Btn />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
.index_info_container {
|
||||
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue