{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/views/user/Console.vue?vue&type=style&index=0&id=1edba68d&lang=css","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/views/user/Console.vue","mtime":1742646402778},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/css-loader/dist/cjs.js","mtime":1743264596127},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1743264597030},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/postcss-loader/src/index.js","mtime":1743264596321},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CiNjb25zb2xlewogIGhlaWdodDogMTAwdmgKfQo="},{"version":3,"sources":["Console.vue"],"names":[],"mappings":";AAsBA;AACA;AACA","file":"Console.vue","sourceRoot":"src/views/user","sourcesContent":["<template>\n <div id=\"navigation\">\n    <div class=\"header\">\n\n    </div>\n    <div class=\"contain\">\n        <ul style=\"align-items: end;\n    display: flex;\n    justify-content: center;\">\n\n            <li>\n                <a href=\"/screen.html\" target=\"_blank\">\n                    <img src=\"../../../public/images/chanye.png\" alt=\"\" style=\"margin-top: -40px;\">\n                    <span>数据可视化</span>\n                </a>\n            </li>\n        </ul>\n    </div>\n\n</div>\n</template>\n<style>\n#console{\n  height: 100vh\n}\n</style>\n<!-- <script>\nexport default {\n  mounted() {\n    window.location.href = \"http://127.0.0.1:8080/screen.html\";\n  }\n};\n</script> -->\n<style scoped>\n\n#navigation{\n    margin: 0;\n    padding: 0;\n    background: url('../../../public/images/bgg.png');\n    background-repeat: no-repeat;\n    background-attachment:fixed;\n    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');\n    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');\n    background-size: cover;\n    -moz-background-size: cover;\n    -webkit-background-size: cover;\n}\nli{\n    list-style: none;\n}\n.header{\n    width: 700px;\n    margin: 0 auto;\n}\n.header p.p1{\n    width: 60px;\n    height: 60px;\n    margin: 0 auto;\n    margin-top: 110px;\n}\n.header p.p2{\n    height: 40px;\n    margin: 0 auto;\n    text-align: center;\n    line-height: 40px;\n    margin-top: 10px;\n    font-size: 20px;\n    color: #fec468;\n}\n.header p.p3{\n    height: 40px;\n    margin: 0 auto;\n    text-align: center;\n    line-height: 40px;\n    font-size: 28px;\n    color: #bddde6;\n}\n.contain{\n    width: 1210px;\n    margin: 0 auto;\n    margin-top: 80px;\n    height: 400px;\n}\n.contain ul li img{\n    display: inline-block;\n    margin-left: -45px;\n}\n.contain ul li span{\n    display: inline-block;\n    vertical-align:16px;\n    font-size: 30px;\n    color: #57daff;\n    margin-left: 20px;\n}\n.contain ul{\n    width: 100%;\n    height: 100%;\n}\n.contain ul li{\n    width: 600px;\n    height: 200px;\n    line-height: 210px;\n    float: left;\n    background-image: url('../../../public/images/kuang.png');\n    background-position: center center;\n    background-repeat: no-repeat;\n    margin-bottom: 50px;\n    background-color:transparent;\n}\n.contain ul li:hover{\n    background: url('../../../public/images/chooseKuang.png') center center no-repeat;\n\n}\n.contain ul li a{\n    display: block;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n}\n.footer{\n    width: 400px;\n    position: fixed;\n    bottom: 30px;\n    left: 50%;\n    transform: translateX(-200px);\n    text-align: center;\n    color: #6d95aa;\n}\n.footer span{\n    vertical-align:top;\n}\n\n\n\n</style>\n<!-- <template>\n\t<div class=\"body\">\n    <div class=\"head\">\n        <h1>竞赛管理大数据可视化平台</h1>\n        <div class=\"weather\"><span id=\"showTime\">{{currentTime}}</span></div>\n    </div>\n    <div class=\"mainbox\">\n        <ul class=\"clearfix\">\n            <li>\n                <div class=\"boxall\" style=\"height: 4rem\">\n                    <div class=\"alltitle\">系统状态</div>\n                    <div class=\"sycm\">\n                        <ul class=\"clearfix\" style=\"display: flex;flex-direction: row;justify-content: center;\">\n                            <li>\n                                <h2 class=\"load-connect\" style=\"color: green;\">已连接</h2>\n                                <span>在线状态(Online)</span></li>\n                            <li>\n                                <h2 class=\"load-delay\">16(MS)</h2>\n                                <span>网络延迟(Network)</span></li>\n                        </ul>\n                    </div>\n                    <div class=\"sycm\">\n                        <div class=\"tit02\"><span>实时数据</span></div>\n                        <ul class=\"clearfix\" style=\"display: flex;flex-direction: row;justify-content: center;\">\n                            <li>\n                                <h2 id=\"today_amount\">{{ totalrecord }}</h2><span>待审批 </span></li>\n\n                            <li>\n                                <h2 id=\"today2_amount\">{{totalsuccess}}</h2><span> 待录入</span></li>\n                        </ul>\n                        <ul class=\"clearfix\" style=\"display: flex;flex-direction: row;justify-content: center;padding-top: 0.12rem;\">\n                            <li>\n                                <h2 id=\"yes_amount\">{{totalday}}</h2><span>7日内获奖总数 </span></li>\n                            <li>\n                                <h2 id=\"yes2_amount\">{{totaldays}}</h2><span> 7日内比赛总数</span></li>\n                        </ul>\n                    </div>\n                    <!-- <div class=\"boxfoot\"></div> -->\n                </div>\n                <div class=\"boxall\" style=\"height: 4rem\">\n                    <div class=\"alltitle\">系统状态</div>\n\n                    <div class=\"sycm\">\n                        <ul class=\"clearfix\" style=\"display: flex;flex-direction: row;justify-content: center;\">\n                            <li>\n                                <h2 id=\"today_total_money\">{{totalmatch}}</h2><span>比赛总数</span></li>\n                            <li>\n                                <h2 id=\"yesday_total_money\">{{totalinfo}}</h2><span>文件总数</span></li>\n                        </ul>\n                    </div>\n                    <div class=\"sycm\">\n                        <div class=\"tit02\"><span>平台数据</span></div>\n                        <ul class=\"clearfix\">\n                            <li>\n                                <h2 id=\"today_total_alipay\">{{totaluser}}</h2><span> 系统用户总量</span></li>\n                            <li>\n                                <h2 id=\"today_total_weixin\">{{totalteacher}}</h2><span> 系统教师总量</span></li>\n                            <li>\n                                <h2>{{totalstudent}}</h2><span> 系统学生总数</span></li>\n                        </ul>\n                        <ul class=\"clearfix\">\n                            <li>\n                                <h2>{{firstlevel}}</h2><span>一等奖人数 </span></li>\n                            <li>\n                                <h2>{{secondlevel}}</h2><span> 二等奖人数</span></li>\n                            <li>\n                                <h2>{{thirdlevel}}</h2><span> 三等奖人数</span></li>\n                        </ul>\n                    </div>\n\n                </div>\n            </li>\n            <li>\n                <div class=\"bar\">\n                    <div class=\"barbox \">\n                        <ul class=\"clearfix\">\n                            <li class=\"pulll_left counter\" id=\"total_order\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<animate-number\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfrom=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t:to=\"totalreg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t:key=\"totalreg\"\n                                 class=\"counter\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></animate-number>\n                            </li>\n\n                            <li class=\"pulll_left counter\" id=\"total_money\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<animate-number\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfrom=\"0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t:to=\"level\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t:key=\"level\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"counter\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></animate-number>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</li>\n                        </ul>\n                    </div>\n                    <div class=\"barbox2\">\n                        <ul class=\"clearfix\">\n                            <li class=\"pulll_left\">参赛总数</li>\n                            <li class=\"pulll_left\">获奖用户总数</li>\n                        </ul>\n                    </div>\n                </div>\n                <div class=\"map\">\n                    <div class=\"map1\"><img src=\"https://screen.epay.quest/images/lbx.png\"></div>\n                    <div class=\"map2\"><img src=\"https://screen.epay.quest/images/jt.png\"></div>\n                    <div class=\"map3\"><img src=\"https://screen.epay.quest/images/map.png\"></div>\n                    <div class=\"map4\" id=\"map_1\"></div>\n                </div>\n            </li>\n            <li>\n\t\t\t\t\t\t\t<div class=\"boxall\" style=\"height: 8.0rem\">\n    <div class=\"alltitle\">获奖监控</div>\n    <div class=\"addnew\">\n      <div class=\"tit02\"><span>最新赛事</span></div>\n      <div class=\"adduser\" style=\"height: auto; color: aliceblue;\">\n\n          <li v-for=\"item in orders\" :key=\"item.registrationId\">\n            <p style=\"color: aliceblue;\">\n              <b :style=\"{\n                color: item.awardLevel === '一等奖' ? '#7c7cff' : (item.awardLevel === '二等奖' ? 'green' : (item.awardLevel === '三等奖' ? 'orange' : '#399BF3'))\n              }\">\n                {{ item.competitionName }}\n              </b>\n              - {{ item.studentName }} - {{ item.awardLevel ? item.awardLevel : \"暂未获奖\" }} -\n              <b v-html=\"getLabel(item.competitionType)\"></b> - {{ formatDateTime(item.registrationTime) }}\n            </p>\n          </li>\n\n      </div>\n    </div>\n    <div class=\"boxfoot\"></div>\n  </div>\n            </li>\n        </ul>\n    </div>\n\t</div>\n</template>\n<script>\nexport default{\n\tname:'console',\n\tdata(){\n\t\treturn{\n\t\t// 获奖用户总数\n\t\t totalreg:'',\n\t\t//  用户总数\n\t\t totaluser:'',\n\t\t//  教师总量\n\t\ttotalteacher:'',\n\t\t// 学生总数\n\t\ttotalstudent:'',\n\t\t// 一等奖人数\n\t\tfirstlevel:'',\n\t\t// 二等奖\n\t\tsecondlevel:'',\n\t\t// 三等奖\n\t\tthirdlevel:'',\n\t\t// 所有资料\n\t\ttotalinfo:'',\n\t\t// 比赛数量\n\t\ttotalmatch:'',\n\t\t// 成功报名\n\t\ttotalsuccess:'',\n\t\t// 待审核数量\n\t\ttotalday:'',\n\t\tinterval1: null,\n    interval2: null,\n\t\ttotaldays:'',\n\t\ttotalrecord:[],\n\t\t currentTime:'',\n\t\t timer:'',\n\t\t orders:[],\n\t\t}\n\n\t},\n\tmounted() {\n\t\t// 获取参赛总数\n\t\tthis.users()\n    // 在组件挂载后开始定时更新时间\n    this.initAnimation();\n  },computed:{\n\tlevel(){\nreturn this.firstlevel+this.secondlevel+this.thirdlevel\n}\n\t},\n\tmethods:{\n\tasync\tusers(){\n\t\t// 获取用户总数\n\t await this.$api.getCount().then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.totaluser=res.data\n\t\t}\n\t})\n\t// 获取参赛总人数\n\tawait this.$api.getCounts().then(res=>{\n\t\t\t\tif(res.code==200){\n\t\t\t\tthis.totalreg=res.data\n\t\t\t }\n\t\t\t})\n\t\t// 获取教师总人数\n\t\tawait   this.$api.getTeacherCount().then(res=>{\n\t\t\t\tif(res.code==200){\n\t\t\t\tthis.totalteacher=res.data\n\t\t\t }\n\t\t\t})\n\t// 获取学生总人数\n\tawait   this.$api.getStudentCount().then(res=>{\n\t\t\t\tif(res.code==200){\n\t\t\t\tthis.totalstudent=res.data\n\t\t\t }\n\t\t\t})\n\t// 一等奖人数\n\tawait   this.$api.getWinCountByLevel({level:'一等奖'}).then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.firstlevel=res.data\n\t\t}\n\t})\n\t// 二等奖人数\n\tawait   this.$api.getWinCountByLevel({level:'二等奖'}).then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.secondlevel=res.data\n\t\t}\n\t})\n\t// 三等奖\n\tawait   this.$api.getWinCountByLevel({level:'三等奖'}).then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.thirdlevel=res.data\n\t\t}\n\t})\n\t// 获取所有资料\n\tawait   this.$api.Allinformation().then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.totalinfo=res.data.length\n\t\t}\n\t})\n\t// 获取所有比赛数量\n\tawait   this.$api.AllCompetition().then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.totalmatch=res.data.length\n\t\t}\n\t})\n\t\t// 获取所有待审核数量\n\t\tawait\tthis.$api.RegistrationAll().then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.totalrecord=res.data.filter(\n\t\t\t\t item=>item.registrationStatus==\"等待学校审核\"\n\t\t\t).length\n\t\t}\n\t})\n\t// 获取所有待审核数量\n\tawait\tthis.$api.RegistrationAll().then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.totalsuccess=res.data.filter(\n\t\t\t\t item=>item.registrationStatus==\"成功报名\"\n\t\t\t).length\n\t\t}\n\t})\n\n// 获取当前日期和时间\nconst currentDate = new Date();\n// 计算七天前的日期\nconst sevenDaysAgo = new Date(currentDate);\nsevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);\n\n// 获取七天内成功报名的数量\nawait this.$api.RegistrationAll().then(res => {\n    if (res.code == 200) {\n        this.totalday = res.data.filter(item => {\n            // 解析报名时间字符串为日期对象\n            const registrationTime = new Date(item.registrationTime);\n            // 检查报名时间是否在七天内\n            return registrationTime >= sevenDaysAgo && registrationTime <= currentDate;\n        }).length;\n    }\n});\n// 获取七天内比赛的数量\nawait this.$api.AllCompetition().then(res => {\n    if (res.code == 200) {\n        this.totaldays = res.data.filter(item => {\n            // 解析报名时间字符串为日期对象\n            const registrationEndTime = new Date(item.registrationEndTime);\n            // 检查报名时间是否在七天内\n            return registrationEndTime >= sevenDaysAgo && registrationEndTime <= currentDate;\n        }).length;\n    }\n});\n\t\t// 获取所有待审核数量\n\t\tawait\tthis.$api.RegistrationAll().then(res=>{\n\t\tif(res.code==200){\n\t\t\tthis.totalsuccess=res.data.filter(\n\t\t\t\t item=>item.registrationStatus==\"成功报名\"\n\t\t\t).length\n\t\t}\n\t})\n\t\t}, initAnimation() {\n      const wrapUl = document.querySelector(\".addnew ul\");\n      const adduserUl = document.querySelector(\".adduser ul\");\n      const html1 = wrapUl.innerHTML;\n      const html2 = adduserUl.innerHTML;\n      wrapUl.innerHTML += html1;\n      adduserUl.innerHTML += html2;\n\n      const ls1 = wrapUl.querySelectorAll(\"li\").length / 2 + 1;\n      const ls2 = adduserUl.querySelectorAll(\"li\").length / 2 + 1;\n\n      let i = 0;\n      this.interval1 = setInterval(() => {\n        i++;\n        if (i === ls1) {\n          i = 1;\n          wrapUl.style.marginTop = \"0\";\n        }\n        wrapUl.style.marginTop = -0.52 * i + \"rem\";\n      }, 2400);\n\n      let a = 0;\n      this.interval2 = setInterval(() => {\n        a++;\n        if (a === ls2) {\n          a = 1;\n          adduserUl.style.marginTop = \"0\";\n        }\n        adduserUl.style.marginTop = -0.4 * a + \"rem\";\n      }, 4300);\n    },\n// 更新时间的方法\n// 格式化日期时间的方法\nformatDateTime(dateTime) {\n      const dateObj = new Date(dateTime);\n      const year = dateObj.getFullYear();\n      const month = String(dateObj.getMonth() + 1).padStart(2, '0');\n      const day = String(dateObj.getDate()).padStart(2, '0');\n      const hours = String(dateObj.getHours()).padStart(2, '0');\n      const minutes = String(dateObj.getMinutes()).padStart(2, '0');\n      const seconds = String(dateObj.getSeconds()).padStart(2, '0');\n      return `${year}-${month}-${day}`;\n    },\n\t\t// 获取参赛人员信息\n\t\tasync getorder(){\n\t\t\t// 获取所有信息\n\t\t\tawait\tthis.$api.RegistrationAll().then(res=>{\n\t\t\tif(res.code==200){\n\t\t\tthis.orders=res.data.slice(0,15)\n\t\t}\n\t})\n\n\t\t},\n\t\t// 获取支付类型的标签\n    getLabel(type) {\n      if (type =='国家级') {\n        return '<b style=\"color: #7c7cff;\">国家级</b>';\n      } else if (type =='省级') {\n        return '<b style=\"color: green;\">省级</b>';\n      } else if (type =='市级') {\n        return '<b style=\"color: #399BF3;\">市级</b>';\n      } else {\n        return '<b style=\"color: white;\">校级</b>';\n      }\n    }\n  },created() {\n    // 在组件创建时启动定时器\n    this.getOrderInterval = setInterval(function(){\n\t\t\tthis.getorder();\n\t\t\tthis.users();\n\t\t}, 5000);\n    // 首次加载数据\n\t\tthis.users();\n    this.getorder();\n\n  },\n  beforeDestroy() {\n    // 在组件销毁前清除定时器，防止内存泄漏\n    clearInterval(this.getOrderInterval);\n  },\n\n}\n</script>\n<style scoped>\n/*大屏*/\n@charset \"utf-8\";\n\n* {\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box\n}\n.fade-enter-active, .fade-leave-active {\n  transition: all 0.5s ease;\n}\n.fade-enter, .fade-leave-to {\n  opacity: 0;\n  transform: translateY(-15px);\n}\nhtml {\n\tfont-size: 326px;\n}\n\n@font-face {\n\tfont-family: electronicFont;\n\tsrc: url(https://screen.epay.quest/css/DS-DIGIT.TTF)\n}\n\n*,\n.body {\n\tpadding: 0px;\n\tmargin: 0px;\n\n\tfont-family: \"微软雅黑\";\n}\n\n.body {\n\tbackground: #000d4a url(https://screen.epay.quest/images/bg.jpg) center top;\n\tbackground-size: cover;\n\tcolor: #666;\n\tpadding-bottom: 30px;\n\tfont-size: .1rem;\n}\n\nli {\n\tlist-style-type: none;\n}\n\ntable {}\n\ni {\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-indent: 0px;\n}\n\nimg {\n\tborder: none;\n\tmax-width: 100%;\n}\n\na {\n\ttext-decoration: none;\n\tcolor: #399bff;\n}\n\na.active,\na:focus {\n\toutline: none !important;\n\ttext-decoration: none;\n}\n\nol,\nul,\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tpadding: 0;\n\tmargin: 0\n}\n\na:hover {\n\tcolor: #06c;\n\ttext-decoration: none !important\n}\n\n/* 加载旋转动画 */\n#load {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\tbackground: url(https://screen.epay.quest/images/data08.png) no-repeat #061537;\n\tbackground-size: cover;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 999\n}\n\n#load .load_img {\n\tposition: absolute;\n\tleft: calc(50% - 182px);\n\ttop: calc(50% - 182px);\n}\n\n.load_img img {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n}\n\n.load_img .jzxz1 {\n\tanimation: xz1 8s infinite linear;\n}\n\n@keyframes xz1 {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t50% {\n\t\ttransform: rotate(180deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n.load_img .jzxz2 {\n\tanimation: xz2 7s infinite linear;\n}\n\n@keyframes xz2 {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t50% {\n\t\ttransform: rotate(-180deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(-360deg);\n\t}\n}\n\n.clearfix:after,\n.clearfix:before {\n\tdisplay: table;\n\tcontent: \" \"\n}\n\n.clearfix:after {\n\tclear: both\n}\n\n\n\n\n.pulll_left {\n\tfloat: left;\n}\n\n.pulll_right {\n\tfloat: right;\n}\n\n/*谷哥滚动条样式*/\n\n::-webkit-scrollbar {\n\twidth: 5px;\n\theight: 5px;\n\tposition: absolute\n}\n\n::-webkit-scrollbar-thumb {\n\tbackground-color: #5bc0de\n}\n\n::-webkit-scrollbar-track {\n\tbackground-color: #ddd\n}\n\n/***/\n\n.loading {\n\tposition: fixed;\n\tleft: 0;\n\ttop: 0;\n\tfont-size: .3rem;\n\tz-index: 100000000;\n\twidth: 100%;\n\theight: 100%;\n\tbackground: #1a1a1c;\n\ttext-align: center;\n}\n\n.loadbox {\n\tposition: absolute;\n\twidth: 160px;\n\theight: 150px;\n\tcolor: #324e93;\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-top: -100px;\n\tmargin-left: -75px;\n}\n\n.loadbox img {\n\tmargin: 10px auto;\n\tdisplay: block;\n\twidth: 40px;\n}\n\n.copyright {\n\tbackground: rgba(19, 31, 64, .32);\n\tborder: 1px solid rgba(255, 255, 255, .05);\n\tline-height: .5rem;\n\ttext-align: center;\n\tpadding-right: 15px;\n\tbottom: 0;\n\tcolor: rgba(255, 255, 255, .7);\n\tfont-size: .16rem;\n}\n\n.head {\n\theight: 1.05rem;\n\tbackground: url(https://screen.epay.quest/images/head_bg.png) no-repeat center center;\n\tbackground-size: 100% 100%;\n\tposition: relative\n}\n\n.head h1 {\n\tcolor: #fff;\n\ttext-align: center;\n\tfont-size: .42rem;\n\tline-height: .75rem;\n}\n\n.head h1 img {\n\twidth: 1.5rem;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tmargin-right: .2rem\n}\n\n.weather {\n\tposition: absolute;\n\tright: .3rem;\n\ttop: 0;\n\tline-height: .75rem;\n}\n\n.weather img {\n\twidth: .37rem;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n}\n\n.weather span {\n\tcolor: rgba(255, 255, 255, .7);\n\tfont-size: .18rem;\n\tpadding-right: .1rem;\n}\n\n.mainbox {\n\tpadding: 0rem .4rem 0rem .4rem;\n}\n\n.mainbox>ul {\n\tmargin-left: -.4rem;\n\tmargin-right: -.4rem;\n}\n\n.mainbox>ul>li {\n\tfloat: left;\n\tpadding: 0 .4rem\n}\n\n.mainbox>ul>li {\n\twidth: 30%\n}\n\n.mainbox>ul>li:nth-child(2) {\n\twidth: 40%\n}\n\n.boxall {\n\tborder: 1px solid rgba(25, 186, 139, .17);\n\tpadding: 0 .3rem .3rem .3rem;\n\tbackground: rgba(255, 255, 255, .04) url(https://screen.epay.quest/images/line.png);\n\tbackground-size: 100% auto;\n\tposition: relative;\n\tmargin-bottom: .1rem;\n\tz-index: 20;\n}\n\n.boxall:before,\n.boxall:after {\n\tposition: absolute;\n\twidth: .1rem;\n\theight: .1rem;\n\tcontent: \"\";\n\tborder-top: 2px solid #02a6b5;\n\ttop: 0;\n}\n\n.boxall:before,\n.boxfoot:before {\n\tborder-left: 2px solid #02a6b5;\n\tleft: 0;\n}\n\n.boxall:after,\n.boxfoot:after {\n\tborder-right: 2px solid #02a6b5;\n\tright: 0;\n}\n\n.alltitle {\n\tfont-size: .24rem;\n\tcolor: #fff;\n\ttext-align: center;\n\tline-height: .6rem;\n\tborder-bottom: 1px solid rgba(255, 255, 255, .2)\n}\n\n.boxfoot {\n\tposition: absolute;\n\tbottom: 0;\n\twidth: 100%;\n\tleft: 0;\n}\n\n.boxfoot:before,\n.boxfoot:after {\n\tposition: absolute;\n\twidth: .1rem;\n\theight: .1rem;\n\tcontent: \"\";\n\tborder-bottom: 2px solid #02a6b5;\n\tbottom: 0;\n}\n\n.bar {\n\tbackground: rgba(101, 132, 226, .1);\n\tpadding: .15rem;\n}\n\n.barbox li,\n.barbox2 li {\n\twidth: 50%;\n\ttext-align: center;\n\tposition: relative;\n}\n\n.barbox:before,\n.barbox:after {\n\tposition: absolute;\n\twidth: .3rem;\n\theight: .1rem;\n\tcontent: \"\";\n}\n\n.barbox:before {\n\tborder-left: 2px solid #02a6b5;\n\tleft: 0;\n\tborder-top: 2px solid #02a6b5;\n}\n\n.barbox:after {\n\tborder-right: 2px solid #02a6b5;\n\tright: 0;\n\tbottom: 0;\n\tborder-bottom: 2px solid #02a6b5;\n}\n\n.barbox li:first-child:before {\n\tposition: absolute;\n\tcontent: \"\";\n\theight: 50%;\n\twidth: 1px;\n\tbackground: rgba(255, 255, 255, .2);\n\tright: 0;\n\ttop: 25%;\n}\n\n.barbox {\n\tborder: 1px solid rgba(25, 186, 139, .17);\n\tposition: relative;\n}\n\n.barbox li {\n\tfont-size: .3rem;\n\tcolor: #ffeb7b;\n\tpadding: .05rem 0;\n\tfont-family: Gotham, \"Helvetica Neue\", Helvetica, Arial, \"sans-serif\";\n\tfont-weight: bold;\n}\n\n.barbox2 li {\n\tfont-size: .19rem;\n\tcolor: #637c9f;\n\tpadding-top: .1rem;\n}\n\n.map {\n\tposition: relative;\n\theight: 4.3rem;\n\tz-index: 9;\n}\n\n.map4 {\n\twidth: 100%;\n\theight: 4.3rem;\n\tposition: relative;\n\tleft: -50%;\n\ttop: 2%;\n\tmargin-top: .2rem;\n\tz-index: 5;\n}\n\n.map1,\n.map2,\n.map3 {\n\tposition: absolute;\n}\n\n.map1 {\n\twidth: 3.93rem;\n\tz-index: 2;\n\ttop: .1rem;\n\tleft: 1.7rem;\n\tanimation: myfirst2 15s infinite linear;\n}\n\n.map2 {\n\twidth: 3.66rem;\n\ttop: .15rem;\n\tleft: 1.87rem;\n\tz-index: 3;\n\topacity: 0.2;\n\tanimation: myfirst 10s infinite linear;\n}\n\n.map3 {\n\twidth: 3.18rem;\n\ttop: .4rem;\n\tleft: 2.13rem;\n\tz-index: 1;\n}\n\n#echarts1,\n#echarts2,\n#echarts3,\n#echarts6,\n#echarts7,\n#echarts8 {\n\tposition: relative;\n}\n\n#echarts1:before,\n#echarts2:before,\n#echarts3:before,\n#echarts6:before,\n#echarts7:before,\n#echarts8:before {\n\tposition: absolute;\n\tcontent: \"23124\";\n\twidth: 100%;\n\ttext-align: center;\n\tbottom: .15rem;\n\tcolor: #fff;\n\topacity: .7;\n\tfont-size: .18rem;\n}\n\n#echarts1:before {\n\tcontent: \"平均单客价\"\n}\n\n#echarts2:before {\n\tcontent: \"男消费\"\n}\n\n#echarts3:before {\n\tcontent: \"女消费\"\n}\n\n#echarts6:before {\n\tcontent: \"新增会员\"\n}\n\n#echarts7:before {\n\tcontent: \"新增领卡会员\"\n}\n\n#echarts8:before {\n\tcontent: \"新增消费会员\"\n}\n\n.adduser li {\n            /*line-height:.42rem;*/\n            font-size: .18rem;\n            margin-bottom: .08rem;\n        }\n\n        .adduser li p {\n            border: 1px solid rgba(25, 186, 139, .17);\n            color: rgba(255, 255, 255, .6);\n        }\n\n        .grid {\n            margin-top: 5%;\n            width: 80%;\n            height: 10px;\n            display: grid;\n            grid-template-columns: repeat(20, 1fr);\n            grid-column-gap: 14px;\n        }\n\n        .line {\n            position: relative;\n            width: 90%;\n            height: 7px;\n        }\n\n        .line::before,\n        .line::after {\n            content: '';\n            position: absolute;\n            width: 4.5rem;\n            height: 100%;\n            border-radius: 7px;\n            background-color: #FF0000;\n        }\n\n        .line::before {\n            animation: first-line ease-in-out 4s var(--delay) infinite alternate;\n        }\n\n        .line::after {\n            bottom: 0;\n            background-color: #B22222;\n            width: calc(80% - 10px);\n            animation: second-line ease-in-out 4s var(--delay) infinite alternate;\n        }\n\n        .line:nth-child(1) {\n            --delay: calc(-0.1s);\n        }\n\n        @keyframes first-line {\n            70% {\n                width: calc(80% - 10px);\n            }\n            100% {\n                background-color: #FF0000;\n            }\n        }\n\n        .barbox li {\n            font-size: .7rem;\n            color: #ffeb7b;\n            padding: 0.05rem 0;\n            font-family: electronicFont, \"sans-serif\";\n            font-weight: bold;\n        }\n\n.tabs {\n\ttext-align: center;\n\tpadding: .1rem 0 0 0;\n}\n\n.tabs a {\n\tposition: relative;\n\tdisplay: inline-block;\n\tmargin-left: 1px;\n\tpadding: .05rem .2rem;\n\tcolor: #898989;\n\ttransition: all .3s ease-out 0s;\n\tfont-size: 14px;\n}\n\n.tabs li {\n\tdisplay: inline-block;\n}\n\n.tabs a:after {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 10px;\n\tbackground-color: rgba(255, 255, 255, .1);\n\tcontent: '';\n\tmargin-left: 0;\n\tright: -1px;\n\tmargin-top: 7px;\n\n\n}\n\n.tabs li a.active {\n\tborder: 1px solid rgba(25, 186, 139, .17);\n\tbackground: rgba(255, 255, 255, .05);\n\tcolor: #fff;\n}\n\n.tit02 {\n\ttext-align: center;\n\tmargin: .1rem 0;\n\tposition: relative\n}\n\n.tit02 span {\n\tborder: 1px solid rgba(25, 186, 139, .17);\n\tletter-spacing: 2px;\n\tpadding: .01rem .2rem;\n\tbackground: rgba(255, 255, 255, .05);\n\tfont-size: .18rem;\n\tcolor: #49bcf7;\n}\n\n.tit02:before,\n.tit02:after {\n\tposition: absolute;\n\twidth: 26%;\n\theight: 1px;\n\tbackground: rgba(25, 186, 139, .2);\n\tcontent: \"\";\n\ttop: .12rem;\n}\n\n.tit02:after {\n\tright: 0;\n}\n\n.tit02:before {\n\tleft: 0;\n}\n\n.wrap {\n\theight: 2.54rem;\n\toverflow: hidden;\n}\n\n.wrap li {\n\tline-height: .42rem;\n\theight: .42rem;\n\tfont-size: .18rem;\n\ttext-indent: .24rem;\n\tmargin-bottom: .1rem;\n}\n\n.wrap li p {\n\tborder: 1px solid rgba(25, 186, 139, .17);\n\tcolor: rgba(255, 255, 255, .6);\n}\n\n.sy {\n\tfloat: left;\n\twidth: 33%;\n\theight: 2.2rem;\n\tmargin-top: -.25rem;\n}\n\n\n.adduser {\n\theight: 1.5rem;\n\toverflow: hidden;\n}\n\n.adduser li {\n\theight: .5rem;\n\tfont-size: .17rem;\n}\n\n.adduser img {\n\twidth: .40rem;\n\tborder-radius: .5rem;\n\tmargin-right: .1rem;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n}\n\n.adduser span {\n\tline-height: .5rem;\n\tfont-size: .18rem;\n\tcolor: rgba(255, 255, 255, .6);\n}\n\n.sycm ul {\n\tmargin-left: -.5rem;\n\tmargin-right: -.5rem;\n\tpadding: .08rem 0;\n}\n\n.sycm li {\n\tfloat: left;\n\twidth: 33.33%;\n\ttext-align: center;\n\tposition: relative\n}\n\n.sycm li:before {\n\tposition: absolute;\n\tcontent: \"\";\n\theight: 30%;\n\twidth: 1px;\n\tbackground: rgba(255, 255, 255, .1);\n\tright: 0;\n\ttop: 15%;\n}\n\n.sycm li:last-child:before {\n\twidth: 0;\n}\n\n.sycm li h2 {\n\tfont-size: .3rem;\n\tcolor: #c5ccff;\n}\n\n.sycm li span {\n\tfont-size: .18rem;\n\tcolor: #fff;\n\topacity: .5;\n}\n\n@keyframes myfirst2 {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(359deg);\n\t}\n}\n\n@keyframes myfirst {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\n\tto {\n\t\ttransform: rotate(-359deg);\n\t}\n}\n</style> -->\n"]}]}