You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
387 lines
11 KiB
387 lines
11 KiB
.content{ |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
padding: 0px 10px 10px 10px; |
|
display: flex; |
|
flex-direction: column; |
|
.center { flex: 1; overflow: hidden; position: relative; border: 1px solid #2399FF; box-shadow: 0px 0px 16px #2399FF; } |
|
canvas{ width: 100%; height: 100%; border: none; outline: none; } |
|
} |
|
.loading{ //loading |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
z-index: 99999; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(0,0,0,0.5); |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.anticon{ font-size: 16px; cursor: pointer; } //字体图标 |
|
//文本溢出 |
|
.overflowText{ |
|
overflow: hidden; |
|
text-overflow:ellipsis; |
|
white-space: nowrap; |
|
} |
|
|
|
//头部 功能栏 |
|
.header{ |
|
width: 100%; |
|
height: 50px; |
|
text-align: center; |
|
overflow: hidden; |
|
position: relative; |
|
button { |
|
box-sizing: border-box; |
|
width: 120px; |
|
height: 36px; |
|
line-height: 36px; |
|
color: #fff; |
|
border: 1px solid #23D9FF; |
|
outline: none; |
|
background: linear-gradient(180deg, #000D21 0%, #002751 42%, #57A9FF 100%); |
|
border-radius: 0px; |
|
cursor: pointer; |
|
margin: 7px 10px 0px; |
|
padding: 0; |
|
label{ display: block; width: 100%; height: 100%; cursor: pointer; .anticon{ font-size: 14px; margin-left: 1px; } } |
|
} |
|
.selectFence { background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%); } //选种样式 |
|
.rightFence{ |
|
position: absolute; |
|
top: 0px; |
|
right: 0px; |
|
width: 230px; |
|
height: 50px; |
|
line-height: 50px; |
|
img { cursor: pointer; box-sizing: border-box; width: 36px; height: 36px; margin-left: 10px; } |
|
} |
|
.selectRightTopFast { border: 1px solid #fff; } //选种样式 |
|
} |
|
|
|
//左侧子组件 |
|
.leftChildComponent{ |
|
width: 300px; |
|
height: 90%; |
|
position: absolute; |
|
left: 3%; |
|
top: 0; |
|
bottom: 0; |
|
margin: auto;/*这行代码是关键*/ |
|
z-index: 10; |
|
color: #fff; |
|
transition: left 0.5s; |
|
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); |
|
display: flex; |
|
flex-direction: column; |
|
.leftChildHeader{ |
|
display: flex; |
|
width: 95%; |
|
height: 30px; |
|
line-height: 30px; |
|
margin: 15px auto; |
|
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%); |
|
div:first-child{ |
|
width: 30px; |
|
height: 30px; |
|
border: 1px solid #2399FF; |
|
box-shadow: 0px 2px 8px #2399FF; |
|
border-radius: 50%; |
|
text-align: center; |
|
} |
|
div:nth-child(2){ |
|
box-sizing: border-box; |
|
margin: 0 10px; |
|
font-weight: 900; |
|
font-size: 16px; |
|
letter-spacing: 3px; |
|
font-style: italic; |
|
flex: 1; |
|
.anticon{ margin-left: 65px; font-size: 18px; color: #23D9FF; vertical-align: -4px; } |
|
.anticon:last-child { margin-left: 10px; } |
|
} |
|
div:last-child{ |
|
width: 30px; |
|
height: 30px; |
|
text-align: center; |
|
cursor: pointer; |
|
.anticon{ color: #91CCFF; } //字体图标 |
|
} |
|
} |
|
.leftChildCenter{ |
|
flex: 1; |
|
overflow: hidden; |
|
} |
|
} |
|
|
|
//左侧建筑 |
|
.showLeftBuilding{ |
|
width: 30px; |
|
height: 30px; |
|
line-height: 30px; |
|
text-align: center; |
|
position: absolute; |
|
left: 0px; |
|
top: 50%; |
|
margin-top: -15px; |
|
color: #48A5FF; |
|
background: rgba(0,17,33,0.7); |
|
border-radius: 0px 50% 50% 0px; |
|
} |
|
.leftBuilding{ |
|
width: 230px; |
|
height: 70%; |
|
position: absolute; |
|
left: 0px; |
|
top: 0; |
|
bottom: 0; |
|
margin: auto;/*这行代码是关键*/ |
|
background: rgba(0,17,33,0.7); |
|
border-radius: 0px 10px 10px 0px; |
|
margin-left: 0; |
|
transition: margin-left 0.5s; |
|
display: flex; |
|
flex-direction: column; |
|
.hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 1; } |
|
.leftHeader { |
|
overflow: hidden; |
|
text-align: center; |
|
margin-top: -15px; |
|
h1 { font-size: 18px; color: #fff; margin-bottom: 10px; } |
|
button { width: 90%; } |
|
} |
|
.leftCenter{ |
|
flex: 1; |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
.everyBuilding { |
|
height: 30px; |
|
line-height: 30px; |
|
margin-top: 5px; |
|
box-sizing: border-box; |
|
padding-left: 5px; |
|
color: #fff; |
|
font-size: 16px; |
|
display: flex; |
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
.modelTitle { font-size: 14px; } |
|
label { display: block; } |
|
} |
|
.selectLeftBuilding { background-color: #2196f3; } //选中样式 |
|
} |
|
} |
|
.isShowLeftBuilding{ //隐藏 动态效果 |
|
margin-left: -300px; |
|
transition: margin-left 0.5s; |
|
} |
|
|
|
//右侧属性栏 |
|
.nature{ |
|
width: 230px; |
|
position: absolute; |
|
top: 1%; |
|
right: 1%; |
|
color: #C4E2FC; |
|
font-size: 14px; |
|
border: 1px solid rgba(54, 162, 255, 0.47843137254901963); |
|
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); |
|
.natureHeader{ text-align: right; height: 10px; .anticon{ font-size: 18px; margin: 5px 5px 0 0; } } |
|
.natureContent{ |
|
box-sizing: border-box; |
|
padding: 0 20px; |
|
margin: 5px 0; |
|
.natureTitle{ margin-bottom: 5px; height: 20px; line-height: 20px; .ant-checkbox-wrapper{ color: #fff; } } |
|
input{ width: 100%; height: 28px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; } |
|
textarea{ width: 100%; height: 75px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; } |
|
.natureImg{ margin-bottom: 5px; position: relative; img{ width: 120px; height: auto; max-height: 100px; } } |
|
.natureUpload{ margin: 0; text-align: center; width: 50px; height: 50px; line-height: 50px; } |
|
} |
|
} |
|
.natureLook{ |
|
color: #fff; |
|
.naturePosition{ |
|
padding: 20px; |
|
position: relative; |
|
.positionLeftTop { position: absolute; width: 10px; height: 10px; left: -1px; top: -1px; border-left: 2px solid #2399FF; border-top: 2px solid #2399FF; } //左上角 |
|
.positionLeftBottom { position: absolute; width: 10px; height: 10px; left: -1px; bottom: -1px; border-left: 2px solid #2399FF; border-bottom: 2px solid #2399FF; } //左下角 |
|
.positionRightTop { position: absolute; width: 10px; height: 10px; right: -1px; top: -1px; border-right: 2px solid #2399FF; border-top: 2px solid #2399FF; } //右上角 |
|
.positionRightBottom { position: absolute; width: 10px; height: 10px; right: -1px; bottom: -1px; border-right: 2px solid #2399FF; border-bottom: 2px solid #2399FF; } //右下角 |
|
} |
|
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; } |
|
.flowPower{ |
|
width: 200px; |
|
height: 50px; |
|
display: flex; |
|
font-size: 12px; |
|
margin-bottom: 8px; |
|
div{ flex: 1; line-height: 50px; margin-left: -10px; } |
|
img { width: 40%; height: auto; vertical-align: top; } |
|
label { display: inline-block; width: 60%; height: 100%; overflow: hidden; } |
|
p{ width: 100%; height: 25px; line-height: 25px; margin: 0; } |
|
} |
|
.everyNature{ |
|
margin-bottom: 8px; |
|
font-size: 12px; |
|
display: flex; |
|
label{ display: block; flex: 1; } |
|
span{ display: block; width: 60px; height: 100%; } |
|
} |
|
} |
|
|
|
//右侧图标栏 |
|
.rightIcons{ |
|
width: 60px; |
|
height: 260px; |
|
position: absolute; |
|
top: 10%; |
|
right: 1%; |
|
color: #fff; |
|
background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); |
|
overflow: hidden; |
|
.autoScroll{ width: 30px; text-align: center; } |
|
.bottomCenter::-webkit-scrollbar { display: none; } |
|
.bottomCenter { |
|
scrollbar-width: none; /* firefox */ |
|
-ms-overflow-style: none; /* IE 10+ */ |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
} |
|
.bottomCenter{ |
|
width: 100%; |
|
height: 100%; |
|
text-align: center; |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
.everyIcon { |
|
width: 60px; |
|
line-height: normal; |
|
text-align: center; |
|
display: inline-block; |
|
img { width: 40px; height: 40px; margin-top: 3px; cursor: pointer; } |
|
p { margin-bottom: 3px; font-size: 12px; word-break: break-all; } |
|
} |
|
} |
|
.selectLeftIcon { background: rgb(0,128,255,0.5); } //选中样式 |
|
} |
|
|
|
//右上角快捷栏 |
|
.rightTopFast{ |
|
max-width: 400px; |
|
height: 38px; |
|
position: absolute; |
|
right: 1px; |
|
top: 1%; |
|
display: flex; |
|
>div { height: 38px; border-radius: 5px; } |
|
button { |
|
width: 38px; |
|
height: 38px; |
|
border: none; |
|
outline: none; |
|
background-color: transparent; |
|
color: #fff; |
|
cursor: pointer; |
|
padding: 0; |
|
} |
|
.save{ |
|
margin: 0 10px; |
|
button{ background-color: #0080FF; border-radius: 5px; } |
|
button:first-child{ margin-right: 10px; } |
|
.anticon{ font-size: 20px; line-height: 40px; } //字体图标 |
|
img { cursor: pointer; width: 38px; height: 38px; vertical-align: top; } |
|
} |
|
.publicFast { |
|
padding: 0px 3px; |
|
background-color: rgba(0,0,0,0.5); |
|
} |
|
.leftFast { |
|
:first-child{ background: url(../../../assets/images/translationThree.png) no-repeat center; } |
|
:nth-child(2){ background: url(../../../assets/images/revolveThree.png) no-repeat center; } |
|
:nth-child(3){ background: url(../../../assets/images/scaleThree.png) no-repeat center; } |
|
:nth-child(4){ background: url(../../../assets/images/adsorb.png) no-repeat center; } |
|
:nth-child(5){ background: url(../../../assets/images/verticalView.png) no-repeat center; } |
|
.leftFastIsTure { border: 1px solid #fff; } //吸附样式 |
|
} |
|
.leftFunction { |
|
margin-right: 10px; |
|
} |
|
.selectRightTopFast { border: 1px solid #fff; } //选种样式 |
|
} |
|
|
|
//左右侧栏 上移 |
|
.publicMoveUp{ |
|
height: 70%; |
|
top: 10%; |
|
bottom: auto; |
|
} |
|
//底部处置预案 |
|
.bottomPlan{ |
|
width: 95%; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 1%; |
|
margin: auto;/*这行代码是关键*/ |
|
color: #fff; |
|
.pulicPlanDiv{ width: 100%; padding: 0 15px; overflow: hidden; background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%); } |
|
.bottomPlanHeader{ |
|
height: 80px; |
|
display: flex; |
|
align-items: center; |
|
box-shadow: 0px 0px 6px #2399FF; |
|
.planHeaderText{ |
|
flex: 1; |
|
font-size: 14px; |
|
p{ margin: 0; height: 20px; line-height: 18px; } |
|
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; } |
|
textarea{ width: 100%; height: 50px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; } |
|
.lookModelTextarea{ background: transparent; border: none; } |
|
} |
|
.planHeaderImg{ width: 100px; height: 100%; text-align: center; position: relative; margin: 0 30px; .imgSrc{ width: 100%; height: 100%; } } |
|
.planHeaderVideo{ width: 120px; height: 100%; text-align: center; position: relative; video{ width: 100%; height: 100%; } } |
|
} |
|
.bottomPlanCenter{ |
|
height: 35px; |
|
line-height: 38px; |
|
display: flex; |
|
overflow: hidden; |
|
label{ |
|
display: block; |
|
} |
|
label:first-child{ |
|
width: 15%; |
|
height: 100%; |
|
text-align: center; |
|
button { |
|
width: 60%; |
|
height: 30px; |
|
line-height: 30px; |
|
color: #23D9FF; |
|
//padding: 0; |
|
background: rgba(35, 153, 255, 0.41); |
|
border: 1px solid rgba(35, 217, 255, 0.4); |
|
} |
|
} |
|
label:nth-child(2){ |
|
flex: 1; |
|
display: flex; |
|
overflow: hidden; |
|
.progress{ |
|
display: flex; |
|
div { flex: 1; line-height: 30px; } |
|
img{ width: 27px; height: 35px; display: block; cursor: pointer; } |
|
} |
|
} |
|
label:last-child{ |
|
width: 15%; |
|
height: 100%; |
|
text-align: center; |
|
color: #fff; |
|
.anticon{ font-size: 20px; margin: 0 10px; } |
|
} |
|
} |
|
} |