910 lines
		
	
	
		
			24 KiB
		
	
	
	
		
			SCSS
		
	
	
	
			
		
		
	
	
			910 lines
		
	
	
		
			24 KiB
		
	
	
	
		
			SCSS
		
	
	
	
@import url("@/assets/css/element-ui.scss");
 | 
						|
 | 
						|
$table-color: #3498db;
 | 
						|
$text-color: #e74c3c;
 | 
						|
$background-color: transparent;
 | 
						|
$oneMenu-width: 20%;
 | 
						|
 | 
						|
html {
 | 
						|
  box-sizing: border-box;
 | 
						|
  height: 100%;
 | 
						|
  min-height: 100%;
 | 
						|
}
 | 
						|
 | 
						|
body {
 | 
						|
  height: 100%;
 | 
						|
  min-height: 100%;
 | 
						|
  margin: 0;
 | 
						|
  overflow-x: hidden;
 | 
						|
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
 | 
						|
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 | 
						|
  -moz-osx-font-smoothing: grayscale;
 | 
						|
  -webkit-font-smoothing: antialiased;
 | 
						|
  text-rendering: optimizelegibility;
 | 
						|
}
 | 
						|
#app {
 | 
						|
  height: 100%;
 | 
						|
  overflow: hidden;
 | 
						|
}
 | 
						|
 | 
						|
// 滚动条样式
 | 
						|
::-webkit-scrollbar {
 | 
						|
  width: 0px;
 | 
						|
  height: 3px;
 | 
						|
  background-color: transparent;
 | 
						|
}
 | 
						|
 | 
						|
// /定义滚动条轨道 内阴影+圆角/
 | 
						|
::-webkit-scrollbar-track {
 | 
						|
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
 | 
						|
  border-radius: 10px;
 | 
						|
  background-color: transparent;
 | 
						|
}
 | 
						|
 | 
						|
// /定义滑块 内阴影+圆角/
 | 
						|
::-webkit-scrollbar-thumb {
 | 
						|
  border-radius: 10px;
 | 
						|
  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
 | 
						|
  background-color: #fff;
 | 
						|
}
 | 
						|
.demo-button {
 | 
						|
  .el-form-item__content {
 | 
						|
    border: 0 !important;
 | 
						|
    display: flex;
 | 
						|
    align-items: center;
 | 
						|
  }
 | 
						|
}
 | 
						|
#home {
 | 
						|
  width: 100%;
 | 
						|
  height: 100%;
 | 
						|
  position: relative;
 | 
						|
  .app-container {
 | 
						|
    width: 100%;
 | 
						|
    height: 100%;
 | 
						|
    position: absolute;
 | 
						|
    z-index: 5;
 | 
						|
    pointer-events: none;
 | 
						|
    background: url(../img/backimg.png);
 | 
						|
    background-size: 100% 100%;
 | 
						|
    background-repeat: no-repeat;
 | 
						|
    background-position: center;
 | 
						|
    .header {
 | 
						|
      width: 100%;
 | 
						|
      height: 93px;
 | 
						|
      position: absolute;
 | 
						|
      top: 0;
 | 
						|
      left: 50%;
 | 
						|
      transform: translateX(-50%);
 | 
						|
      display: flex;
 | 
						|
      justify-content: space-between;
 | 
						|
      pointer-events: auto;
 | 
						|
      background: url(../img/top.png);
 | 
						|
      background-size: 100% 100%;
 | 
						|
      background-repeat: no-repeat;
 | 
						|
      background-position: center;
 | 
						|
      padding: 0;
 | 
						|
      margin: 0;
 | 
						|
      pointer-events: none;
 | 
						|
      .header-left {
 | 
						|
        width: 20%;
 | 
						|
        height: 35px;
 | 
						|
        margin-top: 13px;
 | 
						|
        line-height: 35px;
 | 
						|
        color: #fff;
 | 
						|
        letter-spacing: 2px;
 | 
						|
        span {
 | 
						|
          margin-left: 3%;
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .header-main {
 | 
						|
        width: 30%;
 | 
						|
        height: 60px;
 | 
						|
        line-height: 60px;
 | 
						|
        position: absolute;
 | 
						|
        top: 0;
 | 
						|
        left: 50%;
 | 
						|
        transform: translateX(-50%);
 | 
						|
        .textTile {
 | 
						|
          font-size: 30px;
 | 
						|
          font-weight: 600;
 | 
						|
          img {
 | 
						|
            width: 354px;
 | 
						|
            height: 42px;
 | 
						|
            margin: 10px 0;
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .header-menu {
 | 
						|
        height: 40px;
 | 
						|
        display: flex;
 | 
						|
        align-items: center;
 | 
						|
        margin-right: 20px;
 | 
						|
        margin-top: 10px;
 | 
						|
        color: #61ff3a;
 | 
						|
        justify-content: space-between;
 | 
						|
        font-size: 1vw;
 | 
						|
      }
 | 
						|
    }
 | 
						|
    .left-sidebar {
 | 
						|
      width: 31%;
 | 
						|
      height: calc(100% - 90px);
 | 
						|
      position: absolute;
 | 
						|
      top: 60px;
 | 
						|
      left: 0;
 | 
						|
      padding: 0;
 | 
						|
      margin: 0;
 | 
						|
      padding: 0 40px;
 | 
						|
      .stats {
 | 
						|
        width: 60%;
 | 
						|
        height: 100px;
 | 
						|
        margin-top: 5%;
 | 
						|
        display: flex;
 | 
						|
        flex-wrap: wrap;
 | 
						|
        align-items: center;
 | 
						|
        justify-content: space-around;
 | 
						|
        color: #0144ef;
 | 
						|
        font-size: 20px;
 | 
						|
        font-weight: 600;
 | 
						|
        .stat-item {
 | 
						|
          width: 45%;
 | 
						|
          height: 100%;
 | 
						|
          background: url(../img/bottom-waring.png);
 | 
						|
          background-size: 100% 100%;
 | 
						|
          background-repeat: no-repeat;
 | 
						|
          background-position: center;
 | 
						|
          // 禁止换行
 | 
						|
          white-space: nowrap;
 | 
						|
          margin-left: 2%;
 | 
						|
          margin-right: 3%;
 | 
						|
          .stat-name {
 | 
						|
            width: 100%;
 | 
						|
            height: 50%;
 | 
						|
            line-height: 42px;
 | 
						|
            text-align: center;
 | 
						|
            span {
 | 
						|
              font-size: 3vw;
 | 
						|
            }
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .drone-list {
 | 
						|
        width: 100%;
 | 
						|
        height: calc(100% - 140px);
 | 
						|
        margin-top: 25px;
 | 
						|
        pointer-events: none;
 | 
						|
        .title {
 | 
						|
          width: 100%;
 | 
						|
          height: 40px;
 | 
						|
        }
 | 
						|
        ul {
 | 
						|
          width: 100%;
 | 
						|
          height: 100%;
 | 
						|
          padding: 0;
 | 
						|
          margin: 0;
 | 
						|
          overflow: auto;
 | 
						|
          margin-top: 10px;
 | 
						|
 | 
						|
          li {
 | 
						|
            width: 95%;
 | 
						|
            padding: 5px;
 | 
						|
            color: #0144ef;
 | 
						|
            margin-left: 2%;
 | 
						|
            margin-top: 3%;
 | 
						|
            position: relative;
 | 
						|
            display: flex;
 | 
						|
            .details-one {
 | 
						|
              width: 60%;
 | 
						|
              height: 100%;
 | 
						|
              background: url(../img/uavBackfff.png);
 | 
						|
              background-size: 100% 100%;
 | 
						|
              background-repeat: no-repeat;
 | 
						|
              background-position: center;
 | 
						|
              pointer-events: auto;
 | 
						|
              .top {
 | 
						|
                width: 98%;
 | 
						|
                height: 50%;
 | 
						|
                display: flex;
 | 
						|
                align-items: baseline;
 | 
						|
                margin-left: 5%;
 | 
						|
                position: relative;
 | 
						|
                .left {
 | 
						|
                  width: 20px;
 | 
						|
                  height: 20px;
 | 
						|
                  background: url(../img/index.png);
 | 
						|
                  background-size: 100% 100%;
 | 
						|
                  background-repeat: no-repeat;
 | 
						|
                  background-position: center;
 | 
						|
                  text-align: center;
 | 
						|
                  font-size: 10px;
 | 
						|
                  position: absolute;
 | 
						|
                  top: 60%;
 | 
						|
                  transform: translateY(-50%);
 | 
						|
                  line-height: 20px;
 | 
						|
                }
 | 
						|
                .text {
 | 
						|
                  width: 68%;
 | 
						|
                  height: 100%;
 | 
						|
                  margin-left: 15%;
 | 
						|
                  font-size: 16px;
 | 
						|
                  font-weight: 400;
 | 
						|
                  text-align: left;
 | 
						|
                  line-height: 35px;
 | 
						|
                  overflow: hidden;
 | 
						|
                  text-overflow: ellipsis;
 | 
						|
                }
 | 
						|
              }
 | 
						|
              .main {
 | 
						|
                width: calc(100% - 30px);
 | 
						|
                height: 50%;
 | 
						|
                margin-left: 20px;
 | 
						|
                .top_main {
 | 
						|
                  width: 100%;
 | 
						|
                  height: 100%;
 | 
						|
                  display: flex;
 | 
						|
                  align-items: center;
 | 
						|
                  font-weight: 400;
 | 
						|
                  text-align: left;
 | 
						|
                  .text {
 | 
						|
                    width: 50%;
 | 
						|
                    .color-ef {
 | 
						|
                      color: #0144ef;
 | 
						|
                      font-size: 1.09vw;
 | 
						|
                      overflow: hidden;
 | 
						|
                      text-overflow: ellipsis;
 | 
						|
                    }
 | 
						|
                    .text-fff {
 | 
						|
                      color: #000;
 | 
						|
                      font-size: 1.09vw;
 | 
						|
                    }
 | 
						|
                  }
 | 
						|
                }
 | 
						|
              }
 | 
						|
            }
 | 
						|
            .details-all {
 | 
						|
              width: 60%;
 | 
						|
              height: 100%;
 | 
						|
              background: url(../img/uavBackfff-big.png);
 | 
						|
              background-size: 100% 100%;
 | 
						|
              background-repeat: no-repeat;
 | 
						|
              background-position: center;
 | 
						|
              pointer-events: auto;
 | 
						|
              .top {
 | 
						|
                width: 98%;
 | 
						|
                height: 30px;
 | 
						|
                display: flex;
 | 
						|
                align-items: baseline;
 | 
						|
                margin-left: 5%;
 | 
						|
                position: relative;
 | 
						|
                .left {
 | 
						|
                  width: 20px;
 | 
						|
                  height: 20px;
 | 
						|
                  background: url(../img/index.png);
 | 
						|
                  background-size: 100% 100%;
 | 
						|
                  background-repeat: no-repeat;
 | 
						|
                  background-position: center;
 | 
						|
                  text-align: center;
 | 
						|
                  font-size: 10px;
 | 
						|
                  position: absolute;
 | 
						|
                  top: 60%;
 | 
						|
                  transform: translateY(-50%);
 | 
						|
                  line-height: 20px;
 | 
						|
                }
 | 
						|
                .text {
 | 
						|
                  width: 68%;
 | 
						|
                  height: 100%;
 | 
						|
                  margin-left: 15%;
 | 
						|
                  font-size: 16px;
 | 
						|
                  font-weight: 400;
 | 
						|
                  text-align: left;
 | 
						|
                  line-height: 35px;
 | 
						|
                  overflow: hidden;
 | 
						|
                  text-overflow: ellipsis;
 | 
						|
                }
 | 
						|
              }
 | 
						|
              .content-main {
 | 
						|
                width: calc(100% - 20px);
 | 
						|
                height: 92%;
 | 
						|
                margin-left: 20px;
 | 
						|
                .color-ef {
 | 
						|
                  color: #0144ef;
 | 
						|
                  font-size: 1.09vw;
 | 
						|
                  overflow: hidden;
 | 
						|
                  text-overflow: ellipsis;
 | 
						|
                }
 | 
						|
                .text-fff {
 | 
						|
                  color: #000;
 | 
						|
                  font-size: 1.09vw;
 | 
						|
                }
 | 
						|
                .text-fff-time {
 | 
						|
                  color: #000;
 | 
						|
                  font-size: 1vw;
 | 
						|
                }
 | 
						|
                .content-top {
 | 
						|
                  width: calc(100% - 10px);
 | 
						|
                  height: 30px;
 | 
						|
                  display: flex;
 | 
						|
                  align-items: center;
 | 
						|
                  font-weight: 400;
 | 
						|
                  text-align: left;
 | 
						|
                  .top-left {
 | 
						|
                    width: 50%;
 | 
						|
                  }
 | 
						|
                  .top-right {
 | 
						|
                    width: 50%;
 | 
						|
                  }
 | 
						|
                }
 | 
						|
                .content-serial {
 | 
						|
                  width: 100%;
 | 
						|
                  height: 7%;
 | 
						|
                  text-align: left;
 | 
						|
                  display: flex;
 | 
						|
                  align-items: center;
 | 
						|
                  .text-fff {
 | 
						|
                    // 超出隐藏
 | 
						|
                    overflow: hidden;
 | 
						|
                    text-overflow: ellipsis;
 | 
						|
                  }
 | 
						|
                  .color-ef-fw {
 | 
						|
                    color: #0144ef;
 | 
						|
                    font-size: 1.09vw;
 | 
						|
                    font-weight: 600;
 | 
						|
                  }
 | 
						|
                  .content-potions {
 | 
						|
                    width: 100%;
 | 
						|
                    height: 100%;
 | 
						|
                    display: flex;
 | 
						|
                    align-items: center;
 | 
						|
                    flex-wrap: wrap;
 | 
						|
                    p {
 | 
						|
                      padding: 0;
 | 
						|
                      margin: 0;
 | 
						|
                    }
 | 
						|
                    .content-potions-lon {
 | 
						|
                      width: 100%;
 | 
						|
                      display: flex;
 | 
						|
                      flex-wrap: wrap;
 | 
						|
                      align-items: center;
 | 
						|
                      .text {
 | 
						|
                        width: 100%;
 | 
						|
                        font-size: 1.09vw;
 | 
						|
                      }
 | 
						|
                      .characters {
 | 
						|
                        width: 100%;
 | 
						|
                        font-size: 1.09vw;
 | 
						|
                        color: #000;
 | 
						|
                      }
 | 
						|
                    }
 | 
						|
                    .content-potions-bottom {
 | 
						|
                      width: 100%;
 | 
						|
                      display: flex;
 | 
						|
                      text-align: left;
 | 
						|
                      align-items: center;
 | 
						|
                      .content-text {
 | 
						|
                        width: 30%;
 | 
						|
                        display: flex;
 | 
						|
                        flex-wrap: wrap;
 | 
						|
                        text-align: left;
 | 
						|
                        align-items: center;
 | 
						|
                        .text {
 | 
						|
                          width: 100%;
 | 
						|
                          font-size: 1.09vw;
 | 
						|
                        }
 | 
						|
                        .characters {
 | 
						|
                          width: 100%;
 | 
						|
                          font-size: 1.09vw;
 | 
						|
                          color: #000;
 | 
						|
                        }
 | 
						|
                      }
 | 
						|
                    }
 | 
						|
                  }
 | 
						|
                  .content-fs {
 | 
						|
                    width: 100%;
 | 
						|
                    height: 100%;
 | 
						|
                    display: flex;
 | 
						|
                    flex-wrap: wrap;
 | 
						|
                    text-align: left;
 | 
						|
                    .content-fs-lon {
 | 
						|
                      width: 100%;
 | 
						|
                      display: flex;
 | 
						|
                      flex-wrap: wrap;
 | 
						|
                      align-items: center;
 | 
						|
                    }
 | 
						|
                    .content-fs-heig {
 | 
						|
                      width: 100%;
 | 
						|
                      display: flex;
 | 
						|
                      flex-wrap: wrap;
 | 
						|
                      align-items: center;
 | 
						|
                      .text {
 | 
						|
                        width: 25%;
 | 
						|
                        font-size: 1.09vw;
 | 
						|
                      }
 | 
						|
                      .characters {
 | 
						|
                        width: 50%;
 | 
						|
                        font-size: 1.09vw;
 | 
						|
                        color: #000;
 | 
						|
                      }
 | 
						|
                    }
 | 
						|
                    p {
 | 
						|
                      padding: 0;
 | 
						|
                      margin: 0;
 | 
						|
                    }
 | 
						|
                    .text {
 | 
						|
                      width: 100%;
 | 
						|
                      font-size: 1.09vw;
 | 
						|
                    }
 | 
						|
                    .characters {
 | 
						|
                      width: 100%;
 | 
						|
                      font-size: 1.09vw;
 | 
						|
                      color: #000;
 | 
						|
                    }
 | 
						|
                  }
 | 
						|
                  .btns {
 | 
						|
                    width: calc(100% - 20px);
 | 
						|
                    height: 100%;
 | 
						|
                    display: flex;
 | 
						|
                    align-items: center;
 | 
						|
                    justify-content: space-around;
 | 
						|
                    .el-button--primary {
 | 
						|
                      background-color: #0144ef;
 | 
						|
                      border-color: #0144ef;
 | 
						|
                    }
 | 
						|
                  }
 | 
						|
                }
 | 
						|
              }
 | 
						|
            }
 | 
						|
            .navigation-content {
 | 
						|
              width: 100px;
 | 
						|
              height: 200px;
 | 
						|
              background: url(../img/uavBackfff-big.png);
 | 
						|
              background-size: 100% 100%;
 | 
						|
              background-repeat: no-repeat;
 | 
						|
              background-position: center;
 | 
						|
              margin-left: 9px;
 | 
						|
              padding: 20px;
 | 
						|
              pointer-events: auto;
 | 
						|
              .navigation-content-text {
 | 
						|
                text-align: left;
 | 
						|
                margin-bottom: 5px;
 | 
						|
                font-size: 1.09vw;
 | 
						|
                .color-ef-fw {
 | 
						|
                  color: #0144ef;
 | 
						|
                  font-size: 1.09vw;
 | 
						|
                  font-weight: 600;
 | 
						|
                }
 | 
						|
                .text-fff {
 | 
						|
                  color: #000;
 | 
						|
                  font-size: 1.09vw;
 | 
						|
                }
 | 
						|
              }
 | 
						|
              .navigation-content-qrcode {
 | 
						|
                width: 80px;
 | 
						|
                height: 80px;
 | 
						|
                margin: 0 auto;
 | 
						|
                margin-top: 5px;
 | 
						|
                margin-bottom: 5px;
 | 
						|
                img {
 | 
						|
                  width: 100%;
 | 
						|
                  height: 100%;
 | 
						|
                }
 | 
						|
              }
 | 
						|
            }
 | 
						|
            .navigation-content-btn {
 | 
						|
              width: 100%;
 | 
						|
              .btns {
 | 
						|
                width: 100%;
 | 
						|
                height: 100%;
 | 
						|
                display: flex;
 | 
						|
                align-items: center;
 | 
						|
                justify-content: space-around;
 | 
						|
                .el-button--primary {
 | 
						|
                  background-color: #0144ef;
 | 
						|
                  border-color: #0144ef;
 | 
						|
                }
 | 
						|
              }
 | 
						|
            }
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .left-contract {
 | 
						|
        width: 25px;
 | 
						|
        height: 80px;
 | 
						|
        position: absolute;
 | 
						|
        left: 89%;
 | 
						|
        top: 50%;
 | 
						|
        transform: translateY(-50%);
 | 
						|
        cursor: pointer;
 | 
						|
      }
 | 
						|
    }
 | 
						|
    .right-sidebar {
 | 
						|
      width: 18%;
 | 
						|
      height: calc(100% - 90px);
 | 
						|
      position: absolute;
 | 
						|
      top: 60px;
 | 
						|
      right: 0;
 | 
						|
      pointer-events: auto;
 | 
						|
      padding: 0;
 | 
						|
      margin: 0;
 | 
						|
      background: url(../img/botom-right.png);
 | 
						|
      background-size: 100% 105%;
 | 
						|
      background-repeat: no-repeat;
 | 
						|
      background-position: center;
 | 
						|
      padding: 0 40px;
 | 
						|
      .device-status {
 | 
						|
        width: 95%;
 | 
						|
        margin-left: 10%;
 | 
						|
        margin-top: 15%;
 | 
						|
        display: flex;
 | 
						|
        align-items: center;
 | 
						|
        flex-wrap: wrap;
 | 
						|
        justify-content: flex-start;
 | 
						|
        align-content: flex-start;
 | 
						|
        .device-item {
 | 
						|
          //一排三个
 | 
						|
          width: 30%;
 | 
						|
          height: 30%;
 | 
						|
          margin-left: 3%;
 | 
						|
          margin-top: 2%;
 | 
						|
          .device-icon {
 | 
						|
            width: 66px;
 | 
						|
            height: 66px;
 | 
						|
            margin: 0 auto;
 | 
						|
            img {
 | 
						|
              width: 100%;
 | 
						|
              height: 100%;
 | 
						|
            }
 | 
						|
          }
 | 
						|
          .device-info {
 | 
						|
            width: 100%;
 | 
						|
            height: 40px;
 | 
						|
            line-height: 40px;
 | 
						|
            display: flex;
 | 
						|
            align-items: center;
 | 
						|
            justify-content: center;
 | 
						|
            font-size: 20px;
 | 
						|
            font-weight: 400;
 | 
						|
            color: #fff;
 | 
						|
            .device-name {
 | 
						|
              font-size: 30px;
 | 
						|
              font-weight: 600;
 | 
						|
            }
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .markers {
 | 
						|
        width: 95%;
 | 
						|
        height: 42%;
 | 
						|
        margin-left: 10%;
 | 
						|
        margin-top: 16px;
 | 
						|
        .title {
 | 
						|
          width: 100%;
 | 
						|
          height: 40px;
 | 
						|
          cursor: pointer;
 | 
						|
        }
 | 
						|
        ul {
 | 
						|
          height: calc(100% - 40px);
 | 
						|
          padding: 0;
 | 
						|
          margin: 0;
 | 
						|
          overflow: auto;
 | 
						|
          margin-top: 10px;
 | 
						|
          margin-left: 7%;
 | 
						|
          li {
 | 
						|
            cursor: pointer;
 | 
						|
            width: 100%;
 | 
						|
            height: 75px;
 | 
						|
            border-bottom: 1px dashed #ccc;
 | 
						|
            display: flex;
 | 
						|
            align-items: center;
 | 
						|
            justify-content: space-between;
 | 
						|
            .left {
 | 
						|
              width: 25px;
 | 
						|
              height: 100%;
 | 
						|
              line-height: 75px;
 | 
						|
            }
 | 
						|
            .main {
 | 
						|
              width: calc(100% - 25px);
 | 
						|
              margin-left: 25px;
 | 
						|
              height: 100%;
 | 
						|
              .top_main {
 | 
						|
                width: 100%;
 | 
						|
                height: 50%;
 | 
						|
                color: #fff;
 | 
						|
                text-align: left;
 | 
						|
                line-height: 37px;
 | 
						|
                .text {
 | 
						|
                  font-size: 16px;
 | 
						|
                  font-weight: 600;
 | 
						|
                }
 | 
						|
                .text1 {
 | 
						|
                  color: #ccc;
 | 
						|
                  font-size: 12px;
 | 
						|
                  font-weight: 400;
 | 
						|
                }
 | 
						|
              }
 | 
						|
            }
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .right-contract {
 | 
						|
        width: 25px;
 | 
						|
        height: 80px;
 | 
						|
        position: absolute;
 | 
						|
        right: 89%;
 | 
						|
        top: 50%;
 | 
						|
        transform: translateY(-50%);
 | 
						|
        cursor: pointer;
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
.mars3d-popup-background {
 | 
						|
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.4);
 | 
						|
  background: url(../img/uavBack.png);
 | 
						|
  background-size: 117% 117%;
 | 
						|
  background-repeat: no-repeat;
 | 
						|
  background-position: center;
 | 
						|
  padding: 15px;
 | 
						|
  .mians {
 | 
						|
    width: 350px;
 | 
						|
    height: 350px;
 | 
						|
    position: relative;
 | 
						|
    overflow: hidden;
 | 
						|
 | 
						|
    .title {
 | 
						|
      height: 50px;
 | 
						|
      line-height: 50px;
 | 
						|
      font-size: 20px;
 | 
						|
      font-weight: 500;
 | 
						|
      color: #fff;
 | 
						|
      margin-left: 5%;
 | 
						|
      border-bottom: 1px solid #ccc;
 | 
						|
    }
 | 
						|
 | 
						|
    .imgs {
 | 
						|
      width: 93%;
 | 
						|
      height: 185px;
 | 
						|
      margin: 0 auto;
 | 
						|
      margin-top: 3%;
 | 
						|
 | 
						|
      img {
 | 
						|
        width: 100%;
 | 
						|
        height: 100%;
 | 
						|
        object-fit: contain;
 | 
						|
      }
 | 
						|
    }
 | 
						|
    .device-type {
 | 
						|
      width: 93%;
 | 
						|
      height: 65px;
 | 
						|
      display: flex;
 | 
						|
      align-items: center;
 | 
						|
      flex-wrap: wrap;
 | 
						|
      margin: 0 auto;
 | 
						|
      margin-top: 3%;
 | 
						|
      .txt {
 | 
						|
        width: 50%;
 | 
						|
        height: 32px;
 | 
						|
        line-height: 32px;
 | 
						|
        display: flex;
 | 
						|
        align-items: center;
 | 
						|
        justify-content: space-between;
 | 
						|
        border-bottom: 1px solid #ccc;
 | 
						|
 | 
						|
        .p1 {
 | 
						|
          width: 30%;
 | 
						|
          border: 1px solid #ccc;
 | 
						|
          background-color: rgba(55, 58, 70, 1);
 | 
						|
          text-align: center;
 | 
						|
          // 禁止换行
 | 
						|
          white-space: nowrap;
 | 
						|
          text-overflow: ellipsis;
 | 
						|
          overflow: hidden;
 | 
						|
        }
 | 
						|
        .p2 {
 | 
						|
          width: 70%;
 | 
						|
          font-size: 12px;
 | 
						|
          padding-left: 10px;
 | 
						|
          border: 1px solid #ccc;
 | 
						|
          // 禁止换行
 | 
						|
          white-space: nowrap;
 | 
						|
          text-overflow: ellipsis;
 | 
						|
          overflow: hidden;
 | 
						|
        }
 | 
						|
      }
 | 
						|
      .txt1 {
 | 
						|
        width: 100%;
 | 
						|
        height: 32px;
 | 
						|
        line-height: 32px;
 | 
						|
        display: flex;
 | 
						|
        align-items: center;
 | 
						|
        justify-content: space-between;
 | 
						|
        border-bottom: 1px solid #ccc;
 | 
						|
 | 
						|
        .p1 {
 | 
						|
          min-width: 58px;
 | 
						|
          width: 50%;
 | 
						|
          border: 1px solid #ccc;
 | 
						|
          background-color: rgba(55, 58, 70, 1);
 | 
						|
          text-align: center;
 | 
						|
          // 禁止换行
 | 
						|
          white-space: nowrap;
 | 
						|
          text-overflow: ellipsis;
 | 
						|
          overflow: hidden;
 | 
						|
        }
 | 
						|
 | 
						|
        .p2 {
 | 
						|
          min-width: 102px;
 | 
						|
          width: 47%;
 | 
						|
          font-size: 12px;
 | 
						|
          padding-left: 10px;
 | 
						|
          border: 1px solid #ccc;
 | 
						|
          // 禁止换行
 | 
						|
          white-space: nowrap;
 | 
						|
          text-overflow: ellipsis;
 | 
						|
          overflow: hidden;
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
.mars3d-popup-tip-container {
 | 
						|
  display: none;
 | 
						|
}
 | 
						|
.login {
 | 
						|
  width: 100%;
 | 
						|
  height: 100%;
 | 
						|
  position: relative;
 | 
						|
  padding: 0;
 | 
						|
  margin: 0;
 | 
						|
  background: url(../img/backLogin.png);
 | 
						|
  background-size: 100% 100%;
 | 
						|
  background-repeat: no-repeat;
 | 
						|
  background-position: center;
 | 
						|
 | 
						|
  .login_back {
 | 
						|
    width: 525px;
 | 
						|
    height: 550px;
 | 
						|
    background: url(../img/loginBtom.png);
 | 
						|
    background-size: 100% 100%;
 | 
						|
    background-repeat: no-repeat;
 | 
						|
    /*关键*/
 | 
						|
    background-position: center;
 | 
						|
    position: absolute;
 | 
						|
    top: 50%;
 | 
						|
    left: 50%;
 | 
						|
    transform: translate(-50%, -50%);
 | 
						|
    .text_title {
 | 
						|
      width: 100%;
 | 
						|
      height: 92px;
 | 
						|
      margin: 0 auto;
 | 
						|
      position: absolute;
 | 
						|
      top: 20%;
 | 
						|
      font-size: 36px;
 | 
						|
      font-weight: 400;
 | 
						|
      color: #fff;
 | 
						|
    }
 | 
						|
 | 
						|
    .login_user {
 | 
						|
      width: 70%;
 | 
						|
      height: 9%;
 | 
						|
      position: absolute;
 | 
						|
      // background-color: red;
 | 
						|
      top: 48%;
 | 
						|
      left: 16%;
 | 
						|
 | 
						|
      .user_input {
 | 
						|
        width: 87%;
 | 
						|
        height: 40px;
 | 
						|
        border: 1px solid #fff;
 | 
						|
        border-radius: 5px;
 | 
						|
        input:-internal-autofill-previewed,
 | 
						|
        input:-internal-autofill-selected {
 | 
						|
          -webkit-text-fill-color: white;
 | 
						|
          transition: background-color 5000s ease-out 0.5s;
 | 
						|
        }
 | 
						|
        .el-input__wrapper {
 | 
						|
          background: transparent !important;
 | 
						|
          border: 0;
 | 
						|
          box-shadow: 0 0 0 0px
 | 
						|
            var(--el-input-border-color, var(--el-border-color)) inset;
 | 
						|
        }
 | 
						|
        .el-input__inner {
 | 
						|
          height: 100%;
 | 
						|
          padding-left: 35px;
 | 
						|
          color: #fff !important;
 | 
						|
        }
 | 
						|
        .el-input__suffix {
 | 
						|
          width: 10%;
 | 
						|
          position: absolute;
 | 
						|
          left: 0;
 | 
						|
          background: url(../img/user.svg);
 | 
						|
          background-size: 70% 100%;
 | 
						|
          background-repeat: no-repeat;
 | 
						|
          background-position: center;
 | 
						|
          .el-input__suffix-inner {
 | 
						|
            font-size: 22px;
 | 
						|
            margin-top: 2px;
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    .login_pass {
 | 
						|
      width: 70%;
 | 
						|
      height: 9%;
 | 
						|
      position: absolute;
 | 
						|
      top: 62%;
 | 
						|
      left: 16%;
 | 
						|
      background-color: transparent;
 | 
						|
 | 
						|
      .user_input {
 | 
						|
        width: 87%;
 | 
						|
        height: 40px;
 | 
						|
        border: 1px solid #fff;
 | 
						|
        border-radius: 5px;
 | 
						|
        position: relative;
 | 
						|
 | 
						|
        input:-internal-autofill-previewed,
 | 
						|
        input:-internal-autofill-selected {
 | 
						|
          -webkit-text-fill-color: white;
 | 
						|
          transition: background-color 5000s ease-out 0.5s;
 | 
						|
        }
 | 
						|
        .el-input__wrapper {
 | 
						|
          background: transparent !important;
 | 
						|
          border: 0;
 | 
						|
          box-shadow: 0 0 0 0px
 | 
						|
            var(--el-input-border-color, var(--el-border-color)) inset;
 | 
						|
        }
 | 
						|
 | 
						|
        .el-input__inner {
 | 
						|
          height: 100%;
 | 
						|
          padding-left: 35px;
 | 
						|
          color: white;
 | 
						|
        }
 | 
						|
        .el-input__suffix {
 | 
						|
          width: 10%;
 | 
						|
          position: absolute;
 | 
						|
          left: 0;
 | 
						|
          background: url(../img/pass.svg);
 | 
						|
          background-size: 70% 100%;
 | 
						|
          background-repeat: no-repeat;
 | 
						|
          background-position: center;
 | 
						|
          .el-input__suffix-inner {
 | 
						|
            font-size: 22px;
 | 
						|
            margin-top: 2px;
 | 
						|
            position: absolute;
 | 
						|
            right: -870%;
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
 | 
						|
    .logon {
 | 
						|
      width: 62%;
 | 
						|
      height: 7%;
 | 
						|
      position: absolute;
 | 
						|
      background: url(../img/Button.png);
 | 
						|
      background-size: 100% 100%;
 | 
						|
      background-repeat: no-repeat;
 | 
						|
      background-position: center;
 | 
						|
      top: 75%;
 | 
						|
      left: 20%;
 | 
						|
      cursor: pointer;
 | 
						|
      margin: 0 auto;
 | 
						|
    }
 | 
						|
    .abnormal {
 | 
						|
      height: 20px;
 | 
						|
      position: absolute;
 | 
						|
      color: red;
 | 
						|
      bottom: 20%;
 | 
						|
      left: 25%;
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
.zoom-control {
 | 
						|
  position: absolute;
 | 
						|
  left: 60px;
 | 
						|
  bottom: 10px;
 | 
						|
  z-index: 1000;
 | 
						|
  color: #000;
 | 
						|
}
 |