From abdc7313b9e2c5a3e09d42cbaee48c6f131d7173 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 17 八月 2022 09:14:43 +0800
Subject: [PATCH] lct

---
 src/views/intellectInspect/intelligentLine/index.vue |  899 +++++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 597 insertions(+), 302 deletions(-)

diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index 50d8ed4..da39b51 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -142,7 +142,7 @@
             const res = await lineApi().getUrl();
             if (res.data.code === '200') {
                 state.path = 'http://' + res.data.data.ip + ':' + res.data.data.port + '/ws/test/'
-                if (typeof window.WebSocket === 'undefined') {
+                if (typeof WebSocket === 'undefined') {
                     alert('您的浏览器不支持socket');
                 } else {
                     // 实例化socket
@@ -152,7 +152,7 @@
                     console.log(url,'url',uid,'uid')
                     url = url.replace('https', 'ws').replace('http', 'ws');
                     console.log(url, '获取地址');
-                    state.socket = new window.WebSocket(url);
+                    state.socket = new WebSocket(url);
                     // 监听socket连接
                     state.socket.onopen = () => {
                         console.log('socket连接成功');
@@ -231,120 +231,605 @@
         };
     }
 };
-// export default {
-//   name: 'NewForm',
-//   props: {
-//
-//   },
-//   data(){
-//     return{
-//       present: '',
-//       isScreenfull: false,
-//       path: "http://192.168.0.29:8008/ws/test/",
-//       socket: null,
-//       socketData: '',
-//       data: []
-//     }
-//   },
-//   created() {
-//     setInterval(() => {
-//       this.present = new Date().toLocaleString()
-//     }, 1000)
-//   },
-//   mounted () {
-//     // 初始化
-//     this.init()
-//     // this.getLine()
-//   },
-//   methods:{
-//     goBack(){
-//       window.history.go(-1)
-//     },
-//
-//     async getLine (){
-//       let res = await lineApi().getLine({ id: '80647416891768832' });
-//       if (res.data.code === '200') {
-//         console.log(res.data.data,'获取巡检点')
-//         this.data = res.data.data
-//         console.log(this.data,'---')
-//       } else {
-//         ElMessage({
-//           type: 'warning',
-//           message: res.data.msg
-//         });
-//       }
-//     },
-//
-//     // 全屏点击时
-//     onScreenfullClick(){
-//       const t = this
-//       if (!screenfull.isEnabled) {
-//         ElMessage.warning('暂不不支持全屏');
-//         return false;
-//       }
-//       screenfull.toggle();
-//       screenfull.on('change', () => {
-//         if (screenfull.isFullscreen) {
-//           t.isScreenfull = true
-//         }
-//         else{
-//           t.isScreenfull = false
-//         }
-//       });
-//     },
-//
-//     // socket获取数据
-//     init: function () {
-//       if(typeof(window.WebSocket) === "undefined"){
-//         alert("您的浏览器不支持socket")
-//       }else{
-//         // 实例化socket
-//         var url = this.path + '80938081556545536'
-//         url = url.replace("https","ws").replace("http","ws");
-//         console.log(url,'获取地址')
-//         this.socket = new window.WebSocket(url)
-//         // 监听socket连接
-//         this.socket.onopen = this.open
-//         // 监听socket错误信息
-//         this.socket.onerror = this.error
-//         // 监听socket消息
-//         this.socket.onmessage = this.getMessage
-//       }
-//     },
-//     open: function () {
-//       console.log("socket连接成功")
-//     },
-//     error: function () {
-//       console.log("连接错误")
-//     },
-//     getMessage: function (msg) {
-//       console.log(typeof msg.data,'type')
-//       if(msg.data =='连接成功') return
-//       this.socketData = msg.data
-//       console.log(JSON.parse(this.socketData),'------------------',)
-//       if(typeof JSON.parse(this.socketData) == Array){
-//         this.data = JSON.parse(this.socketData)
-//         console.log(this.data)
-//       }
-//       // console.log(msg,'msg')
-//       // console.log(this.data,'data-------')
-//     },
-//     send: function () {
-//       this.socket.send(params)
-//     },
-//     close: function () {
-//       console.log("socket已经关闭")
-//     }
-//   },
-//   destroyed () {
-//     // 销毁监听
-//     this.socket.onclose = this.close
-//   }
-// }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+    @media screen and (min-width: 1366px) {
+        .big-title {
+            font-size: 28px;
+            margin: 10px 0 20px;
+        }
+        .btns {
+            position: absolute;
+            z-index: 99999;
+            right: 60px;
+            top: 40px;
+            div {
+                font-size: 16px;
+                color: #00ffff;
+            }
+        }
+        .line-item {
+            width: calc((100vw - 40px) / 6);
+            padding-left: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-right: 20px;
+            flex-wrap: nowrap;
+
+            .picbox {
+                width: 100%;
+                height: 180px;
+                padding: 10px;
+                margin-bottom: 40px;
+                box-sizing: border-box;
+
+                img {
+                    display: block;
+                    width: 100%;
+                    height: 100px;
+                    margin-bottom: 8px;
+                    border-radius: 4px;
+                }
+                p {
+                    font-size: 14px;
+                    white-space: nowrap;
+                    color: rgba(255, 255, 255, 0.8);
+                    margin-top: 10px;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        .item {
+            width: calc((100vw - 40px) / 6);
+            height: calc((100vh - 130px) / 5);
+            padding: 0 20px 20px 50px;
+            position: relative;
+            box-sizing: border-box;
+            border-left: 1px solid #36fcfc;
+
+            &:last-of-type {
+                border: none;
+            }
+
+            section {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                position: absolute;
+                border: 1px solid rgba(0, 225, 255, 0.6);
+                top: -12px;
+                left: 10px;
+
+                .dot {
+                    position: absolute;
+                    width: 12px;
+                    height: 12px;
+                    left: 5px;
+                    top: 5px;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border: 1px solid #0072ff;
+                    border-radius: 50%;
+                    background-color: #00e1ff;
+                    z-index: 2;
+                }
+                .pulse {
+                    position: absolute;
+                    width: 48px;
+                    height: 48px;
+                    left: -13px;
+                    top: -13px;
+                    border: 1px solid #00e1ff;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    z-index: 1;
+                    opacity: 0;
+                    -webkit-animation: warn 2s ease-out;
+                    -moz-animation: warn 2s ease-out;
+                    animation: warn 2s ease-out;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    animation-iteration-count: infinite;
+                    box-shadow: 1px 1px 30px #00e1ff;
+                }
+                .pulse1 {
+                    position: absolute;
+                    width: 48px;
+                    height: 48px;
+                    left: -13px;
+                    top: -13px;
+                    border: 1px solid #00e1ff;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    z-index: 1;
+                    opacity: 0;
+                    -webkit-animation: warn1 2s ease-out;
+                    -moz-animation: warn1 2s ease-out;
+                    animation: warn1 2s ease-out;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    animation-iteration-count: infinite;
+                    box-shadow: 1px 1px 30px #00e1ff;
+                }
+            }
+            & > div {
+                padding: 10px 0;
+                transform: translateY(-14px);
+                border-radius: 8px;
+                background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+                border: 1px solid rgba(54, 252, 252, 1);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                div {
+                    margin-bottom: 5px;
+                    &:last-of-type {
+                        margin-bottom: 0;
+                    }
+                    span {
+                        display: inline-block;
+                        white-space: nowrap;
+                        width: 50%;
+                        font-size: 13px;
+                        color: #fff;
+                        text-align: left;
+
+                        &:first-of-type {
+                            text-align: right;
+                            color: rgba(255, 255, 255, 0.8);
+                        }
+                    }
+                }
+            }
+            .noBorder{
+                border: 1px solid rgba(54, 252, 252, 0.1);
+            }
+            .redBorder{
+                border: 1px solid #ff0000;
+            }
+            p {
+                width: 140px;
+                height: 50px;
+                font-size: 18px;
+                line-height: 48px;
+                text-align: center;
+                color: #fff;
+                border-radius: 8px;
+                background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+                border: 1px solid rgba(54, 252, 252, 0.6);
+            }
+        }
+        .finish-point {
+            position: absolute;
+            width: 90px;
+            height: 90px;
+            border: 2px solid #0072ff;
+            left: -30px;
+            top: -45px;
+            border-radius: 50%;
+
+            & > div {
+                width: 80px;
+                height: 80px;
+                position: absolute;
+                left: 3px;
+                top: 3px;
+                background: #0072ff;
+                border-radius: 50%;
+                color: #fff;
+                font-size: 16px;
+                line-height: 80px;
+                text-align: center;
+                font-weight: bolder;
+            }
+        }
+    }
+
+    @media screen and (min-width: 1200px) and (max-width: 1366px){
+        .big-title {
+            font-size: 28px;
+            margin: 10px 0 20px;
+        }
+        .btns {
+            position: absolute;
+            z-index: 99999;
+            right: 40px;
+            top: 40px;
+            div {
+                font-size: 14px;
+                color: #00ffff;
+            }
+        }
+        .line-item {
+            width: calc((100vw - 40px) / 5);
+            padding-left: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-right: 20px;
+            flex-wrap: nowrap;
+            .picbox {
+                width: 100%;
+                height: 180px;
+                padding: 10px;
+                margin-bottom: 40px;
+                box-sizing: border-box;
+
+                img {
+                    display: block;
+                    width: 100%;
+                    height: 100px;
+                    margin-bottom: 6px;
+                    border-radius: 4px;
+                }
+                p {
+                    font-size: 14px;
+                    white-space: nowrap;
+                    color: rgba(255, 255, 255, 0.8);
+                    margin-top: 10px;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        .item {
+            width: calc((100vw - 40px) / 5);
+            height: calc((100vh - 130px) / 5);
+            padding: 0 20px 20px 40px;
+            position: relative;
+            box-sizing: border-box;
+            border-left: 1px solid #36fcfc;
+
+            &:last-of-type {
+                border: none;
+            }
+
+            section {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                position: absolute;
+                border: 1px solid rgba(0, 225, 255, 0.6);
+                top: -12px;
+                left: 10px;
+
+                .dot {
+                    position: absolute;
+                    width: 12px;
+                    height: 12px;
+                    left: 5px;
+                    top: 5px;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border: 1px solid #0072ff;
+                    border-radius: 50%;
+                    background-color: #00e1ff;
+                    z-index: 2;
+                }
+                .pulse {
+                    position: absolute;
+                    width: 48px;
+                    height: 48px;
+                    left: -13px;
+                    top: -13px;
+                    border: 1px solid #00e1ff;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    z-index: 1;
+                    opacity: 0;
+                    -webkit-animation: warn 2s ease-out;
+                    -moz-animation: warn 2s ease-out;
+                    animation: warn 2s ease-out;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    animation-iteration-count: infinite;
+                    box-shadow: 1px 1px 30px #00e1ff;
+                }
+                .pulse1 {
+                    position: absolute;
+                    width: 48px;
+                    height: 48px;
+                    left: -13px;
+                    top: -13px;
+                    border: 1px solid #00e1ff;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    z-index: 1;
+                    opacity: 0;
+                    -webkit-animation: warn1 2s ease-out;
+                    -moz-animation: warn1 2s ease-out;
+                    animation: warn1 2s ease-out;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    animation-iteration-count: infinite;
+                    box-shadow: 1px 1px 30px #00e1ff;
+                }
+            }
+            & > div {
+                width: 90%;
+                padding: 10px 0;
+                transform: translateY(-14px);
+                border-radius: 8px;
+                background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+                border: 1px solid rgba(54, 252, 252, 1);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                div {
+                    width: 100%;
+                    margin-bottom: 5px;
+                    &:last-of-type {
+                        margin-bottom: 0;
+                    }
+                    span {
+                        display: inline-block;
+                        white-space: nowrap;
+                        width: 50%;
+                        font-size: 13px;
+                        color: #fff;
+                        text-align: left;
+
+                        &:first-of-type {
+                            text-align: right;
+                            color: rgba(255, 255, 255, 0.8);
+                        }
+                    }
+                }
+            }
+            .noBorder{
+                border: 1px solid rgba(54, 252, 252, 0.1);
+            }
+            .redBorder{
+                border: 1px solid #ff0000;
+            }
+            p {
+                width: 140px;
+                height: 50px;
+                font-size: 18px;
+                line-height: 48px;
+                text-align: center;
+                color: #fff;
+                border-radius: 8px;
+                background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+                border: 1px solid rgba(54, 252, 252, 0.6);
+            }
+        }
+        .finish-point {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border: 1px solid #0072ff;
+            left: -20px;
+            top: -40px;
+            border-radius: 50%;
+
+            & > div {
+                width: 70px;
+                height: 70px;
+                position: absolute;
+                left: 4px;
+                top: 4px;
+                background: #0072ff;
+                border-radius: 50%;
+                color: #fff;
+                font-size: 14px;
+                line-height: 70px;
+                text-align: center;
+                font-weight: bolder;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1200px){
+        .big-title {
+            font-size: 20px;
+            margin: 5px 0 10px;
+        }
+        .btns {
+            position: absolute;
+            z-index: 99999;
+            right: 20px;
+            top: 40px;
+            div {
+                font-size: 12px;
+                color: #00ffff;
+            }
+        }
+        .line-item {
+            width: 20vw;
+            padding-left: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-right: 20px;
+            flex-wrap: nowrap;
+            .picbox {
+                width: 100%;
+                height: 160px;
+                padding: 10px;
+                margin-bottom: 30px;
+                box-sizing: border-box;
+
+                img {
+                    display: block;
+                    width: 100%;
+                    height: 80px;
+                    margin-bottom: 10px;
+                    border-radius: 4px;
+                }
+                p {
+                    font-size: 12px;
+                    color: rgba(255, 255, 255, 0.8);
+                    margin-top: 6px;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        .item {
+            width: 20vw;
+            height: calc((100vh - 130px) / 5);
+            padding: 0 0 20px 30px;
+            position: relative;
+            box-sizing: border-box;
+            border-left: 1px solid #36fcfc;
+
+            &:last-of-type {
+                border: none;
+            }
+
+            section {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                position: absolute;
+                border: 1px solid rgba(0, 225, 255, 0.6);
+                top: -12px;
+                left: 2px;
+
+                .dot {
+                    position: absolute;
+                    width: 12px;
+                    height: 12px;
+                    left: 5px;
+                    top: 5px;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border: 1px solid #0072ff;
+                    border-radius: 50%;
+                    background-color: #00e1ff;
+                    z-index: 2;
+                }
+                .pulse {
+                    position: absolute;
+                    width: 48px;
+                    height: 48px;
+                    left: -13px;
+                    top: -13px;
+                    border: 1px solid #00e1ff;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    z-index: 1;
+                    opacity: 0;
+                    -webkit-animation: warn 2s ease-out;
+                    -moz-animation: warn 2s ease-out;
+                    animation: warn 2s ease-out;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    animation-iteration-count: infinite;
+                    box-shadow: 1px 1px 30px #00e1ff;
+                }
+                .pulse1 {
+                    position: absolute;
+                    width: 48px;
+                    height: 48px;
+                    left: -13px;
+                    top: -13px;
+                    border: 1px solid #00e1ff;
+                    -webkit-border-radius: 50%;
+                    -moz-border-radius: 50%;
+                    border-radius: 50%;
+                    z-index: 1;
+                    opacity: 0;
+                    -webkit-animation: warn1 2s ease-out;
+                    -moz-animation: warn1 2s ease-out;
+                    animation: warn1 2s ease-out;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    animation-iteration-count: infinite;
+                    box-shadow: 1px 1px 30px #00e1ff;
+                }
+            }
+            & > div {
+                width: 80%;
+                padding: 4px 0;
+                transform: translateY(-14px);
+                border-radius: 8px;
+                background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+                border: 1px solid rgba(54, 252, 252, 1);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                div {
+                    width: 100%;
+                    margin-bottom: 2px;
+                    &:last-of-type {
+                        margin-bottom: 0;
+                    }
+                    span {
+                        width: 50%;
+                        display: inline-block;
+                        white-space: nowrap;
+                        font-size: 12px;
+                        color: #fff;
+                        text-align: left;
+
+                        &:first-of-type {
+                            text-align: right;
+                            color: rgba(255, 255, 255, 0.8);
+                        }
+                    }
+                }
+            }
+            .noBorder{
+                border: 1px solid rgba(54, 252, 252, 0.1);
+            }
+            .redBorder{
+                border: 1px solid #ff0000;
+            }
+            p {
+                width: 140px;
+                height: 50px;
+                font-size: 18px;
+                line-height: 48px;
+                text-align: center;
+                color: #fff;
+                border-radius: 8px;
+                background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+                border: 1px solid rgba(54, 252, 252, 0.6);
+            }
+        }
+        .finish-point {
+            position: absolute;
+            width: 70px;
+            height: 70px;
+            border: 1px solid #0072ff;
+            left: -10px;
+            top: -35px;
+            border-radius: 50%;
+
+            & > div {
+                width: 60px;
+                height: 60px;
+                position: absolute;
+                left: 4px;
+                top: 4px;
+                background: #0072ff;
+                border-radius: 50%;
+                color: #fff;
+                font-size: 12px;
+                line-height: 60px;
+                text-align: center;
+                font-weight: bolder;
+            }
+        }
+    }
+
 @keyframes warn {
     0% {
         transform: scale(0.3);
@@ -436,9 +921,7 @@
     .big-title {
         height: 40px;
         line-height: 40px;
-        font-size: 28px;
         font-weight: bold;
-        margin: 10px 0 20px;
         text-align: center;
         color: #fff;
         display: flex;
@@ -446,10 +929,6 @@
         justify-content: center;
     }
     .btns {
-        position: absolute;
-        z-index: 99999;
-        right: 60px;
-        top: 40px;
         display: flex;
         align-items: center;
         .fullbtn {
@@ -462,10 +941,6 @@
                 color: #00ffff;
                 margin-right: 10px;
             }
-            div {
-                font-size: 16px;
-                color: #00ffff;
-            }
         }
 
         .backBtn {
@@ -476,10 +951,6 @@
                 width: 14px;
                 height: 14px;
                 margin-right: 10px;
-            }
-            div {
-                font-size: 16px;
-                color: #00ffff;
             }
         }
     }
@@ -506,37 +977,7 @@
             align-items: flex-start;
 
             .line-item {
-                width: calc((100vw - 180px) / 6);
-                padding-left: 20px;
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                margin-right: 20px;
-                flex-wrap: nowrap;
 
-                .picbox {
-                    width: 100%;
-                    height: calc((100vh - 130px) / 5);
-                    padding: 10px;
-                    margin-bottom: 40px;
-                    box-sizing: border-box;
-
-                    img {
-                        display: block;
-                        width: 100%;
-                        height: 100px;
-                        margin-bottom: 10px;
-                        border-radius: 4px;
-                    }
-                    p {
-                        font-size: 14px;
-                        color: rgba(255, 255, 255, 0.8);
-                        margin-top: 10px;
-                        span {
-                            color: #fff;
-                        }
-                    }
-                }
                 .area-head {
                     position: relative;
                     width: 100%;
@@ -677,128 +1118,6 @@
                 .more-info {
                     width: 100%;
 
-                    .item {
-                        width: calc((100vw - 120px) / 6);
-                        height: calc((100vh - 130px) / 5);
-                        padding: 0 50px 20px;
-                        position: relative;
-                        box-sizing: border-box;
-                        border-left: 1px solid #36fcfc;
-
-                        &:last-of-type {
-                            border: none;
-                        }
-
-                        section {
-                            width: 24px;
-                            height: 24px;
-                            border-radius: 50%;
-                            position: absolute;
-                            border: 1px solid rgba(0, 225, 255, 0.6);
-                            top: -12px;
-                            left: 10px;
-
-                            .dot {
-                                position: absolute;
-                                width: 12px;
-                                height: 12px;
-                                left: 5px;
-                                top: 5px;
-                                -webkit-border-radius: 50%;
-                                -moz-border-radius: 50%;
-                                border: 1px solid #0072ff;
-                                border-radius: 50%;
-                                background-color: #00e1ff;
-                                z-index: 2;
-                            }
-                            .pulse {
-                                position: absolute;
-                                width: 48px;
-                                height: 48px;
-                                left: -13px;
-                                top: -13px;
-                                border: 1px solid #00e1ff;
-                                -webkit-border-radius: 50%;
-                                -moz-border-radius: 50%;
-                                border-radius: 50%;
-                                z-index: 1;
-                                opacity: 0;
-                                -webkit-animation: warn 2s ease-out;
-                                -moz-animation: warn 2s ease-out;
-                                animation: warn 2s ease-out;
-                                -webkit-animation-iteration-count: infinite;
-                                -moz-animation-iteration-count: infinite;
-                                animation-iteration-count: infinite;
-                                box-shadow: 1px 1px 30px #00e1ff;
-                            }
-                            .pulse1 {
-                                position: absolute;
-                                width: 48px;
-                                height: 48px;
-                                left: -13px;
-                                top: -13px;
-                                border: 1px solid #00e1ff;
-                                -webkit-border-radius: 50%;
-                                -moz-border-radius: 50%;
-                                border-radius: 50%;
-                                z-index: 1;
-                                opacity: 0;
-                                -webkit-animation: warn1 2s ease-out;
-                                -moz-animation: warn1 2s ease-out;
-                                animation: warn1 2s ease-out;
-                                -webkit-animation-iteration-count: infinite;
-                                -moz-animation-iteration-count: infinite;
-                                animation-iteration-count: infinite;
-                                box-shadow: 1px 1px 30px #00e1ff;
-                            }
-                        }
-                        & > div {
-                            padding: 10px 0;
-                            transform: translateY(-14px);
-                            border-radius: 8px;
-                            background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
-                            border: 1px solid rgba(54, 252, 252, 1);
-                            display: flex;
-                            flex-direction: column;
-                            justify-content: center;
-
-                            div {
-                                margin-bottom: 5px;
-                                &:last-of-type {
-                                    margin-bottom: none;
-                                }
-                                span {
-                                    display: inline-block;
-                                    width: 50%;
-                                    font-size: 13px;
-                                    color: #fff;
-                                    text-align: left;
-
-                                    &:first-of-type {
-                                        text-align: right;
-                                        color: rgba(255, 255, 255, 0.8);
-                                    }
-                                }
-                            }
-                        }
-                        .noBorder{
-                            border: 1px solid rgba(54, 252, 252, 0.1);
-                        }
-                        .redBorder{
-                            border: 1px solid #ff0000;
-                        }
-                        p {
-                            width: 140px;
-                            height: 50px;
-                            font-size: 18px;
-                            line-height: 48px;
-                            text-align: center;
-                            color: #fff;
-                            border-radius: 8px;
-                            background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
-                            border: 1px solid rgba(54, 252, 252, 0.6);
-                        }
-                    }
                     .warning {
                         & > section {
                             border: 1px solid #ff0000;
@@ -850,30 +1169,6 @@
                     width: 100%;
                     height: 80px;
                     border-left: none;
-                    .finish-point {
-                        position: absolute;
-                        width: 90px;
-                        height: 90px;
-                        border: 2px solid #0072ff;
-                        left: -30px;
-                        top: -45px;
-                        border-radius: 50%;
-
-                        & > div {
-                            width: 80px;
-                            height: 80px;
-                            position: absolute;
-                            left: 3px;
-                            top: 3px;
-                            background: #0072ff;
-                            border-radius: 50%;
-                            color: #fff;
-                            font-size: 16px;
-                            line-height: 80px;
-                            text-align: center;
-                            font-weight: bolder;
-                        }
-                    }
                 }
             }
             .pic-tit {

--
Gitblit v1.9.2