From 891c00081c70124f8060537db846dfc5016761f6 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 08 八月 2022 15:01:16 +0800
Subject: [PATCH] lct
---
src/views/intellectInspect/intelligentMap/index.vue | 1399 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 759 insertions(+), 640 deletions(-)
diff --git a/src/views/intellectInspect/intelligentMap/index.vue b/src/views/intellectInspect/intelligentMap/index.vue
index 507c8c1..b8f7172 100644
--- a/src/views/intellectInspect/intelligentMap/index.vue
+++ b/src/views/intellectInspect/intelligentMap/index.vue
@@ -1,710 +1,829 @@
<template>
- <div class="container">
- <div class="big-title" @click="goBack"><span></span>大型实验室智能巡检系统<span></span></div>
- <div style="font-size: 14px; color: #00ffff">{{ present }}</div>
- <div class="blocks">
- <div class="current-data">
- <div class="data-area">
- <img src="../../../assets/loginPage/xj-icon.png" />
- <div>当前巡检：<span>实验室装置区</span></div>
- </div>
- <div class="data-spot">
- <div>
- <span>巡检点</span>
- <p>3970A</p>
- </div>
- <div>
- <span>指标</span>
- <p>压力</p>
- </div>
- </div>
- </div>
- <div class="line-map">
- <div class="item item-t item-l">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>73017</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>压力：</span><span>3.6Bar</span></div>
- </div>
- </div>
- <div class="item item-l">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>73018</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>压力：</span><span>3.6Bar</span></div>
- </div>
- </div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div class="item item-l">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>73016</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>压力：</span><span>3.6Bar</span></div>
- </div>
- </div>
- <div class="item item-l">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>73019</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>温度：</span><span>80℃</span></div>
- </div>
- </div>
- <div></div>
- <div></div>
- <div class="item item-t item-l undone">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>3970C</span></div>
- <div><span>定位状态：</span><span>未完成</span></div>
- <div><span>压力：</span><span>--</span></div>
- </div>
- </div>
- <div class="item item-t undone">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>3970D</span></div>
- <div><span>定位状态：</span><span>未完成</span></div>
- <div><span>压力：</span><span>--</span></div>
- </div>
- </div>
- <div class="item finish">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <span></span>
- <p>完成巡检</p>
- </div>
- <div class="item start">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <span></span>
- <p>开始巡检</p>
- </div>
- <div class="item item-l">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>73020</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>压力：</span><span>3.6Bar</span></div>
- </div>
- </div>
- <div></div>
- <div></div>
- <div class="item item-l undone">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>3970B</span></div>
- <div><span>定位状态：</span><span>未完成</span></div>
- <div><span>压力：</span><span>--</span></div>
- </div>
- </div>
- <div class="pic-tit water">
- <img src="../../../assets/loginPage/equipment.JPG" />
- <p>实验室装置区</p>
- </div>
- <div></div>
- <div class="pic-tit">
- <img src="../../../assets/loginPage/wind.JPG" />
- <p>实验室风机系统</p>
- </div>
- <div class="item item-l warning">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>73021</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>温度：</span><span>130℃</span></div>
- </div>
- </div>
- <div></div>
- <div></div>
- <div class="item item-l undone">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>3970A</span></div>
- <div><span>定位状态：</span><span>未完成</span></div>
- <div><span>压力：</span><span>--</span></div>
- </div>
- </div>
- <div></div>
- <div></div>
- <div class="pic-tit water">
- <img src="../../../assets/loginPage/watersys.JPG" />
- <p>实验室循环水系统</p>
- </div>
- <div class="item item-t">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>80210</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>温度：</span><span>80摄氏度</span></div>
- </div>
- </div>
- <div class="item item-t">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>80211</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>温度：</span><span>80摄氏度</span></div>
- </div>
- </div>
- <div class="item item-t">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>80212</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>温度：</span><span>80摄氏度</span></div>
- </div>
- </div>
- <div class="item">
- <section>
- <div class="dot"></div>
- <div class="pulse"></div>
- <div class="pulse1"></div>
- </section>
- <div>
- <div><span>巡检点：</span><span>80213</span></div>
- <div><span>定位状态：</span><span>已完成</span></div>
- <div><span>温度：</span><span>80摄氏度</span></div>
- </div>
- </div>
- <div></div>
- <div></div>
- </div>
- <div class="section-1"></div>
- <div class="section-2"></div>
- <div class="section-3"></div>
- </div>
+ <div class="container">
+ <div class="big-title" @click="goBack()"><span></span>国泰新华智能巡检系统<span></span></div>
+ <div style="font-size: 14px;color: #00ffff">{{present}}</div>
+ <div class="backBtn" @click="goBack()">
+ <img src="../../../assets/loginPage/back-icon.png">
+ <div>退出</div>
</div>
+ <div class="blocks">
+ <div class="current-task">
+ <div class="task-des">
+ <div class="task-des-l">
+ <img src="../../../assets/loginPage/task-job-pic.png">
+ <div>巡检任务</div>
+ </div>
+ <div class="task-des-r">
+ 该巡检路线沿途监测风机系统、循环水系统以及装置区的各巡检点指标是否正常。
+ </div>
+ </div>
+ <div class="current-data">
+ <div class="data-area">
+ <img src="../../../assets/loginPage/xj-icon.png">
+ <div>当前巡检：<span>实验室装置区</span></div>
+ </div>
+ <div class="data-spot">
+ <div>
+ <span>巡检点</span>
+ <p>3970A</p>
+ </div>
+ <div>
+ <span>指标</span>
+ <p>压力</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="star-pic">
+ <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png"></div>
+ <div class="star"><img src="../../../assets/loginPage/device-pic.png"></div>
+ </div>
+ <div class="line-map">
+ <div class="item item-t item-l">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>73017</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>压力：</span><span>3.6Bar</span></div>
+ </div>
+ </div>
+ <div class="item item-l">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>73018</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>压力：</span><span>3.6Bar</span></div>
+ </div>
+ </div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div class="item item-l">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>73016</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>压力：</span><span>3.6Bar</span></div>
+ </div>
+ </div>
+ <div class="item item-l">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>73019</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>温度：</span><span>80℃</span></div>
+ </div>
+ </div>
+ <div></div>
+ <div></div>
+ <div class="item item-t item-l undone">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>3970C</span></div>
+ <div><span>定位状态：</span><span>未完成</span></div>
+ <div><span>压力：</span><span>--</span></div>
+ </div>
+ </div>
+ <div class="item item-t undone">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>3970D</span></div>
+ <div><span>定位状态：</span><span>未完成</span></div>
+ <div><span>压力：</span><span>--</span></div>
+ </div>
+ </div>
+ <div class="item finish">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <span></span>
+ <p>
+ 完成巡检
+ </p>
+ </div>
+ <div class="item start">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <span></span>
+ <p>
+ 开始巡检
+ </p>
+ </div>
+ <div class="item item-l">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>73020</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>压力：</span><span>3.6Bar</span></div>
+ </div>
+ </div>
+ <div></div>
+ <div></div>
+ <div class="item item-l undone">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>3970B</span></div>
+ <div><span>定位状态：</span><span>未完成</span></div>
+ <div><span>压力：</span><span>--</span></div>
+ </div>
+ </div>
+ <div class="pic-tit water">
+ <img src="../../../assets/loginPage/equipment.JPG">
+ <p>实验室装置区</p>
+ </div>
+ <div></div>
+ <div class="pic-tit">
+ <img src="../../../assets/loginPage/wind.JPG">
+ <p>实验室风机系统</p>
+ </div>
+ <div class="item item-l warning">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>73021</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>温度：</span><span>130℃</span></div>
+ </div>
+ </div>
+ <div></div>
+ <div></div>
+ <div class="item item-l undone">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>3970A</span></div>
+ <div><span>定位状态：</span><span>未完成</span></div>
+ <div><span>压力：</span><span>--</span></div>
+ </div>
+ </div>
+ <div></div>
+ <div></div>
+ <div class="pic-tit water">
+ <img src="../../../assets/loginPage/watersys.JPG">
+ <p>实验室循环水系统</p>
+ </div>
+ <div class="item item-t">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>80210</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>温度：</span><span>80摄氏度</span></div>
+ </div>
+ </div>
+ <div class="item item-t">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>80211</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>温度：</span><span>80摄氏度</span></div>
+ </div>
+ </div>
+ <div class="item item-t">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>80212</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>温度：</span><span>80摄氏度</span></div>
+ </div>
+ </div>
+ <div class="item">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>80213</span></div>
+ <div><span>定位状态：</span><span>已完成</span></div>
+ <div><span>温度：</span><span>80摄氏度</span></div>
+ </div>
+ </div>
+ <div></div>
+ <div></div>
+ </div>
+ <div class="section-1">
+
+ </div>
+ <div class="section-2">
+
+ </div>
+ <div class="section-3">
+
+ </div>
+ </div>
+ </div>
</template>
<script>
export default {
- name: 'NewForm',
- props: {},
- data() {
- return {
- present: ''
- };
- },
- created() {
- setInterval(() => {
- this.present = new Date().toLocaleString();
- }, 1000);
- },
- methods: {
- goBack() {
- this.$router.go(-1);
- // this.$router.push('/discriminate');
- }
+ name: 'NewForm',
+ props: {
+
+ },
+ data(){
+ return{
+ present: ''
}
-};
+ },
+ created() {
+ setInterval(() => {
+ this.present = new Date().toLocaleString()
+ }, 1000)
+ },
+ methods:{
+ goBack(){
+ window.history.go(-1)
+ }
+ }
+}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
-@keyframes warn {
+ @keyframes warn {
0% {
- transform: scale(0.3);
- -webkit-transform: scale(0.3);
- opacity: 0;
+ transform: scale(0.3);
+ -webkit-transform: scale(0.3);
+ opacity: 0.0;
}
25% {
- transform: scale(0.3);
- -webkit-transform: scale(0.3);
- opacity: 0.1;
+ 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;
+ 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;
+ transform: scale(0.8);
+ -webkit-transform: scale(0.8);
+ opacity: 0.6;
}
100% {
- transform: scale(1);
- -webkit-transform: scale(1);
- opacity: 0;
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ opacity: 0.0;
}
-}
+ }
-@keyframes warn1 {
+ @keyframes warn1 {
0% {
- transform: scale(0.3);
- -webkit-transform: scale(0.3);
- opacity: 0;
+ transform: scale(0.3);
+ -webkit-transform: scale(0.3);
+ opacity: 0.0;
}
25% {
- transform: scale(0.3);
- -webkit-transform: scale(0.3);
- opacity: 0.1;
+ 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;
+ 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;
+ transform: scale(0.5);
+ -webkit-transform: scale(0.5);
+ opacity: 0.6;
}
100% {
- transform: scale(0.8);
- -webkit-transform: scale(0.8);
- opacity: 0;
+ transform: scale(0.8);
+ -webkit-transform: scale(0.8);
+ opacity: 0.0;
}
-}
-
-@keyframes circle {
+ }
+
+ @keyframes circle {
0% {
- transform: rotate(0);
- -webkit-transform: rotate(0);
+ transform: rotate(0);
+ -webkit-transform: rotate(0);
}
100% {
- transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ -webkit-transform: rotate(360deg);
}
-}
-.container {
+ }
+ .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: url("../../../assets/loginPage/map-bg.jpg") no-repeat center;
background-size: 100% 100%;
- .big-title {
- height: 40px;
- line-height: 40px;
- font-size: 28px;
- font-weight: bold;
- margin: 10px 0 20px;
- text-align: center;
- color: #fff;
+ .big-title{
+ height: 40px;
+ line-height: 40px;
+ font-size: 28px;
+ font-weight: bold;
+ margin: 10px 0 20px;
+ text-align: center;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ span{
+ width: 60px;
+ height: 1px;
+ background: #36FCFC;
+ margin: 0 20px;
+ }
+ }
+ .backBtn{
+ position: absolute;
+ z-index: 99999;
+ right: 150px;
+ top: 40px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ img{
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ }
+ div{
+ font-size: 16px;
+ color: #00FFFF;
+ }
+ }
+ .blocks{
+ position: relative;
+ width: 100%;
+ height: 100%;
+ padding: 20px 20px 20px 100px;
+ box-sizing: border-box;
+ .line-map{
+ position: absolute;
+ width: calc(100% - 120px);
+ left: 110px;
+ top: 10px;
+ flex-direction: column;
+ align-items: center;
+ z-index: 99;
+ display: grid;
+ grid-template-columns: repeat(7,1fr);
+ grid-gap: 0;
+
+ .item{
+ width: calc((100vw - 120px)/ 7);
+ height: calc((100vh - 130px)/ 5);
+ padding: 20px 30px 20px 20px;
+ position: relative;
+ box-sizing: border-box;
+
+ section{
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid #00ff66;
+ top: -14px;
+ left: -14px;
+
+ .dot {
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ left: 4px;
+ top: 4px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #00ff66;
+ border-radius: 50%;
+ background-color:#00ff66;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 56px;
+ height: 56px;
+ left: -15px;
+ top: -15px;
+ 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;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 56px;
+ height: 56px;
+ left: -15px;
+ top: -15px;
+ 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;
+ }
+ }
+ &>div{
+ padding: 10px 0;
+ border-radius: 8px;
+ background-image: linear-gradient(to right,rgba(8,109,209,.4),rgba(11,255,255,.2));
+ border: 1px solid rgba(54,252,252,.6);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div{
+ &:nth-of-type(2){
+ margin: 5px 0;
+ }
+
+ span{
+ display: inline-block;
+ width: 50%;
+ font-size: 14px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type{
+ text-align: right;
+ color: rgba(255,255,255,.8);
+ }
+ }
+ }
+ }
+
+ 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,.2),rgba(8,109,209,.4));
+ border: 1px solid rgba(54,252,252,.6);
+ }
+ }
+
+ .item-t{
+ border-top: 1px solid #36FCFC;
+ }
+ .item-l{
+ border-left: 1px solid #36FCFC;
+ }
+ .warning{
+ &>section{
+ border: 1px solid #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;
+ }
+ }
+
+ &>div{
+ div:last-of-type{
+ span:nth-of-type(2){
+ color: #ff0000;
+ }
+ }
+ }
+ }
+ .undone{
+ &>section{
+ border: 1px solid #ccc;
+
+ .dot{
+ border: 1px solid #ccc;
+ background: #ccc;
+ }
+ .pulse{
+ display: none;
+ }
+ .pulse1{
+ display: 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;
+
+ 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{
+ padding: 0 40px;
+ p{
+ margin-top: -25px;
+ margin-left: 4px;
+ }
+ span{
+ width: 100%;
+ height: 1px;
+ background: #36FCFC;
+ position: absolute;
+ top: 0;
+ left: calc(40px - 100%);
+ }
+ section{
+ position: absolute;
+ top: -14px;
+ left: 30px;
+ }
+ }
+ }
+ .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: center;
+ justify-content: space-between;
- span {
- width: 60px;
- height: 1px;
- background: #36fcfc;
- margin: 0 20px;
- }
- }
+ .task-des{
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+ border: 1px solid #36FCFC;
- .blocks {
- position: relative;
- width: 100%;
- height: 100%;
- padding: 20px 20px 20px 100px;
- box-sizing: border-box;
- .line-map {
- position: absolute;
- width: calc(100% - 120px);
- left: 110px;
- top: 10px;
+ .task-des-l{
+ display: flex;
flex-direction: column;
align-items: center;
- z-index: 99;
- display: grid;
- grid-template-columns: repeat(7, 1fr);
- grid-gap: 0;
-
- .item {
- width: calc((100vw - 120px) / 7);
- height: calc((100vh - 130px) / 5);
- padding: 20px 40px 20px 20px;
- position: relative;
- box-sizing: border-box;
-
- section {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- position: absolute;
- border: 1px solid #00ff66;
- top: -14px;
- left: -14px;
-
- .dot {
- position: absolute;
- width: 18px;
- height: 18px;
- left: 4px;
- top: 4px;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border: 1px solid #00ff66;
- border-radius: 50%;
- background-color: #00ff66;
- z-index: 2;
- }
- .pulse {
- position: absolute;
- width: 56px;
- height: 56px;
- left: -15px;
- top: -15px;
- 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;
- }
- .pulse1 {
- position: absolute;
- width: 56px;
- height: 56px;
- left: -15px;
- top: -15px;
- 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;
- }
- }
- & > div {
- padding: 10px 0;
- 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, 0.6);
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- div {
- &:nth-of-type(2) {
- margin: 5px 0;
- }
-
- span {
- display: inline-block;
- width: 50%;
- font-size: 14px;
- color: #fff;
- text-align: left;
-
- &:first-of-type {
- text-align: right;
- color: rgba(255, 255, 255, 0.8);
- }
- }
- }
- }
-
- 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);
- }
+ font-size: 20px;
+ color: #36FCFC;
+ border-right: 1px solid #36FCFC;
+ padding-right: 20px;
+ img{
+ margin-bottom: 10px;
}
-
- .item-t {
- border-top: 1px solid #36fcfc;
- }
- .item-l {
- border-left: 1px solid #36fcfc;
- }
- .warning {
- & > section {
- border: 1px solid #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;
- }
- }
-
- & > div {
- div:last-of-type {
- span:nth-of-type(2) {
- color: #ff0000;
- }
- }
- }
- }
- .undone {
- & > section {
- border: 1px solid #ccc;
-
- .dot {
- border: 1px solid #ccc;
- background: #ccc;
- }
- .pulse {
- display: none;
- }
- .pulse1 {
- display: 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;
-
- 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 {
- padding: 0 40px;
- p {
- margin-top: -25px;
- margin-left: 4px;
- }
- span {
- width: 100%;
- height: 1px;
- background: #36fcfc;
- position: absolute;
- top: 0;
- left: calc(40px - 100%);
- }
- section {
- position: absolute;
- top: -14px;
- left: 30px;
- }
- }
+ }
+ .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 {
- position: absolute;
- z-index: 999999;
- width: 270px;
- height: 142px;
- left: 50%;
- padding: 20px 30px;
+ .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{
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #040C3B;
+ font-weight: bold;
+ padding-bottom: 10px;
box-sizing: border-box;
- transform: translateX(-65%);
- background: url('../../../assets/loginPage/xj-bg.png') no-repeat center;
- background-size: 100% 100%;
- .data-area {
- display: flex;
- align-items: center;
- border-bottom: 1px solid #00ffff;
- 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;
- }
-
- div {
- font-size: 15px;
- color: rgba(255, 255, 255, 0.8);
-
- span {
- color: #00ffff;
- }
- }
+ img{
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ animation: circle 1s ease-in-out infinite;
}
- .data-spot {
- display: flex;
- align-items: flex-start;
- margin-top: 10px;
+ div{
+ font-size: 15px;
+ color: rgba(4,12,59,.8);
- & > div {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 50%;
- font-size: 14px;
- color: rgba(255, 255, 255, 0.8);
-
- p {
- margin-top: 6px;
- color: #00ffff;
- }
-
- &:first-of-type {
- border-right: 1px solid #36fcfc;
- }
- }
+ 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,.8);
+
+ p{
+ margin-top: 6px;
+ color: #040C3B;
+ }
+
+ &:first-of-type{
+ border-right: 1px solid #040C3B;
+ }
+ }
+ }
}
- .section-1 {
- position: absolute;
- left: 70px;
- top: -10px;
- width: calc((200vw - 240px) / 7 + 60px);
- height: 630px;
- background: rgba(0, 100, 190, 0.1);
- border: 1px solid rgba(0, 100, 190, 0.4);
- border-radius: 8px;
+ }
+ .star-pic{
+ position: absolute;
+ width: calc((100vw - 120px)/ 7);
+ height: calc((100vw - 120px)/ 7);
+ z-index: 999999;
+ bottom: 40px;
+ right: 40px;
+ padding: 20px;
+
+ .star-bg{
+ position: inherit;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ img{
+ width: 100%;
+ height: auto;
+ animation: circle 30s linear infinite;
+ }
}
- .section-2 {
- position: absolute;
- left: calc((400vw - 480px) / 7 + 70px);
- top: 150px;
- width: calc((200vw - 240px) / 7 + 60px);
- height: 470px;
- background: rgba(0, 100, 190, 0.1);
- border: 1px solid rgba(0, 100, 190, 0.4);
- border-radius: 8px;
+
+ .star{
+ position: inherit;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ img{
+ width: 100%;
+ height: auto;
+ }
}
- .section-3 {
- position: absolute;
- left: 100px;
- top: 630px;
- width: calc((500vw - 600px) / 7 + 30px);
- height: 180px;
- background: rgba(0, 100, 190, 0.1);
- border: 1px solid rgba(0, 100, 190, 0.4);
- border-radius: 8px;
- }
+ }
+ .section-1{
+ position: absolute;
+ left: 70px;
+ top: -20px;
+ width: calc((200vw - 240px) / 7 + 60px);
+ height: calc(80vh - 109px);
+ background: rgba(0,100,190,.1);
+ border: 1px solid rgba(0,100,190,.4);
+ border-radius: 8px;
+ }
+ .section-2{
+ position: absolute;
+ left: calc((400vw - 480px)/ 7 + 70px);
+ top: calc((100vh - 130px)/ 5 - 20px);
+ width: calc((200vw - 240px) / 7 + 60px);
+ height: calc((300vh - 390px)/ 5 - 5px);
+ background: rgba(0,100,190,.1);
+ border: 1px solid rgba(0,100,190,.4);
+ border-radius: 8px;
+ }
+ .section-3{
+ position: absolute;
+ left: 100px;
+ top: calc(80vh - 119px);
+ width: calc((500vw - 600px)/ 7 + 30px);
+ height: calc((100vh - 130px)/ 5 + 20px);
+ background: rgba(0,100,190,.1);
+ border: 1px solid rgba(0,100,190,.4);
+ border-radius: 8px;
+ }
}
-}
+ }
</style>
--
Gitblit v1.9.2