From fe4005fe29aafa104485ffa2392598bd8dccd347 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 08 八月 2022 14:59:15 +0800
Subject: [PATCH] lct
---
src/views/intellectInspect/intelligentMap/index.vue | 1294 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 644 insertions(+), 650 deletions(-)
diff --git a/src/views/intellectInspect/intelligentMap/index.vue b/src/views/intellectInspect/intelligentMap/index.vue
index 3df2f3c..507c8c1 100644
--- a/src/views/intellectInspect/intelligentMap/index.vue
+++ b/src/views/intellectInspect/intelligentMap/index.vue
@@ -1,716 +1,710 @@
<template>
- <div class="container">
- <div class="big-title"><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 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="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: ''
+ name: 'NewForm',
+ props: {},
+ data() {
+ return {
+ present: ''
+ };
+ },
+ created() {
+ setInterval(() => {
+ this.present = new Date().toLocaleString();
+ }, 1000);
+ },
+ methods: {
+ goBack() {
+ this.$router.go(-1);
+ // this.$router.push('/discriminate');
+ }
}
- },
- created() {
- setInterval(() => {
- this.present = new Date().toLocaleString()
- }, 1000)
- }
-}
+};
</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.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;
+ 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.0;
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ opacity: 0;
}
- }
+}
- @keyframes warn1 {
+@keyframes warn1 {
0% {
- transform: scale(0.3);
- -webkit-transform: scale(0.3);
- opacity: 0.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;
+ 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.0;
+ transform: scale(0.8);
+ -webkit-transform: scale(0.8);
+ opacity: 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;
- display: flex;
- align-items: center;
- justify-content: center;
+ .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;
- }
+ span {
+ width: 60px;
+ height: 1px;
+ background: #36fcfc;
+ margin: 0 20px;
+ }
}
- .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 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,.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-data{
- position: absolute;
- z-index: 999999;
- width: 270px;
- height: 142px;
- left: 50%;
- padding: 20px 30px;
+ .blocks {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ padding: 20px 20px 20px 100px;
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,.8);
-
- span{
- color: #00FFFF;
- }
- }
- }
-
- .data-spot{
- display: flex;
- align-items: flex-start;
- margin-top: 10px;
-
- &>div{
- display: flex;
+ .line-map {
+ position: absolute;
+ width: calc(100% - 120px);
+ left: 110px;
+ top: 10px;
flex-direction: column;
align-items: center;
- width: 50%;
- font-size: 14px;
- color: rgba(255,255,255,.8);
+ z-index: 99;
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ grid-gap: 0;
- p{
- margin-top: 6px;
- color: #00FFFF;
+ .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);
+ }
}
- &:first-of-type{
- border-right: 1px solid #36FCFC;
+ .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;
+ }
+ }
}
- }
- .section-1{
- position: absolute;
- left: 70px;
- top: -10px;
- width: calc((200vw - 240px) / 7 + 60px);
- height: 630px;
- 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: 150px;
- width: calc((200vw - 240px) / 7 + 60px);
- height: 470px;
- background: rgba(0,100,190,.1);
- border: 1px solid rgba(0,100,190,.4);
- border-radius: 8px;
- }
- .section-3{
- position: absolute;
- left: 100px;
- top: 630px;
- width: calc((500vw - 600px)/ 7 + 30px);
- height: 180px;
- background: rgba(0,100,190,.1);
- border: 1px solid rgba(0,100,190,.4);
- border-radius: 8px;
- }
+ .current-data {
+ position: absolute;
+ z-index: 999999;
+ width: 270px;
+ height: 142px;
+ left: 50%;
+ padding: 20px 30px;
+ 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;
+ }
+ }
+ }
+
+ .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(255, 255, 255, 0.8);
+
+ p {
+ margin-top: 6px;
+ color: #00ffff;
+ }
+
+ &:first-of-type {
+ border-right: 1px solid #36fcfc;
+ }
+ }
+ }
+ }
+ .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;
+ }
+ .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;
+ }
+ .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;
+ }
}
- }
+}
</style>
--
Gitblit v1.9.2