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