站点详情弹窗

guanqb

2022-08-06 e44bbaca7b255394a483ac314d46fd31bf4543b0

站点详情弹窗

 public/img/icon/close.png

 public/img/icon/closeMenu.png

 public/img/icon/icon_3788.png

 public/img/icon/open_menu.png

 src/styles/index.css

@@ -27,6 +27,39 @@
  visibility: hidden;
}

.el-icon-my-nc-menu {
  background: url("/img/icon/nc-menu.png") center no-repeat;
  /* background-size: cover;*/
}

.el-icon-my-nc-menu:before {
  content: "替";
  font-size: 24px;
  visibility: hidden;
}

.el-icon-my-jksb-menu {
  background: url("/img/icon/jksb-menu.png") center no-repeat;
  /* background-size: cover;*/
}

.el-icon-my-jksb-menu:before {
  content: "替";
  font-size: 24px;
  visibility: hidden;
}

.el-icon-my-jcsb-menu {
  background: url("/img/icon/jcsb-menu.png") center no-repeat;
  /* background-size: cover;*/
}

.el-icon-my-jcsb-menu:before {
  content: "替";
  font-size: 24px;
  visibility: hidden;
}

.dialog-fixed {
  margin: 0 !important;
  position: fixed;
@@ -764,6 +797,206 @@
  width: 120px;
}

.public-equirment-station-details {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1208px;
  background-color: transparent;
  z-index: 99;
  font-size: 16px;
  box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.16);
  border: 1px solid #69E2ED;
  background: rgba(20, 66, 104, 0.8);
}

.public-equirment-station-details .header {
  position: relative;
  border-radius: 8px 8px 0 0;
  width: 100%;
  height: 58px;
  line-height: 58px;
  background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.public-equirment-station-details .header .logo {
  position: aboslute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: #69E2ED;
}

.public-equirment-station-details .header .title {
  position: absolute;
  top: 0;
  left: 25px;
  font-size: 18px;
  font-weight: bold;
  color: #66DDE9;
}

.public-equirment-station-details .header .close {
  position: absolute;
  right: 20px;
  top: 0;
  left: auto;
  bottom: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  cursor: pointer;
  opacity: 0.6;
}

.public-equirment-station-details .content {
  display: flex;
  flex-direction: column;
  clear: both;
  width: 100%;
  height: 600px;
  margin-top: 0px;
  text-align: center;
  overflow: hidden;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0 0 8px 8px;
}

.public-equirment-station-details .content .action-bar {
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.public-equirment-station-details .content .action-bar > .search .search-input input {
  color: #fff;
  background: rgba(33, 186, 196, 0.2);
  border-color: #21BAC4;
}

.public-equirment-station-details .content .action-bar .btn-grounp .search {
  color: #fff;
  background: #21BAC4;
  border-color: #21BAC4;
}

.public-equirment-station-details .content .action-bar .btn-grounp .reset {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.public-equirment-station-details .content .table-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.public-equirment-station-details .content .table-list .t-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, rgba(49, 137, 153, 0.5) 0%, rgba(49, 161, 168, 0.5) 44%, rgba(49, 137, 153, 0.5) 100%);
}

.public-equirment-station-details .content .table-list .t-header .sym-style {
  text-align: left;
}

.public-equirment-station-details .content .table-list .t-body {
  flex: 1;
  overflow-y: auto;
}

.public-equirment-station-details .content .table-list .table-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 94px;
  border-bottom: 1px solid #E8ECEF;
  color: #fff;
}

.public-equirment-station-details .content .table-list .table-list .sym-style {
  display: flex;
  justify-content: space-between;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .l {
  display: flex;
  align-items: center;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .l img {
  width: 94px;
  height: 56px;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .r {
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .r .title {
  font-size: 18px;
  font-weight: bold;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .r .unit {
  font-size: 14px;
}

.public-equirment-station-details .content .table-list .table-list:last-child {
  border: none;
}

.public-equirment-station-details .content .table-list .t-header > div:first-child,
.public-equirment-station-details .content .table-list .table-list > div:first-child {
  margin-left: 30px;
  flex: 1;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(2),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(2) {
  width: 200px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(3),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(3) {
  width: 240px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(4),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(4) {
  width: 260px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(5),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(5) {
  width: 200px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(5) .look,
.public-equirment-station-details .content .table-list .table-list > div:nth-child(5) .look {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.2);
  border-color: #00F0FF;
}

.public-nape-plot-details {
  position: fixed;
  top: 50%;

 src/styles/index.min.css

@@ -1 +1 @@
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e !important}.manage-option{background-color:#05243e !important;color:#a5cacc}.public-org-nav-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-nav-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-nav-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-nav-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-nav-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-nav-bar .content{clear:both;width:100%;height:500px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-nav-bar .content .farm-profiles{position:relative}.public-org-nav-bar .content .farm-profiles .btn-grounp{position:absolute;top:18px;right:20px}.public-org-nav-bar .content .farm-profiles .btn-grounp .details{text-align:right;font-size:18px;color:#08F4FF;cursor:pointer}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene{margin-top:24px;display:flex;align-items:center;justify-content:center;width:100px;height:30px;background:rgba(102,221,233,0.16);border-radius:4px 4px 4px 4px;border:1px solid #66DDE9;box-sizing:border-box}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene img{height:24px}.public-org-nav-bar .content .farm-profiles .farm-content{padding:30px 20px;font-size:16px;color:#fff}.public-org-nav-bar .content .farm-profiles .farm-content .row{margin-top:30px;display:flex;justify-content:space-between}.public-org-nav-bar .content .farm-profiles .farm-content .row .l{display:flex;align-items:flex-start;justify-content:flex-end;width:100px;height:24px;color:#A9D1D7}.public-org-nav-bar .content .farm-profiles .farm-content .row .r{display:flex;align-items:center;justify-content:flex-start;text-align:left;margin-left:24px;flex:1}.public-org-nav-bar .content .farm-profiles .farm-content .row .r img{margin-right:16px;width:102px;height:102px;border-radius:4px 4px 4px 4px}.public-org-nav-bar .content .farm-profiles .farm-content .row:first-child{margin-top:0}.public-org-market-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-market-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-market-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-market-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-market-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-market-bar .content{clear:both;width:100%;height:650px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-market-bar .content .market-title{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-title .date{padding-left:30px}.public-org-market-bar .content .market-title .query-button{width:47%;text-align:end}.public-org-market-bar .content .market-content{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-content .market-chart{width:758px;height:520px}.public-org-market-bar .content .market-content .market-list{margin-left:30px;width:31%;height:520px}.public-org-market-bar .content .market-content .market-list .market-list-item{flex:1;display:flex;flex-direction:column}.public-org-market-bar .content .market-content .market-list .market-list-item>div{position:relative;flex:1;padding:15px 20px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item>div:first-child{font-weight:bold;color:#66dde9}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item>div:first-child{color:#fff}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border{top:0;bottom:auto}.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{top:auto;bottom:0}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border,.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{position:absolute;left:0;right:0;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-org-market-bar .content .market-content .market-list .market-list-item>div:first-child{margin-bottom:15px}.public-trace-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-trace-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-trace-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-trace-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-trace-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-trace-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-trace-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-trace-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-trace-table .content .table-list{flex:1;display:flex;flex-direction:column}.public-trace-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-trace-table .content .table-list .t-header .sym-style{text-align:left}.public-trace-table .content .table-list .t-body{flex:1;overflow-y:auto}.public-trace-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:94px;border-bottom:1px solid #E8ECEF;color:#fff}.public-trace-table .content .table-list .table-list .sym-style{display:flex;justify-content:space-between}.public-trace-table .content .table-list .table-list .sym-style .l{display:flex;align-items:center}.public-trace-table .content .table-list .table-list .sym-style .l img{width:94px;height:56px}.public-trace-table .content .table-list .table-list .sym-style .r{margin-left:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.public-trace-table .content .table-list .table-list .sym-style .r .title{font-size:18px;font-weight:bold}.public-trace-table .content .table-list .table-list .sym-style .r .unit{font-size:14px}.public-trace-table .content .table-list .table-list:last-child{border:none}.public-trace-table .content .table-list .t-header>div:first-child,.public-trace-table .content .table-list .table-list>div:first-child{margin-left:30px;flex:1}.public-trace-table .content .table-list .t-header>div:nth-child(2),.public-trace-table .content .table-list .table-list>div:nth-child(2){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(3),.public-trace-table .content .table-list .table-list>div:nth-child(3){width:240px}.public-trace-table .content .table-list .t-header>div:nth-child(4),.public-trace-table .content .table-list .table-list>div:nth-child(4){width:260px}.public-trace-table .content .table-list .t-header>div:nth-child(5),.public-trace-table .content .table-list .table-list>div:nth-child(5){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(5) .look,.public-trace-table .content .table-list .table-list>div:nth-child(5) .look{color:#00F0FF;background:rgba(0,240,255,0.2);border-color:#00F0FF}.el-scrollbar{position:relative}.el-scrollbar .el-scrollbar__wrap{overflow-x:hidden}.public-farm-oper-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-farm-oper-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-farm-oper-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-farm-oper-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-farm-oper-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-farm-oper-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-farm-oper-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-farm-oper-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-type input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-plot{margin-left:30px}.public-farm-oper-table .content .action-bar>.search .select-plot input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-farm-oper-table .content .table-list{height:calc(100% - 74px);display:flex;flex-direction:column}.public-farm-oper-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-farm-oper-table .content .table-list .t-body{height:calc(100% - 56px);overflow-y:auto}.public-farm-oper-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:65px;border-bottom:1px solid #E8ECEF;color:#fff}.public-farm-oper-table .content .table-list .table-list:last-child{border:none}.public-farm-oper-table .content .table-list .t-header>div:first-child,.public-farm-oper-table .content .table-list .table-list>div:first-child{width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(2),.public-farm-oper-table .content .table-list .table-list>div:nth-child(2){width:124px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(3),.public-farm-oper-table .content .table-list .table-list>div:nth-child(3){width:172px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(4),.public-farm-oper-table .content .table-list .table-list>div:nth-child(4){width:144px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(5),.public-farm-oper-table .content .table-list .table-list>div:nth-child(5){width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(6),.public-farm-oper-table .content .table-list .table-list>div:nth-child(6){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(7),.public-farm-oper-table .content .table-list .table-list>div:nth-child(7){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(8),.public-farm-oper-table .content .table-list .table-list>div:nth-child(8){width:120px}.public-nape-plot-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:700px;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;border:1px solid #58BFCD;background:rgba(20,66,104,0.8);border-radius:16px}.public-nape-plot-details .header{display:flex;align-items:center;justify-content:space-around;position:relative;border-radius:8px 8px 0 0;width:100%;height:86px;box-sizing:border-box;border:1px solid #3F7D93}.public-nape-plot-details .header .nav{display:flex;align-items:center;justify-content:center;width:200px;height:50px;color:#fff;background:url(/img/icon/popup-nav-btn.png) no-repeat;background-size:100% 100%;cursor:pointer;font-size:18px}.public-nape-plot-details .header .nav.on{background:url(/img/icon/popup-nav-btn-sel.png) no-repeat;background-size:100% 100%}.public-nape-plot-details .header .close{position:absolute;top:0;right:-30px;transform:translate(100%, 0);cursor:pointer}.public-nape-plot-details .content{display:flex;flex-direction:column;clear:both;width:100%;height:484px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-nape-plot-details .content .box{margin:20px 25px;height:calc(100% - 40px);overflow-y:auto}.public-nape-plot-details .content .box>div{margin-top:20px;padding:0 20px}.public-nape-plot-details .content .box>div:first-child{margin:0}.public-nape-plot-details .content .zypz-box>div{display:flex;align-items:center;height:120px;color:#A9D1D7;background:#0D1E34}.public-nape-plot-details .content .zypz-box>div .logo{width:90px;height:90px;border-radius:50%}.public-nape-plot-details .content .zypz-box>div .titles-box{margin-left:30px;display:flex;align-items:flex-start;flex-direction:column}.public-nape-plot-details .content .zypz-box>div .titles-box .title{font-size:18px;font-weight:bold}.public-nape-plot-details .content .zypz-box>div .titles-box .time{margin-top:15px;font-size:14px}.public-nape-plot-details .content .nscz-box>div{position:relative;height:84px;margin-top:10px;padding:10px 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-nape-plot-details .content .nscz-box>div .t-border{position:absolute;top:0;left:0;right:0;bottom:auto;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-nape-plot-details .content .nscz-box>div .t-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .t-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .t-item>div:first-child{text-align:left;font-size:18px;font-weight:bold;color:#66dde9}.public-nape-plot-details .content .nscz-box>div .t-item>div:last-child{text-align:right}.public-nape-plot-details .content .nscz-box>div .b-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .b-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .b-item>div:first-child{text-align:left;color:#fff}.public-nape-plot-details .content .nscz-box>div .b-item>div:last-child{text-align:right}.public-nape-plot-details .content .base-box>div{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0D1E34}.public-nape-plot-details .content .base-box>div .current-val{margin-top:12px;font-size:32px}.public-nape-plot-details .content .base-box .plot-name{color:#62D4E0}.public-nape-plot-details .content .base-box .plot-area{color:#53B5F9}.public-nape-plot-details .content .base-box .plot-type{color:#9270DE}html,body{font-size:16px}html div,html ul,body div,body ul{scrollbar-width:thin}p{margin:0;padding:0}ul{margin:0;padding:0}ul li{margin:0;padding:0;list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:rgba(0,0,0,0.2)}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1)}.div-icon{background:transparent !important}.farm-map-icon{font-weight:bold;color:#fca607;text-align:center}.farm-map-icon img{width:24px}
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-nc-menu{background:url("/img/icon/nc-menu.png") center no-repeat}.el-icon-my-nc-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jksb-menu{background:url("/img/icon/jksb-menu.png") center no-repeat}.el-icon-my-jksb-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jcsb-menu{background:url("/img/icon/jcsb-menu.png") center no-repeat}.el-icon-my-jcsb-menu:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e !important}.manage-option{background-color:#05243e !important;color:#a5cacc}.public-org-nav-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-nav-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-nav-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-nav-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-nav-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-nav-bar .content{clear:both;width:100%;height:500px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-nav-bar .content .farm-profiles{position:relative}.public-org-nav-bar .content .farm-profiles .btn-grounp{position:absolute;top:18px;right:20px}.public-org-nav-bar .content .farm-profiles .btn-grounp .details{text-align:right;font-size:18px;color:#08F4FF;cursor:pointer}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene{margin-top:24px;display:flex;align-items:center;justify-content:center;width:100px;height:30px;background:rgba(102,221,233,0.16);border-radius:4px 4px 4px 4px;border:1px solid #66DDE9;box-sizing:border-box}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene img{height:24px}.public-org-nav-bar .content .farm-profiles .farm-content{padding:30px 20px;font-size:16px;color:#fff}.public-org-nav-bar .content .farm-profiles .farm-content .row{margin-top:30px;display:flex;justify-content:space-between}.public-org-nav-bar .content .farm-profiles .farm-content .row .l{display:flex;align-items:flex-start;justify-content:flex-end;width:100px;height:24px;color:#A9D1D7}.public-org-nav-bar .content .farm-profiles .farm-content .row .r{display:flex;align-items:center;justify-content:flex-start;text-align:left;margin-left:24px;flex:1}.public-org-nav-bar .content .farm-profiles .farm-content .row .r img{margin-right:16px;width:102px;height:102px;border-radius:4px 4px 4px 4px}.public-org-nav-bar .content .farm-profiles .farm-content .row:first-child{margin-top:0}.public-org-market-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-market-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-market-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-market-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-market-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-market-bar .content{clear:both;width:100%;height:650px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-market-bar .content .market-title{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-title .date{padding-left:30px}.public-org-market-bar .content .market-title .query-button{width:47%;text-align:end}.public-org-market-bar .content .market-content{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-content .market-chart{width:758px;height:520px}.public-org-market-bar .content .market-content .market-list{margin-left:30px;width:31%;height:520px}.public-org-market-bar .content .market-content .market-list .market-list-item{flex:1;display:flex;flex-direction:column}.public-org-market-bar .content .market-content .market-list .market-list-item>div{position:relative;flex:1;padding:15px 20px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item>div:first-child{font-weight:bold;color:#66dde9}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item>div:first-child{color:#fff}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border{top:0;bottom:auto}.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{top:auto;bottom:0}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border,.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{position:absolute;left:0;right:0;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-org-market-bar .content .market-content .market-list .market-list-item>div:first-child{margin-bottom:15px}.public-trace-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-trace-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-trace-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-trace-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-trace-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-trace-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-trace-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-trace-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-trace-table .content .table-list{flex:1;display:flex;flex-direction:column}.public-trace-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-trace-table .content .table-list .t-header .sym-style{text-align:left}.public-trace-table .content .table-list .t-body{flex:1;overflow-y:auto}.public-trace-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:94px;border-bottom:1px solid #E8ECEF;color:#fff}.public-trace-table .content .table-list .table-list .sym-style{display:flex;justify-content:space-between}.public-trace-table .content .table-list .table-list .sym-style .l{display:flex;align-items:center}.public-trace-table .content .table-list .table-list .sym-style .l img{width:94px;height:56px}.public-trace-table .content .table-list .table-list .sym-style .r{margin-left:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.public-trace-table .content .table-list .table-list .sym-style .r .title{font-size:18px;font-weight:bold}.public-trace-table .content .table-list .table-list .sym-style .r .unit{font-size:14px}.public-trace-table .content .table-list .table-list:last-child{border:none}.public-trace-table .content .table-list .t-header>div:first-child,.public-trace-table .content .table-list .table-list>div:first-child{margin-left:30px;flex:1}.public-trace-table .content .table-list .t-header>div:nth-child(2),.public-trace-table .content .table-list .table-list>div:nth-child(2){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(3),.public-trace-table .content .table-list .table-list>div:nth-child(3){width:240px}.public-trace-table .content .table-list .t-header>div:nth-child(4),.public-trace-table .content .table-list .table-list>div:nth-child(4){width:260px}.public-trace-table .content .table-list .t-header>div:nth-child(5),.public-trace-table .content .table-list .table-list>div:nth-child(5){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(5) .look,.public-trace-table .content .table-list .table-list>div:nth-child(5) .look{color:#00F0FF;background:rgba(0,240,255,0.2);border-color:#00F0FF}.el-scrollbar{position:relative}.el-scrollbar .el-scrollbar__wrap{overflow-x:hidden}.public-farm-oper-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-farm-oper-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-farm-oper-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-farm-oper-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-farm-oper-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-farm-oper-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-farm-oper-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-farm-oper-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-type input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-plot{margin-left:30px}.public-farm-oper-table .content .action-bar>.search .select-plot input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-farm-oper-table .content .table-list{height:calc(100% - 74px);display:flex;flex-direction:column}.public-farm-oper-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-farm-oper-table .content .table-list .t-body{height:calc(100% - 56px);overflow-y:auto}.public-farm-oper-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:65px;border-bottom:1px solid #E8ECEF;color:#fff}.public-farm-oper-table .content .table-list .table-list:last-child{border:none}.public-farm-oper-table .content .table-list .t-header>div:first-child,.public-farm-oper-table .content .table-list .table-list>div:first-child{width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(2),.public-farm-oper-table .content .table-list .table-list>div:nth-child(2){width:124px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(3),.public-farm-oper-table .content .table-list .table-list>div:nth-child(3){width:172px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(4),.public-farm-oper-table .content .table-list .table-list>div:nth-child(4){width:144px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(5),.public-farm-oper-table .content .table-list .table-list>div:nth-child(5){width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(6),.public-farm-oper-table .content .table-list .table-list>div:nth-child(6){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(7),.public-farm-oper-table .content .table-list .table-list>div:nth-child(7){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(8),.public-farm-oper-table .content .table-list .table-list>div:nth-child(8){width:120px}.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-equirment-station-details .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-equirment-station-details .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-equirment-station-details .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-equirment-station-details .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-equirment-station-details .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-equirment-station-details .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-equirment-station-details .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-equirment-station-details .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-equirment-station-details .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-equirment-station-details .content .table-list{flex:1;display:flex;flex-direction:column}.public-equirment-station-details .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-equirment-station-details .content .table-list .t-header .sym-style{text-align:left}.public-equirment-station-details .content .table-list .t-body{flex:1;overflow-y:auto}.public-equirment-station-details .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:94px;border-bottom:1px solid #E8ECEF;color:#fff}.public-equirment-station-details .content .table-list .table-list .sym-style{display:flex;justify-content:space-between}.public-equirment-station-details .content .table-list .table-list .sym-style .l{display:flex;align-items:center}.public-equirment-station-details .content .table-list .table-list .sym-style .l img{width:94px;height:56px}.public-equirment-station-details .content .table-list .table-list .sym-style .r{margin-left:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.public-equirment-station-details .content .table-list .table-list .sym-style .r .title{font-size:18px;font-weight:bold}.public-equirment-station-details .content .table-list .table-list .sym-style .r .unit{font-size:14px}.public-equirment-station-details .content .table-list .table-list:last-child{border:none}.public-equirment-station-details .content .table-list .t-header>div:first-child,.public-equirment-station-details .content .table-list .table-list>div:first-child{margin-left:30px;flex:1}.public-equirment-station-details .content .table-list .t-header>div:nth-child(2),.public-equirment-station-details .content .table-list .table-list>div:nth-child(2){width:200px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(3),.public-equirment-station-details .content .table-list .table-list>div:nth-child(3){width:240px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(4),.public-equirment-station-details .content .table-list .table-list>div:nth-child(4){width:260px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(5),.public-equirment-station-details .content .table-list .table-list>div:nth-child(5){width:200px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(5) .look,.public-equirment-station-details .content .table-list .table-list>div:nth-child(5) .look{color:#00F0FF;background:rgba(0,240,255,0.2);border-color:#00F0FF}.public-nape-plot-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:700px;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;border:1px solid #58BFCD;background:rgba(20,66,104,0.8);border-radius:16px}.public-nape-plot-details .header{display:flex;align-items:center;justify-content:space-around;position:relative;border-radius:8px 8px 0 0;width:100%;height:86px;box-sizing:border-box;border:1px solid #3F7D93}.public-nape-plot-details .header .nav{display:flex;align-items:center;justify-content:center;width:200px;height:50px;color:#fff;background:url(/img/icon/popup-nav-btn.png) no-repeat;background-size:100% 100%;cursor:pointer;font-size:18px}.public-nape-plot-details .header .nav.on{background:url(/img/icon/popup-nav-btn-sel.png) no-repeat;background-size:100% 100%}.public-nape-plot-details .header .close{position:absolute;top:0;right:-30px;transform:translate(100%, 0);cursor:pointer}.public-nape-plot-details .content{display:flex;flex-direction:column;clear:both;width:100%;height:484px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-nape-plot-details .content .box{margin:20px 25px;height:calc(100% - 40px);overflow-y:auto}.public-nape-plot-details .content .box>div{margin-top:20px;padding:0 20px}.public-nape-plot-details .content .box>div:first-child{margin:0}.public-nape-plot-details .content .zypz-box>div{display:flex;align-items:center;height:120px;color:#A9D1D7;background:#0D1E34}.public-nape-plot-details .content .zypz-box>div .logo{width:90px;height:90px;border-radius:50%}.public-nape-plot-details .content .zypz-box>div .titles-box{margin-left:30px;display:flex;align-items:flex-start;flex-direction:column}.public-nape-plot-details .content .zypz-box>div .titles-box .title{font-size:18px;font-weight:bold}.public-nape-plot-details .content .zypz-box>div .titles-box .time{margin-top:15px;font-size:14px}.public-nape-plot-details .content .nscz-box>div{position:relative;height:84px;margin-top:10px;padding:10px 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-nape-plot-details .content .nscz-box>div .t-border{position:absolute;top:0;left:0;right:0;bottom:auto;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-nape-plot-details .content .nscz-box>div .t-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .t-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .t-item>div:first-child{text-align:left;font-size:18px;font-weight:bold;color:#66dde9}.public-nape-plot-details .content .nscz-box>div .t-item>div:last-child{text-align:right}.public-nape-plot-details .content .nscz-box>div .b-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .b-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .b-item>div:first-child{text-align:left;color:#fff}.public-nape-plot-details .content .nscz-box>div .b-item>div:last-child{text-align:right}.public-nape-plot-details .content .base-box>div{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0D1E34}.public-nape-plot-details .content .base-box>div .current-val{margin-top:12px;font-size:32px}.public-nape-plot-details .content .base-box .plot-name{color:#62D4E0}.public-nape-plot-details .content .base-box .plot-area{color:#53B5F9}.public-nape-plot-details .content .base-box .plot-type{color:#9270DE}html,body{font-size:16px}html div,html ul,body div,body ul{scrollbar-width:thin}p{margin:0;padding:0}ul{margin:0;padding:0}ul li{margin:0;padding:0;list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:rgba(0,0,0,0.2)}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1)}.div-icon{background:transparent !important}.farm-map-icon{font-weight:bold;color:#fca607;text-align:center}.farm-map-icon img{width:24px}

 src/styles/index.scss

@@ -3,6 +3,7 @@
@import "./publicBox/market-nav-bar.scss";
@import "./publicBox/trace-table.scss";
@import "./publicBox/farm-oper-table.scss";
@import "./publicBox/equirment-station-details.scss";

@import "./publicNapeBox/nape-plot-details.scss";


 src/styles/publicBox/equirment-station-details.css

New file
@@ -0,0 +1,102 @@
.public-equirment-station-details {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 648px;
  height: 401px;
  background-color: transparent;
  z-index: 99;
  font-size: 16px;
  box-shadow: inset 0px 3px 20px 1px #5BC3D1;
  opacity: 1;
  border: 1px solid #69E2ED;
  background: rgba(20, 66, 104, 0.8);
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.public-equirment-station-details .header {
  position: relative;
  width: 270px;
  height: 24px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #58BFCD;
  line-height: 20px;
  margin: 20px auto;
}

.public-equirment-station-details .header .close {
  position: absolute;
  top: -20px;
  right: -260px;
  cursor: pointer;
}

.public-equirment-station-details .content {
  overflow: scroll;
  height: 330px;
}

.public-equirment-station-details .content .itemTitle {
  box-sizing: border-box;
  width: 607px;
  height: 70px;
  background: #0D1E34;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-left: 17px;
  margin-bottom: 10px;
  padding: 15px 20px;
  border: 1px solid transparent;
}

.public-equirment-station-details .content .itemTitle img {
  float: left;
}

.public-equirment-station-details .content .itemTitle .type {
  float: left;
  margin-left: 20px;
}

.public-equirment-station-details .content .itemTitle .type h1 {
  font-size: 16px;
  color: #58BFCD;
  margin-bottom: 4px;
}

.public-equirment-station-details .content .itemTitle .type span {
  font-size: 13px;
  color: #FFFFFF;
  opacity: 0.5;
}

.public-equirment-station-details .content .itemTitle .data {
  float: left;
  margin-left: 208px;
  width: 80px;
  height: 34px;
  font-size: 34px;
  font-family: DS-Digital-Italic, DS-Digital;
  font-weight: normal;
  color: #58BFCD;
  line-height: 32px;
}

.public-equirment-station-details .content .itemTitle .openMenuIcon {
  margin-left: 95px;
  margin-top: 4px;
  cursor: pointer;
}

.public-equirment-station-details .content #EchartsBox {
  width: 607px;
  height: 210px;
  background: #0D1E34;
  margin-left: 17px;
  margin-top: -11px;
}

 src/styles/publicBox/equirment-station-details.min.css

New file
@@ -0,0 +1 @@
.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:208px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:95px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content #EchartsBox{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px}

 src/styles/publicBox/equirment-station-details.scss

New file
@@ -0,0 +1,97 @@
.public-equirment-station-details  {
//   .public-trace-table {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 648px;
    height: 401px;
    background-color: transparent;
    z-index: 99;
    font-size: 16px;
    box-shadow: inset 0px 3px 20px 1px #5BC3D1;
    opacity: 1;
    border: 1px solid #69E2ED;
    background: rgba(20, 66, 104, 0.8);
    border-radius: 10px;
    margin: 0;
    padding: 0;

    .header {
        position: relative;
        width: 270px;
        height: 24px;
        font-size: 18px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #58BFCD;
        line-height: 20px;
        margin: 20px auto;

        .close {
            position: absolute;
            top:-20px;
            right:-260px;
            cursor: pointer;
        }
    }
    .content {
        overflow: scroll;
        height: 330px;
        .itemTitle {
            box-sizing: border-box;
            width: 607px;
            height: 70px;
            background: #0D1E34;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            margin-left: 17px;
            margin-bottom: 10px;
            padding: 15px 20px;
            border: 1px solid transparent;
    
            img{
                float: left;
            }
            .type  {
                float: left;
                margin-left: 20px;
              h1{
                  font-size: 16px;
                  color: #58BFCD ;
                  margin-bottom: 4px;
              }
              span{
                  font-size: 13px;
                  color: #FFFFFF;
                  opacity: 0.5;
              }
            }
            .data {
                float: left;
                margin-left: 208px;
                width: 80px;
                height: 34px;
                font-size: 34px;
                font-family: DS-Digital-Italic, DS-Digital;
                font-weight: normal;
                color: #58BFCD;
                line-height: 32px;
            }
            .openMenuIcon {
                margin-left: 95px;
                margin-top: 4px;
                cursor: pointer;
            }
        }
        #EchartsBox {
            width: 607px;
            height: 210px;
            background: #0D1E34;
            margin-left: 17px;
            margin-top: -11px;
        }
    }
   
   
}

 src/views/farm/index.vue

@@ -143,9 +143,15 @@
            </div>

            <div v-show="zydksb =='sb'" class="lists-box sb">
                <div v-for="(item, index) in equipmentList" :key="index">
                <div
                    v-for="(item, index) in equipmentList"
                    :key="index"
                    class="lists-item"
                    @click="goToDetail"
                >
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />{{item.name}}
                        <img src="/img/icon/jk.png" alt />
                        {{item.name}}
                    </div>
                    <div class="type off">在线</div>
                </div>
@@ -307,6 +313,95 @@
        >
            <img style="width: 500px;" :src="currentUrl" alt />
        </el-dialog>
        <public-box
            v-show="staionDetail"
            :closeFlag="'staionDetail'"
            :className="'public-equirment-station-details'"
        >
            <template slot="public-box-header">
                <div>谷米田庄1 号土壤墒情肥力监测</div>
                <img
                    @click="staionDetail = false"
                    src="../../../public/img/icon/close.png"
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="item">
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>太阳能板电压</h1>
                            <span>单位：V</span>
                        </div>
                        <div class="data">21.03</div>
                        <img
                            src="../../../public/img/icon/open_menu.png"
                            class="openMenuIcon"
                            @click="showEchart"
                            alt
                        />
                    </div>
                    <div class="echart">
                        <div id="EchartsBox"></div>
                    </div>
                </div>
                <!-- <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>-->
            </template>
        </public-box>
    </div>
</template>

@@ -346,6 +441,8 @@
            currentClickPlot: {},
            // 物联网设备
            equipmentList: {},
            // 监测设备详情
            staionDetail: false
        }
    },
    created () {
@@ -480,11 +577,138 @@
        },
        getStationAndVideo () {
            var that = this
            getStationAndVideoList({ type: 'ALL',farmId: this.currentDetails.id }).then((res) => {
            getStationAndVideoList({ type: 'ALL', farmId: this.currentDetails.id }).then((res) => {
                if (JSON.stringify(res.data) != '{}' && res.data.data) {
                    that.equipmentList = res.data.data.staList
                }
            })
        },
        //跳转设备详情窗口
        goToDetail () {
            this.staionDetail = true
        },
        // echart
        initLine (dom, yName, x, y) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

            const option = {
                tooltip: {},
                grid: {
                    top: '30px',
                    left: '28px',
                    right: '28px',
                    bottom: '0px',
                    containLabel: true
                },
                xAxis: [
                    {

                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        axisLabel: {
                            // 坐标轴刻度标签的相关设置
                            lineHeight: 18,
                            textStyle: {
                                color: '#A9D1D7',
                                margin: 8
                            },
                            formatter: function (value) {
                                var ret = ''// 拼接加\n返回的类目项
                                var maxLength = 5// 每项显示文字个数
                                value = value.replace(/\s*/g, '')
                                var valLength = value.length// X轴类目项的文字个数

                                var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
                                // 如果类目项的文字大于5,
                                if (rowN > 1) {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ''// 每次截取的字符串
                                        var start = i * maxLength// 开始截取的位置
                                        var end = start + maxLength// 结束截取的位置
                                        // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + '\n'
                                        ret += temp // 凭借最终的字符串
                                    }
                                    return ret
                                } else {
                                    return value
                                }
                            }
                        },
                        axisTick: { show: false },
                        data: x
                    }
                ],
                yAxis: [
                    {
                        name: yName,
                        nameTextStyle: {
                            color: '#A9D1D7'
                        },
                        type: 'value',
                        min: 0,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        axisLabel: {
                            margin: 8,
                            textStyle: {
                                color: '#A9D1D7'
                            }
                        },
                        axisTick: { show: false }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true, // 是否平滑曲线显示
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                color: '#5ABF78' // 线条颜色
                            }
                        },
                        areaStyle: {
                            // 区域填充样式
                            normal: {
                                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(90, 191, 120, 0.5000)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(90, 191, 120, 0)'
                                }]),

                                shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                                shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: y
                    }
                ]
            }

            option && myChart.setOption(option)
        },
        //点击展示监测设备echart图
        showEchart () {
            this.initLine('EchartsBox', '单位', ['1', '2', '3', '4'], ['10.9', '11', '6.8', '100'])
        }
    }
}
@@ -788,6 +1012,9 @@
            & > div:last-child {
                border: none;
            }
            .lists-item {
                cursor: pointer;
            }
        }

        .dk.lists-box {

 src/views/home/index.vue

@@ -1982,6 +1982,7 @@
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            .box:hover {
@@ -2005,6 +2006,7 @@
        font-size: 14px;
        color: #6de9f3;
        box-sizing: border-box;
        cursor: pointer;

        .icon {
            width: 24px;