Commit 3dfb1c68 authored by zhengjiangtao's avatar zhengjiangtao

fix bug

parent 398cc77a
@function vw($px) {
@return ($px/ 1920) * 100vw;
}
@function vh($px) {
@return ($px/ 1080) * 100vh;
}
.mainContent{ .mainContent{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('../../assets/detail/bgImg.png') no-repeat; background: url('../../assets/detail/bgImg.png') no-repeat;
background-size: cover; background-size: cover;
margin: -60px 0; margin: vh(-60) 0;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
overflow-y:auto; overflow-y:auto;
...@@ -15,81 +24,86 @@ ...@@ -15,81 +24,86 @@
.contentHeader{ .contentHeader{
padding: 0; padding: 0;
width:100%; width:100%;
height: 64px; height: vh(64);
background: url('../../assets/detail/bg-header.png') no-repeat; background: url('../../assets/detail/bg-header.png') no-repeat;
background-size: cover; background-size: cover;
box-shadow:0px 3px 6px rgba(0,0,0,0.16); box-shadow:0px 3px 6px rgba(0,0,0,0.16);
opacity:1; opacity:1;
.headerLeft{ .headerLeft{
width: 280px; width: vw(280);
height: 55px; height: vh(55);
font-size: 25px; font-size: pxToRem(25px);
margin-top: 22px; margin-top: vh(22);
color: #F7FF00; color: #F7FF00;
line-height: 32px; line-height: vh(32);
float: left; float: left;
margin-left: 50px; margin-left: vw(50);
} }
.headerRight{ .headerRight{
margin-top: 15px; margin-top: vh(15);
width: 42px; width: vw(42);
height:42px; height:vh(42);
float: right; float: right;
.img-headerRight {
margin-top: vh(3),
widthvw(42);
}
} }
} }
.content{ .content{
padding: 0px 22.5px; padding:vh(0) vw(22.5);
background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%); background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
opacity:1; opacity:1;
.contentInfo{ .contentInfo{
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
height: 980px; height: vh(980);
opacity: 1; opacity: 1;
margin-top: 18px; margin-top: vh(18);
.infoHeader{ .infoHeader{
background:rgba(0,35,51,1); background:rgba(0,35,51,1);
height: 89px; height: vh(89);
opacity: 1; opacity: 1;
.amos-search{ .amos-search{
border: 0; border: 0;
height:35px ; height:vh(35);
width: 290px ; width: vw(290);
background:rgba(0,185,255,0.3); background:rgba(0,185,255,0.3);
border-radius:17px; border-radius:17px;
top: 30px; top: vh(30);
color: #5FFFFD; color: #5FFFFD;
.amos-search-icon-right{ .amos-search-icon-right{
left: 255px; left: vw(255);
} }
.amos-search-inner{ .amos-search-inner{
color: white; color: white;
display: block; display: block;
height: 37px; height: vh(37);
background: transparent; background: transparent;
border-radius: 17px; border-radius: 17px;
} }
} }
.selectDiv{ .selectDiv{
position: relative; position: relative;
right: -900px; right: vw(-900);
margin-left: 20px; margin-left: vw(-20);
color: white; color: white;
.amos-select-dropdown { .amos-select-dropdown {
border: 0; border: 0;
min-width: 7em; min-width: 7em;
line-height: 32px; line-height: vh(32);
background-color: rgba(0,185,255,0.3); background-color: rgba(0,185,255,0.3);
border-radius: 15px; border-radius: 15px;
top: -3px; top: vh(-3);
} }
} }
} }
.infoContent{ .infoContent{
height:888px; height:vh(888);
opacity: 1; opacity: 1;
.ant-table-content{ .ant-table-content{
height: 800px; height: vh(800);
opacity:1; opacity:1;
.ant-table-placeholder{ .ant-table-placeholder{
background:rgba(14,127,180,0.29); background:rgba(14,127,180,0.29);
...@@ -99,7 +113,7 @@ ...@@ -99,7 +113,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
.ant-table-row{ .ant-table-row{
margin-left: 13px; margin-left: vw(13);
width: 100% ; width: 100% ;
} }
} }
...@@ -115,7 +129,7 @@ ...@@ -115,7 +129,7 @@
text-align: center; text-align: center;
.ant-pagination-total-text{ .ant-pagination-total-text{
color: white; color: white;
font-size: 13px; font-size: pxToRem(13px);
} }
} }
.ant-table-pagination > li { .ant-table-pagination > li {
...@@ -124,7 +138,7 @@ ...@@ -124,7 +138,7 @@
opacity:1; opacity:1;
margin:0; margin:0;
display: inline-block; display: inline-block;
width: 24px; width: vw(24);
} }
} }
} }
...@@ -142,37 +156,47 @@ ...@@ -142,37 +156,47 @@
margin: 1% 2%; margin: 1% 2%;
background-color:transparent; background-color:transparent;
.oneChildHeader{ .oneChildHeader{
height:40px; height:vh(40);
width: 256px; width: vw(256);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.oneHeaderContent{ .oneHeaderContent{
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
text-align: center; text-align: center;
height:550px; height:vh(550);
background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%); background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
.image-div {
width: vw(922);
height:vh(503);
margin-top: vh(35);
margin-left: vw(160)
}
} }
} }
.blockOneContent{ .blockOneContent{
width:46%; width:46%;
height: 370px; height: vh(370);
margin: 45px 0 0 30px; margin: vh(45) 0 0 vw(30);
display: inline-block; display: inline-block;
position: relative;
top: vh(-51);
.oneChildLayout { .oneChildLayout {
background: transparent; background: transparent;
height: 360px; height: vh(360);
.oneChildSider{ .oneChildSider{
background-color:transparent; background-color:transparent;
height: 360px; height: vh(360);
.twoChildHeader{ .twoChildHeader{
background:'none'; background:'none';
height:40px; height:vh(40);
width: 277px; width: vw(277);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.twoHeaderContent{ .twoHeaderContent{
height:320px; height:vh(322);
width: 648px; width: vw(648);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%); background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%);
} }
...@@ -181,28 +205,35 @@ ...@@ -181,28 +205,35 @@
} }
.blockTwoContent{ .blockTwoContent{
width:46%; width:46%;
height: 370px; height: vh(370);
display: inline-block; display: inline-block;
margin: 45px 0 0 35px; position: relative;
top: vh(-49);
left: vw(50);
.oneChildLayout { .oneChildLayout {
height: 360px; height: vh(360);
background: transparent; background: transparent;
.oneChildSider{ .oneChildSider{
background-color:transparent; background-color:transparent;
height: 360px; height: vh(360);
.twoChildHeader{ .twoChildHeader{
background:'none'; background:'none';
height: 40px; height: vh(40);
width: 277px; width: vw(277);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.twoHeaderContent{ .twoHeaderContent{
height:320px; height:vh(320);
width: 648px; width: vw(648);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%); background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%);
.risk-incidence-severity-matrix{ .risk-incidence-severity-matrix{
height: 95%; height: 95%;
.div-severity-echarts {
height: vh(330) !important;
width: vw(660) !important;
}
} }
} }
} }
...@@ -213,29 +244,33 @@ ...@@ -213,29 +244,33 @@
} }
} }
.risksider{ .risksider{
height:970px; height:vh(970);
flex: 0 0 456px!important; flex: 0 0 vh(456)!important;
width: 456px!important; width: vw(456) !important;
margin: 6px 40px 0px 0px; margin: vh(6) vw(40) vh(0) vw(0);
background: transparent; background: transparent;
.amos-layout-sider-children{ .amos-layout-sider-children{
margin-top: 10px; margin-top: vh(10);
.risksiderHeader{ .risksiderHeader{
height:35px; height:vh(35);
background: transparent; background: transparent;
margin-left: -50px; margin-left: vw(-50);
} }
.risksiderHeader >img{ .risksiderHeader >img{
width: 256px; width: vw(256);
height: 40px; height: vh(40);
margin: 0px; margin: 0px;
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.risksiderContent{ .risksiderContent{
height:939px; height:vh(939);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%); background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%);
position: relative;
top: vh(4);
left: vw(1.6);
} }
} }
} }
...@@ -243,7 +278,7 @@ ...@@ -243,7 +278,7 @@
} }
.tableDetail{ .tableDetail{
height: 46px; height: vh(46);
width: 100%; width: 100%;
.ant-table-thead > tr > th { .ant-table-thead > tr > th {
background:rgba(0,185,255,0.38)!important; background:rgba(0,185,255,0.38)!important;
...@@ -252,20 +287,20 @@ ...@@ -252,20 +287,20 @@
font-weight:bold; font-weight:bold;
color:rgba(255,255,255,1); color:rgba(255,255,255,1);
text-align: center; text-align: center;
padding: 9px 10px!important; padding: vh(9) vw(10)!important;
opacity: 1; opacity: 1;
} }
.ant-table-body > tr{ .ant-table-body > tr{
margin: 0px 14px!important; margin: 0px vw(14)!important;
} }
.ant-table-tbody > tr > td{ .ant-table-tbody > tr > td{
font-size:20px!important; font-size: pxToRem(20px)!important;
font-family:Microsoft YaHei; font-family:Microsoft YaHei;
color:rgba(255,255,255,1); color:rgba(255,255,255,1);
font-weight:bold; font-weight:bold;
border: 0; border: 0;
text-align: center; text-align: center;
padding: 9px 10px!important; padding:vh(9) vw(10)!important;
} }
} }
...@@ -280,23 +315,23 @@ ...@@ -280,23 +315,23 @@
} }
.blockTwoContent{ .blockTwoContent{
width: 699px; width: vw(699);
height: 342px; height: vh(342);
display: inline-block; display: inline-block;
.oneChildLayout { .oneChildLayout {
height: 342px; height: vh(342);
.oneChildSider{ .oneChildSider{
background-color:transparent; background-color:transparent;
height: 342px; height: vh(342);
.twoChildHeader{ .twoChildHeader{
background:'none'; background:'none';
height:38px; height:vh(38);
width: 277px; width: vh(277);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.twoHeaderContent{ .twoHeaderContent{
height:304px; height:vh(304);
width: 661px; width:vh(661);
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
} }
...@@ -304,10 +339,10 @@ ...@@ -304,10 +339,10 @@
} }
.situation-map-legend { .situation-map-legend {
color: ivory; color: ivory;
font-size: 18px; font-size: pxToRem(18px);
display: inline-block; display: inline-block;
margin-top: 380px; margin-top: vh(380);
margin-left: 80px; margin-left: vw(80);
position: initial; position: initial;
width: 108px; width: 108px;
height:30px; height:30px;
...@@ -315,13 +350,13 @@ ...@@ -315,13 +350,13 @@
height:30px; height:30px;
.situation-map-legend-block{ .situation-map-legend-block{
float: left; float: left;
width: 20px; width: vw(20);
height: 15px; height: vh(15);
margin-right: -10px; margin-right: vw(-10);
} }
div{ div{
height: 30px; height: vh(30);
line-height: 15px; line-height: vh(15);
} }
} }
...@@ -331,7 +366,7 @@ ...@@ -331,7 +366,7 @@
.risk-degree-pie-child { .risk-degree-pie-child {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 310px;; height: vh(310);;
.risk-degree-pie1 { .risk-degree-pie1 {
display: inline-block; display: inline-block;
...@@ -358,11 +393,11 @@ ...@@ -358,11 +393,11 @@
.risk-top-ten-content{ .risk-top-ten-content{
color: '#fff'; color: '#fff';
font-size: 14px; font-size: pxToRem(14px);
width: 100%; width: 100%;
height: 100%; height: 100%;
.top-ten-content{ .top-ten-content{
padding:pxToRem(30px) pxToRem(20px); padding:vh(30) vw(20);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
...@@ -372,39 +407,39 @@ ...@@ -372,39 +407,39 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #fff; color: #fff;
font-size: 15px; font-size: pxToRem(15px);
.top-risk{ .top-risk{
display: block; display: block;
margin-left: pxToRem(16px); margin-left: vw(16);
width: pxToRem(320px); width: vw(320);
.top-ten-item-middle{ .top-ten-item-middle{
width:pxToRem(248px); width: vw(248);
height: pxToRem(16px); height: vh(16);
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #1C6264; background-color: #1C6264;
.top-ten-item-middlelinear{ .top-ten-item-middlelinear{
display: flex; display: flex;
height: pxToRem(16px)!important; height: vh(16)!important;
background-image: linear-gradient(to right, #1C6264 , #00FFF7); background-image: linear-gradient(to right, #1C6264 , #00FFF7);
} }
} }
.top-ten-item-middleRed{ .top-ten-item-middleRed{
margin-top: pxToRem(15px); margin-top: vh(15);
width:pxToRem(248px); width:vw(248);
height: pxToRem(16px); height:vh(16);
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #1C6264; background-color: #1C6264;
.top-ten-item-middlelinearRed{ .top-ten-item-middlelinearRed{
display: flex; display: flex;
height: pxToRem(16px)!important; height: vh(16)!important;
background-image: linear-gradient(172deg,rgba(255,0,0,1) 0%,rgba(255,128,0,0) 100%); background-image: linear-gradient(172deg,rgba(255,0,0,1) 0%,rgba(255,128,0,0) 100%);
} }
} }
} }
.top-ten-item-bottom{ .top-ten-item-bottom{
width:pxToRem(36px); width:vw(36);
display: pxToRem(16px); display: pxToRem(16px);
flex-direction:row; flex-direction:row;
justify-content: flex-end; justify-content: flex-end;
...@@ -412,4 +447,3 @@ ...@@ -412,4 +447,3 @@
} }
} }
} }
\ No newline at end of file
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
} }
.sou { .sou {
height: 10%; height: vh(66);
width: 100%; width: 100%;
display: flex; display: flex;
top: -2%; top: -2%;
...@@ -284,7 +284,7 @@ ...@@ -284,7 +284,7 @@
position: relative; position: relative;
text-align: center; text-align: center;
/* vertical-align: middle; */ /* vertical-align: middle; */
top: 29%; top: 27%;
margin-left: 12%; margin-left: 12%;
.search-one-button { .search-one-button {
...@@ -446,6 +446,7 @@ ...@@ -446,6 +446,7 @@
bottom: vh(1); bottom: vh(1);
right: vw(-2); right: vw(-2);
content: '' !important; content: '' !important;
top: vh(-5);
} }
.three-font { .three-font {
......
...@@ -140,7 +140,7 @@ class IncidenceSeverityMatrix extends Component { ...@@ -140,7 +140,7 @@ class IncidenceSeverityMatrix extends Component {
const option = this.getOptions(); const option = this.getOptions();
return ( return (
<div className="risk-incidence-severity-matrix"> <div className="risk-incidence-severity-matrix">
<AmosEcharts option={option} style={{ height: '330px', width: '660px' }} /> <AmosEcharts option={option} className ="div-severity-echarts" />
</div> </div>
); );
} }
......
...@@ -50,7 +50,7 @@ class RiskAssessment extends Component { ...@@ -50,7 +50,7 @@ class RiskAssessment extends Component {
{this.props.detailTitle} {this.props.detailTitle}
</div> </div>
<div className="headerRight" style={{ display: 'inline' }}> <div className="headerRight" style={{ display: 'inline' }}>
<img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{ marginTop: 3 }} /> <img src="/src/assets/detail/return.png" onClick={this.onClick} className="img-headerRight" />
</div> </div>
</Header> </Header>
<Layout> <Layout>
...@@ -60,7 +60,7 @@ class RiskAssessment extends Component { ...@@ -60,7 +60,7 @@ class RiskAssessment extends Component {
<img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} /> <img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header> </Header>
<Content className="oneHeaderContent"> <Content className="oneHeaderContent">
<img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35, marginLeft: 160 }} /> <img className="image-div" src="/src/assets/detail/RPNr.png" />
{this.getLegend()} {this.getLegend()}
</Content> </Content>
</Header> </Header>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment