From 064c6c81fdb2ccf89c5cef81dc61adcc45fcf6ab Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 17 八月 2022 20:41:03 +0800
Subject: [PATCH] Default Changelist

---
 src/views/intellectInspect/intelligentLine/index.vue |  998 ++++++++++++++++++++++++++++++----------------------------
 1 files changed, 517 insertions(+), 481 deletions(-)

diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index 0c02976..6fee9ce 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -105,7 +105,8 @@
     socket: any;
     socketData: string;
     data: Array<any>;
-    id: string
+    id: string;
+    defaultImg: string
 }
 export default {
     name: 'intelligentLine',
@@ -121,7 +122,8 @@
             socketData: '',
             socket: null,
             data: [],
-            id: ''
+            id: '',
+            defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href
         });
 
         onMounted(() => {
@@ -263,23 +265,35 @@
 
             .picbox {
                 width: 100%;
-                height: 180px;
+                height: 200px;
                 padding: 10px;
-                margin-bottom: 40px;
+                margin-bottom: 20px;
                 box-sizing: border-box;
-
-                img {
-                    display: block;
+                .imgbox{
                     width: 100%;
-                    height: 100px;
-                    margin-bottom: 8px;
+                    height: 120px;
+                    position: relative;
+                    margin-bottom: 10px;
                     border-radius: 4px;
+                    overflow: hidden;
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: auto;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                        margin: auto;
+                    }
                 }
+
                 p {
                     font-size: 14px;
                     white-space: nowrap;
                     color: rgba(255, 255, 255, 0.8);
-                    margin-top: 10px;
+                    margin-bottom: 4px;
                     span {
                         color: #fff;
                     }
@@ -289,7 +303,7 @@
         .item {
             width: calc((100vw - 40px) / 6);
             height: calc((100vh - 130px) / 5);
-            padding: 0 20px 20px 50px;
+            padding: 0 40px 20px 50px;
             position: relative;
             box-sizing: border-box;
             border-left: 1px solid #36fcfc;
@@ -464,13 +478,24 @@
                 padding: 10px;
                 margin-bottom: 40px;
                 box-sizing: border-box;
-
-                img {
-                    display: block;
+                .imgbox{
                     width: 100%;
                     height: 100px;
+                    position: relative;
                     margin-bottom: 6px;
                     border-radius: 4px;
+                    overflow: hidden;
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: auto;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                        margin: auto;
+                    }
                 }
                 p {
                     font-size: 14px;
@@ -663,13 +688,24 @@
                 padding: 10px;
                 margin-bottom: 30px;
                 box-sizing: border-box;
-
-                img {
-                    display: block;
+                .imgbox{
                     width: 100%;
                     height: 80px;
+                    position: relative;
                     margin-bottom: 10px;
                     border-radius: 4px;
+                    overflow: hidden;
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: auto;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                        margin: auto;
+                    }
                 }
                 p {
                     font-size: 12px;
@@ -832,533 +868,533 @@
         }
     }
 
-@keyframes warn {
-    0% {
-        transform: scale(0.3);
-        -webkit-transform: scale(0.3);
-        opacity: 0;
-    }
-
-    25% {
-        transform: scale(0.3);
-        -webkit-transform: scale(0.3);
-        opacity: 0.1;
-    }
-
-    50% {
-        transform: scale(0.5);
-        -webkit-transform: scale(0.5);
-        opacity: 0.3;
-    }
-
-    75% {
-        transform: scale(0.8);
-        -webkit-transform: scale(0.8);
-        opacity: 0.6;
-    }
-
-    100% {
-        transform: scale(1);
-        -webkit-transform: scale(1);
-        opacity: 0;
-    }
-}
-
-@keyframes warn1 {
-    0% {
-        transform: scale(0.3);
-        -webkit-transform: scale(0.3);
-        opacity: 0;
-    }
-
-    25% {
-        transform: scale(0.3);
-        -webkit-transform: scale(0.3);
-        opacity: 0.1;
-    }
-
-    50% {
-        transform: scale(0.3);
-        -webkit-transform: scale(0.3);
-        opacity: 0.3;
-    }
-
-    75% {
-        transform: scale(0.5);
-        -webkit-transform: scale(0.5);
-        opacity: 0.6;
-    }
-
-    100% {
-        transform: scale(0.8);
-        -webkit-transform: scale(0.8);
-        opacity: 0;
-    }
-}
-
-@keyframes circle {
-    0% {
-        transform: rotate(0);
-        -webkit-transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-        -webkit-transform: rotate(360deg);
-    }
-}
-@keyframes run {
-    to {
-        transform: translateX(calc((100vw - 180px) / 6 - 80px));
-    }
-}
-.container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center;
-    background-size: 100% 100%;
-    .big-title {
-        height: 40px;
-        line-height: 40px;
-        font-weight: bold;
-        text-align: center;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .btns {
-        display: flex;
-        align-items: center;
-        .fullbtn {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            margin-right: 20px;
-            .toFull {
-                font-weight: bolder;
-                color: #00ffff;
-                margin-right: 10px;
-            }
+    @keyframes warn {
+        0% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0;
         }
 
-        .backBtn {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            img {
-                width: 14px;
-                height: 14px;
-                margin-right: 10px;
-            }
+        25% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.1;
+        }
+
+        50% {
+            transform: scale(0.5);
+            -webkit-transform: scale(0.5);
+            opacity: 0.3;
+        }
+
+        75% {
+            transform: scale(0.8);
+            -webkit-transform: scale(0.8);
+            opacity: 0.6;
+        }
+
+        100% {
+            transform: scale(1);
+            -webkit-transform: scale(1);
+            opacity: 0;
         }
     }
-    .blocks {
+
+    @keyframes warn1 {
+        0% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0;
+        }
+
+        25% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.1;
+        }
+
+        50% {
+            transform: scale(0.3);
+            -webkit-transform: scale(0.3);
+            opacity: 0.3;
+        }
+
+        75% {
+            transform: scale(0.5);
+            -webkit-transform: scale(0.5);
+            opacity: 0.6;
+        }
+
+        100% {
+            transform: scale(0.8);
+            -webkit-transform: scale(0.8);
+            opacity: 0;
+        }
+    }
+
+    @keyframes circle {
+        0% {
+            transform: rotate(0);
+            -webkit-transform: rotate(0);
+        }
+        100% {
+            transform: rotate(360deg);
+            -webkit-transform: rotate(360deg);
+        }
+    }
+    @keyframes run {
+        to {
+            transform: translateX(calc((100vw - 180px) / 6 - 80px));
+        }
+    }
+    .container {
         width: 100%;
-        height: calc(100% - 90px);
-        padding: 10px 40px 35px;
-        box-sizing: border-box;
-
-        &>div{
-            width: 100%;
-            height: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center;
+        background-size: 100% 100%;
+        .big-title {
+            height: 40px;
+            line-height: 40px;
+            font-weight: bold;
+            text-align: center;
+            color: #fff;
             display: flex;
+            align-items: center;
             justify-content: center;
-            align-items: flex-start;
-            overflow: hidden;
-            overflow-x: auto;
-            overflow-y: auto;
         }
-
-        .line-map {
+        .btns {
             display: flex;
-            justify-content: center;
-            align-items: flex-start;
+            align-items: center;
+            .fullbtn {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                margin-right: 20px;
+                .toFull {
+                    font-weight: bolder;
+                    color: #00ffff;
+                    margin-right: 10px;
+                }
+            }
 
-            .line-item {
+            .backBtn {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                img {
+                    width: 14px;
+                    height: 14px;
+                    margin-right: 10px;
+                }
+            }
+        }
+        .blocks {
+            width: 100%;
+            height: calc(100% - 90px);
+            padding: 10px 40px 35px;
+            box-sizing: border-box;
 
-                .area-head {
-                    position: relative;
-                    width: 100%;
-                    height: 80px;
-                    padding-left: 38px;
-                    border-left: 1px solid #36fcfc;
+            &>div{
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: flex-start;
+                overflow: hidden;
+                overflow-x: auto;
+                overflow-y: auto;
+            }
 
-                    .indicator {
-                        width: 36px;
-                        height: 36px;
-                        border-radius: 50%;
-                        position: absolute;
-                        border: 1px solid #00ff66;
-                        top: -18px;
-                        left: -18px;
+            .line-map {
+                display: flex;
+                justify-content: center;
+                align-items: flex-start;
 
-                        .indi-dot {
+                .line-item {
+
+                    .area-head {
+                        position: relative;
+                        width: 100%;
+                        height: 80px;
+                        padding-left: 38px;
+                        border-left: 1px solid #36fcfc;
+
+                        .indicator {
+                            width: 36px;
+                            height: 36px;
+                            border-radius: 50%;
                             position: absolute;
-                            width: 20px;
-                            height: 20px;
-                            left: 7px;
-                            top: 7px;
-                            -webkit-border-radius: 50%;
-                            -moz-border-radius: 50%;
                             border: 1px solid #00ff66;
-                            border-radius: 50%;
-                            background-color: #00ff66;
-                            z-index: 2;
-                        }
-                        .indi-pulse {
-                            position: absolute;
-                            width: 56px;
-                            height: 56px;
-                            left: -11px;
-                            top: -11px;
-                            border: 1px solid #00ff66;
-                            -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 #00ff66;
-                        }
-                        .indi-pulse1 {
-                            position: absolute;
-                            width: 56px;
-                            height: 56px;
-                            left: -11px;
-                            top: -11px;
-                            border: 1px solid #3399ff;
-                            -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 #3399ff;
-                        }
-                    }
-                    .someUndone {
-                        width: 36px;
-                        height: 36px;
-                        border-radius: 50%;
-                        position: absolute;
-                        border: 1px solid #ccc;
-                        top: -18px;
-                        left: -18px;
+                            top: -18px;
+                            left: -18px;
 
-                        .indi-dot {
+                            .indi-dot {
+                                position: absolute;
+                                width: 20px;
+                                height: 20px;
+                                left: 7px;
+                                top: 7px;
+                                -webkit-border-radius: 50%;
+                                -moz-border-radius: 50%;
+                                border: 1px solid #00ff66;
+                                border-radius: 50%;
+                                background-color: #00ff66;
+                                z-index: 2;
+                            }
+                            .indi-pulse {
+                                position: absolute;
+                                width: 56px;
+                                height: 56px;
+                                left: -11px;
+                                top: -11px;
+                                border: 1px solid #00ff66;
+                                -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 #00ff66;
+                            }
+                            .indi-pulse1 {
+                                position: absolute;
+                                width: 56px;
+                                height: 56px;
+                                left: -11px;
+                                top: -11px;
+                                border: 1px solid #3399ff;
+                                -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 #3399ff;
+                            }
+                        }
+                        .someUndone {
+                            width: 36px;
+                            height: 36px;
+                            border-radius: 50%;
                             position: absolute;
-                            width: 20px;
-                            height: 20px;
-                            left: 7px;
-                            top: 7px;
-                            -webkit-border-radius: 50%;
-                            -moz-border-radius: 50%;
                             border: 1px solid #ccc;
-                            border-radius: 50%;
-                            background-color: #ccc;
-                            z-index: 2;
-                        }
-                    }
-                    .somewarning {
-                        width: 36px;
-                        height: 36px;
-                        border-radius: 50%;
-                        position: absolute;
-                        border: 1px solid #ff0000;
-                        top: -18px;
-                        left: -18px;
+                            top: -18px;
+                            left: -18px;
 
-                        .indi-dot {
+                            .indi-dot {
+                                position: absolute;
+                                width: 20px;
+                                height: 20px;
+                                left: 7px;
+                                top: 7px;
+                                -webkit-border-radius: 50%;
+                                -moz-border-radius: 50%;
+                                border: 1px solid #ccc;
+                                border-radius: 50%;
+                                background-color: #ccc;
+                                z-index: 2;
+                            }
+                        }
+                        .somewarning {
+                            width: 36px;
+                            height: 36px;
+                            border-radius: 50%;
                             position: absolute;
-                            width: 20px;
+                            border: 1px solid #ff0000;
+                            top: -18px;
+                            left: -18px;
+
+                            .indi-dot {
+                                position: absolute;
+                                width: 20px;
+                                height: 20px;
+                                left: 7px;
+                                top: 7px;
+                                -webkit-border-radius: 50%;
+                                -moz-border-radius: 50%;
+                                border: 1px solid #ff0000;
+                                border-radius: 50%;
+                                background-color: #ff0000;
+                                z-index: 2;
+                            }
+                        }
+                        .arrow {
+                            position: absolute;
+                            width: 58px;
                             height: 20px;
-                            left: 7px;
-                            top: 7px;
-                            -webkit-border-radius: 50%;
-                            -moz-border-radius: 50%;
-                            border: 1px solid #ff0000;
-                            border-radius: 50%;
-                            background-color: #ff0000;
-                            z-index: 2;
+                            left: 38px;
+                            top: -10px;
+                            background: url('../../../assets/loginPage/arrow-r.png') 0 / cover no-repeat;
+                            animation: run 2s steps(4) 0s infinite;
+                        }
+                        .top-line {
+                            width: 100%;
+                            border-top: 2px solid #36fcfc;
+                        }
+                        .fadeLine {
+                            width: 100%;
+                            border-top: 1px solid rgba(54,252,252,.6);
                         }
                     }
-                    .arrow {
-                        position: absolute;
-                        width: 58px;
-                        height: 20px;
-                        left: 38px;
-                        top: -10px;
-                        background: url('../../../assets/loginPage/arrow-r.png') 0 / cover no-repeat;
-                        animation: run 2s steps(4) 0s infinite;
+                    .fadeBorder {
+                        border-left: 1px solid #ccc;
                     }
-                    .top-line {
+                    .more-info {
                         width: 100%;
-                        border-top: 2px solid #36fcfc;
-                    }
-                    .fadeLine {
-                        width: 100%;
-                        border-top: 1px solid rgba(54,252,252,.6);
-                    }
-                }
-                .fadeBorder {
-                    border-left: 1px solid #ccc;
-                }
-                .more-info {
-                    width: 100%;
 
-                    .warning {
-                        & > section {
-                            border: 1px solid #ff0000;
+                        .warning {
+                            & > section {
+                                border: 1px solid #ff0000;
 
-                            .dot {
-                                border: 1px solid #ff0000;
-                                background: #ff0000;
+                                .dot {
+                                    border: 1px solid #ff0000;
+                                    background: #ff0000;
+                                }
+                                .pulse {
+                                    border: 1px solid #ff0000;
+                                    box-shadow: 1px 1px 30px #ff0000;
+                                }
+                                .pulse1 {
+                                    border: 1px solid #ff0000;
+                                    box-shadow: 1px 1px 30px #ff0000;
+                                }
                             }
-                            .pulse {
-                                border: 1px solid #ff0000;
-                                box-shadow: 1px 1px 30px #ff0000;
-                            }
-                            .pulse1 {
-                                border: 1px solid #ff0000;
-                                box-shadow: 1px 1px 30px #ff0000;
+
+                            & > div {
+                                div {
+                                    span.target {
+                                        color: #ff2929;
+                                        font-weight: bolder;
+                                    }
+                                }
                             }
                         }
+                        .undone {
+                            & > section {
+                                border: 1px solid #ccc;
 
-                        & > div {
-                            div {
-                                span.target {
-                                    color: #ff2929;
-                                    font-weight: bolder;
+                                .dot {
+                                    border: 1px solid #ccc;
+                                    background: #ccc;
+                                }
+                                .pulse {
+                                    display: none;
+                                }
+                                .pulse1 {
+                                    display: none;
                                 }
                             }
                         }
                     }
-                    .undone {
-                        & > section {
-                            border: 1px solid #ccc;
+                }
+                .finish {
+                    .area-head {
+                        position: relative;
+                        width: 100%;
+                        height: 80px;
+                        border-left: none;
+                    }
+                }
+                .pic-tit {
+                    display: flex;
+                    width: calc((100vw - 120px) / 7);
+                    height: 160px;
+                    padding: 20px;
+                    transform: translate(-20px, -40%);
+                    flex-direction: column;
+                    align-items: flex-start;
 
-                            .dot {
-                                border: 1px solid #ccc;
-                                background: #ccc;
-                            }
-                            .pulse {
-                                display: none;
-                            }
-                            .pulse1 {
-                                display: none;
-                            }
-                        }
+                    img {
+                        width: calc((100vw - 120px) / 7 - 40px);
+                        height: 90px;
+                        margin-bottom: 10px;
+                        border-radius: 4px;
+                    }
+                    p {
+                        font-size: 16px;
+                        color: #00ffff;
+                        font-weight: bold;
+                    }
+                }
+
+                .water {
+                    transform: none;
+                }
+                .start {
+                    padding: 40px 0;
+                    p {
+                        margin-top: -21px;
+                        margin-left: 20px;
+                    }
+                    span {
+                        width: 1px;
+                        height: 50px;
+                        background: #36fcfc;
+                        position: absolute;
+                        top: -10px;
+                        left: 0;
+                    }
+                    section {
+                        position: absolute;
+                        top: 30px;
+                        left: -14px;
                     }
                 }
             }
-            .finish {
-                .area-head {
-                    position: relative;
-                    width: 100%;
-                    height: 80px;
-                    border-left: none;
-                }
+            .tip {
+                width: 100%;
+                font-size: 30px;
+                text-align: center;
+                margin-top: 100px;
+                color: #fff;
+                font-weight: bolder;
             }
-            .pic-tit {
-                display: flex;
-                width: calc((100vw - 120px) / 7);
-                height: 160px;
-                padding: 20px;
-                transform: translate(-20px, -40%);
-                flex-direction: column;
-                align-items: flex-start;
-
-                img {
-                    width: calc((100vw - 120px) / 7 - 40px);
-                    height: 90px;
-                    margin-bottom: 10px;
-                    border-radius: 4px;
-                }
-                p {
-                    font-size: 16px;
-                    color: #00ffff;
-                    font-weight: bold;
-                }
-            }
-
-            .water {
-                transform: none;
-            }
-            .start {
-                padding: 40px 0;
-                p {
-                    margin-top: -21px;
-                    margin-left: 20px;
-                }
-                span {
-                    width: 1px;
-                    height: 50px;
-                    background: #36fcfc;
-                    position: absolute;
-                    top: -10px;
-                    left: 0;
-                }
-                section {
-                    position: absolute;
-                    top: 30px;
-                    left: -14px;
-                }
-            }
-        }
-        .tip {
-            width: 100%;
-            font-size: 30px;
-            text-align: center;
-            margin-top: 100px;
-            color: #fff;
-            font-weight: bolder;
-        }
-        .current-task {
-            position: absolute;
-            width: calc((500vw - 600px) / 7);
-            z-index: 999999;
-            top: 0;
-            right: 0;
-            padding: 0 60px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .task-des {
-                padding: 10px 20px;
+            .current-task {
+                position: absolute;
+                width: calc((500vw - 600px) / 7);
+                z-index: 999999;
+                top: 0;
+                right: 0;
+                padding: 0 60px;
                 display: flex;
                 align-items: center;
-                border: 1px solid #36fcfc;
+                justify-content: space-between;
 
-                .task-des-l {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    font-size: 20px;
-                    color: #36fcfc;
-                    border-right: 1px solid #36fcfc;
-                    padding-right: 20px;
-                    img {
-                        margin-bottom: 10px;
-                    }
-                }
-                .task-des-r {
-                    width: calc((200vw - 240px) / 7);
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    font-size: 20px;
-                    line-height: 28px;
-                    color: #fcfc36;
-                    padding-left: 20px;
-                }
-            }
-            .current-data {
-                width: 267px;
-                height: 138px;
-                padding: 20px 30px;
-                box-sizing: border-box;
-                background: url('../../../assets/loginPage/xj-bg.png') no-repeat center;
-                background-size: 100% 100%;
-
-                .data-area {
+                .task-des {
+                    padding: 10px 20px;
                     display: flex;
                     align-items: center;
-                    border-bottom: 1px solid #040c3b;
-                    font-weight: bold;
-                    padding-bottom: 10px;
-                    box-sizing: border-box;
+                    border: 1px solid #36fcfc;
 
-                    img {
-                        width: 30px;
-                        height: 30px;
-                        margin-right: 10px;
-                        animation: circle 1s ease-in-out infinite;
-                    }
-
-                    div {
-                        font-size: 15px;
-                        color: rgba(4, 12, 59, 0.8);
-
-                        span {
-                            color: #040c3b;
-                        }
-                    }
-                }
-
-                .data-spot {
-                    display: flex;
-                    align-items: flex-start;
-                    margin-top: 10px;
-
-                    & > div {
+                    .task-des-l {
                         display: flex;
                         flex-direction: column;
                         align-items: center;
-                        width: 50%;
-                        font-size: 14px;
-                        color: rgba(4, 12, 59, 0.8);
+                        font-size: 20px;
+                        color: #36fcfc;
+                        border-right: 1px solid #36fcfc;
+                        padding-right: 20px;
+                        img {
+                            margin-bottom: 10px;
+                        }
+                    }
+                    .task-des-r {
+                        width: calc((200vw - 240px) / 7);
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        font-size: 20px;
+                        line-height: 28px;
+                        color: #fcfc36;
+                        padding-left: 20px;
+                    }
+                }
+                .current-data {
+                    width: 267px;
+                    height: 138px;
+                    padding: 20px 30px;
+                    box-sizing: border-box;
+                    background: url('../../../assets/loginPage/xj-bg.png') no-repeat center;
+                    background-size: 100% 100%;
 
-                        p {
-                            margin-top: 6px;
-                            color: #040c3b;
+                    .data-area {
+                        display: flex;
+                        align-items: center;
+                        border-bottom: 1px solid #040c3b;
+                        font-weight: bold;
+                        padding-bottom: 10px;
+                        box-sizing: border-box;
+
+                        img {
+                            width: 30px;
+                            height: 30px;
+                            margin-right: 10px;
+                            animation: circle 1s ease-in-out infinite;
                         }
 
-                        &:first-of-type {
-                            border-right: 1px solid #040c3b;
+                        div {
+                            font-size: 15px;
+                            color: rgba(4, 12, 59, 0.8);
+
+                            span {
+                                color: #040c3b;
+                            }
+                        }
+                    }
+
+                    .data-spot {
+                        display: flex;
+                        align-items: flex-start;
+                        margin-top: 10px;
+
+                        & > div {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            width: 50%;
+                            font-size: 14px;
+                            color: rgba(4, 12, 59, 0.8);
+
+                            p {
+                                margin-top: 6px;
+                                color: #040c3b;
+                            }
+
+                            &:first-of-type {
+                                border-right: 1px solid #040c3b;
+                            }
                         }
                     }
                 }
             }
-        }
-        .star-pic {
-            position: absolute;
-            width: calc((100vw - 120px) / 7);
-            height: calc((100vw - 120px) / 7);
-            z-index: 999999999;
-            bottom: 40px;
-            right: 40px;
-            padding: 20px;
+            .star-pic {
+                position: absolute;
+                width: calc((100vw - 120px) / 7);
+                height: calc((100vw - 120px) / 7);
+                z-index: 999999999;
+                bottom: 40px;
+                right: 40px;
+                padding: 20px;
 
-            .star-bg {
-                position: inherit;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                img {
+                .star-bg {
+                    position: inherit;
                     width: 100%;
-                    height: auto;
-                    animation: circle 30s linear infinite;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    img {
+                        width: 100%;
+                        height: auto;
+                        animation: circle 30s linear infinite;
+                    }
                 }
-            }
 
-            .star {
-                position: inherit;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                img {
+                .star {
+                    position: inherit;
                     width: 100%;
-                    height: auto;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    img {
+                        width: 100%;
+                        height: auto;
+                    }
                 }
             }
         }
     }
-}
 </style>

--
Gitblit v1.9.2