feat:新增弹窗页面样式
吴延福
parent
9b147841d4
commit
5b6fa34bb9
|
|
@ -4,33 +4,54 @@
|
|||
<div class="border r-t"></div>
|
||||
<div class="border r-b"></div>
|
||||
<div class="border l-b"></div>
|
||||
<div class="title">
|
||||
<i class="el-icon-warning" ></i>
|
||||
告警类型{{$route.query.typeName}}</div>
|
||||
<div class="content">
|
||||
<span>上报人员：</span>
|
||||
<p>
|
||||
<span>{{$route.query.reporter}}</span>
|
||||
<a :href="'tel:'+$route.query.tel" class="tel">
|
||||
<img src="~@/assets/img/phone.png" alt=""> 一键联系
|
||||
</a>
|
||||
</p>
|
||||
<div class="content mg-b-20">
|
||||
<div class="flow-light-box">
|
||||
<div class="img-box"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span>告警内容：</span>
|
||||
<p>{{$route.query.content}}</p>
|
||||
<div class="content col" style="justify-content: center;s">
|
||||
<div class="mg-b-5 title">顶层沸溢火</div>
|
||||
<div class="content disable opacity5 mg-b-5">
|
||||
难度：
|
||||
<el-rate
|
||||
v-model="star"
|
||||
:colors="colors">
|
||||
</el-rate>
|
||||
</div>
|
||||
<div class="content disable opacity5">
|
||||
火点：5个
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mg-b-20 title">
|
||||
训练说明
|
||||
</div>
|
||||
<div class="opacity5 mg-b-20">
|
||||
模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗
|
||||
</div>
|
||||
<div class="mg-b-20 title">
|
||||
训练要点
|
||||
</div>
|
||||
<div class="opacity5 mg-b-20">
|
||||
模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@keyframes turnRound {
|
||||
0%{
|
||||
transform:rotate(0);
|
||||
}
|
||||
100%{
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
.pop-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
opacity: 1;
|
||||
border: 1px solid #FFFFFF;
|
||||
background: linear-gradient(180deg, rgba(176,38,38,0.6) 0%, rgba(113,41,41,0.8) 22%, rgba(0,0,0,0.8) 100%);
|
||||
color: #E8E8E8;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%);
|
||||
padding: 30px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
|
@ -60,55 +81,52 @@
|
|||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
.title{
|
||||
.flow-light-box{
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding: 20px 0;
|
||||
i{
|
||||
margin-right: 10px;
|
||||
color: #F00;
|
||||
font-size: 20px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
&::before{
|
||||
content: "";
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: block;
|
||||
flex: none;
|
||||
background: conic-gradient(#F5F500 ,#F4FF00,#FF8600 ,#FF0000 ,rgba(255,255,255,0.83) ,transparent,transparent,transparent,transparent );
|
||||
animation: turnRound 1.5s linear infinite;
|
||||
}
|
||||
.img-box{
|
||||
inset: 2px;
|
||||
border-radius: 6px;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
span{
|
||||
align-self: flex-start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
p{
|
||||
width: 1px;
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin:0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: 24px;
|
||||
word-break: break-all;
|
||||
align-self: flex-start;
|
||||
padding: 0;
|
||||
.tel{
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 16px;
|
||||
border: 1px solid #FFFFFF;
|
||||
img{
|
||||
margin-right: 5px;
|
||||
&.col{
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 16px;
|
||||
}
|
||||
.opacity5{
|
||||
opacity: 0.5;
|
||||
}
|
||||
.disable{
|
||||
pointer-events: none;
|
||||
}
|
||||
.mg-b-20{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mg-b-5{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -119,12 +137,12 @@ declare const ue
|
|||
export default Vue.extend({
|
||||
data(){
|
||||
return{
|
||||
params:JSON.stringify(this.$route)
|
||||
params:{},
|
||||
colors:["#FFF","#FFF","#FFF"],
|
||||
star:3
|
||||
}
|
||||
},
|
||||
created(){
|
||||
console.log(this.params)
|
||||
this.params = new URLSearchParams(location.href)
|
||||
ue.dtspoi.postevent(JSON.stringify(this.$route))
|
||||
//
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
|
||||
|
||||
<div class="top-bg">
|
||||
<div class="top-bg" :style="{top:hideAllPanel?'-90px':0}">
|
||||
<HeaderComponent @onDrawer="drawerChange($event)" @onNavChanged="navChange($event)"></HeaderComponent>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
pointer-events: none;
|
||||
height: 90px;
|
||||
background: linear-gradient(180deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
|
||||
transition:top 2s;
|
||||
}
|
||||
|
||||
.fixed-btn {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ export default class OverViewComponent extends BaseComponent {
|
|||
|
||||
// 是否展开图层
|
||||
public openLayerDrawer = false;
|
||||
// 是否隐藏除地图外所有板块
|
||||
public hideAllPanel = false;
|
||||
created(){
|
||||
this.currentLayers = this.getCurrentLayers()
|
||||
}
|
||||
|
|
@ -112,6 +114,11 @@ export default class OverViewComponent extends BaseComponent {
|
|||
}
|
||||
}
|
||||
|
||||
public toggleAllPanel(){
|
||||
this.hideAllPanel = true;
|
||||
this.drawerChange(false)
|
||||
}
|
||||
|
||||
public toggleHeight(){
|
||||
this.openLayerDrawer = !this.openLayerDrawer;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue