diff --git a/src/api/index.js b/src/api/index.js index cbb5078..eaa20f1 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,6 +1,7 @@ import axios from "axios"; // import qs from 'qs' import router from '../router/index' + function sendGetRequest(url, data) { return new Promise(function (resolve, reject) { axios.get(url, { @@ -13,12 +14,14 @@ function sendGetRequest(url, data) { params: data }) .then(function (res) { //请求成功，response接收返回参数 - if(res.data.code==401){ + if (res.data.code == 401) { localStorage.removeItem('token') - router.push({ name:'login' }) + router.push({ + name: 'login' + }) } resolve(res); - + }) .catch(function (err) { //请求失败，error接收失败原因 reject(err); @@ -38,9 +41,11 @@ function sendPostRequest(url, data) { } }).then( (res) => { - if(res.data.code==401){ + if (res.data.code == 401) { localStorage.removeItem('token') - router.push({ name:'login' }) + router.push({ + name: 'login' + }) } resolve(res); }, @@ -82,73 +87,114 @@ export default { }, //根据用户id查询对应的设备数据 getEqbyid(data) { - return sendGetRequest("/sel/eqbyid/"+data,''); + return sendGetRequest("/sel/eqbyid/" + data, ''); }, //测试施肥机读取设备状态信息 //读取数据 根据文档编号读取 所有数据展示都出自这个接口 - postReg(data){ + postReg(data) { return sendPostRequest("/readFs/reg", data); }, //测试施肥机读取设备状态信息 //读取数据 根据文档编号读取 所有数据展示都出自这个接口 - postState(data){ + postState(data) { return sendPostRequest("/readFs/state", data); }, - //测试施肥机写入数据信息 //修改数据 根据文档编号修改 所有数据修改都出自这个接口 - postWriteFs(data){ + //测试施肥机写入数据信息 //修改数据 根据文档编号修改 所有数据修改都出自这个接口 + postWriteFs(data) { return sendPostRequest("/writeFs", data); }, - getByid(data){ - return sendGetRequest("/readFs/byid",data); + getByid(data) { + return sendGetRequest("/readFs/byid", data); }, //获取实时数据 - postRtdata(data){ - return sendPostRequest("/getFs/rtdata?equipmentId="+data, ''); + postRtdata(data) { + return sendPostRequest("/getFs/rtdata?equipmentId=" + data, ''); }, - //获取实时数据 - postFsdata(data){ - return sendPostRequest("/chart/fsdata?equipmentId="+data, ''); + //获取实时数据 + postFsdata(data) { + return sendPostRequest("/chart/fsdata?equipmentId=" + data, ''); }, //获取监控地址 - getGethls(data){ - return sendGetRequest("/camera/gethls",data); + getGethls(data) { + return sendGetRequest("/camera/gethls", data); }, //根据ID查询用户信息 - getUser(data){ - return sendGetRequest('/api/sel/user',data) + getUser(data) { + return sendGetRequest('/api/sel/user', data) }, //控制器接口 //控制器实时数据 - getControlRtdata(data){ - return sendPostRequest("/getcontrol/rtdata?equipmentId="+data, ''); + getControlRtdata(data) { + return sendPostRequest("/getcontrol/rtdata?equipmentId=" + data, ''); }, //控制器实时数据折线图 - getControlFsdata(data){ - return sendPostRequest("/getcontrol/fsdata?equipmentId="+data, ''); + getControlFsdata(data) { + return sendPostRequest("/getcontrol/fsdata?equipmentId=" + data, ''); }, //控制器数据上传数据获取 - getControldataUpload(data){ - return sendGetRequest('/readControl/dataUpload',data) + getControldataUpload(data) { + return sendGetRequest('/readControl/dataUpload', data) }, //控制器写入数据 - postControlWrite(data){ + postControlWrite(data) { return sendPostRequest("/writeJinHuaControl/write", data); }, //控制器传感器通道 - getReadControlSensorChannel(data){ - return sendGetRequest('/readControl/sensorChannel',data) + getReadControlSensorChannel(data) { + return sendGetRequest('/readControl/sensorChannel', data) }, //控制器 顶模和风机 - getReadControlliShuiControl(data){ - return sendGetRequest('/readControl/liShuiControl',data) + getReadControlliShuiControl(data) { + return sendGetRequest('/readControl/liShuiControl', data) }, //控制器 传感器输入合成 - getReadControlSensorInputSynthesis(data){ - return sendGetRequest('/readControl/sensorInputSynthesis',data) + getReadControlSensorInputSynthesis(data) { + return sendGetRequest('/readControl/sensorInputSynthesis', data) }, - //控制器 主页查看控制器气象站实时数据 - getControlRtDatastation(data){ - return sendGetRequest('/getcontrol/rtDatastation',data) - }, + //控制器 主页查看控制器气象站实时数据 + getControlRtDatastation(data) { + return sendGetRequest('/getcontrol/rtDatastation', data) + }, + //控制器 设备运行状态 + getControlGetState(data) { + return sendGetRequest('/readControl/getState', data) + }, + + + + // 根据用户id查询对应的设备大数据信息 + Bigdata_getAllControl(userid, data) { + return sendGetRequest(`/Bigdata/getAllControl?userid=${userid}`, data); + }, + + // 获取设备当天的温度 + Bigdata_getTemperature(deviceid, data) { + return sendGetRequest(`/Bigdata/getTemperature?deviceid=${deviceid}`, data); + }, + + // 获取设备一周的温度 + Bigdata_getWeekTemperature(deviceid, data) { + return sendGetRequest(`/Bigdata/getWeekTemperature?deviceid=${deviceid}`, data); + }, + + // 主页查看控制器实时数据 + getcontrol_rtdata(equipmentId, data) { + return sendPostRequest(`/getcontrol/rtdata?equipmentId=${equipmentId}`, data); + }, + + // 获取摄像头得地址 Copy + camera_gethls(cameraid, channelid, data) { + return sendGetRequest(`/camera/gethls?cameraid=${cameraid}&channelid=${channelid}`, data); + }, + + // 根据用户id查询对应的设备数据 Copy + sel_eqbyid(userId, data) { + return sendGetRequest(`/sel/eqbyid/${userId}`, data); + }, + + // 控制器状态值获取 Copy + readControl_getState(deviceId, data) { + return sendGetRequest(`/readControl/getState?deviceId=${deviceId}`, data); + } }; \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 14f6a5f..c5554c7 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -1,20 +1,20 @@ @charset "UTF-8"; -.scroll, .el-dropdown-menu, .formula .page-content, .history .page-content .el-table--scrollable-x .el-table__body-wrapper { +.scroll, .el-dropdown-menu, .index .index-content .right.right-page .page-content, .formula .page-content, .realTime, .history .page-content .el-table--scrollable-x .el-table__body-wrapper { overflow-y: auto; } -.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar { +.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar { /*滚动条整体*/ width: 10px; cursor: pointer; } -.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track { +.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track { /*滚动条轨道*/ background: #013769; } -.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb { +.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb { /*滚动条里面的滑块*/ width: 4px; cursor: pointer; @@ -22,11 +22,11 @@ border: 3px solid #013769; } -.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover { +.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .realTime::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover { /*滚动条鼠标事件，鼠标放上去出现的事件*/ } -.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner { +.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner { /*滚动条边角*/ } @@ -404,6 +404,19 @@ overflow: auto; } +.index .index-content .right.right-page { + padding: 20px; +} + +.index .index-content .right.right-page .page-content { + position: relative; + width: 100%; + height: 100%; + background: rgba(0, 92, 178, 0.15); + border: 2px solid rgba(0, 186, 255, 0.2); + padding: 30px 30px 20px; +} + .input-view { display: flex; align-items: center; @@ -1467,15 +1480,26 @@ width: 100%; height: 100%; padding: 20px; + flex-direction: column; + justify-content: unset; +} + +.realTime .new-data { + margin-bottom: 20px; } .realTime .page-content { position: relative; width: 100%; height: 100%; + flex-shrink: 0; background: rgba(0, 92, 178, 0.15); border: 2px solid rgba(0, 186, 255, 0.2); - padding: 30px 30px 20px; + padding: 30px 20px 20px; +} + +.realTime .page-content.control-page { + height: auto; } .realTime .page-content .control-view { @@ -1635,6 +1659,163 @@ height: 100%; } +.realTime .page-content .status-view { + width: 300px; + height: 300px; + background: rgba(0, 132, 255, 0.15); + border: 2px solid rgba(0, 186, 255, 0.35); + margin: 7.5px; +} + +.realTime .page-content .status-view .status-view-top { + padding: 0 10px 0 20px; + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; + border-bottom: 1px solid rgba(0, 180, 255, 0.35); +} + +.realTime .page-content .status-view .status-view-top .status-view-top-left { + font-size: 20px; + font-family: Microsoft YaHei; + font-weight: bold; + color: #FFFFFF; +} + +.realTime .page-content .status-view .status-view-top .status-view-top-right { + cursor: pointer; + padding: 0 10px; +} + +.realTime .page-content .status-view .status-view-content { + width: 100%; + height: calc(100% - 51px); +} + +.realTime .page-content .status-view .status-view-content .status-true { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-fan { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-fan > div { + min-width: unset; + flex-shrink: 0; + font-size: 14px; + height: 30px; + margin: 10px 8px 0 !important; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img { + width: 16px; + height: 16px; + margin-right: 5px; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-sel { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 50px; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div { + display: flex; + align-items: center; + font-size: 14px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div > img { + width: 20px; + height: 20px; + margin-right: 10px; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-charts { + width: 100%; + height: 153px; + position: relative; + background: url(../img/status-true-charts.png) no-repeat; + background-size: 227px 114px; + background-position: center 20px; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > img { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 6px; + width: 28px; + height: 27px; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > div { + width: 100%; + height: 100%; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-text { + width: 227px; + height: 35px; + padding: 0 16px; + background: url(../img/status-true-text.png) no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-left { + font-size: 14px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #8BEAFF; +} + +.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-right { + font-size: 14px; + font-family: Arial; + font-weight: 400; + color: #FFFFFF; +} + +.realTime .page-content .status-view .status-view-content .status-noTrue { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.realTime .page-content .status-view .status-view-content .status-noTrue > img { + width: 40px; + height: 35px; + margin-bottom: 20px; +} + +.realTime .page-content .status-view .status-view-content .status-noTrue > div { + font-size: 14px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #8BEAFF; +} + .history .page-content { width: 100%; } @@ -2032,3 +2213,25 @@ font-weight: 400; color: #FFFFFF; } + +.plantingPlan { + width: 100%; + height: 100%; +} + +.plantingPlan .btn { + opacity: 1; +} + +.plantingPlan .btn .img { + height: 20px; + width: 20px; +} + +.plantingPlan .plan-view { + width: 440px; + height: 200px; + background: url(../img/plan-bg.png) no-repeat center; + background-size: 100% 100%; + margin: 7.5px 15px; +} diff --git a/src/assets/css/main.min.css b/src/assets/css/main.min.css index 0cc2e49..83f905e 100644 --- a/src/assets/css/main.min.css +++ b/src/assets/css/main.min.css @@ -1 +1 @@ -.scroll,.el-dropdown-menu,.formula .page-content,.history .page-content .el-table--scrollable-x .el-table__body-wrapper{overflow-y:auto}.scroll::-webkit-scrollbar,.el-dropdown-menu::-webkit-scrollbar,.formula .page-content::-webkit-scrollbar,.history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{width:10px;cursor:pointer}.scroll::-webkit-scrollbar-track,.el-dropdown-menu::-webkit-scrollbar-track,.formula .page-content::-webkit-scrollbar-track,.history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track{background:#013769}.scroll::-webkit-scrollbar-thumb,.el-dropdown-menu::-webkit-scrollbar-thumb,.formula .page-content::-webkit-scrollbar-thumb,.history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{width:4px;cursor:pointer;background:#0294E2;border:3px solid #013769}.el-date-table td span,.el-date-range-picker__header div{color:#606266}.el-date-table td.end-date div span,.el-date-table td.start-date div span{color:#fff !important}.el-dropdown-menu{max-height:300px}.border-none{border:none !important}.collapse .el-collapse{border:none}.collapse .el-collapse-item__header,.collapse .el-collapse-item__wrap{background:transparent;border-bottom:1px solid rgba(168,182,200,0.2)}.collapse .el-collapse-item__header{font-size:16px;padding-left:25px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;display:flex;align-items:center}.collapse .el-collapse-item__header>.img{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-right:10px}.collapse .el-collapse-item__content{padding:0}.collapse .no-list{width:100%;height:76px;line-height:76px;padding-left:25px;border-bottom:1px solid rgba(168,182,200,0.2);cursor:pointer;color:#A8B6C8}.collapse .no-list:hover{color:#fff}.collapse .table-ul{display:flex;flex-direction:column;align-items:center;padding:10px 0}.collapse .table-ul .table-li{display:flex;align-items:center;padding-left:31px;position:relative;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#A8B6C8;width:200px;height:40px;cursor:pointer}.collapse .table-ul .table-li:hover{color:#fff}.collapse .table-ul .table-li:hover::before{background:#fff}.collapse .table-ul .table-li.active{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:#fff}.collapse .table-ul .table-li.active::before{background:#fff}.collapse .table-ul .table-li .status{width:50px;height:22px;background:rgba(168,182,200,0.15);border:1px solid rgba(168,182,200,0.5);border-radius:11px;font-size:12px;font-family:Microsoft YaHei;font-weight:400;display:flex;align-items:center;justify-content:center;color:#A8B6C8;margin-left:10px}.collapse .table-ul .table-li .status.online{background:rgba(0,255,186,0.15);border:1px solid rgba(0,255,186,0.5);color:#00FFBA}.collapse .table-ul .table-li::before{content:' ';width:4px;height:4px;background:#A8B6C8;position:absolute;top:50%;transform:translateY(-50%);left:10px}.collapse.set-params .el-collapse-item.active .el-collapse-item__header{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3)}.collapse.set-params .el-collapse-item.active .el-collapse-item__header .name{color:#fff !important}.collapse.set-params .el-collapse-item__header .name{color:#A8B6C8}.collapse.set-params .table-ul .table-li{width:100%;padding-left:40px}.collapse.set-params .table-ul .table-li::before{left:20px}.table-title{display:flex;align-items:center;font-size:28px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.table-title>img{width:60px;height:60px;margin-right:15px}.table-title .tips{margin-left:15px;display:flex;align-items:center;justify-content:center;width:120px;height:34px;background:rgba(0,255,186,0.15);border:1px solid rgba(0,255,186,0.5);border-radius:17px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#00FFBA}.index{width:100%;height:100%;min-height:900px;overflow:auto;background:url(../image/index-background.png) no-repeat;background-size:1920px 1080px;background-position:center top}.index .no-list{color:#fff;display:flex;align-items:center}.index .no-list>.img{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-right:10px}.index .header{height:78px;display:flex;align-items:center;justify-content:space-between}.index .header .header-left{position:relative;width:373px;height:78px}.index .header .header-left>img{width:373px;height:99px;cursor:pointer}.index .header .header-center{width:calc(100% - 335px - 373px);max-width:1000px;height:78px;display:flex;align-items:center;justify-content:space-around}.index .header .header-center>div{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;width:111px;height:78px}.index .header .header-center>div.active{background:linear-gradient(0deg, rgba(0,132,255,0.3) 0%, rgba(0,132,255,0) 100%);position:relative}.index .header .header-center>div.active::before{content:' ';position:absolute;left:0;top:0;width:1px;height:78px;background:linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);opacity:0.3}.index .header .header-center>div.active::after{content:' ';position:absolute;right:0;top:0;width:1px;height:78px;background:linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);opacity:0.3}.index .header .header-center>div.active .name{color:#fff}.index .header .header-center>div .img{width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin-bottom:5px}.index .header .header-center>div .name{font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#8BEAFF}.index .header .header-right{width:335px;display:flex;align-items:center;padding-right:20px;justify-content:flex-end}.index .header .header-right>img{width:40px;height:40px}.index .header .header-right .user-data{height:40px;display:flex;flex-direction:column;justify-content:center;padding:0 20px 0 10px;margin-right:20px;border-right:1px solid rgba(255,255,255,0.2)}.index .header .header-right .user-data .name{font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#8BEAFF}.index .header .header-right .user-data .time{font-size:14px;font-family:Arial;font-weight:400;color:#FFFFFF}.index .header .header-right .login-out{width:40px;height:40px;background:url(../image/login-out.png) no-repeat center;background-size:100% 100%;cursor:pointer}.index .header .header-right .login-out:hover{background:url(../image/login-out-hover.png) no-repeat center;background-size:100% 100%}.index .index-content{display:flex;align-items:center;justify-content:space-between;width:100%;height:calc(100% - 78px);position:relative;z-index:2}.index .index-content .left{width:240px;height:100%;background:rgba(0,29,68,0.25);border-right:2px solid rgba(0,180,255,0.25);overflow:auto}.index .index-content .right{width:calc(100% - 240px);height:100%;overflow:auto}.input-view{display:flex;align-items:center;flex-wrap:wrap;margin-top:15px}.input-view>div{flex-shrink:0;margin-right:20px;display:flex;align-items:center;margin:7.5px 0}.input-view>div>span{padding:0 8px}.input-sel>.title{margin-bottom:11px}.input-sel .el-dropdown-link{width:300px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);cursor:pointer;position:relative}.input-sel .el-dropdown-link input{width:100%;height:100%;background:transparent;border:none;padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#00FFBA}.input-sel .el-dropdown-link input::placeholder{color:#859BB6}.input-sel .el-dropdown-link .arrow{width:33px;height:24px;border-left:1px solid #fff;display:flex;align-items:center;justify-content:center;position:absolute;right:0;top:50%;transform:translateY(-50%)}.input-sel .el-dropdown-link .arrow>img{width:6px;height:4px}.input-main span{padding:0 10px}.input-main div{margin-bottom:10px}.input-main input{width:180px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff}.input-main input::placeholder{color:#859BB6}.input-main-80{width:100%;flex-wrap:wrap;display:flex;align-items:center}.input-main-80.table-input{justify-content:center}.input-main-80.table-input>span{color:#FF9191}.input-main-80 span{padding:0 10px}.input-main-80 input{width:80px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff;margin:5px 5px;text-align:center}.input-main-80 input::placeholder{color:#859BB6}.el-dropdown-menu{width:300px;border:none;background-color:#014781}.el-dropdown-menu .popper__arrow::after{border-bottom-color:rgba(0,186,255,0.25) !important}.el-dropdown-menu .el-dropdown-menu__item{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#00C0F7;background:transparent}.el-dropdown-menu .el-dropdown-menu__item.is-disabled{opacity:0.5;cursor:not-allowed}.el-dropdown-menu .el-dropdown-menu__item--divided{border-top:none}.el-dropdown-menu .el-dropdown-menu__item--divided::before{background:#00C0F7}.el-dropdown-menu .el-dropdown-menu__item:focus,.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):hover{background-color:rgba(0,186,255,0.25);color:#FFFFFF}.page-title{width:100%;height:43px;padding-left:41px;font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;position:relative;line-height:43px;background:url(../image/title-202.png) no-repeat center;background-size:202px 43px;background-position:left center;min-width:202px}.page-title::before{content:' ';width:32px;height:33px;left:2px;top:50%;position:absolute;transform:translateY(-50%);background:url(../image/page-title.png) no-repeat center;background-size:100% 100%}.page-title.title-302{background:url(../image/title-302.png) no-repeat center;background-size:302px 43px;background-position:left center;min-width:302px}.formula{width:100%;height:100%;padding:20px;display:flex;align-items:center;justify-content:space-between}.formula .page-content{width:calc(100% - 300px);height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);padding:20px 30px 0}.formula .page-content .table-view{background:transparent;margin-top:30px}.formula .page-content .table-view .cell{text-align:center}.formula .page-content .table-view .el-table .warning-row{background:rgba(0,180,255,0.2)}.formula .page-content .table-view .el-table .success-row{background:rgba(0,47,94,0.35)}.formula .page-content .table-view .el-table::before,.formula .page-content .table-view .el-table--border::after{height:0}.formula .page-content .table-view .el-table,.formula .page-content .table-view .el-table tr,.formula .page-content .table-view .el-table td.el-table__cell{border:none;background:transparent}.formula .page-content .table-view .el-table th.el-table__cell.is-leaf{border:none;background:rgba(0,180,255,0.2)}.formula .page-content .table-view .el-table th.el-table__cell.is-leaf .cell{font-size:18px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.formula .page-content .table-view .status{width:100px;height:34px;background:#0294E2;border-radius:3px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:18px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;cursor:pointer}.formula .page-content .table-view .status.status1{background:#00BB88}.formula .page-content .table-view .status.noSel{opacity:0.5}.formula .page-content .table-view .type0{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FF9191}.formula .page-content .table-view .type1{display:flex;align-items:center;justify-content:center;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;white-space:nowrap}.formula .page-content .table-view .type1>div{justify-content:center}.formula .page-content .table-view .type2{width:140px;height:34px;background:#0294E2;border-radius:3px;margin:0 auto;display:flex;align-items:center;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;cursor:pointer;justify-content:center}.formula .page-content .table-view .type2 img{width:14px;height:14px;margin-right:10px}.formula .page-content .table-view .type2.noSel{opacity:0.5}.flex-view{display:flex;align-items:center;flex-wrap:wrap}.flex-view>div{flex-shrink:0;margin:7.5px 0}.flex-view{padding:12.5px 0;border-bottom:1px solid rgba(0,180,255,0.5)}.input-btn{display:flex;align-items:center}.input-btn>span{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;padding-left:8px}.btn{margin:0 8px !important;padding:0 20px;border-radius:3px;height:40px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;cursor:pointer;white-space:nowrap;min-width:120px}.btn>img{margin-right:10px;width:14px;height:14px}.btn.green{background:#00BB88;opacity:0.5}.btn.blue{background:#0294E2}.btn.off{background:#003070;border:1px solid rgba(2,148,226,0.5);color:#00C0F7}.irrigateSet .open-btn{width:300px;height:54px;background:#003070;border:1px solid rgba(2,148,226,0.5);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:18px;font-family:Microsoft YaHei;font-weight:bold;color:#00C8FF;margin:7.5px 10px;cursor:pointer}.irrigateSet .open-btn>img{margin-right:10px}.irrigateSet .open-btn.active{color:#FFFFFF;background:#0294E2;border-color:#0294E2}.PIDSet .flex-view{border-bottom:none}.PIDSet .PIDSet-view{width:400px;height:470px;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35);margin:7.5px 10px}.PIDSet .PID-input-content{width:100%;height:calc(100% - 43px);padding:30px 0;display:flex;flex-direction:column;justify-content:space-between}.PIDSet .PID-input{display:flex;align-items:center}.PIDSet .PID-input>div{width:114px;margin-right:10px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;text-align:right}.PIDSet .PID-input input{width:240px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff}.PIDSet .PID-input input::placeholder{color:#859BB6}.PIDSet .PID-input-content-full{width:100%;height:calc(100% - 43px);padding:30px 0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.PIDSet .PID-input-full>div{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;margin-bottom:9px}.PIDSet .PID-input-full input{width:350px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff}.PIDSet .PID-input-full input::placeholder{color:#859BB6}.systemSet .system-tips{background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);width:100%;padding:20px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#A8B6C8}.upload .upload-view{width:520px;height:520px;margin:7.5px 10px;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35)}.upload .upload-view .upload-title{background:url(../image/title-172.png) no-repeat center;background-size:172px 43px;background-position:left center;min-width:172px}.upload .upload-content{width:100%;height:calc(100% - 43px);display:grid;grid-template-columns:repeat(2, 1fr);grid-row-gap:20px;grid-column-gap:20px;padding:19px 30px}.upload .upload-content.upload-content1{height:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:19px 30px}.upload .upload-content.upload-content1>div{width:218px;height:45px;margin-bottom:20px}.upload .upload-content>div{display:flex;align-items:center;cursor:pointer;flex-shrink:0;white-space:nowrap;max-height:50px}.upload .upload-content>div>.no-sel{margin-right:10px;width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%}.upload .upload-content>div .sel{margin-right:10px;width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%}.sensorSet{height:100%}.sensorSet .sensor-view{display:flex;align-items:center;justify-content:space-between;width:100%;height:520px;margin-top:30px}.sensorSet .sensor-view .left{width:200px;padding:0 10px;height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2)}.sensorSet .sensor-view .left>div{cursor:pointer;width:100%;height:73px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(0,180,255,0.25)}.sensorSet .sensor-view .left>div>div{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#A8B6C8}.sensorSet .sensor-view .left>div.active>div{width:100%;display:flex;align-items:center;justify-content:center;height:40px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:#fff}.sensorSet .sensor-view .right{width:calc(100% - 220px);height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2)}.sensorSet .sensor-view .right .right-top{width:100%;padding:30px 0px 30px 75px;border-bottom:1px solid rgba(0,180,255,0.35)}.sensorSet .sensor-view .right .right-top .input-sel{margin:15px 0 30px}.sensorSet .sensor-view .right .right-top .input-sel>.title{margin-bottom:11px}.sensorSet .sensor-view .right .right-top .right-sel{display:flex;align-items:center}.sensorSet .sensor-view .right .right-top .right-sel>div{display:flex;align-items:center;cursor:pointer;white-space:nowrap;margin-right:30px;padding:0 0 15px 0}.sensorSet .sensor-view .right .right-top .right-sel>div>.no-sel{margin-right:10px;width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%}.sensorSet .sensor-view .right .right-top .right-sel>div .sel{margin-right:10px;width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%}.sensorSet .sensor-view .right .right-bottom{padding:40px 0 0 75px}.sensorSet .sensor-view .right .right-bottom>div{display:flex;align-items:center;margin-bottom:30px}.sensorSet .sensor-view .right .right-bottom>div>div{margin-right:30px}.sensorSet.sensorSet-con .sensor-view{height:calc(100% - 120px)}.sensorSet.sensorSet-con .right-sel{width:100%;flex-wrap:wrap}.sensorSet.sensorSet-con .right-sel .sensor-type-div{margin-bottom:0;background:unset;border:none;height:auto}.sensorSet.sensorSet-con .right-sel .sensor-type-div .sensor-sel>div{padding-left:0}.sensorSet .sensor-type .sensor-title{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;padding:20px 0}.sensorSet .sensor-type .sensor-title .sensor-sel>div{padding-left:0}.sensorSet .sensor-type .sensor-type-div{width:100%;height:66px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);margin-bottom:20px;display:flex;align-items:center}.sensorSet .sensor-type .sensor-type-div .name{width:120px;border-right:1px solid rgba(2,148,227,0.5);height:40px;line-height:40px;text-align:center;font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;flex-wrap:wrap}.sensorSet .sensor-type .sensor-type-div .sensor-sel{display:flex;align-items:center;width:calc(100% - 120px)}.sensorSet .sensor-type .sensor-type-div .sensor-sel>div{display:flex;align-items:center;cursor:pointer;flex-shrink:0;white-space:nowrap;max-height:50px;padding:0 20px}.sensorSet .sensor-type .sensor-type-div .sensor-sel>div>.no-sel{margin-right:10px;width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%}.sensorSet .sensor-type .sensor-type-div .sensor-sel>div .sel{margin-right:10px;width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%}.el-dialog__wrapper .el-dialog{background:rgba(0,59,114,0.8);border:2px solid rgba(0,186,255,0.35)}.el-dialog__wrapper .el-dialog .el-dialog__header{display:none}.el-dialog__wrapper .el-dialog .el-dialog__body{padding:0}.el-dialog__wrapper .el-dialog .el-dialog__body .model-return{padding:20px;display:flex;align-items:center;justify-content:flex-end}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top{padding:20px 15px;border-bottom:1px solid rgba(0,180,255,0.35);display:flex;align-items:center;justify-content:space-between}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model2-top{justify-content:flex-start}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model3-top .btn{padding:0 10px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model3-top .btn img{width:26px;height:22px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model4-top{align-items:flex-start}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model4-top .btn{padding:0 10px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model4-top .btn img{width:22px;height:24px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .btn img{width:10px;height:14px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right>div{display:flex;align-items:center;margin-bottom:20px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right>div .number{width:30px;margin-right:10px;height:30px;background:#0294E2;border-radius:50%;display:flex;align-items:center;justify-content:center}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right>div .input-main-80{width:auto}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom{padding:20px 15px;border-bottom:1px solid rgba(0,180,255,0.35)}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom.model3-bottom .title{padding:0 4px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content>div{display:flex;align-items:center;padding:10px 0}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content>div .number{width:30px;margin-right:10px;height:30px;background:#0294E2;border-radius:50%;display:flex;align-items:center;justify-content:center}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content .input-main-80 span{font-size:20px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content .input-main-80 span.text{font-size:16px;padding:0 4px;flex-shrink:0}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content.model3-content{display:flex;align-items:center;flex-wrap:wrap}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content.model3-content>div{display:block;width:calc(100% / 3);flex-shrink:0}.login .login-header{position:relative;width:100%;height:76px;background:rgba(0,180,255,0.1);border-bottom:2px solid rgba(0,180,255,0.3)}.login .login-header>img{width:373px;height:99px}.login .login-view{width:520px;height:570px;background:rgba(122,219,255,0.1);border:2px solid rgba(122,219,255,0.66);border-radius:10px;position:fixed;right:5%;top:50%;transform:translateY(-50%);padding-top:59px;display:flex;flex-direction:column;align-items:center}.login .login-view .login-title{width:344px;height:45px;background:url(../image/login-title.png) no-repeat center;background-size:344px 15px;background-position:center bottom;display:flex;align-items:center;justify-content:center;padding-bottom:11px}.login .login-view .login-title>img{width:30px;height:34px;margin-right:9px}.login .login-view .login-title span{font-size:30px;font-family:Alibaba PuHuiTi;font-weight:bold;color:#FFFFFF;background:linear-gradient(0deg, #fff 0%, #BFE7FF 19.99512%, #fff 60.00977%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login .login-view .login-input{width:450px;height:63px;background:rgba(122,219,255,0.05);border:2px solid rgba(134,214,255,0.15);border-radius:7px;position:relative}.login .login-view .login-input.active{background:rgba(122,219,255,0.1);border:2px solid rgba(122,219,255,0.66)}.login .login-view .login-input>img{position:absolute;left:25px;top:50%;transform:translateY(-50%)}.login .login-view .login-input>input{width:450px;height:63px;padding-left:72px;background:transparent;border:none;font-size:20px;font-family:Alibaba PuHuiTi;font-weight:400;color:#FFFFFF}.login .login-view .login-input>input::placeholder{color:#FFFFFF}.login .login-view .login-input.username{margin-top:53px}.login .login-view .login-input.password{margin:38px 0 20px}.login .login-view .save{width:450px}.login .login-view .save>div{width:150px;display:flex;font-size:18px;font-family:Alibaba PuHuiTi;color:#FFFFFF;align-items:center;cursor:pointer}.login .login-view .save>div>div{width:20px;height:20px;border:2px solid rgba(122,219,255,0.66);margin-right:12px;display:flex;align-items:center;justify-content:center;border-radius:3px}.login .login-view .login-btn{width:400px;height:63px;background:#0294E2;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-family:Alibaba PuHuiTi;font-weight:400;color:#FFFFFF;margin-top:85px;cursor:pointer}.realTime{width:100%;height:100%;padding:20px}.realTime .page-content{position:relative;width:100%;height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);padding:30px 30px 20px}.realTime .page-content .control-view{display:flex;align-items:center;position:absolute;right:30px;top:10px}.realTime .page-content .control-view .title{margin-right:10px}.realTime .page-content .control-view .control-list{display:flex;align-items:center;overflow:hidden;max-width:806px}.realTime .page-content .control-view .control-list>div{display:flex;overflow:unset !important}.realTime .page-content .control-view .control-list>div>div{display:flex;align-items:center;flex-shrink:0;margin-right:100px}.realTime .page-content .control-view .control-list .list-view{display:flex;align-items:center;margin-right:10px}.realTime .page-content .control-view .control-list .list-view .icon{width:30px;height:30px}.realTime .page-content .timeNow{text-align:center;padding-left:75px;display:flex;align-items:center;font-size:24px;font-family:Arial;font-weight:bold;color:#8BEAFF}.realTime .page-content .timeNow>span{font-size:24px;font-family:Arial;font-weight:bold;color:#8BEAFF;margin-left:10px}.realTime .page-content .realTime-list{width:100%;overflow:hidden}.realTime .page-content .realTime-list .seamless-warp{display:flex;align-items:center}.realTime .page-content .realTime-list .seamless-warp>div{display:flex;overflow:unset !important}.realTime .page-content .realTime-list .seamless-warp>div>div{display:flex;align-items:center;flex-shrink:0;margin-right:100px}.realTime .page-content .realTime-list .seamless-warp .list-view{flex-shrink:0;display:flex;align-items:center;margin-right:20px}.realTime .page-content .realTime-list .seamless-warp .list-view img{width:60px;height:60px}.realTime .page-content .realTime-list .seamless-warp .list-view .text{text-align:center;margin:5px 0;font-size:14px}.realTime .page-content .realTime-list .seamless-warp .list-view .number{width:80px;height:30px;background:url(../image/real-time-text.png) no-repeat center;background-size:100% 100%;font-size:16px;font-family:Arial;font-weight:bold;color:#FFFFFF;display:flex;align-items:center;justify-content:center}.realTime .page-content .flex-list{display:flex;align-items:center;justify-content:space-around}.realTime .page-content .realTime-bottom{height:300px;margin-top:30px}.realTime .page-content .realTime-bottom>div{flex-shrink:0}.realTime .page-content .realTime-bottom .left-view{width:35%;height:100%;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35);display:flex;align-items:center;justify-content:center;padding:10px}.realTime .page-content .realTime-bottom .left-view>div{width:100%;height:100%}.realTime .page-content .realTime-bottom .left-view>div .video-js{width:100%;height:100%}.realTime .page-content .realTime-bottom .right{width:calc(100% - 35%);min-width:230px;height:100%}.history .page-content{width:100%}.history .page-content .el-table--scrollable-x .el-table__body-wrapper .el-table__row{height:60px}.history .page-content .search-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;margin-top:20px}.history .page-content .search-flex .search-left{display:flex;align-items:center;flex-shrink:0;padding:15px 0}.history .page-content .search-flex .search-left>div{display:flex;align-items:center}.history .page-content .search-flex .search-left>div>div{margin-left:10px;width:80px;height:34px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer}.history .page-content .search-flex .search-left>div>div.active{border:2px solid #0294E2;background:#0294E2}.history .page-content .search-flex .search-right{display:flex;align-items:center;flex-shrink:0;padding:15px 0}.history .page-content .search-flex .search-right span{margin-right:10px}.history .page-content .search-flex .search-right .el-input__inner{height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4)}.history .page-content .search-flex .search-right .el-date-editor .el-range-separator{color:#fff}.history .page-content .search-flex .search-right .el-date-editor .el-range-input{background-color:transparent;color:#fff}.dataAnalysis .page-content .search-flex{display:flex;align-items:center;justify-content:center}.dataAnalysis .page-content .analysis-charts{width:100%;height:560px}.dataAnalysis .page-content .analysis-charts>div{width:100%;height:100%}.systemManage .page-content .manage-sel{display:flex;align-items:center;padding:20px 0;border-bottom:1px solid rgba(0,180,255,0.35)}.systemManage .page-content .manage-sel>div{margin-right:20px;padding:0 20px;height:40px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer}.systemManage .page-content .manage-sel>div>img{width:14px;height:auto;margin-right:5px}.systemManage .page-content .manage-sel>div.active{border:2px solid #0294E2;background:#0294E2}.systemManage .page-content .manage-content{width:100%;height:calc(100% - 160px)}.systemManage .page-content .manage-content .manage-input{margin-bottom:25px}.systemManage .page-content .manage-content .manage-input>div{margin-bottom:10px}.systemManage .page-content .manage-content .manage-input>input{width:500px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding:0 15px}.systemManage .page-content .manage-content .manage-input>input::placeholder{color:#859bb6}.systemManage .page-content .manage-content .manage-btn{width:300px;height:60px;background:#0294E2;border-radius:10px;margin-top:25px;display:flex;align-items:center;justify-content:center;font-size:20px}.systemManage .page-content .manage-content.manage-content-input{height:400px;display:flex;align-items:center;justify-content:center;flex-direction:column}.systemManage .page-content .manage-content.manage-content-form{margin-top:15px;display:flex;align-items:center;flex-direction:column}.systemManage .page-content .manage-content.manage-content-form .manage-input>input{width:660px}.systemManage .page-content .manage-content.manage-content-form .manage-html>div{margin-bottom:10px}.systemManage .page-content .manage-content.manage-content-form .manage-html>.html{width:660px;height:120px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4)}.input-100-view{width:100%;height:66px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);display:flex;align-items:center;padding:0 20px;margin-bottom:30px}.input-100-view .title{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.input-100-view span{padding:0 10px}.input-100-view .line{width:1px;height:40px;background:#0294E2;opacity:0.5;margin:0 20px}.input-100-view .input-140{width:140px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:11px}.input-100-view .input-140::placeholder{color:#859bb6}.input-100-view .input-180{width:180px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:11px}.input-100-view .input-180::placeholder{color:#859bb6}.input-100-view .input-100{width:100px;height:44px;background:rgba(0,48,112,0.75);border:1px solid rgba(0,186,255,0.8);padding-left:11px}.input-100-view .input-100::placeholder{color:#859bb6}.bold-title{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.padding-none{padding:0}.margin-none{margin:0}.skylight .input-sel{margin-right:20px}.skylight .flex-view{border:none}.skylight .input-main{margin-right:20px}.skylight .input-main>input{width:260px}.fan .bold-title{margin-top:20px;margin-bottom:10px}.synthesis-con .synthesis-content{width:100%;display:flex;align-items:center;justify-content:space-between}.synthesis-con .synthesis-content .left-table{width:140px;border-top:1px solid rgba(0,180,255,0.75);border-bottom:1px solid rgba(0,180,255,0.75);padding-bottom:17px}.synthesis-con .synthesis-content .left-table .table-header{font-size:18px;font-family:Microsoft YaHei;font-weight:bold}.synthesis-con .synthesis-content .right-table{width:calc(100% - 140px - 10px);border-top:1px solid rgba(0,180,255,0.75);border-bottom:1px solid rgba(0,180,255,0.75);overflow-x:scroll}.synthesis-con .synthesis-content .right-table>div{display:inline-block;width:auto}.synthesis-con .synthesis-content .right-table .table-header{display:flex;align-items:center;justify-content:space-between}.synthesis-con .synthesis-content .right-table .table-header>div{width:70px;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.synthesis-con .synthesis-content .right-table .table-tr>div{display:flex;align-items:center;justify-content:space-between}.synthesis-con .synthesis-content .right-table .table-tr>div>div{width:70px;height:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center}.synthesis-con .synthesis-content .table-tr{width:100%}.synthesis-con .synthesis-content .table-tr>div{height:60px;text-align:center;line-height:60px}.synthesis-con .synthesis-content .table-tr>div:nth-child(odd){background:rgba(0,47,94,0.35)}.synthesis-con .synthesis-content .table-tr>div:nth-child(even){background:rgba(0,180,255,0.2)}.synthesis-con .synthesis-content .table-tr .no-sel{width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%;cursor:pointer}.synthesis-con .synthesis-content .table-tr .sel{width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%;cursor:pointer}.synthesis-con .synthesis-content .table-header{width:100%;height:50px;line-height:50px;text-align:center;background:rgba(0,180,255,0.2);font-size:16px;font-family:Arial;font-weight:400;color:#FFFFFF} +.scroll,.el-dropdown-menu,.index .index-content .right.right-page .page-content,.formula .page-content,.realTime,.history .page-content .el-table--scrollable-x .el-table__body-wrapper{overflow-y:auto}.scroll::-webkit-scrollbar,.el-dropdown-menu::-webkit-scrollbar,.index .index-content .right.right-page .page-content::-webkit-scrollbar,.formula .page-content::-webkit-scrollbar,.realTime::-webkit-scrollbar,.history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{width:10px;cursor:pointer}.scroll::-webkit-scrollbar-track,.el-dropdown-menu::-webkit-scrollbar-track,.index .index-content .right.right-page .page-content::-webkit-scrollbar-track,.formula .page-content::-webkit-scrollbar-track,.realTime::-webkit-scrollbar-track,.history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track{background:#013769}.scroll::-webkit-scrollbar-thumb,.el-dropdown-menu::-webkit-scrollbar-thumb,.index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb,.formula .page-content::-webkit-scrollbar-thumb,.realTime::-webkit-scrollbar-thumb,.history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{width:4px;cursor:pointer;background:#0294E2;border:3px solid #013769}.el-date-table td span,.el-date-range-picker__header div{color:#606266}.el-date-table td.end-date div span,.el-date-table td.start-date div span{color:#fff !important}.el-dropdown-menu{max-height:300px}.border-none{border:none !important}.collapse .el-collapse{border:none}.collapse .el-collapse-item__header,.collapse .el-collapse-item__wrap{background:transparent;border-bottom:1px solid rgba(168,182,200,0.2)}.collapse .el-collapse-item__header{font-size:16px;padding-left:25px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;display:flex;align-items:center}.collapse .el-collapse-item__header>.img{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-right:10px}.collapse .el-collapse-item__content{padding:0}.collapse .no-list{width:100%;height:76px;line-height:76px;padding-left:25px;border-bottom:1px solid rgba(168,182,200,0.2);cursor:pointer;color:#A8B6C8}.collapse .no-list:hover{color:#fff}.collapse .table-ul{display:flex;flex-direction:column;align-items:center;padding:10px 0}.collapse .table-ul .table-li{display:flex;align-items:center;padding-left:31px;position:relative;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#A8B6C8;width:200px;height:40px;cursor:pointer}.collapse .table-ul .table-li:hover{color:#fff}.collapse .table-ul .table-li:hover::before{background:#fff}.collapse .table-ul .table-li.active{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:#fff}.collapse .table-ul .table-li.active::before{background:#fff}.collapse .table-ul .table-li .status{width:50px;height:22px;background:rgba(168,182,200,0.15);border:1px solid rgba(168,182,200,0.5);border-radius:11px;font-size:12px;font-family:Microsoft YaHei;font-weight:400;display:flex;align-items:center;justify-content:center;color:#A8B6C8;margin-left:10px}.collapse .table-ul .table-li .status.online{background:rgba(0,255,186,0.15);border:1px solid rgba(0,255,186,0.5);color:#00FFBA}.collapse .table-ul .table-li::before{content:' ';width:4px;height:4px;background:#A8B6C8;position:absolute;top:50%;transform:translateY(-50%);left:10px}.collapse.set-params .el-collapse-item.active .el-collapse-item__header{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3)}.collapse.set-params .el-collapse-item.active .el-collapse-item__header .name{color:#fff !important}.collapse.set-params .el-collapse-item__header .name{color:#A8B6C8}.collapse.set-params .table-ul .table-li{width:100%;padding-left:40px}.collapse.set-params .table-ul .table-li::before{left:20px}.table-title{display:flex;align-items:center;font-size:28px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.table-title>img{width:60px;height:60px;margin-right:15px}.table-title .tips{margin-left:15px;display:flex;align-items:center;justify-content:center;width:120px;height:34px;background:rgba(0,255,186,0.15);border:1px solid rgba(0,255,186,0.5);border-radius:17px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#00FFBA}.index{width:100%;height:100%;min-height:900px;overflow:auto;background:url(../image/index-background.png) no-repeat;background-size:1920px 1080px;background-position:center top}.index .no-list{color:#fff;display:flex;align-items:center}.index .no-list>.img{width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-right:10px}.index .header{height:78px;display:flex;align-items:center;justify-content:space-between}.index .header .header-left{position:relative;width:373px;height:78px}.index .header .header-left>img{width:373px;height:99px;cursor:pointer}.index .header .header-center{width:calc(100% - 335px - 373px);max-width:1000px;height:78px;display:flex;align-items:center;justify-content:space-around}.index .header .header-center>div{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;width:111px;height:78px}.index .header .header-center>div.active{background:linear-gradient(0deg, rgba(0,132,255,0.3) 0%, rgba(0,132,255,0) 100%);position:relative}.index .header .header-center>div.active::before{content:' ';position:absolute;left:0;top:0;width:1px;height:78px;background:linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);opacity:0.3}.index .header .header-center>div.active::after{content:' ';position:absolute;right:0;top:0;width:1px;height:78px;background:linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);opacity:0.3}.index .header .header-center>div.active .name{color:#fff}.index .header .header-center>div .img{width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin-bottom:5px}.index .header .header-center>div .name{font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#8BEAFF}.index .header .header-right{width:335px;display:flex;align-items:center;padding-right:20px;justify-content:flex-end}.index .header .header-right>img{width:40px;height:40px}.index .header .header-right .user-data{height:40px;display:flex;flex-direction:column;justify-content:center;padding:0 20px 0 10px;margin-right:20px;border-right:1px solid rgba(255,255,255,0.2)}.index .header .header-right .user-data .name{font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#8BEAFF}.index .header .header-right .user-data .time{font-size:14px;font-family:Arial;font-weight:400;color:#FFFFFF}.index .header .header-right .login-out{width:40px;height:40px;background:url(../image/login-out.png) no-repeat center;background-size:100% 100%;cursor:pointer}.index .header .header-right .login-out:hover{background:url(../image/login-out-hover.png) no-repeat center;background-size:100% 100%}.index .index-content{display:flex;align-items:center;justify-content:space-between;width:100%;height:calc(100% - 78px);position:relative;z-index:2}.index .index-content .left{width:240px;height:100%;background:rgba(0,29,68,0.25);border-right:2px solid rgba(0,180,255,0.25);overflow:auto}.index .index-content .right{width:calc(100% - 240px);height:100%;overflow:auto}.index .index-content .right.right-page{padding:20px}.index .index-content .right.right-page .page-content{position:relative;width:100%;height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);padding:30px 30px 20px}.input-view{display:flex;align-items:center;flex-wrap:wrap;margin-top:15px}.input-view>div{flex-shrink:0;margin-right:20px;display:flex;align-items:center;margin:7.5px 0}.input-view>div>span{padding:0 8px}.input-sel>.title{margin-bottom:11px}.input-sel .el-dropdown-link{width:300px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);cursor:pointer;position:relative}.input-sel .el-dropdown-link input{width:100%;height:100%;background:transparent;border:none;padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#00FFBA}.input-sel .el-dropdown-link input::placeholder{color:#859BB6}.input-sel .el-dropdown-link .arrow{width:33px;height:24px;border-left:1px solid #fff;display:flex;align-items:center;justify-content:center;position:absolute;right:0;top:50%;transform:translateY(-50%)}.input-sel .el-dropdown-link .arrow>img{width:6px;height:4px}.input-main span{padding:0 10px}.input-main div{margin-bottom:10px}.input-main input{width:180px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff}.input-main input::placeholder{color:#859BB6}.input-main-80{width:100%;flex-wrap:wrap;display:flex;align-items:center}.input-main-80.table-input{justify-content:center}.input-main-80.table-input>span{color:#FF9191}.input-main-80 span{padding:0 10px}.input-main-80 input{width:80px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff;margin:5px 5px;text-align:center}.input-main-80 input::placeholder{color:#859BB6}.el-dropdown-menu{width:300px;border:none;background-color:#014781}.el-dropdown-menu .popper__arrow::after{border-bottom-color:rgba(0,186,255,0.25) !important}.el-dropdown-menu .el-dropdown-menu__item{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#00C0F7;background:transparent}.el-dropdown-menu .el-dropdown-menu__item.is-disabled{opacity:0.5;cursor:not-allowed}.el-dropdown-menu .el-dropdown-menu__item--divided{border-top:none}.el-dropdown-menu .el-dropdown-menu__item--divided::before{background:#00C0F7}.el-dropdown-menu .el-dropdown-menu__item:focus,.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):hover{background-color:rgba(0,186,255,0.25);color:#FFFFFF}.page-title{width:100%;height:43px;padding-left:41px;font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;position:relative;line-height:43px;background:url(../image/title-202.png) no-repeat center;background-size:202px 43px;background-position:left center;min-width:202px}.page-title::before{content:' ';width:32px;height:33px;left:2px;top:50%;position:absolute;transform:translateY(-50%);background:url(../image/page-title.png) no-repeat center;background-size:100% 100%}.page-title.title-302{background:url(../image/title-302.png) no-repeat center;background-size:302px 43px;background-position:left center;min-width:302px}.formula{width:100%;height:100%;padding:20px;display:flex;align-items:center;justify-content:space-between}.formula .page-content{width:calc(100% - 300px);height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);padding:20px 30px 0}.formula .page-content .table-view{background:transparent;margin-top:30px}.formula .page-content .table-view .cell{text-align:center}.formula .page-content .table-view .el-table .warning-row{background:rgba(0,180,255,0.2)}.formula .page-content .table-view .el-table .success-row{background:rgba(0,47,94,0.35)}.formula .page-content .table-view .el-table::before,.formula .page-content .table-view .el-table--border::after{height:0}.formula .page-content .table-view .el-table,.formula .page-content .table-view .el-table tr,.formula .page-content .table-view .el-table td.el-table__cell{border:none;background:transparent}.formula .page-content .table-view .el-table th.el-table__cell.is-leaf{border:none;background:rgba(0,180,255,0.2)}.formula .page-content .table-view .el-table th.el-table__cell.is-leaf .cell{font-size:18px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.formula .page-content .table-view .status{width:100px;height:34px;background:#0294E2;border-radius:3px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:18px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;cursor:pointer}.formula .page-content .table-view .status.status1{background:#00BB88}.formula .page-content .table-view .status.noSel{opacity:0.5}.formula .page-content .table-view .type0{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FF9191}.formula .page-content .table-view .type1{display:flex;align-items:center;justify-content:center;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;white-space:nowrap}.formula .page-content .table-view .type1>div{justify-content:center}.formula .page-content .table-view .type2{width:140px;height:34px;background:#0294E2;border-radius:3px;margin:0 auto;display:flex;align-items:center;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;cursor:pointer;justify-content:center}.formula .page-content .table-view .type2 img{width:14px;height:14px;margin-right:10px}.formula .page-content .table-view .type2.noSel{opacity:0.5}.flex-view{display:flex;align-items:center;flex-wrap:wrap}.flex-view>div{flex-shrink:0;margin:7.5px 0}.flex-view{padding:12.5px 0;border-bottom:1px solid rgba(0,180,255,0.5)}.input-btn{display:flex;align-items:center}.input-btn>span{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;padding-left:8px}.btn{margin:0 8px !important;padding:0 20px;border-radius:3px;height:40px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;cursor:pointer;white-space:nowrap;min-width:120px}.btn>img{margin-right:10px;width:14px;height:14px}.btn.green{background:#00BB88;opacity:0.5}.btn.blue{background:#0294E2}.btn.off{background:#003070;border:1px solid rgba(2,148,226,0.5);color:#00C0F7}.irrigateSet .open-btn{width:300px;height:54px;background:#003070;border:1px solid rgba(2,148,226,0.5);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:18px;font-family:Microsoft YaHei;font-weight:bold;color:#00C8FF;margin:7.5px 10px;cursor:pointer}.irrigateSet .open-btn>img{margin-right:10px}.irrigateSet .open-btn.active{color:#FFFFFF;background:#0294E2;border-color:#0294E2}.PIDSet .flex-view{border-bottom:none}.PIDSet .PIDSet-view{width:400px;height:470px;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35);margin:7.5px 10px}.PIDSet .PID-input-content{width:100%;height:calc(100% - 43px);padding:30px 0;display:flex;flex-direction:column;justify-content:space-between}.PIDSet .PID-input{display:flex;align-items:center}.PIDSet .PID-input>div{width:114px;margin-right:10px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;text-align:right}.PIDSet .PID-input input{width:240px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff}.PIDSet .PID-input input::placeholder{color:#859BB6}.PIDSet .PID-input-content-full{width:100%;height:calc(100% - 43px);padding:30px 0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.PIDSet .PID-input-full>div{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF;margin-bottom:9px}.PIDSet .PID-input-full input{width:350px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:15px;font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#fff}.PIDSet .PID-input-full input::placeholder{color:#859BB6}.systemSet .system-tips{background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);width:100%;padding:20px;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#A8B6C8}.upload .upload-view{width:520px;height:520px;margin:7.5px 10px;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35)}.upload .upload-view .upload-title{background:url(../image/title-172.png) no-repeat center;background-size:172px 43px;background-position:left center;min-width:172px}.upload .upload-content{width:100%;height:calc(100% - 43px);display:grid;grid-template-columns:repeat(2, 1fr);grid-row-gap:20px;grid-column-gap:20px;padding:19px 30px}.upload .upload-content.upload-content1{height:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:19px 30px}.upload .upload-content.upload-content1>div{width:218px;height:45px;margin-bottom:20px}.upload .upload-content>div{display:flex;align-items:center;cursor:pointer;flex-shrink:0;white-space:nowrap;max-height:50px}.upload .upload-content>div>.no-sel{margin-right:10px;width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%}.upload .upload-content>div .sel{margin-right:10px;width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%}.sensorSet{height:100%}.sensorSet .sensor-view{display:flex;align-items:center;justify-content:space-between;width:100%;height:520px;margin-top:30px}.sensorSet .sensor-view .left{width:200px;padding:0 10px;height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2)}.sensorSet .sensor-view .left>div{cursor:pointer;width:100%;height:73px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(0,180,255,0.25)}.sensorSet .sensor-view .left>div>div{font-size:16px;font-family:Microsoft YaHei;font-weight:400;color:#A8B6C8}.sensorSet .sensor-view .left>div.active>div{width:100%;display:flex;align-items:center;justify-content:center;height:40px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:#fff}.sensorSet .sensor-view .right{width:calc(100% - 220px);height:100%;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2)}.sensorSet .sensor-view .right .right-top{width:100%;padding:30px 0px 30px 75px;border-bottom:1px solid rgba(0,180,255,0.35)}.sensorSet .sensor-view .right .right-top .input-sel{margin:15px 0 30px}.sensorSet .sensor-view .right .right-top .input-sel>.title{margin-bottom:11px}.sensorSet .sensor-view .right .right-top .right-sel{display:flex;align-items:center}.sensorSet .sensor-view .right .right-top .right-sel>div{display:flex;align-items:center;cursor:pointer;white-space:nowrap;margin-right:30px;padding:0 0 15px 0}.sensorSet .sensor-view .right .right-top .right-sel>div>.no-sel{margin-right:10px;width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%}.sensorSet .sensor-view .right .right-top .right-sel>div .sel{margin-right:10px;width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%}.sensorSet .sensor-view .right .right-bottom{padding:40px 0 0 75px}.sensorSet .sensor-view .right .right-bottom>div{display:flex;align-items:center;margin-bottom:30px}.sensorSet .sensor-view .right .right-bottom>div>div{margin-right:30px}.sensorSet.sensorSet-con .sensor-view{height:calc(100% - 120px)}.sensorSet.sensorSet-con .right-sel{width:100%;flex-wrap:wrap}.sensorSet.sensorSet-con .right-sel .sensor-type-div{margin-bottom:0;background:unset;border:none;height:auto}.sensorSet.sensorSet-con .right-sel .sensor-type-div .sensor-sel>div{padding-left:0}.sensorSet .sensor-type .sensor-title{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;padding:20px 0}.sensorSet .sensor-type .sensor-title .sensor-sel>div{padding-left:0}.sensorSet .sensor-type .sensor-type-div{width:100%;height:66px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);margin-bottom:20px;display:flex;align-items:center}.sensorSet .sensor-type .sensor-type-div .name{width:120px;border-right:1px solid rgba(2,148,227,0.5);height:40px;line-height:40px;text-align:center;font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF;flex-wrap:wrap}.sensorSet .sensor-type .sensor-type-div .sensor-sel{display:flex;align-items:center;width:calc(100% - 120px)}.sensorSet .sensor-type .sensor-type-div .sensor-sel>div{display:flex;align-items:center;cursor:pointer;flex-shrink:0;white-space:nowrap;max-height:50px;padding:0 20px}.sensorSet .sensor-type .sensor-type-div .sensor-sel>div>.no-sel{margin-right:10px;width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%}.sensorSet .sensor-type .sensor-type-div .sensor-sel>div .sel{margin-right:10px;width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%}.el-dialog__wrapper .el-dialog{background:rgba(0,59,114,0.8);border:2px solid rgba(0,186,255,0.35)}.el-dialog__wrapper .el-dialog .el-dialog__header{display:none}.el-dialog__wrapper .el-dialog .el-dialog__body{padding:0}.el-dialog__wrapper .el-dialog .el-dialog__body .model-return{padding:20px;display:flex;align-items:center;justify-content:flex-end}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top{padding:20px 15px;border-bottom:1px solid rgba(0,180,255,0.35);display:flex;align-items:center;justify-content:space-between}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model2-top{justify-content:flex-start}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model3-top .btn{padding:0 10px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model3-top .btn img{width:26px;height:22px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model4-top{align-items:flex-start}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model4-top .btn{padding:0 10px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top.model4-top .btn img{width:22px;height:24px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .btn img{width:10px;height:14px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right>div{display:flex;align-items:center;margin-bottom:20px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right>div .number{width:30px;margin-right:10px;height:30px;background:#0294E2;border-radius:50%;display:flex;align-items:center;justify-content:center}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right>div .input-main-80{width:auto}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom{padding:20px 15px;border-bottom:1px solid rgba(0,180,255,0.35)}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom.model3-bottom .title{padding:0 4px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content>div{display:flex;align-items:center;padding:10px 0}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content>div .number{width:30px;margin-right:10px;height:30px;background:#0294E2;border-radius:50%;display:flex;align-items:center;justify-content:center}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content .input-main-80 span{font-size:20px}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content .input-main-80 span.text{font-size:16px;padding:0 4px;flex-shrink:0}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content.model3-content{display:flex;align-items:center;flex-wrap:wrap}.el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom .model1-content.model3-content>div{display:block;width:calc(100% / 3);flex-shrink:0}.login .login-header{position:relative;width:100%;height:76px;background:rgba(0,180,255,0.1);border-bottom:2px solid rgba(0,180,255,0.3)}.login .login-header>img{width:373px;height:99px}.login .login-view{width:520px;height:570px;background:rgba(122,219,255,0.1);border:2px solid rgba(122,219,255,0.66);border-radius:10px;position:fixed;right:5%;top:50%;transform:translateY(-50%);padding-top:59px;display:flex;flex-direction:column;align-items:center}.login .login-view .login-title{width:344px;height:45px;background:url(../image/login-title.png) no-repeat center;background-size:344px 15px;background-position:center bottom;display:flex;align-items:center;justify-content:center;padding-bottom:11px}.login .login-view .login-title>img{width:30px;height:34px;margin-right:9px}.login .login-view .login-title span{font-size:30px;font-family:Alibaba PuHuiTi;font-weight:bold;color:#FFFFFF;background:linear-gradient(0deg, #fff 0%, #BFE7FF 19.99512%, #fff 60.00977%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login .login-view .login-input{width:450px;height:63px;background:rgba(122,219,255,0.05);border:2px solid rgba(134,214,255,0.15);border-radius:7px;position:relative}.login .login-view .login-input.active{background:rgba(122,219,255,0.1);border:2px solid rgba(122,219,255,0.66)}.login .login-view .login-input>img{position:absolute;left:25px;top:50%;transform:translateY(-50%)}.login .login-view .login-input>input{width:450px;height:63px;padding-left:72px;background:transparent;border:none;font-size:20px;font-family:Alibaba PuHuiTi;font-weight:400;color:#FFFFFF}.login .login-view .login-input>input::placeholder{color:#FFFFFF}.login .login-view .login-input.username{margin-top:53px}.login .login-view .login-input.password{margin:38px 0 20px}.login .login-view .save{width:450px}.login .login-view .save>div{width:150px;display:flex;font-size:18px;font-family:Alibaba PuHuiTi;color:#FFFFFF;align-items:center;cursor:pointer}.login .login-view .save>div>div{width:20px;height:20px;border:2px solid rgba(122,219,255,0.66);margin-right:12px;display:flex;align-items:center;justify-content:center;border-radius:3px}.login .login-view .login-btn{width:400px;height:63px;background:#0294E2;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-family:Alibaba PuHuiTi;font-weight:400;color:#FFFFFF;margin-top:85px;cursor:pointer}.realTime{width:100%;height:100%;padding:20px;flex-direction:column;justify-content:unset}.realTime .new-data{margin-bottom:20px}.realTime .page-content{position:relative;width:100%;height:100%;flex-shrink:0;background:rgba(0,92,178,0.15);border:2px solid rgba(0,186,255,0.2);padding:30px 20px 20px}.realTime .page-content.control-page{height:auto}.realTime .page-content .control-view{display:flex;align-items:center;position:absolute;right:30px;top:10px}.realTime .page-content .control-view .title{margin-right:10px}.realTime .page-content .control-view .control-list{display:flex;align-items:center;overflow:hidden;max-width:806px}.realTime .page-content .control-view .control-list>div{display:flex;overflow:unset !important}.realTime .page-content .control-view .control-list>div>div{display:flex;align-items:center;flex-shrink:0;margin-right:100px}.realTime .page-content .control-view .control-list .list-view{display:flex;align-items:center;margin-right:10px}.realTime .page-content .control-view .control-list .list-view .icon{width:30px;height:30px}.realTime .page-content .timeNow{text-align:center;padding-left:75px;display:flex;align-items:center;font-size:24px;font-family:Arial;font-weight:bold;color:#8BEAFF}.realTime .page-content .timeNow>span{font-size:24px;font-family:Arial;font-weight:bold;color:#8BEAFF;margin-left:10px}.realTime .page-content .realTime-list{width:100%;overflow:hidden}.realTime .page-content .realTime-list .seamless-warp{display:flex;align-items:center}.realTime .page-content .realTime-list .seamless-warp>div{display:flex;overflow:unset !important}.realTime .page-content .realTime-list .seamless-warp>div>div{display:flex;align-items:center;flex-shrink:0;margin-right:100px}.realTime .page-content .realTime-list .seamless-warp .list-view{flex-shrink:0;display:flex;align-items:center;margin-right:20px}.realTime .page-content .realTime-list .seamless-warp .list-view img{width:60px;height:60px}.realTime .page-content .realTime-list .seamless-warp .list-view .text{text-align:center;margin:5px 0;font-size:14px}.realTime .page-content .realTime-list .seamless-warp .list-view .number{width:80px;height:30px;background:url(../image/real-time-text.png) no-repeat center;background-size:100% 100%;font-size:16px;font-family:Arial;font-weight:bold;color:#FFFFFF;display:flex;align-items:center;justify-content:center}.realTime .page-content .flex-list{display:flex;align-items:center;justify-content:space-around}.realTime .page-content .realTime-bottom{height:300px;margin-top:30px}.realTime .page-content .realTime-bottom>div{flex-shrink:0}.realTime .page-content .realTime-bottom .left-view{width:35%;height:100%;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35);display:flex;align-items:center;justify-content:center;padding:10px}.realTime .page-content .realTime-bottom .left-view>div{width:100%;height:100%}.realTime .page-content .realTime-bottom .left-view>div .video-js{width:100%;height:100%}.realTime .page-content .realTime-bottom .right{width:calc(100% - 35%);min-width:230px;height:100%}.realTime .page-content .status-view{width:300px;height:300px;background:rgba(0,132,255,0.15);border:2px solid rgba(0,186,255,0.35);margin:7.5px}.realTime .page-content .status-view .status-view-top{padding:0 10px 0 20px;display:flex;align-items:center;justify-content:space-between;height:50px;border-bottom:1px solid rgba(0,180,255,0.35)}.realTime .page-content .status-view .status-view-top .status-view-top-left{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.realTime .page-content .status-view .status-view-top .status-view-top-right{cursor:pointer;padding:0 10px}.realTime .page-content .status-view .status-view-content{width:100%;height:calc(100% - 51px)}.realTime .page-content .status-view .status-view-content .status-true{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.realTime .page-content .status-view .status-view-content .status-true .status-fan{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.realTime .page-content .status-view .status-view-content .status-true .status-fan>div{min-width:unset;flex-shrink:0;font-size:14px;height:30px;margin:10px 8px 0 !important}.realTime .page-content .status-view .status-view-content .status-true .status-fan>div>img{width:16px;height:16px;margin-right:5px}.realTime .page-content .status-view .status-view-content .status-true .status-true-sel{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 50px}.realTime .page-content .status-view .status-view-content .status-true .status-true-sel>div{display:flex;align-items:center;font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#FFFFFF}.realTime .page-content .status-view .status-view-content .status-true .status-true-sel>div>img{width:20px;height:20px;margin-right:10px}.realTime .page-content .status-view .status-view-content .status-true .status-true-charts{width:100%;height:153px;position:relative;background:url(../img/status-true-charts.png) no-repeat;background-size:227px 114px;background-position:center 20px}.realTime .page-content .status-view .status-view-content .status-true .status-true-charts>img{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;width:28px;height:27px}.realTime .page-content .status-view .status-view-content .status-true .status-true-charts>div{width:100%;height:100%}.realTime .page-content .status-view .status-view-content .status-true .status-true-text{width:227px;height:35px;padding:0 16px;background:url(../img/status-true-text.png) no-repeat;background-size:100% 100%;display:flex;align-items:center;justify-content:space-between}.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-left{font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#8BEAFF}.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-right{font-size:14px;font-family:Arial;font-weight:400;color:#FFFFFF}.realTime .page-content .status-view .status-view-content .status-noTrue{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.realTime .page-content .status-view .status-view-content .status-noTrue>img{width:40px;height:35px;margin-bottom:20px}.realTime .page-content .status-view .status-view-content .status-noTrue>div{font-size:14px;font-family:Microsoft YaHei;font-weight:400;color:#8BEAFF}.history .page-content{width:100%}.history .page-content .el-table--scrollable-x .el-table__body-wrapper .el-table__row{height:60px}.history .page-content .search-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;margin-top:20px}.history .page-content .search-flex .search-left{display:flex;align-items:center;flex-shrink:0;padding:15px 0}.history .page-content .search-flex .search-left>div{display:flex;align-items:center}.history .page-content .search-flex .search-left>div>div{margin-left:10px;width:80px;height:34px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer}.history .page-content .search-flex .search-left>div>div.active{border:2px solid #0294E2;background:#0294E2}.history .page-content .search-flex .search-right{display:flex;align-items:center;flex-shrink:0;padding:15px 0}.history .page-content .search-flex .search-right span{margin-right:10px}.history .page-content .search-flex .search-right .el-input__inner{height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4)}.history .page-content .search-flex .search-right .el-date-editor .el-range-separator{color:#fff}.history .page-content .search-flex .search-right .el-date-editor .el-range-input{background-color:transparent;color:#fff}.dataAnalysis .page-content .search-flex{display:flex;align-items:center;justify-content:center}.dataAnalysis .page-content .analysis-charts{width:100%;height:560px}.dataAnalysis .page-content .analysis-charts>div{width:100%;height:100%}.systemManage .page-content .manage-sel{display:flex;align-items:center;padding:20px 0;border-bottom:1px solid rgba(0,180,255,0.35)}.systemManage .page-content .manage-sel>div{margin-right:20px;padding:0 20px;height:40px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer}.systemManage .page-content .manage-sel>div>img{width:14px;height:auto;margin-right:5px}.systemManage .page-content .manage-sel>div.active{border:2px solid #0294E2;background:#0294E2}.systemManage .page-content .manage-content{width:100%;height:calc(100% - 160px)}.systemManage .page-content .manage-content .manage-input{margin-bottom:25px}.systemManage .page-content .manage-content .manage-input>div{margin-bottom:10px}.systemManage .page-content .manage-content .manage-input>input{width:500px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding:0 15px}.systemManage .page-content .manage-content .manage-input>input::placeholder{color:#859bb6}.systemManage .page-content .manage-content .manage-btn{width:300px;height:60px;background:#0294E2;border-radius:10px;margin-top:25px;display:flex;align-items:center;justify-content:center;font-size:20px}.systemManage .page-content .manage-content.manage-content-input{height:400px;display:flex;align-items:center;justify-content:center;flex-direction:column}.systemManage .page-content .manage-content.manage-content-form{margin-top:15px;display:flex;align-items:center;flex-direction:column}.systemManage .page-content .manage-content.manage-content-form .manage-input>input{width:660px}.systemManage .page-content .manage-content.manage-content-form .manage-html>div{margin-bottom:10px}.systemManage .page-content .manage-content.manage-content-form .manage-html>.html{width:660px;height:120px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4)}.input-100-view{width:100%;height:66px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);display:flex;align-items:center;padding:0 20px;margin-bottom:30px}.input-100-view .title{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.input-100-view span{padding:0 10px}.input-100-view .line{width:1px;height:40px;background:#0294E2;opacity:0.5;margin:0 20px}.input-100-view .input-140{width:140px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:11px}.input-100-view .input-140::placeholder{color:#859bb6}.input-100-view .input-180{width:180px;height:44px;background:rgba(0,186,255,0.15);border:2px solid rgba(0,186,255,0.4);padding-left:11px}.input-100-view .input-180::placeholder{color:#859bb6}.input-100-view .input-100{width:100px;height:44px;background:rgba(0,48,112,0.75);border:1px solid rgba(0,186,255,0.8);padding-left:11px}.input-100-view .input-100::placeholder{color:#859bb6}.bold-title{font-size:20px;font-family:Microsoft YaHei;font-weight:bold;color:#FFFFFF}.padding-none{padding:0}.margin-none{margin:0}.skylight .input-sel{margin-right:20px}.skylight .flex-view{border:none}.skylight .input-main{margin-right:20px}.skylight .input-main>input{width:260px}.fan .bold-title{margin-top:20px;margin-bottom:10px}.synthesis-con .synthesis-content{width:100%;display:flex;align-items:center;justify-content:space-between}.synthesis-con .synthesis-content .left-table{width:140px;border-top:1px solid rgba(0,180,255,0.75);border-bottom:1px solid rgba(0,180,255,0.75);padding-bottom:17px}.synthesis-con .synthesis-content .left-table .table-header{font-size:18px;font-family:Microsoft YaHei;font-weight:bold}.synthesis-con .synthesis-content .right-table{width:calc(100% - 140px - 10px);border-top:1px solid rgba(0,180,255,0.75);border-bottom:1px solid rgba(0,180,255,0.75);overflow-x:scroll}.synthesis-con .synthesis-content .right-table>div{display:inline-block;width:auto}.synthesis-con .synthesis-content .right-table .table-header{display:flex;align-items:center;justify-content:space-between}.synthesis-con .synthesis-content .right-table .table-header>div{width:70px;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.synthesis-con .synthesis-content .right-table .table-tr>div{display:flex;align-items:center;justify-content:space-between}.synthesis-con .synthesis-content .right-table .table-tr>div>div{width:70px;height:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center}.synthesis-con .synthesis-content .table-tr{width:100%}.synthesis-con .synthesis-content .table-tr>div{height:60px;text-align:center;line-height:60px}.synthesis-con .synthesis-content .table-tr>div:nth-child(odd){background:rgba(0,47,94,0.35)}.synthesis-con .synthesis-content .table-tr>div:nth-child(even){background:rgba(0,180,255,0.2)}.synthesis-con .synthesis-content .table-tr .no-sel{width:35px;height:35px;box-shadow:0 0 15px rgba(53,187,247,0.5) inset;border:1px solid rgba(0,204,255,0.7);border-radius:50%;cursor:pointer}.synthesis-con .synthesis-content .table-tr .sel{width:35px;height:35px;background:url(../image/radio.png) no-repeat center;background-size:100% 100%;cursor:pointer}.synthesis-con .synthesis-content .table-header{width:100%;height:50px;line-height:50px;text-align:center;background:rgba(0,180,255,0.2);font-size:16px;font-family:Arial;font-weight:400;color:#FFFFFF}.plantingPlan{width:100%;height:100%}.plantingPlan .btn{opacity:1}.plantingPlan .btn .img{height:20px;width:20px}.plantingPlan .plan-view{width:440px;height:200px;background:url(../img/plan-bg.png) no-repeat center;background-size:100% 100%;margin:7.5px 15px} diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 619f718..a78cebe 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -426,6 +426,20 @@ width: calc(100% - 240px); height: 100%; overflow: auto; + + &.right-page { + padding: 20px; + + .page-content { + position: relative; + width: 100%; + height: 100%; + background: rgba(0, 92, 178, 0.15); + border: 2px solid rgba(0, 186, 255, 0.20); + padding: 30px 30px 20px; + @extend .scroll; + } + } } } } @@ -1047,6 +1061,7 @@ .sensorSet { height: 100%; + .sensor-view { display: flex; align-items: center; @@ -1117,14 +1132,15 @@ .right-sel { display: flex; align-items: center; - + >div { display: flex; align-items: center; cursor: pointer; white-space: nowrap; margin-right: 30px; - padding:0 0 15px 0; + padding: 0 0 15px 0; + >.no-sel { margin-right: 10px; width: 35px; @@ -1161,26 +1177,30 @@ } } - &.sensorSet-con{ - .sensor-view{ + &.sensorSet-con { + .sensor-view { height: calc(100% - 120px); } - .right-sel{ + + .right-sel { width: 100%; flex-wrap: wrap; - .sensor-type-div{ + + .sensor-type-div { margin-bottom: 0; background: unset; border: none; height: auto; - .sensor-sel{ - >div{ + + .sensor-sel { + >div { padding-left: 0; } } } } } + .sensor-type { .sensor-title { font-size: 20px; @@ -1188,8 +1208,9 @@ font-weight: bold; color: #FFFFFF; padding: 20px 0; - .sensor-sel{ - >div{ + + .sensor-sel { + >div { padding-left: 0; } } @@ -1553,34 +1574,48 @@ width: 100%; height: 100%; padding: 20px; - + flex-direction: column; + justify-content: unset; + @extend .scroll; + + .new-data { + margin-bottom: 20px; + } + .page-content { position: relative; width: 100%; height: 100%; + flex-shrink: 0; background: rgba(0, 92, 178, 0.15); border: 2px solid rgba(0, 186, 255, 0.20); - padding: 30px 30px 20px; - .control-view{ + padding: 30px 20px 20px; + &.control-page{ + height:auto; + } + .control-view { display: flex; align-items: center; position: absolute; right: 30px; top: 10px; - .title{ + + .title { margin-right: 10px; } - .control-list{ + + .control-list { display: flex; align-items: center; - + overflow: hidden; max-width: 806px; + >div { // width: 100%!important; display: flex; overflow: unset !important; - + >div { display: flex; align-items: center; @@ -1588,18 +1623,20 @@ margin-right: 100px; } } - .list-view{ + + .list-view { display: flex; align-items: center; margin-right: 10px; - .icon{ + + .icon { width: 30px; height: 30px; } } } } - + .timeNow { text-align: center; // position: absolute; @@ -1725,6 +1762,160 @@ height: 100%; } } + + .status-view { + width: 300px; + height: 300px; + background: rgba(0, 132, 255, 0.15); + border: 2px solid rgba(0, 186, 255, 0.35); + margin: 7.5px; + + .status-view-top { + padding: 0 10px 0 20px; + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; + border-bottom: 1px solid rgba(0, 180, 255, .35); + + .status-view-top-left { + font-size: 20px; + font-family: Microsoft YaHei; + font-weight: bold; + color: #FFFFFF; + } + + .status-view-top-right { + cursor: pointer; + padding: 0 10px; + } + + } + + .status-view-content { + width: 100%; + height: calc(100% - 51px); + + .status-true { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + .status-fan{ + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + >div{ + min-width: unset; + flex-shrink: 0; + font-size: 14px; + height: 30px; + margin: 10px 8px 0 !important; + >img{ + width: 16px; + height:16px; + margin-right: 5px; + } + } + } + .status-true-sel { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 50px; + + >div { + display: flex; + align-items: center; + font-size: 14px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; + >img { + + width: 20px; + height: 20px; + margin-right: 10px; + } + } + } + + .status-true-charts { + width: 100%; + height: 153px; + position: relative; + background: url(../img/status-true-charts.png) no-repeat; + background-size: 227px 114px; + background-position: center 20px; + + >img { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 6px; + width: 28px; + height: 27px; + } + + >div { + width: 100%; + height: 100%; + } + } + + .status-true-text { + width: 227px; + height: 35px; + padding: 0 16px; + background: url(../img/status-true-text.png) no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: space-between; + + .status-true-text-left { + font-size: 14px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #8BEAFF; + } + + .status-true-text-right { + font-size: 14px; + font-family: Arial; + font-weight: 400; + color: #FFFFFF; + } + } + } + + .status-noTrue { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + >img { + width: 40px; + height: 35px; + margin-bottom: 20px; + } + + >div { + font-size: 14px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #8BEAFF; + } + } + } + } } } @@ -2062,11 +2253,11 @@ border-top: 1px solid rgba(0, 180, 255, .75); border-bottom: 1px solid rgba(0, 180, 255, .75); padding-bottom: 17px; - - .table-header{ + + .table-header { font-size: 18px; -font-family: Microsoft YaHei; -font-weight: bold; + font-family: Microsoft YaHei; + font-weight: bold; } } @@ -2075,16 +2266,19 @@ font-weight: bold; border-top: 1px solid rgba(0, 180, 255, .75); border-bottom: 1px solid rgba(0, 180, 255, .75); overflow-x: scroll; - >div{ + + >div { display: inline-block; width: auto; } - .table-header{ + + .table-header { display: flex; align-items: center; justify-content: space-between; - >div{ - width:70px; + + >div { + width: 70px; height: 100%; display: flex; align-items: center; @@ -2092,14 +2286,16 @@ font-weight: bold; flex-shrink: 0; } } - .table-tr{ - >div{ - + + .table-tr { + >div { + display: flex; align-items: center; justify-content: space-between; - >div{ - width:70px; + + >div { + width: 70px; height: 100%; flex-shrink: 0; display: flex; @@ -2109,19 +2305,24 @@ font-weight: bold; } } } - .table-tr{ + + .table-tr { width: 100%; - >div{ + + >div { height: 60px; text-align: center; line-height: 60px; } - >div:nth-child(odd){ + + >div:nth-child(odd) { background: rgba(0, 47, 94, .35); } - >div:nth-child(even){ - background: rgba(0,180,255,0.2); + + >div:nth-child(even) { + background: rgba(0, 180, 255, 0.2); } + .no-sel { width: 35px; height: 35px; @@ -2139,6 +2340,7 @@ font-weight: bold; cursor: pointer; } } + .table-header { width: 100%; height: 50px; @@ -2146,9 +2348,31 @@ font-weight: bold; text-align: center; background: rgba(0, 180, 255, 0.2); font-size: 16px; -font-family: Arial; -font-weight: 400; -color: #FFFFFF; + font-family: Arial; + font-weight: 400; + color: #FFFFFF; } } +} + +.plantingPlan { + width: 100%; + height: 100%; + + .btn { + opacity: 1; + + .img { + height: 20px; + width: 20px; + } + } + + .plan-view { + width: 440px; + height: 200px; + background: url(../img/plan-bg.png) no-repeat center; + background-size: 100% 100%; + margin: 7.5px 15px; + } } \ No newline at end of file diff --git a/src/assets/image/status.png b/src/assets/image/status.png new file mode 100644 index 0000000..d905a2e Binary files /dev/null and b/src/assets/image/status.png differ diff --git a/src/assets/image/vrcode-icon0.png b/src/assets/image/vrcode-icon0.png new file mode 100644 index 0000000..eb010af Binary files /dev/null and b/src/assets/image/vrcode-icon0.png differ diff --git a/src/assets/image/vrcode-icon1.png b/src/assets/image/vrcode-icon1.png new file mode 100644 index 0000000..16f6b5d Binary files /dev/null and b/src/assets/image/vrcode-icon1.png differ diff --git a/src/assets/image/vrcode-icon2.png b/src/assets/image/vrcode-icon2.png new file mode 100644 index 0000000..b5eb82e Binary files /dev/null and b/src/assets/image/vrcode-icon2.png differ diff --git a/src/assets/image/vrcode-icon3.png b/src/assets/image/vrcode-icon3.png new file mode 100644 index 0000000..571f558 Binary files /dev/null and b/src/assets/image/vrcode-icon3.png differ diff --git a/src/assets/image/图标/光亮度.png b/src/assets/image/图标/光亮度.png deleted file mode 100644 index c59cc70..0000000 Binary files a/src/assets/image/图标/光亮度.png and /dev/null differ diff --git a/src/assets/image/图标/空气温度.png b/src/assets/image/图标/空气温度.png deleted file mode 100644 index a45d0b8..0000000 Binary files a/src/assets/image/图标/空气温度.png and /dev/null differ diff --git a/src/assets/image/图标/空气湿度.png b/src/assets/image/图标/空气湿度.png deleted file mode 100644 index 4433e06..0000000 Binary files a/src/assets/image/图标/空气湿度.png and /dev/null differ diff --git a/src/assets/image/图标/雨雪信号.png b/src/assets/image/图标/雨雪信号.png deleted file mode 100644 index b97a4e4..0000000 Binary files a/src/assets/image/图标/雨雪信号.png and /dev/null differ diff --git a/src/assets/image/图标/风向.png b/src/assets/image/图标/风向.png deleted file mode 100644 index f373ce0..0000000 Binary files a/src/assets/image/图标/风向.png and /dev/null differ diff --git a/src/assets/image/图标/风速.png b/src/assets/image/图标/风速.png deleted file mode 100644 index d036d62..0000000 Binary files a/src/assets/image/图标/风速.png and /dev/null differ diff --git a/src/assets/img/add.png b/src/assets/img/add.png new file mode 100644 index 0000000..f8f69da Binary files /dev/null and b/src/assets/img/add.png differ diff --git a/src/assets/img/axis1.png b/src/assets/img/axis1.png new file mode 100644 index 0000000..367bdce Binary files /dev/null and b/src/assets/img/axis1.png differ diff --git a/src/assets/img/axis2.png b/src/assets/img/axis2.png new file mode 100644 index 0000000..fd6a139 Binary files /dev/null and b/src/assets/img/axis2.png differ diff --git a/src/assets/img/bg.png b/src/assets/img/bg.png new file mode 100644 index 0000000..41e3122 Binary files /dev/null and b/src/assets/img/bg.png differ diff --git a/src/assets/img/big.png b/src/assets/img/big.png new file mode 100644 index 0000000..6c306f4 Binary files /dev/null and b/src/assets/img/big.png differ diff --git a/src/assets/img/c_top.png b/src/assets/img/c_top.png new file mode 100644 index 0000000..e590c21 Binary files /dev/null and b/src/assets/img/c_top.png differ diff --git a/src/assets/img/calendar.png b/src/assets/img/calendar.png new file mode 100644 index 0000000..e313b66 Binary files /dev/null and b/src/assets/img/calendar.png differ diff --git a/src/assets/img/close.png b/src/assets/img/close.png new file mode 100644 index 0000000..a1ce55f Binary files /dev/null and b/src/assets/img/close.png differ diff --git a/src/assets/img/detail_img.png b/src/assets/img/detail_img.png new file mode 100644 index 0000000..6485d0b Binary files /dev/null and b/src/assets/img/detail_img.png differ diff --git a/src/assets/img/deviceState.png b/src/assets/img/deviceState.png new file mode 100644 index 0000000..eb2fb8d Binary files /dev/null and b/src/assets/img/deviceState.png differ diff --git a/src/assets/img/device_left.png b/src/assets/img/device_left.png new file mode 100644 index 0000000..394fc0e Binary files /dev/null and b/src/assets/img/device_left.png differ diff --git a/src/assets/img/device_right.png b/src/assets/img/device_right.png new file mode 100644 index 0000000..581be12 Binary files /dev/null and b/src/assets/img/device_right.png differ diff --git a/src/assets/img/environmentData_bg.png b/src/assets/img/environmentData_bg.png new file mode 100644 index 0000000..445ae4b Binary files /dev/null and b/src/assets/img/environmentData_bg.png differ diff --git a/src/assets/img/fan-off.png b/src/assets/img/fan-off.png new file mode 100644 index 0000000..de89ba8 Binary files /dev/null and b/src/assets/img/fan-off.png differ diff --git a/src/assets/img/fan-on.png b/src/assets/img/fan-on.png new file mode 100644 index 0000000..8f7e641 Binary files /dev/null and b/src/assets/img/fan-on.png differ diff --git a/src/assets/img/grow_bg.png b/src/assets/img/grow_bg.png new file mode 100644 index 0000000..399b98d Binary files /dev/null and b/src/assets/img/grow_bg.png differ diff --git a/src/assets/img/grow_img.png b/src/assets/img/grow_img.png new file mode 100644 index 0000000..42aeac2 Binary files /dev/null and b/src/assets/img/grow_img.png differ diff --git a/src/assets/img/i_title_bg.png b/src/assets/img/i_title_bg.png new file mode 100644 index 0000000..9772f51 Binary files /dev/null and b/src/assets/img/i_title_bg.png differ diff --git a/src/assets/img/i_title_img.png b/src/assets/img/i_title_img.png new file mode 100644 index 0000000..c2e8c48 Binary files /dev/null and b/src/assets/img/i_title_img.png differ diff --git a/src/assets/img/icon1.png b/src/assets/img/icon1.png new file mode 100644 index 0000000..7fc9f6e Binary files /dev/null and b/src/assets/img/icon1.png differ diff --git a/src/assets/img/icon2.png b/src/assets/img/icon2.png new file mode 100644 index 0000000..9036342 Binary files /dev/null and b/src/assets/img/icon2.png differ diff --git a/src/assets/img/icon3.png b/src/assets/img/icon3.png new file mode 100644 index 0000000..c5bc9cc Binary files /dev/null and b/src/assets/img/icon3.png differ diff --git a/src/assets/img/icon4.png b/src/assets/img/icon4.png new file mode 100644 index 0000000..6b306ba Binary files /dev/null and b/src/assets/img/icon4.png differ diff --git a/src/assets/img/icon5.png b/src/assets/img/icon5.png new file mode 100644 index 0000000..6fa412f Binary files /dev/null and b/src/assets/img/icon5.png differ diff --git a/src/assets/img/icon6.png b/src/assets/img/icon6.png new file mode 100644 index 0000000..16497e0 Binary files /dev/null and b/src/assets/img/icon6.png differ diff --git a/src/assets/img/icon_1.png b/src/assets/img/icon_1.png new file mode 100644 index 0000000..23a12b4 Binary files /dev/null and b/src/assets/img/icon_1.png differ diff --git a/src/assets/img/icon_2.png b/src/assets/img/icon_2.png new file mode 100644 index 0000000..7a564a1 Binary files /dev/null and b/src/assets/img/icon_2.png differ diff --git a/src/assets/img/icon_3.png b/src/assets/img/icon_3.png new file mode 100644 index 0000000..84666e9 Binary files /dev/null and b/src/assets/img/icon_3.png differ diff --git a/src/assets/img/icon_4.png b/src/assets/img/icon_4.png new file mode 100644 index 0000000..327c96e Binary files /dev/null and b/src/assets/img/icon_4.png differ diff --git a/src/assets/img/icon_5.png b/src/assets/img/icon_5.png new file mode 100644 index 0000000..249bec8 Binary files /dev/null and b/src/assets/img/icon_5.png differ diff --git a/src/assets/img/icon_6.png b/src/assets/img/icon_6.png new file mode 100644 index 0000000..fe5a1b2 Binary files /dev/null and b/src/assets/img/icon_6.png differ diff --git a/src/assets/img/kuang.png b/src/assets/img/kuang.png new file mode 100644 index 0000000..db98e45 Binary files /dev/null and b/src/assets/img/kuang.png differ diff --git a/src/assets/img/left_video.png b/src/assets/img/left_video.png new file mode 100644 index 0000000..b7e8b1b Binary files /dev/null and b/src/assets/img/left_video.png differ diff --git a/src/assets/img/liveVideo.png b/src/assets/img/liveVideo.png new file mode 100644 index 0000000..36e24a2 Binary files /dev/null and b/src/assets/img/liveVideo.png differ diff --git a/src/assets/img/liveVideo_bg.png b/src/assets/img/liveVideo_bg.png new file mode 100644 index 0000000..1b144e2 Binary files /dev/null and b/src/assets/img/liveVideo_bg.png differ diff --git a/src/assets/img/map.png b/src/assets/img/map.png new file mode 100644 index 0000000..3af1455 Binary files /dev/null and b/src/assets/img/map.png differ diff --git a/src/assets/img/more.png b/src/assets/img/more.png new file mode 100644 index 0000000..a2eb69d Binary files /dev/null and b/src/assets/img/more.png differ diff --git a/src/assets/img/nav1.png b/src/assets/img/nav1.png new file mode 100644 index 0000000..cba711d Binary files /dev/null and b/src/assets/img/nav1.png differ diff --git a/src/assets/img/nav1_act.png b/src/assets/img/nav1_act.png new file mode 100644 index 0000000..93a9b57 Binary files /dev/null and b/src/assets/img/nav1_act.png differ diff --git a/src/assets/img/nav2.png b/src/assets/img/nav2.png new file mode 100644 index 0000000..f2671d8 Binary files /dev/null and b/src/assets/img/nav2.png differ diff --git a/src/assets/img/nav2_act.png b/src/assets/img/nav2_act.png new file mode 100644 index 0000000..4f0a772 Binary files /dev/null and b/src/assets/img/nav2_act.png differ diff --git a/src/assets/img/nav3.png b/src/assets/img/nav3.png new file mode 100644 index 0000000..0c7e335 Binary files /dev/null and b/src/assets/img/nav3.png differ diff --git a/src/assets/img/nav3_act.png b/src/assets/img/nav3_act.png new file mode 100644 index 0000000..26c4c42 Binary files /dev/null and b/src/assets/img/nav3_act.png differ diff --git a/src/assets/img/nav4.png b/src/assets/img/nav4.png new file mode 100644 index 0000000..48cb6ed Binary files /dev/null and b/src/assets/img/nav4.png differ diff --git a/src/assets/img/nav4_act.png b/src/assets/img/nav4_act.png new file mode 100644 index 0000000..70fc45b Binary files /dev/null and b/src/assets/img/nav4_act.png differ diff --git a/src/assets/img/plan-bg.png b/src/assets/img/plan-bg.png new file mode 100644 index 0000000..2fb81bd Binary files /dev/null and b/src/assets/img/plan-bg.png differ diff --git a/src/assets/img/plan.png b/src/assets/img/plan.png new file mode 100644 index 0000000..b70468f Binary files /dev/null and b/src/assets/img/plan.png differ diff --git a/src/assets/img/pole.png b/src/assets/img/pole.png new file mode 100644 index 0000000..83a7a52 Binary files /dev/null and b/src/assets/img/pole.png differ diff --git a/src/assets/img/pole1.png b/src/assets/img/pole1.png new file mode 100644 index 0000000..7d96c60 Binary files /dev/null and b/src/assets/img/pole1.png differ diff --git a/src/assets/img/pop_bg.png b/src/assets/img/pop_bg.png new file mode 100644 index 0000000..845ec8e Binary files /dev/null and b/src/assets/img/pop_bg.png differ diff --git a/src/assets/img/right_video.png b/src/assets/img/right_video.png new file mode 100644 index 0000000..b2e53dc Binary files /dev/null and b/src/assets/img/right_video.png differ diff --git a/src/assets/img/small.png b/src/assets/img/small.png new file mode 100644 index 0000000..442e750 Binary files /dev/null and b/src/assets/img/small.png differ diff --git a/src/assets/img/status-no.png b/src/assets/img/status-no.png new file mode 100644 index 0000000..a73b943 Binary files /dev/null and b/src/assets/img/status-no.png differ diff --git a/src/assets/img/status-true-charts-icon.png b/src/assets/img/status-true-charts-icon.png new file mode 100644 index 0000000..25eab20 Binary files /dev/null and b/src/assets/img/status-true-charts-icon.png differ diff --git a/src/assets/img/status-true-charts.png b/src/assets/img/status-true-charts.png new file mode 100644 index 0000000..3db2adf Binary files /dev/null and b/src/assets/img/status-true-charts.png differ diff --git a/src/assets/img/status-true-nosel.png b/src/assets/img/status-true-nosel.png new file mode 100644 index 0000000..9c366c5 Binary files /dev/null and b/src/assets/img/status-true-nosel.png differ diff --git a/src/assets/img/status-true-sel.png b/src/assets/img/status-true-sel.png new file mode 100644 index 0000000..aa57bb7 Binary files /dev/null and b/src/assets/img/status-true-sel.png differ diff --git a/src/assets/img/status-true-text.png b/src/assets/img/status-true-text.png new file mode 100644 index 0000000..10e9a1d Binary files /dev/null and b/src/assets/img/status-true-text.png differ diff --git a/src/assets/img/weatherStation.png b/src/assets/img/weatherStation.png new file mode 100644 index 0000000..f9b3bac Binary files /dev/null and b/src/assets/img/weatherStation.png differ diff --git a/src/assets/img/wenshi.png b/src/assets/img/wenshi.png new file mode 100644 index 0000000..675f135 Binary files /dev/null and b/src/assets/img/wenshi.png differ diff --git a/src/assets/img/wenshi1.png b/src/assets/img/wenshi1.png new file mode 100644 index 0000000..a21a677 Binary files /dev/null and b/src/assets/img/wenshi1.png differ diff --git a/src/assets/img/yuan_bg.png b/src/assets/img/yuan_bg.png new file mode 100644 index 0000000..5028400 Binary files /dev/null and b/src/assets/img/yuan_bg.png differ diff --git a/src/assets/js/charts.js b/src/assets/js/charts.js index 8fb1a92..9e8758e 100644 --- a/src/assets/js/charts.js +++ b/src/assets/js/charts.js @@ -176,20 +176,20 @@ export function realTimeLine(id, data) { Xdata.push(el.time) el.value.forEach((el1, index1) => { - var containsIndex = dataList.findIndex(function(item) { + var containsIndex = dataList.findIndex(function (item) { return item.name === el1.name; }); - if(containsIndex==-1){ - dataList.push({name:el1.name,value:[]}) - }else{ + if (containsIndex == -1) { + dataList.push({ name: el1.name, value: [] }) + } else { dataList[containsIndex].value.push(el1.value) } }) - + }) - dataList.forEach((el,index)=>{ - list.push({ + dataList.forEach((el, index) => { + list.push({ name: el.name, data: el.value, type: "line", @@ -310,6 +310,119 @@ export function realTimeLine(id, data) { ], series: list, }; + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); +} +export function statusCharts(id, data) { + console.log(id,11); + var chartDom = document.getElementById(id); + var myChart = echarts.init(chartDom); + var option; + + const pointerData = data; // 仪表指针数据 + option = { + series: [ + { + type: "gauge", + radius:75, + z: 1, + center:['50%','87%'], + startAngle: 180, + endAngle: 0, + splitNumber: 50, + splitLine: { + show: false, + length: 15, + distance: -10, + lineStyle: { + color: "#fff", + width: 1, + }, + }, + detail: { + show: false, + offsetCenter: ['50%', '50%'], + fontSize: 22, + formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""), + rich: { + a: { + fontSize: 20, + color: "rgba(84, 108, 198, 0.65)", + }, + b: { + fontSize: 24, + color: "rgba(84, 108, 198, 0.65)", + }, + }, + }, + // 仪表盘的线，颜色值为一个数组 + axisLine: { + show: true, + // 两端是否设置为圆角；在5.0之后的版本有效 + roundCap: false, + lineStyle: { + width: 15, + shadowColor: "#0093ee", //默认透明 + shadowOffsetX: 0, + shadowOffsetY: 0, + shadowBlur: 20, + opacity: 1, + color: [ + [ + pointerData / 100, + { + x: 0, + y: 0, + x1: 1, + y1: 0, + colorStops: [ + { + offset: 0, + color: "rgba(110, 224, 255, 1)", + }, + { + offset: 1, + color: "rgba(0, 200, 255, 1)", + }, + ], + }, + ], + [1, "rgba(0,0,0,0.15)"], + ], + }, + }, + // 仪表盘刻度标签 + axisLabel: { + show: true, + color: "#fff", + fontSize: 14, + distance: -35, + formatter: (val) => { + const num = Math.floor(val); + return num % 20 === 0 ? num : ""; + }, + }, + pointer:{ + width :5, + itemStyle:{ + color:'rgba(10, 243, 167, 1)' + } + }, + // 刻度 + axisTick: { + show: false, + }, + // 指针，此设置仅对5.0以上的版本生效 + + data: [pointerData], + }, + + ], + }; + + option && myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); diff --git a/src/assets/js/echarts.js b/src/assets/js/echarts.js new file mode 100644 index 0000000..d38d942 --- /dev/null +++ b/src/assets/js/echarts.js @@ -0,0 +1,318 @@ +import * as echarts from 'echarts'; + +export function weather_echart(id, data) { + let chartDom = document.getElementById(id); + let myChart = echarts.init(chartDom); + let option = { + grid: { + top: "15%", + left: "0%", + right: "5%", + bottom: "6%", + containLabel: true + }, + color: ["#00A8FF", "#00FFB4", "#FFD07F"], + tooltip: { + trigger: "axis", + backgroundColor: "rgba(1, 13, 19, 0.5)", + borderWidth: 1, + axisPointer: { + type: "shadow" + }, + textStyle: { + color: "rgba(212, 232, 254, 1)" + }, + extraCssText: "z-index:2" + }, + legend: { + show: false, + right: 20, + top: 30, + icon: "rect", + itemWidth: 18, + itemHeight: 4, + itemGap: 30, + padding: [0, 20, 0, 0], + textStyle: { + color: "#FFFFFF", + fontFamily: "Alibaba PuHuiTi", + fontSize: ".14rem", + fontWeight: 400, + } + }, + xAxis: { + type: "category", + boundaryGap: false, + data:data.data_category, + // data: [ + // "1月", + // "2月", + // "3月", + // "4月", + // "5月", + // "6月", + // "7月", + // "8月", + // "9月", + // "10月", + // "11月", + // "12月" + // ], + axisLine: { + show: true, + lineStyle: { + color: "#52647C", + type: 'solid' + } + }, + axisTick: { + show: false + }, + axisLabel: { + show: true, + // interval: 0, + textStyle: { + color: "#7C99AF", + fontSize: ".14rem", + fontFamily: 'ArialMT', + fontWeight: 400 + } + } + }, + yAxis: [{ + type: "value", + name: '温度', + nameTextStyle: { + fontSize: 14, + fontFamily: 'MicrosoftYaHei', + fontWeight: 400, + color: '#7C99AF', + lineHeight: 6 + }, + axisLine: { + show: true, + lineStyle: { + color: "#52647C", + type: 'solid' + } + }, + axisTick: { + show: false + }, + axisLabel: { + color: "#7C99AF", + fontSize: ".14rem", + fontFamily: 'ArialMT', + fontWeight: 400 + }, + splitLine: { + show: true, + lineStyle: { + color: '#52647C', + type: 'dashed' + } + }, + // data:data.data_value, + }], + series: [{ + // name: data.datax[0], + type: "line", + smooth: 'true', + symbol: "circle", //标记的图形为实心圆 + symbolSize: 0, //标记的大小 + lineStyle: { + width: 2, + color: "#00D2FF" // 线条颜色 + }, + // data: [175, 160, 153, 121, 156, 175, 160, 153, 121, 156, 180, 220], + data: data.data_value, + areaStyle: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [{ + offset: 0, + color: 'rgba(0, 168, 255, 0.6)' + }, + { + offset: 0.3, + color: 'rgba(0, 168, 255, 0.6)' + }, + { + offset: 1, + color: 'transparent' + } + ], + false + ) + }, + large:true, + }, ] + }; + + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); +} + +export function thisWeekTemperature_echart(id, data) { + let chartDom = document.getElementById(id); + let myChart = echarts.init(chartDom); + let option = { + title: { + show: false + }, + tooltip: { + trigger: 'axis' + }, + legend: { + right: '15%', + top: '5%', + icon: 'circle', + itemWidth: 8, + itemHeight: 8, + itemGap: 37, + textStyle: { + fontSize: ".12rem", + fontFamily: 'Microsoft YaHei', + fontWeight: 'normal', + color: '#82DAF7' + } + }, + grid: { + top:'15%', + left:'3%', + right:'3%', + bottom:'10%', + containLabel: true + }, + xAxis: { + type: 'category', + axisTick: { + show: false + }, + axisLabel: { + interval: 0, + textStyle: { + fontSize: ".14rem", + fontFamily: 'MicrosoftYaHei', + fontWeight: 400, + color: '#82DAF7', + padding: [5, 0, 0, 0] + } + }, + axisLine: { + show: true, + lineStyle: { + color: '#294462', + opacity: 0.3 + } + }, + // data: ['1月', '2月', '3月', '4月', '5月'] + data:data.day + }, + yAxis: { + type: 'value', + minInterval: 5, + name: '', + nameTextStyle: { + fontSize: 18, + fontFamily: 'CenturyGothic', + color: '#ffffff', + padding: [0, 0, 0, 30] + }, + axisTick: { + show: false + }, + axisLine: { + show: false + }, + splitLine: { + show: true, + lineStyle: { + color: '#06304C' + } + }, + axisLabel: { + textStyle: { + fontSize: ".14rem", + fontFamily: 'MicrosoftYaHei', + fontWeight: 'normal', + color: '#82DAF7', + padding: [0, 5, 0, 0] + } + } + }, + dataZoom: [{ + // x轴没有具体的数值 + type: 'inside', // 图形内部的滚动条 + xAxisIndex: [0], // 明确指定滚动的轴 + minValueSpan: 1, // x轴最小的index + maxValueSpan: 3, // x轴最大的index + zoomOnMouseWheel: false // 关闭鼠标滚轮缩放 + }], + series: [ + { + name: '最高温度', + type: 'bar', + barWidth: "8px", + barGap: '80%', + itemStyle: { + borderWidth: 1, + borderRadius: [20, 20, 0, 0], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(255,189,73,1)' // 0% 处的颜色 + }, { + offset: 1, + color: 'rgba(255,189,73,0.3)' // 100% 处的颜色 + }] + } + }, + // data: [90, 66, 174, 100, 430] + data:data.maxTemperature + }, + { + name: '最低温度', + type: 'bar', + barWidth: "8px", + barGap: '80%', + itemStyle: { + borderWidth: 1, + borderRadius: [20, 20, 0, 0], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(0,174,255,1)' // 0% 处的颜色 + }, { + offset: 1, + color: 'rgba(0,174,255,0.2)' // 100% 处的颜色 + }] + } + }, + // data: [87, 60, 124, 20, 432] + data:data.minTemperature + }, + + + ] + }; + option && myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); +} \ No newline at end of file diff --git a/src/assets/js/swiper.min.css b/src/assets/js/swiper.min.css new file mode 100644 index 0000000..c629b23 --- /dev/null +++ b/src/assets/js/swiper.min.css @@ -0,0 +1,12 @@ +/** + * Swiper 4.5.3 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * http://www.idangero.us/swiper/ + * + * Copyright 2014-2019 Vladimir Kharlampidi + * + * Released under the MIT License + * + * Released on: October 16, 2019 + */ +.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} \ No newline at end of file diff --git a/src/assets/js/swiper.min.js b/src/assets/js/swiper.min.js new file mode 100644 index 0000000..7789fae --- /dev/null +++ b/src/assets/js/swiper.min.js @@ -0,0 +1,13 @@ +/** + * Swiper 4.5.3 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * http://www.idangero.us/swiper/ + * + * Copyright 2014-2019 Vladimir Kharlampidi + * + * Released under the MIT License + * + * Released on: October 16, 2019 + */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Swiper=t()}(this,function(){"use strict";var m="undefined"==typeof document?{body:{},addEventListener:function(){},removeEventListener:function(){},activeElement:{blur:function(){},nodeName:""},querySelector:function(){return null},querySelectorAll:function(){return[]},getElementById:function(){return null},createEvent:function(){return{initEvent:function(){}}},createElement:function(){return{children:[],childNodes:[],style:{},setAttribute:function(){},getElementsByTagName:function(){return[]}}},location:{hash:""}}:document,ee="undefined"==typeof window?{document:m,navigator:{userAgent:""},location:{},history:{},CustomEvent:function(){return this},addEventListener:function(){},removeEventListener:function(){},getComputedStyle:function(){return{getPropertyValue:function(){return""}}},Image:function(){},Date:function(){},screen:{},setTimeout:function(){},clearTimeout:function(){}}:window,l=function(e){for(var t=0;t")){var o="div";for(0===n.indexOf(":~]/)?(t||m).querySelectorAll(e.trim()):[m.getElementById(e.trim().split("#")[1])],i=0;ia.slides.length)break;i.push(a.slides.eq(r)[0])}else i.push(a.slides.eq(a.activeIndex)[0]);for(t=0;t=t.size)&&(t.visibleSlides.push(o),t.visibleSlidesIndexes.push(n),i.eq(n).addClass(a.slideVisibleClass))}o.progress=s?-l:l}t.visibleSlides=L(t.visibleSlides)}},updateProgress:function(e){var t=this,a=t.params;if(void 0===e){var i=t.rtlTranslate?-1:1;e=t&&t.translate&&t.translate*i||0}var s=t.maxTranslate()-t.minTranslate(),r=t.progress,n=t.isBeginning,o=t.isEnd,l=n,d=o;o=0==s?n=!(r=0):(n=(r=(e-t.minTranslate())/s)<=0,1<=r),te.extend(t,{progress:r,isBeginning:n,isEnd:o}),(a.watchSlidesProgress||a.watchSlidesVisibility)&&t.updateSlidesProgress(e),n&&!l&&t.emit("reachBeginning toEdge"),o&&!d&&t.emit("reachEnd toEdge"),(l&&!n||d&&!o)&&t.emit("fromEdge"),t.emit("progress",r)},updateSlidesClasses:function(){var e,t=this,a=t.slides,i=t.params,s=t.$wrapperEl,r=t.activeIndex,n=t.realIndex,o=t.virtual&&i.virtual.enabled;a.removeClass(i.slideActiveClass+" "+i.slideNextClass+" "+i.slidePrevClass+" "+i.slideDuplicateActiveClass+" "+i.slideDuplicateNextClass+" "+i.slideDuplicatePrevClass),(e=o?t.$wrapperEl.find("."+i.slideClass+'[data-swiper-slide-index="'+r+'"]'):a.eq(r)).addClass(i.slideActiveClass),i.loop&&(e.hasClass(i.slideDuplicateClass)?s.children("."+i.slideClass+":not(."+i.slideDuplicateClass+')[data-swiper-slide-index="'+n+'"]').addClass(i.slideDuplicateActiveClass):s.children("."+i.slideClass+"."+i.slideDuplicateClass+'[data-swiper-slide-index="'+n+'"]').addClass(i.slideDuplicateActiveClass));var l=e.nextAll("."+i.slideClass).eq(0).addClass(i.slideNextClass);i.loop&&0===l.length&&(l=a.eq(0)).addClass(i.slideNextClass);var d=e.prevAll("."+i.slideClass).eq(0).addClass(i.slidePrevClass);i.loop&&0===d.length&&(d=a.eq(-1)).addClass(i.slidePrevClass),i.loop&&(l.hasClass(i.slideDuplicateClass)?s.children("."+i.slideClass+":not(."+i.slideDuplicateClass+')[data-swiper-slide-index="'+l.attr("data-swiper-slide-index")+'"]').addClass(i.slideDuplicateNextClass):s.children("."+i.slideClass+"."+i.slideDuplicateClass+'[data-swiper-slide-index="'+l.attr("data-swiper-slide-index")+'"]').addClass(i.slideDuplicateNextClass),d.hasClass(i.slideDuplicateClass)?s.children("."+i.slideClass+":not(."+i.slideDuplicateClass+')[data-swiper-slide-index="'+d.attr("data-swiper-slide-index")+'"]').addClass(i.slideDuplicatePrevClass):s.children("."+i.slideClass+"."+i.slideDuplicateClass+'[data-swiper-slide-index="'+d.attr("data-swiper-slide-index")+'"]').addClass(i.slideDuplicatePrevClass))},updateActiveIndex:function(e){var t,a=this,i=a.rtlTranslate?a.translate:-a.translate,s=a.slidesGrid,r=a.snapGrid,n=a.params,o=a.activeIndex,l=a.realIndex,d=a.snapIndex,p=e;if(void 0===p){for(var c=0;c=s[c]&&i=s[c]&&i=s[c]&&(p=c);n.normalizeSlideIndex&&(p<0||void 0===p)&&(p=0)}if((t=0<=r.indexOf(i)?r.indexOf(i):Math.floor(p/n.slidesPerGroup))>=r.length&&(t=r.length-1),p!==o){var u=parseInt(a.slides.eq(p).attr("data-swiper-slide-index")||p,10);te.extend(a,{snapIndex:t,realIndex:u,previousIndex:o,activeIndex:p}),a.emit("activeIndexChange"),a.emit("snapIndexChange"),l!==u&&a.emit("realIndexChange"),(a.initialized||a.runCallbacksOnInit)&&a.emit("slideChange")}else t!==d&&(a.snapIndex=t,a.emit("snapIndexChange"))},updateClickedSlide:function(e){var t=this,a=t.params,i=L(e.target).closest("."+a.slideClass)[0],s=!1;if(i)for(var r=0;r=o.length&&(u=o.length-1),(p||n.initialSlide||0)===(d||0)&&a&&s.emit("beforeSlideChangeStart");var h,v=-o[u];if(s.updateProgress(v),n.normalizeSlideIndex)for(var f=0;f=Math.floor(100*l[f])&&(r=f);if(s.initialized&&r!==p){if(!s.allowSlideNext&&vs.translate&&v>s.maxTranslate()&&(p||0)!==r)return!1}return h=pt.slides.length-t.loopedSlides+s/2?(t.loopFix(),r=i.children("."+a.slideClass+'[data-swiper-slide-index="'+e+'"]:not(.'+a.slideDuplicateClass+")").eq(0).index(),te.nextTick(function(){t.slideTo(r)})):t.slideTo(r):r>t.slides.length-s?(t.loopFix(),r=i.children("."+a.slideClass+'[data-swiper-slide-index="'+e+'"]:not(.'+a.slideDuplicateClass+")").eq(0).index(),te.nextTick(function(){t.slideTo(r)})):t.slideTo(r)}else t.slideTo(r)}};var h={loopCreate:function(){var i=this,e=i.params,t=i.$wrapperEl;t.children("."+e.slideClass+"."+e.slideDuplicateClass).remove();var s=t.children("."+e.slideClass);if(e.loopFillGroupWithBlank){var a=e.slidesPerGroup-s.length%e.slidesPerGroup;if(a!==e.slidesPerGroup){for(var r=0;rs.length&&(i.loopedSlides=s.length);var o=[],l=[];s.each(function(e,t){var a=L(t);e=s.length-i.loopedSlides&&o.push(t),a.attr("data-swiper-slide-index",e)});for(var d=0;d=s.length-r){e=-s.length+i+r,e+=r,t.slideTo(e,0,!1,!0)&&0!=p&&t.setTranslate((d?-t.translate:t.translate)-p)}t.allowSlidePrev=n,t.allowSlideNext=o},loopDestroy:function(){var e=this.$wrapperEl,t=this.params,a=this.slides;e.children("."+t.slideClass+"."+t.slideDuplicateClass+",."+t.slideClass+"."+t.slideBlankClass).remove(),a.removeAttr("data-swiper-slide-index")}};var v={setGrabCursor:function(e){if(!(ae.touch||!this.params.simulateTouch||this.params.watchOverflow&&this.isLocked)){var t=this.el;t.style.cursor="move",t.style.cursor=e?"-webkit-grabbing":"-webkit-grab",t.style.cursor=e?"-moz-grabbin":"-moz-grab",t.style.cursor=e?"grabbing":"grab"}},unsetGrabCursor:function(){ae.touch||this.params.watchOverflow&&this.isLocked||(this.el.style.cursor="")}};var f={appendSlide:function(e){var t=this,a=t.$wrapperEl,i=t.params;if(i.loop&&t.loopDestroy(),"object"==typeof e&&"length"in e)for(var s=0;s=ee.screen.width-d)){if(te.extend(a,{isTouched:!0,isMoved:!1,allowTouchCallbacks:!0,isScrolling:void 0,startMoving:void 0}),s.startX=n,s.startY=o,a.touchStartTime=te.now(),t.allowClick=!0,t.updateSize(),t.swipeDirection=void 0,0s.startY&&t.translate>=t.minTranslate())return a.isTouched=!1,void(a.isMoved=!1)}else if(ls.startX&&t.translate>=t.minTranslate())return;if(a.isTouchEvent&&m.activeElement&&n.target===m.activeElement&&L(n.target).is(a.formElements))return a.isMoved=!0,void(t.allowClick=!1);if(a.allowTouchCallbacks&&t.emit("touchMove",n),!(n.targetTouches&&1i.touchAngle:90-u>i.touchAngle);if(a.isScrolling&&t.emit("touchMoveOpposite",n),void 0===a.startMoving&&(s.currentX===s.startX&&s.currentY===s.startY||(a.startMoving=!0)),a.isScrolling)a.isTouched=!1;else if(a.startMoving){t.allowClick=!1,n.preventDefault(),i.touchMoveStopPropagation&&!i.nested&&n.stopPropagation(),a.isMoved||(i.loop&&t.loopFix(),a.startTranslate=t.getTranslate(),t.setTransition(0),t.animating&&t.$wrapperEl.trigger("webkitTransitionEnd transitionend"),a.allowMomentumBounce=!1,!i.grabCursor||!0!==t.allowSlideNext&&!0!==t.allowSlidePrev||t.setGrabCursor(!0),t.emit("sliderFirstMove",n)),t.emit("sliderMove",n),a.isMoved=!0;var h=t.isHorizontal()?p:c;s.diff=h,h*=i.touchRatio,r&&(h=-h),t.swipeDirection=0t.minTranslate()?(v=!1,i.resistance&&(a.currentTranslate=t.minTranslate()-1+Math.pow(-t.minTranslate()+a.startTranslate+h,f))):h<0&&a.currentTranslatea.startTranslate&&(a.currentTranslate=a.startTranslate),0i.threshold||a.allowThresholdMove))return void(a.currentTranslate=a.startTranslate);if(!a.allowThresholdMove)return a.allowThresholdMove=!0,s.startX=s.currentX,s.startY=s.currentY,a.currentTranslate=a.startTranslate,void(s.diff=t.isHorizontal()?s.currentX-s.startX:s.currentY-s.startY)}i.followFinger&&((i.freeMode||i.watchSlidesProgress||i.watchSlidesVisibility)&&(t.updateActiveIndex(),t.updateSlidesClasses()),i.freeMode&&(0===a.velocities.length&&a.velocities.push({position:s[t.isHorizontal()?"startX":"startY"],time:a.touchStartTime}),a.velocities.push({position:s[t.isHorizontal()?"currentX":"currentY"],time:te.now()})),t.updateProgress(a.currentTranslate),t.setTranslate(a.currentTranslate))}}}}}else a.startMoving&&a.isScrolling&&t.emit("touchMoveOpposite",n)}.bind(e),e.onTouchEnd=function(e){var t=this,a=t.touchEventsData,i=t.params,s=t.touches,r=t.rtlTranslate,n=t.$wrapperEl,o=t.slidesGrid,l=t.snapGrid,d=e;if(d.originalEvent&&(d=d.originalEvent),a.allowTouchCallbacks&&t.emit("touchEnd",d),a.allowTouchCallbacks=!1,!a.isTouched)return a.isMoved&&i.grabCursor&&t.setGrabCursor(!1),a.isMoved=!1,void(a.startMoving=!1);i.grabCursor&&a.isMoved&&a.isTouched&&(!0===t.allowSlideNext||!0===t.allowSlidePrev)&&t.setGrabCursor(!1);var p,c=te.now(),u=c-a.touchStartTime;if(t.allowClick&&(t.updateClickedSlide(d),t.emit("tap",d),u<300&&300-t.maxTranslate())return void(t.slides.lengtht.minTranslate())i.freeModeMomentumBounce?(w-t.minTranslate()>E&&(w=t.minTranslate()+E),y=t.minTranslate(),T=!0,a.allowMomentumBounce=!0):w=t.minTranslate(),i.loop&&i.centeredSlides&&(x=!0);else if(i.freeModeSticky){for(var S,C=0;C-w){S=C;break}w=-(w=Math.abs(l[S]-w)=i.longSwipesMs)&&(t.updateProgress(),t.updateActiveIndex(),t.updateSlidesClasses())}else{for(var M=0,P=t.slidesSizesGrid[0],k=0;k=o[k]&&p=o[k]&&(M=k,P=o[o.length-1]-o[o.length-2]);var z=(p-o[M])/P;if(u>i.longSwipesMs){if(!i.longSwipes)return void t.slideTo(t.activeIndex);"next"===t.swipeDirection&&(z>=i.longSwipesRatio?t.slideTo(M+i.slidesPerGroup):t.slideTo(M)),"prev"===t.swipeDirection&&(z>1-i.longSwipesRatio?t.slideTo(M+i.slidesPerGroup):t.slideTo(M))}else{if(!i.shortSwipes)return void t.slideTo(t.activeIndex);"next"===t.swipeDirection&&t.slideTo(M+i.slidesPerGroup),"prev"===t.swipeDirection&&t.slideTo(M)}}}.bind(e),e.onClick=function(e){this.allowClick||(this.params.preventClicks&&e.preventDefault(),this.params.preventClicksPropagation&&this.animating&&(e.stopPropagation(),e.stopImmediatePropagation()))}.bind(e);var r="container"===t.touchEventsTarget?i:s,n=!!t.nested;if(ae.touch||!ae.pointerEvents&&!ae.prefixedPointerEvents){if(ae.touch){var o=!("touchstart"!==a.start||!ae.passiveListener||!t.passiveListeners)&&{passive:!0,capture:!1};r.addEventListener(a.start,e.onTouchStart,o),r.addEventListener(a.move,e.onTouchMove,ae.passiveListener?{passive:!1,capture:n}:n),r.addEventListener(a.end,e.onTouchEnd,o),w||(m.addEventListener("touchstart",y),w=!0)}(t.simulateTouch&&!g.ios&&!g.android||t.simulateTouch&&!ae.touch&&g.ios)&&(r.addEventListener("mousedown",e.onTouchStart,!1),m.addEventListener("mousemove",e.onTouchMove,n),m.addEventListener("mouseup",e.onTouchEnd,!1))}else r.addEventListener(a.start,e.onTouchStart,!1),m.addEventListener(a.move,e.onTouchMove,n),m.addEventListener(a.end,e.onTouchEnd,!1);(t.preventClicks||t.preventClicksPropagation)&&r.addEventListener("click",e.onClick,!0),e.on(g.ios||g.android?"resize orientationchange observerUpdate":"resize observerUpdate",b,!0)},detachEvents:function(){var e=this,t=e.params,a=e.touchEvents,i=e.el,s=e.wrapperEl,r="container"===t.touchEventsTarget?i:s,n=!!t.nested;if(ae.touch||!ae.pointerEvents&&!ae.prefixedPointerEvents){if(ae.touch){var o=!("onTouchStart"!==a.start||!ae.passiveListener||!t.passiveListeners)&&{passive:!0,capture:!1};r.removeEventListener(a.start,e.onTouchStart,o),r.removeEventListener(a.move,e.onTouchMove,n),r.removeEventListener(a.end,e.onTouchEnd,o)}(t.simulateTouch&&!g.ios&&!g.android||t.simulateTouch&&!ae.touch&&g.ios)&&(r.removeEventListener("mousedown",e.onTouchStart,!1),m.removeEventListener("mousemove",e.onTouchMove,n),m.removeEventListener("mouseup",e.onTouchEnd,!1))}else r.removeEventListener(a.start,e.onTouchStart,!1),m.removeEventListener(a.move,e.onTouchMove,n),m.removeEventListener(a.end,e.onTouchEnd,!1);(t.preventClicks||t.preventClicksPropagation)&&r.removeEventListener("click",e.onClick,!0),e.off(g.ios||g.android?"resize orientationchange observerUpdate":"resize observerUpdate",b)}},breakpoints:{setBreakpoint:function(){var e=this,t=e.activeIndex,a=e.initialized,i=e.loopedSlides;void 0===i&&(i=0);var s=e.params,r=s.breakpoints;if(r&&(!r||0!==Object.keys(r).length)){var n=e.getBreakpoint(r);if(n&&e.currentBreakpoint!==n){var o=n in r?r[n]:void 0;o&&["slidesPerView","spaceBetween","slidesPerGroup"].forEach(function(e){var t=o[e];void 0!==t&&(o[e]="slidesPerView"!==e||"AUTO"!==t&&"auto"!==t?"slidesPerView"===e?parseFloat(t):parseInt(t,10):"auto")});var l=o||e.originalParams,d=l.direction&&l.direction!==s.direction,p=s.loop&&(l.slidesPerView!==s.slidesPerView||d);d&&a&&e.changeDirection(),te.extend(e.params,l),te.extend(e,{allowTouchMove:e.params.allowTouchMove,allowSlideNext:e.params.allowSlideNext,allowSlidePrev:e.params.allowSlidePrev}),e.currentBreakpoint=n,p&&a&&(e.loopDestroy(),e.loopCreate(),e.updateSlides(),e.slideTo(t-i+e.loopedSlides,0,!1)),e.emit("breakpoint",l)}}},getBreakpoint:function(e){if(e){var t=!1,a=[];Object.keys(e).forEach(function(e){a.push(e)}),a.sort(function(e,t){return parseInt(e,10)-parseInt(t,10)});for(var i=0;i=ee.innerWidth&&!t&&(t=s)}return t||"max"}}},checkOverflow:{checkOverflow:function(){var e=this,t=e.isLocked;e.isLocked=1===e.snapGrid.length,e.allowSlideNext=!e.isLocked,e.allowSlidePrev=!e.isLocked,t!==e.isLocked&&e.emit(e.isLocked?"lock":"unlock"),t&&t!==e.isLocked&&(e.isEnd=!1,e.navigation.update())}},classes:{addClasses:function(){var t=this.classNames,a=this.params,e=this.rtl,i=this.$el,s=[];s.push("initialized"),s.push(a.direction),a.freeMode&&s.push("free-mode"),ae.flexbox||s.push("no-flexbox"),a.autoHeight&&s.push("autoheight"),e&&s.push("rtl"),1'+e+"");return s.attr("data-swiper-slide-index")||s.attr("data-swiper-slide-index",t),i.cache&&(a.virtual.cache[t]=s),s},appendSlide:function(e){if("object"==typeof e&&"length"in e)for(var t=0;tMath.abs(n.pixelY)))return!0;s=n.pixelX*r}else{if(!(Math.abs(n.pixelY)>Math.abs(n.pixelX)))return!0;s=n.pixelY}else s=Math.abs(n.pixelX)>Math.abs(n.pixelY)?-n.pixelX*r:-n.pixelY;if(0===s)return!0;if(i.invert&&(s=-s),a.params.freeMode){a.params.loop&&a.loopFix();var o=a.getTranslate()+s*i.sensitivity,l=a.isBeginning,d=a.isEnd;if(o>=a.minTranslate()&&(o=a.minTranslate()),o<=a.maxTranslate()&&(o=a.maxTranslate()),a.setTransition(0),a.setTranslate(o),a.updateProgress(),a.updateActiveIndex(),a.updateSlidesClasses(),(!l&&a.isBeginning||!d&&a.isEnd)&&a.updateSlidesClasses(),a.params.freeModeSticky&&(clearTimeout(a.mousewheel.timeout),a.mousewheel.timeout=te.nextTick(function(){a.slideToClosest()},300)),a.emit("scroll",t),a.params.autoplay&&a.params.autoplayDisableOnInteraction&&a.autoplay.stop(),o===a.minTranslate()||o===a.maxTranslate())return!0}else{if(60a-1-2*e.loopedSlides&&(r-=a-2*e.loopedSlides),n-1s.dynamicMainBullets-1?e.pagination.dynamicBulletIndex=s.dynamicMainBullets-1:e.pagination.dynamicBulletIndex<0&&(e.pagination.dynamicBulletIndex=0)),o=r-e.pagination.dynamicBulletIndex,d=((l=o+(Math.min(p.length,s.dynamicMainBullets)-1))+o)/2),p.removeClass(s.bulletActiveClass+" "+s.bulletActiveClass+"-next "+s.bulletActiveClass+"-next-next "+s.bulletActiveClass+"-prev "+s.bulletActiveClass+"-prev-prev "+s.bulletActiveClass+"-main"),1";i.html(s),e.pagination.bullets=i.find("."+t.bulletClass)}"fraction"===t.type&&(s=t.renderFraction?t.renderFraction.call(e,t.currentClass,t.totalClass):' / ',i.html(s)),"progressbar"===t.type&&(s=t.renderProgressbar?t.renderProgressbar.call(e,t.progressbarFillClass):'',i.html(s)),"custom"!==t.type&&e.emit("paginationRender",e.pagination.$el[0])}},init:function(){var a=this,e=a.params.pagination;if(e.el){var t=L(e.el);0!==t.length&&(a.params.uniqueNavElements&&"string"==typeof e.el&&1'),s.append(r)),te.extend(t,{$el:s,el:s[0],$dragEl:r,dragEl:r[0]}),i.draggable&&t.enableDraggable()}},destroy:function(){this.scrollbar.disableDraggable()}},X={setTransform:function(e,t){var a=this.rtl,i=L(e),s=a?-1:1,r=i.attr("data-swiper-parallax")||"0",n=i.attr("data-swiper-parallax-x"),o=i.attr("data-swiper-parallax-y"),l=i.attr("data-swiper-parallax-scale"),d=i.attr("data-swiper-parallax-opacity");if(n||o?(n=n||"0",o=o||"0"):this.isHorizontal()?(n=r,o="0"):(o=r,n="0"),n=0<=n.indexOf("%")?parseInt(n,10)*t*s+"%":n*t*s+"px",o=0<=o.indexOf("%")?parseInt(o,10)*t+"%":o*t+"px",null!=d){var p=d-(d-1)*(1-Math.abs(t));i[0].style.opacity=p}if(null==l)i.transform("translate3d("+n+", "+o+", 0px)");else{var c=l-(l-1)*(1-Math.abs(t));i.transform("translate3d("+n+", "+o+", 0px) scale("+c+")")}},setTranslate:function(){var i=this,e=i.$el,t=i.slides,s=i.progress,r=i.snapGrid;e.children("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]").each(function(e,t){i.parallax.setTransform(t,s)}),t.each(function(e,t){var a=t.progress;1i.maxRatio&&(a.scale=i.maxRatio-1+Math.pow(a.scale-i.maxRatio+1,.5)),a.scales.touchesStart.x))return void(s.isTouched=!1);if(!t.isHorizontal()&&(Math.floor(s.minY)===Math.floor(s.startY)&&s.touchesCurrent.ys.touchesStart.y))return void(s.isTouched=!1)}e.preventDefault(),e.stopPropagation(),s.isMoved=!0,s.currentX=s.touchesCurrent.x-s.touchesStart.x+s.startX,s.currentY=s.touchesCurrent.y-s.touchesStart.y+s.startY,s.currentXs.maxX&&(s.currentX=s.maxX-1+Math.pow(s.currentX-s.maxX+1,.8)),s.currentYs.maxY&&(s.currentY=s.maxY-1+Math.pow(s.currentY-s.maxY+1,.8)),r.prevPositionX||(r.prevPositionX=s.touchesCurrent.x),r.prevPositionY||(r.prevPositionY=s.touchesCurrent.y),r.prevTime||(r.prevTime=Date.now()),r.x=(s.touchesCurrent.x-r.prevPositionX)/(Date.now()-r.prevTime)/2,r.y=(s.touchesCurrent.y-r.prevPositionY)/(Date.now()-r.prevTime)/2,Math.abs(s.touchesCurrent.x-r.prevPositionX)<2&&(r.x=0),Math.abs(s.touchesCurrent.y-r.prevPositionY)<2&&(r.y=0),r.prevPositionX=s.touchesCurrent.x,r.prevPositionY=s.touchesCurrent.y,r.prevTime=Date.now(),i.$imageWrapEl.transform("translate3d("+s.currentX+"px, "+s.currentY+"px,0)")}}},onTouchEnd:function(){var e=this.zoom,t=e.gesture,a=e.image,i=e.velocity;if(t.$imageEl&&0!==t.$imageEl.length){if(!a.isTouched||!a.isMoved)return a.isTouched=!1,void(a.isMoved=!1);a.isTouched=!1,a.isMoved=!1;var s=300,r=300,n=i.x*s,o=a.currentX+n,l=i.y*r,d=a.currentY+l;0!==i.x&&(s=Math.abs((o-a.currentX)/i.x)),0!==i.y&&(r=Math.abs((d-a.currentY)/i.y));var p=Math.max(s,r);a.currentX=o,a.currentY=d;var c=a.width*e.scale,u=a.height*e.scale;a.minX=Math.min(t.slideWidth/2-c/2,0),a.maxX=-a.minX,a.minY=Math.min(t.slideHeight/2-u/2,0),a.maxY=-a.minY,a.currentX=Math.max(Math.min(a.currentX,a.maxX),a.minX),a.currentY=Math.max(Math.min(a.currentY,a.maxY),a.minY),t.$imageWrapEl.transition(p).transform("translate3d("+a.currentX+"px, "+a.currentY+"px,0)")}},onTransitionEnd:function(){var e=this.zoom,t=e.gesture;t.$slideEl&&this.previousIndex!==this.activeIndex&&(t.$imageEl.transform("translate3d(0,0,0) scale(1)"),t.$imageWrapEl.transform("translate3d(0,0,0)"),e.scale=1,e.currentScale=1,t.$slideEl=void 0,t.$imageEl=void 0,t.$imageWrapEl=void 0)},toggle:function(e){var t=this.zoom;t.scale&&1!==t.scale?t.out():t.in(e)},in:function(e){var t,a,i,s,r,n,o,l,d,p,c,u,h,v,f,m,g=this,b=g.zoom,w=g.params.zoom,y=b.gesture,x=b.image;y.$slideEl||(y.$slideEl=g.clickedSlide?L(g.clickedSlide):g.slides.eq(g.activeIndex),y.$imageEl=y.$slideEl.find("img, svg, canvas"),y.$imageWrapEl=y.$imageEl.parent("."+w.containerClass)),y.$imageEl&&0!==y.$imageEl.length&&(y.$slideEl.addClass(""+w.zoomedSlideClass),a=void 0===x.touchesStart.x&&e?(t="touchend"===e.type?e.changedTouches[0].pageX:e.pageX,"touchend"===e.type?e.changedTouches[0].pageY:e.pageY):(t=x.touchesStart.x,x.touchesStart.y),b.scale=y.$imageWrapEl.attr("data-swiper-zoom")||w.maxRatio,b.currentScale=y.$imageWrapEl.attr("data-swiper-zoom")||w.maxRatio,e?(f=y.$slideEl[0].offsetWidth,m=y.$slideEl[0].offsetHeight,i=y.$slideEl.offset().left+f/2-t,s=y.$slideEl.offset().top+m/2-a,o=y.$imageEl[0].offsetWidth,l=y.$imageEl[0].offsetHeight,d=o*b.scale,p=l*b.scale,h=-(c=Math.min(f/2-d/2,0)),v=-(u=Math.min(m/2-p/2,0)),(r=i*b.scale)>1]<=t?i=s:a=s;return a};return this.x=e,this.y=t,this.lastIndex=e.length-1,this.interpolate=function(e){return e?(n=o(this.x,e),r=n-1,(e-this.x[r])*(this.y[n]-this.y[r])/(this.x[n]-this.x[r])+this.y[r]):0},this},getInterpolateFunction:function(e){var t=this;t.controller.spline||(t.controller.spline=t.params.loop?new F.LinearSpline(t.slidesGrid,e.slidesGrid):new F.LinearSpline(t.snapGrid,e.snapGrid))},setTranslate:function(e,t){var a,i,s=this,r=s.controller.control;function n(e){var t=s.rtlTranslate?-s.translate:s.translate;"slide"===s.params.controller.by&&(s.controller.getInterpolateFunction(e),i=-s.controller.spline.interpolate(-t)),i&&"container"!==s.params.controller.by||(a=(e.maxTranslate()-e.minTranslate())/(s.maxTranslate()-s.minTranslate()),i=(t-s.minTranslate())*a+e.minTranslate()),s.params.controller.inverse&&(i=e.maxTranslate()-i),e.updateProgress(i),e.setTranslate(i,s),e.updateActiveIndex(),e.updateSlidesClasses()}if(Array.isArray(r))for(var o=0;o'),i.append(e)),e.css({height:r+"px"})):0===(e=a.find(".swiper-cube-shadow")).length&&(e=L('
'),a.append(e)));for(var h=0;h'),v.append(E)),0===S.length&&(S=L('
'),v.append(S)),E.length&&(E[0].style.opacity=Math.max(-b,0)),S.length&&(S[0].style.opacity=Math.max(b,0))}}if(i.css({"-webkit-transform-origin":"50% 50% -"+l/2+"px","-moz-transform-origin":"50% 50% -"+l/2+"px","-ms-transform-origin":"50% 50% -"+l/2+"px","transform-origin":"50% 50% -"+l/2+"px"}),d.shadow)if(p)e.transform("translate3d(0px, "+(r/2+d.shadowOffset)+"px, "+-r/2+"px) rotateX(90deg) rotateZ(0deg) scale("+d.shadowScale+")");else{var C=Math.abs(u)-90*Math.floor(Math.abs(u)/90),M=1.5-(Math.sin(2*C*Math.PI/360)/2+Math.cos(2*C*Math.PI/360)/2),P=d.shadowScale,k=d.shadowScale/M,z=d.shadowOffset;e.transform("scale3d("+P+", 1, "+k+") translate3d(0px, "+(n/2+z)+"px, "+-n/2/k+"px) rotateX(-90deg)")}var $=ie.isSafari||ie.isUiWebView?-l/2:0;i.transform("translate3d(0px,0,"+$+"px) rotateX("+(t.isHorizontal()?0:u)+"deg) rotateY("+(t.isHorizontal()?-u:0)+"deg)")},setTransition:function(e){var t=this.$el;this.slides.transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e),this.params.cubeEffect.shadow&&!this.isHorizontal()&&t.find(".swiper-cube-shadow").transition(e)}},_={setTranslate:function(){for(var e=this,t=e.slides,a=e.rtlTranslate,i=0;i'),s.append(p)),0===c.length&&(c=L('
'),s.append(c)),p.length&&(p[0].style.opacity=Math.max(-r,0)),c.length&&(c[0].style.opacity=Math.max(r,0))}s.transform("translate3d("+l+"px, "+d+"px, 0px) rotateX("+o+"deg) rotateY("+n+"deg)")}},setTransition:function(e){var a=this,t=a.slides,i=a.activeIndex,s=a.$wrapperEl;if(t.transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e),a.params.virtualTranslate&&0!==e){var r=!1;t.eq(i).transitionEnd(function(){if(!r&&a&&!a.destroyed){r=!0,a.animating=!1;for(var e=["webkitTransitionEnd","transitionend"],t=0;t'),v.append(E)),0===S.length&&(S=L('
'),v.append(S)),E.length&&(E[0].style.opacity=0')}}),Object.keys(R).forEach(function(e){t.a11y[e]=R[e].bind(t)})},on:{init:function(){this.params.a11y.enabled&&(this.a11y.init(),this.a11y.updateNavigation())},toEdge:function(){this.params.a11y.enabled&&this.a11y.updateNavigation()},fromEdge:function(){this.params.a11y.enabled&&this.a11y.updateNavigation()},paginationUpdate:function(){this.params.a11y.enabled&&this.a11y.updatePagination()},destroy:function(){this.params.a11y.enabled&&this.a11y.destroy()}}},{name:"history",params:{history:{enabled:!1,replaceState:!1,key:"slides"}},create:function(){var e=this;te.extend(e,{history:{init:q.init.bind(e),setHistory:q.setHistory.bind(e),setHistoryPopState:q.setHistoryPopState.bind(e),scrollToSlide:q.scrollToSlide.bind(e),destroy:q.destroy.bind(e)}})},on:{init:function(){this.params.history.enabled&&this.history.init()},destroy:function(){this.params.history.enabled&&this.history.destroy()},transitionEnd:function(){this.history.initialized&&this.history.setHistory(this.params.history.key,this.activeIndex)}}},{name:"hash-navigation",params:{hashNavigation:{enabled:!1,replaceState:!1,watchState:!1}},create:function(){var e=this;te.extend(e,{hashNavigation:{initialized:!1,init:W.init.bind(e),destroy:W.destroy.bind(e),setHash:W.setHash.bind(e),onHashCange:W.onHashCange.bind(e)}})},on:{init:function(){this.params.hashNavigation.enabled&&this.hashNavigation.init()},destroy:function(){this.params.hashNavigation.enabled&&this.hashNavigation.destroy()},transitionEnd:function(){this.hashNavigation.initialized&&this.hashNavigation.setHash()}}},{name:"autoplay",params:{autoplay:{enabled:!1,delay:3e3,waitForTransition:!0,disableOnInteraction:!0,stopOnLastSlide:!1,reverseDirection:!1}},create:function(){var t=this;te.extend(t,{autoplay:{running:!1,paused:!1,run:j.run.bind(t),start:j.start.bind(t),stop:j.stop.bind(t),pause:j.pause.bind(t),onTransitionEnd:function(e){t&&!t.destroyed&&t.$wrapperEl&&e.target===this&&(t.$wrapperEl[0].removeEventListener("transitionend",t.autoplay.onTransitionEnd),t.$wrapperEl[0].removeEventListener("webkitTransitionEnd",t.autoplay.onTransitionEnd),t.autoplay.paused=!1,t.autoplay.running?t.autoplay.run():t.autoplay.stop())}}})},on:{init:function(){this.params.autoplay.enabled&&this.autoplay.start()},beforeTransitionStart:function(e,t){this.autoplay.running&&(t||!this.params.autoplay.disableOnInteraction?this.autoplay.pause(e):this.autoplay.stop())},sliderFirstMove:function(){this.autoplay.running&&(this.params.autoplay.disableOnInteraction?this.autoplay.stop():this.autoplay.pause())},destroy:function(){this.autoplay.running&&this.autoplay.stop()}}},{name:"effect-fade",params:{fadeEffect:{crossFade:!1}},create:function(){te.extend(this,{fadeEffect:{setTranslate:U.setTranslate.bind(this),setTransition:U.setTransition.bind(this)}})},on:{beforeInit:function(){var e=this;if("fade"===e.params.effect){e.classNames.push(e.params.containerModifierClass+"fade");var t={slidesPerView:1,slidesPerColumn:1,slidesPerGroup:1,watchSlidesProgress:!0,spaceBetween:0,virtualTranslate:!0};te.extend(e.params,t),te.extend(e.originalParams,t)}},setTranslate:function(){"fade"===this.params.effect&&this.fadeEffect.setTranslate()},setTransition:function(e){"fade"===this.params.effect&&this.fadeEffect.setTransition(e)}}},{name:"effect-cube",params:{cubeEffect:{slideShadows:!0,shadow:!0,shadowOffset:20,shadowScale:.94}},create:function(){te.extend(this,{cubeEffect:{setTranslate:K.setTranslate.bind(this),setTransition:K.setTransition.bind(this)}})},on:{beforeInit:function(){var e=this;if("cube"===e.params.effect){e.classNames.push(e.params.containerModifierClass+"cube"),e.classNames.push(e.params.containerModifierClass+"3d");var t={slidesPerView:1,slidesPerColumn:1,slidesPerGroup:1,watchSlidesProgress:!0,resistanceRatio:0,spaceBetween:0,centeredSlides:!1,virtualTranslate:!0};te.extend(e.params,t),te.extend(e.originalParams,t)}},setTranslate:function(){"cube"===this.params.effect&&this.cubeEffect.setTranslate()},setTransition:function(e){"cube"===this.params.effect&&this.cubeEffect.setTransition(e)}}},{name:"effect-flip",params:{flipEffect:{slideShadows:!0,limitRotation:!0}},create:function(){te.extend(this,{flipEffect:{setTranslate:_.setTranslate.bind(this),setTransition:_.setTransition.bind(this)}})},on:{beforeInit:function(){var e=this;if("flip"===e.params.effect){e.classNames.push(e.params.containerModifierClass+"flip"),e.classNames.push(e.params.containerModifierClass+"3d");var t={slidesPerView:1,slidesPerColumn:1,slidesPerGroup:1,watchSlidesProgress:!0,spaceBetween:0,virtualTranslate:!0};te.extend(e.params,t),te.extend(e.originalParams,t)}},setTranslate:function(){"flip"===this.params.effect&&this.flipEffect.setTranslate()},setTransition:function(e){"flip"===this.params.effect&&this.flipEffect.setTransition(e)}}},{name:"effect-coverflow",params:{coverflowEffect:{rotate:50,stretch:0,depth:100,modifier:1,slideShadows:!0}},create:function(){te.extend(this,{coverflowEffect:{setTranslate:Z.setTranslate.bind(this),setTransition:Z.setTransition.bind(this)}})},on:{beforeInit:function(){var e=this;"coverflow"===e.params.effect&&(e.classNames.push(e.params.containerModifierClass+"coverflow"),e.classNames.push(e.params.containerModifierClass+"3d"),e.params.watchSlidesProgress=!0,e.originalParams.watchSlidesProgress=!0)},setTranslate:function(){"coverflow"===this.params.effect&&this.coverflowEffect.setTranslate()},setTransition:function(e){"coverflow"===this.params.effect&&this.coverflowEffect.setTransition(e)}}},{name:"thumbs",params:{thumbs:{swiper:null,slideThumbActiveClass:"swiper-slide-thumb-active",thumbsContainerClass:"swiper-container-thumbs"}},create:function(){te.extend(this,{thumbs:{swiper:null,init:Q.init.bind(this),update:Q.update.bind(this),onThumbClick:Q.onThumbClick.bind(this)}})},on:{beforeInit:function(){var e=this.params.thumbs;e&&e.swiper&&(this.thumbs.init(),this.thumbs.update(!0))},slideChange:function(){this.thumbs.swiper&&this.thumbs.update()},update:function(){this.thumbs.swiper&&this.thumbs.update()},resize:function(){this.thumbs.swiper&&this.thumbs.update()},observerUpdate:function(){this.thumbs.swiper&&this.thumbs.update()},setTransition:function(e){var t=this.thumbs.swiper;t&&t.setTransition(e)},beforeDestroy:function(){var e=this.thumbs.swiper;e&&this.thumbs.swiperCreated&&e&&e.destroy()}}}];return void 0===S.use&&(S.use=S.Class.use,S.installModule=S.Class.installModule),S.use(J),S}); +//# sourceMappingURL=swiper.min.js.map diff --git a/src/main.js b/src/main.js index e5ab2c4..9282955 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,8 @@ Vue.config.productionTip = false import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; +import "@/rem/rem.js" + import axios from "axios"; Vue.prototype.$axios = axios; import api from "./api/index.js"; diff --git a/src/rem/rem.js b/src/rem/rem.js new file mode 100644 index 0000000..1a1711c --- /dev/null +++ b/src/rem/rem.js @@ -0,0 +1,20 @@ +// rem等比适配配置文件 +// 基准大小 +const baseSize = 100; +// 设置 rem 函数 +function setRem() { + // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 + const scale = window.innerWidth / 1920; + + + // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整） + document.documentElement.style.fontSize = baseSize * scale + "px"; +} +// 初始化 +setRem(); +// 改变窗口大小时重新设置 rem +window.onresize = function () { + setRem(); +}; + + diff --git a/src/router/index.js b/src/router/index.js index a962311..1bb6858 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,7 +23,16 @@ const routes = [ component: () => import('../views/page/status.vue') },] }, - + { + path: '/largeScreen', + name: 'largeScreen', + component: () => import('../views/page/largeScreen.vue') + }, + { + path: '/largeScreen1', + name: 'largeScreen1', + component: () => import('../views/page/largeScreen1.vue') + }, { path: '/index', name: 'index', @@ -97,6 +106,18 @@ const routes = [ },] },] }, + + { + path: '/vrcode', + name: 'vrcode', + component: () => import('../views/vrcode.vue'), + redirect: '/plantingPlan', + children: [{ + path: '/plantingPlan', + name: 'plantingPlan', + component: () => import('../views/vrcode/plantingPlan.vue') + }] + }, ] const router = new VueRouter({ diff --git a/src/views/index.vue b/src/views/index.vue index a488407..3d1af9b 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -72,7 +72,7 @@ export default { { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') }, //systemManage systemManage { name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') }, - { name: '大数据', router: '', routerList: [''], img: require('../assets/image/header-img8.png') } + { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') } ], activeNames: [3], diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue new file mode 100644 index 0000000..279ada1 --- /dev/null +++ b/src/views/page/largeScreen.vue @@ -0,0 +1,1264 @@ + + + + + diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue new file mode 100644 index 0000000..83000c8 --- /dev/null +++ b/src/views/page/largeScreen1.vue @@ -0,0 +1,780 @@ + + + + \ No newline at end of file diff --git a/src/views/page/realTime.vue b/src/views/page/realTime.vue index 6f9a5ae..9614342 100644 --- a/src/views/page/realTime.vue +++ b/src/views/page/realTime.vue @@ -1,6 +1,6 @@ + + \ No newline at end of file diff --git a/src/views/vrcode/plantingPlan.vue b/src/views/vrcode/plantingPlan.vue new file mode 100644 index 0000000..f0b43d5 --- /dev/null +++ b/src/views/vrcode/plantingPlan.vue @@ -0,0 +1,31 @@ + + + + + \ No newline at end of file