securityHtml/src/views/index/index2.vue

<template>
  <div class="main-container-box">
    <div class="nav-header">安防综合管理平台</div>
    <div class="panel-box">
      <div class="panel sbgk">
        <div class="panel-tit">
          设备工况
        </div>
        <div class="pie-box">
          <div class="pie-item">
            饼状图1
          </div>

          <div class="pie-item">
            饼状图2
          </div>
        </div>

        <div class="num-analysis">
          <div>
            <ul>
              <li>
                <p class="num-tit">设备总数</p>
                <p class="num-no">260</p>
              </li>
              <li>
                <p class="num-tit">异常数量</p>
                <p class="num-no" style="color:#F84803">260</p>
              </li>
            </ul>
          </div>
          <div>
            <ul>
               <li>
                <p class="num-tit">设备总数</p>
                <p class="num-no" style="color:#00ACFF">260</p>
              </li>
              <li>
                <p class="num-tit">异常数量</p>
                <p class="num-no" style="color:#FEC400">260</p>
              </li>
            </ul>
          </div>
        </div>

     
        <div class="panel-footer"></div>
      </div>
      <!-- <div class="panel monitor"></div> -->
    </div>
  </div>
</template>

<script>
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .main-container-box .el-input input {
    color: $cursor;
  }
}
</style>

<style lang="scss" scoped>
// @import "../../styles/mixin.scss";


.main-container-box {
  min-width: 1280px;
  min-height: 100%;
  width: 100%;
  height:100vh;
  background-color: #021132;
  overflow: hidden;
  color:#fff
}

// 头部导航样式
.nav-header {
  min-width: 1280px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  line-height: 80px;
  background: url(../../assets/nav-header-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media (max-width: 1440px) {
  .nav-header {
    font-size: 30px;
    line-height: 60px;
  }
}

.panel-box {
  margin-top: 80px;
  position:relative;
  height:100vh
}

.panel {
  width: 410px;

  border:1px solid #3486DA;

  .panel-tit{
    background: linear-gradient(to right, #021132 0%, #3053AF 50%, #021132 100%);
    padding:12px;
    color:#fff;
    text-align:center;
    font-size:16px;
  }
  .pie-item{
    margin-top:40px;
    width:50%;
    height:300px;
    display:inline-block;
    border:1px solid pink
  }
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}


.panel.sbgk{
  position:absolute;
  left:20px;
  top:20px;
  z-index:2
  
}
.panel.monitor{
   position:absolute;
  left:20px;
  bottom:20px;
  
  z-index:3

}


.num-analysis{
  margin:10px
}
.num-analysis>div{
  width:48.7%;
  border:1px solid #3486DA;
  display:inline-block;
  background:#074198
}
.num-analysis>div:first-child{
  margin-right:10px;
}
ul{
  padding:0;margin:0;list-style:none;

}
li,p{
  padding:0;margin:0;list-style:none;

}
.num-analysis ul li{
  padding:0 10px;
  margin:10px 0;
  float:left;
  width:50%;
 
  text-align:center;
  position:relative;
 

}

.num-analysis ul li:first-child {
   border-right:1px dashed #42A4FF
}
.num-tit{
 font-size:14px;
 margin-bottom:10px;
}
.num-no{
  font-size:18px;
  color:#04F9AB;
  font-weight:500

}
</style>