From 9cbb625ef96917e62dd5c4747c635be0b2c781ac Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期五, 12 八月 2022 12:26:40 +0800
Subject: [PATCH] 添加修改页面
---
src/views/intellectInspect/intelligentLine/index.vue | 1031 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/api/intelligentLine/index.ts | 14
2 files changed, 1,045 insertions(+), 0 deletions(-)
diff --git a/src/api/intelligentLine/index.ts b/src/api/intelligentLine/index.ts
new file mode 100644
index 0000000..1adb2cc
--- /dev/null
+++ b/src/api/intelligentLine/index.ts
@@ -0,0 +1,14 @@
+import request from '/@/utils/request';
+
+export function lineApi() {
+ return {
+ // 分页获取休息日列表
+ getLine: (data: object) => {
+ return request({
+ url: import.meta.env.VITE_API_URL + `/SafeCheckSmartScreen/select/getSmartScreenDataByTaskId`,
+ method: 'post',
+ data: data
+ });
+ },
+ };
+}
diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
new file mode 100644
index 0000000..fcb8dd4
--- /dev/null
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -0,0 +1,1031 @@
+<template>
+ <div class="container">
+ <div class="big-title" @click="goBack()">国泰新华智能巡检系统</div>
+ <div style="font-size: 14px;color: #00ffff;margin-top: 4px">{{present}}</div>
+ <div class="btns">
+ <div class="fullbtn" @click="onScreenfullClick">
+ <div class="toFull">
+ <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
+ </div>
+ <div>全屏</div>
+ </div>
+ <div class="backBtn" @click="goBack()">
+ <img src="../../../assets/loginPage/back-icon.png">
+ <div>退出</div>
+ </div>
+ </div>
+ <div class="blocks">
+ <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" v-if="data&&data.length>0">
+ <div class="line-item" v-for="(item,index) in data" :key="index">
+ <div class="picbox">
+ <img src="../../../assets/loginPage/equipment.jpg">
+ <p>RFID: <span>{{item.rfid}}</span></p>
+ <p>位置: <span>{{item.region.toString()}}</span></p>
+ </div>
+ <div class="area-head" :class="item.points.some(e=>e.reportResult == null)?'fadeBorder':''">
+ <div class="indicator" :class="item.points.some(e=>e.reportResult == null)?'someUndone':(item.points.some(e=>e.reportResult == 1)?'somewarning':'')">
+ <div class="indi-dot"></div>
+<!-- <div class="indi-pulse"></div>-->
+<!-- <div class="indi-pulse1"></div>-->
+ </div>
+ <div class="arrow" v-if="item.points.some(e=>e.reportResult != null)">
+
+ </div>
+ <div class="top-line" :class="item.points.some(e=>e.reportResult == null)?'fadeLine':''"></div>
+ </div>
+ <div class="more-info">
+ <div class="item" v-for="(t,i) in item.points" :key="i" :class="t.reportResult == null?'undone':(t.reportResult==1?'warning':'')">
+ <section>
+ <div class="dot"></div>
+ <div class="pulse"></div>
+ <div class="pulse1"></div>
+ </section>
+ <div>
+ <div><span>巡检点：</span><span>{{t.point}}</span></div>
+ <div><span>巡检状态：</span><span>{{t.pointCheckStatus==1?'未完成':'已完成'}}</span></div>
+ <div v-if="t.reportResult!=null"><span>巡检指标：</span><span>{{t.quotaContent}}</span></div>
+ <div v-if="(t.dataReportType==2 || t.dataReportType==3)&&t.secondReferenceResult"><span>参数：</span><span class="target">{{t.secondReferenceResult+t.quotaUnit}}</span></div>
+ <div><span>巡检结果：</span><span class="target">{{t.reportResult==null?'--':(t.reportResult==0?'正常':'异常')}}</span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="line-item finish">
+ <div class="picbox"></div>
+ <div class="area-head">
+ <div class="finish-point">
+ <div>
+ 完成巡检
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tip" v-else>
+ 抱歉，暂时查询不到巡检路线...
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+import screenfull from 'screenfull';
+import { lineApi } from '/@/api/intelligentLine';
+import { toRefs, reactive, ref, onMounted, onUnmounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { Session } from '/@/utils/storage';
+import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
+import { ElTable } from 'element-plus';
+import { FormInstance, FormRules, ElMessage } from 'element-plus';
+import {useUserInfo} from "/@/stores/userInfo";
+
+// 定义接口来定义对象的类型
+interface stateType {
+ present: string,
+ isScreenfull: boolean,
+ path: string,
+ socket: any,
+ socketData: string,
+ data: Array<any>
+}
+export default {
+ name: 'intelligentLine',
+ components: {},
+ setup() {
+ const state = reactive<stateType>({
+ present: '',
+ isScreenfull: false,
+ path: "http://192.168.0.29:8008/ws/test/",
+ socketData: '',
+ socket: null,
+ data: []
+ });
+
+ onMounted(()=>{
+ setInterval(() => {
+ state.present = new Date().toLocaleString()
+ }, 1000)
+ init()
+ // getLine()
+ })
+
+ // socket获取数据
+ const init=()=>{
+ if(typeof(window.WebSocket) === "undefined"){
+ alert("您的浏览器不支持socket")
+ }else{
+ // 实例化socket
+ var url = state.path + '80938081556545536'
+ url = url.replace("https","ws").replace("http","ws");
+ console.log(url,'获取地址')
+ state.socket = new window.WebSocket(url)
+ // 监听socket连接
+ state.socket.onopen=()=>{
+ console.log("socket连接成功")
+ }
+ // 监听socket错误信息
+ state.socket.onerror = ()=>{
+ console.log("socket连接错误")
+ }
+ // 监听socket消息
+ state.socket.onmessage = (msg)=>{
+ console.log(msg,'msg')
+ console.log(typeof msg.data,'type')
+ if(msg.data =='连接成功') return
+ state.socketData = msg.data
+ console.log(JSON.parse(state.socketData),'------------------',)
+ if(typeof JSON.parse(state.socketData) == Array){
+ state.data = JSON.parse(state.socketData)
+ console.log(state.data)
+ }
+ // console.log(msg,'msg')
+ // console.log(this.data,'data-------')
+ }
+ }
+ }
+
+ const send= ()=> {
+ state.socket.send(params)
+ }
+
+
+ // 接口获取数据
+ const getLine = async()=>{
+ let res = await lineApi().getLine({ id: '80647416891768832' });
+ if (res.data.code === '200') {
+ console.log(res.data.data,'获取巡检点')
+ state.data = res.data.data
+ console.log(state.data,'---')
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+
+ // 全屏
+ const onScreenfullClick=()=>{
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
+ }
+ screenfull.toggle();
+ screenfull.on('change', () => {
+ if (screenfull.isFullscreen) {
+ state.isScreenfull = true
+ }
+ else{
+ state.isScreenfull = false
+ }
+ });
+ }
+
+ // 返回
+ const goBack = ()=>{
+ window.history.go(-1)
+ }
+
+ // 页面关闭处理
+ onUnmounted( ()=> {
+ // 销毁监听
+ state.socket.onclose = ()=>{
+ console.log("socket已经关闭")
+ }
+ })
+ return{
+ goBack,
+ onScreenfullClick,
+ ...toRefs(state)
+ }
+ }
+}
+// export default {
+// name: 'NewForm',
+// props: {
+//
+// },
+// data(){
+// return{
+// present: '',
+// isScreenfull: false,
+// path: "http://192.168.0.29:8008/ws/test/",
+// socket: null,
+// socketData: '',
+// data: []
+// }
+// },
+// created() {
+// setInterval(() => {
+// this.present = new Date().toLocaleString()
+// }, 1000)
+// },
+// mounted () {
+// // 初始化
+// this.init()
+// // this.getLine()
+// },
+// methods:{
+// goBack(){
+// window.history.go(-1)
+// },
+//
+// async getLine (){
+// let res = await lineApi().getLine({ id: '80647416891768832' });
+// if (res.data.code === '200') {
+// console.log(res.data.data,'获取巡检点')
+// this.data = res.data.data
+// console.log(this.data,'---')
+// } else {
+// ElMessage({
+// type: 'warning',
+// message: res.data.msg
+// });
+// }
+// },
+//
+// // 全屏点击时
+// onScreenfullClick(){
+// const t = this
+// if (!screenfull.isEnabled) {
+// ElMessage.warning('暂不不支持全屏');
+// return false;
+// }
+// screenfull.toggle();
+// screenfull.on('change', () => {
+// if (screenfull.isFullscreen) {
+// t.isScreenfull = true
+// }
+// else{
+// t.isScreenfull = false
+// }
+// });
+// },
+//
+// // socket获取数据
+// init: function () {
+// if(typeof(window.WebSocket) === "undefined"){
+// alert("您的浏览器不支持socket")
+// }else{
+// // 实例化socket
+// var url = this.path + '80938081556545536'
+// url = url.replace("https","ws").replace("http","ws");
+// console.log(url,'获取地址')
+// this.socket = new window.WebSocket(url)
+// // 监听socket连接
+// this.socket.onopen = this.open
+// // 监听socket错误信息
+// this.socket.onerror = this.error
+// // 监听socket消息
+// this.socket.onmessage = this.getMessage
+// }
+// },
+// open: function () {
+// console.log("socket连接成功")
+// },
+// error: function () {
+// console.log("连接错误")
+// },
+// getMessage: function (msg) {
+// console.log(typeof msg.data,'type')
+// if(msg.data =='连接成功') return
+// this.socketData = msg.data
+// console.log(JSON.parse(this.socketData),'------------------',)
+// if(typeof JSON.parse(this.socketData) == Array){
+// this.data = JSON.parse(this.socketData)
+// console.log(this.data)
+// }
+// // console.log(msg,'msg')
+// // console.log(this.data,'data-------')
+// },
+// send: function () {
+// this.socket.send(params)
+// },
+// close: function () {
+// console.log("socket已经关闭")
+// }
+// },
+// destroyed () {
+// // 销毁监听
+// this.socket.onclose = this.close
+// }
+// }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+ @keyframes warn {
+ 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;
+ }
+
+ 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.0;
+ }
+ }
+
+ @keyframes warn1 {
+ 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;
+ }
+
+ 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.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-size: 28px;
+ font-weight: bold;
+ margin: 10px 0 20px;
+ text-align: center;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .btns{
+ position: absolute;
+ z-index: 99999;
+ right: 60px;
+ top: 40px;
+ 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;
+ }
+ div{
+ font-size: 16px;
+ color: #00FFFF;
+ }
+ }
+
+ .backBtn{
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ img{
+ width: 14px;
+ height: 14px;
+ margin-right: 10px;
+ }
+ div{
+ font-size: 16px;
+ color: #00FFFF;
+ }
+ }
+ }
+ .blocks{
+ width: 100%;
+ height: calc(100% - 90px);
+ padding: 20px 40px 30px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: flex-start;
+ overflow: hidden;
+ overflow-x: scroll;
+ overflow-y: scroll;
+
+ .line-map{
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+
+ .line-item{
+ width: calc((100vw - 180px)/ 6);
+ padding-left: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+
+ .picbox{
+ width: 100%;
+ height: calc((100vh - 130px)/ 5);
+ padding: 10px;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+
+ img{
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 10px;
+ border-radius: 4px;
+ }
+ p{
+ font-size: 14px;
+ color: rgba(255,255,255,.8);
+ margin-top: 10px;
+ span{
+ color: #fff;
+ }
+ }
+ }
+ .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;
+ border: 1px solid #00ff66;
+ 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 #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;
+
+ .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;
+ 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: 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 #ccc;
+ }
+ }
+ .fadeBorder{
+ border-left: 1px solid rgba(54,252,252,.4);
+ }
+ .more-info{
+ width: 100%;
+
+ .item{
+ width: calc((100vw - 120px)/ 6);
+ height: calc((100vh - 130px)/ 5);
+ padding: 0 50px 20px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36FCFC;
+
+ &:last-of-type{
+ border: none;
+ }
+
+ section{
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0,225,255,.6);
+ top: -12px;
+ left: 10px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color:#00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ &>div{
+ padding: 10px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right,rgba(8,109,209,.4),rgba(11,255,255,.2));
+ border: 1px solid rgba(54,252,252,.6);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div{
+ margin-bottom: 5px;
+ &:last-of-type{
+ margin-bottom: none;
+ }
+ span{
+ display: inline-block;
+ width: 50%;
+ font-size: 13px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type{
+ text-align: right;
+ color: rgba(255,255,255,.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);
+ }
+ }
+ .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{
+ span.target{
+ color: #ff2929;
+ font-weight: bolder;
+ }
+ }
+ }
+ }
+ .undone{
+ border-left: 1px solid rgba(54,252,252,.4);
+ &>section{
+ border: 1px solid #ccc;
+
+ .dot{
+ border: 1px solid #ccc;
+ background: #ccc;
+ }
+ .pulse{
+ display: none;
+ }
+ .pulse1{
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ .finish{
+ .area-head{
+ position: relative;
+ width: 100%;
+ height: 80px;
+ border-left: none;
+ .finish-point{
+ position: absolute;
+ width: 90px;
+ height: 90px;
+ border: 2px solid #0072ff;
+ left: -30px;
+ top: -45px;
+ border-radius: 50%;
+
+ &>div{
+ width: 80px;
+ height: 80px;
+ position: absolute;
+ left: 3px;
+ top: 3px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 16px;
+ line-height: 80px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+ }
+ .pic-tit{
+ 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;
+ display: flex;
+ align-items: center;
+ border: 1px solid #36FCFC;
+
+ .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{
+ 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;
+ }
+
+ div{
+ font-size: 15px;
+ color: rgba(4,12,59,.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,.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-bg{
+ position: inherit;
+ width: 100%;
+ 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{
+ width: 100%;
+ height: auto;
+ }
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.2