feat:新增弹窗页面样式

src/popup/pop.component.vue

@@ -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">
+        <div class="content mg-b-20">
-            <i class="el-icon-warning" ></i>
+            <div class="flow-light-box">
-            告警类型{{$route.query.typeName}}</div>
+                <div class="img-box"></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>
-        <div class="content">
+            <div class="content col" style="justify-content: center;s">
-            <span>告警内容：</span> 
+                <div class="mg-b-5 title">顶层沸溢火</div>
-            <p>{{$route.query.content}}</p>
+                <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%);
+    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%);
-    color: #E8E8E8;
     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;
+        justify-content: center;
-        font-size: 16px;
+        overflow: hidden;
-        padding: 20px 0;
+        position: relative;
-        i{
+        margin-right: 15px;
-            margin-right: 10px;
+        &::before{
-            color: #F00;
+            content: "";
-            font-size: 20px;
+            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{
+        &.col{
-            align-self: flex-start;
+            flex-direction: column;
-            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;
         }
     }
+    .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))
         //
     },

src/views/overview.component.html

@@ -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>
 

src/views/overview.component.scss

@@ -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 {

src/views/overview.component.ts

@@ -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;
     }