TMS/plg-tms-std-web-vue/public/jq/pages/home/css/home.less

[home]{
    @blue:#1890ff;
    @main-color: #3da0e3;
    @row-height:290/100rem;
    h3{
      color: #888;
      font-size: 0.18rem;
      font-weight: bold;
    }

    .home-grid{
      padding: 0.15rem;
      width: 100%;
      height: 100%;
      display: grid;     
      grid-gap: 0.2rem;
      grid-template-columns:  1fr 1fr 1fr; 
      grid-template-rows:   1fr 1fr 2fr;

      // grid-template-areas: ". . user-map"
      //                      ". . user-map"
      //                      "port-map port-map port-map"
      //                      "port-map port-map port-map";

      
      .home-grid-item{
        background: #fff;
        .plg-flex{
          height: 100%;
          align-items: center;
          justify-content: space-between;
        }
        &-wrap{
          width: 50%;
          display: inline-block;
          .title{
            flex: 0 0 0;
       
            padding:0 0 20px 0;
          }
          .value{
            font-size:0.38rem;
            font-weight: bold;
          }
        }


      }
      .user-map{
       // grid-area:user-map;
       grid-column: ~"3 / 4";
       grid-row: ~"1 / 3";
      }
      .port-map{
        //grid-area:port-map
        grid-column: 1 e("/") 4;
        grid-row: ~"3 / 3";
      }

    };

    [class^="home-icon-"]{
      margin-left: 25%;
      display: inline-block;
      width: 0.80rem;
      height: 0.80rem;
      background: no-repeat center center;
      background-size: cover;
 
     
    }
    .home-icon-a{
      background-image: url(/ops/images/home/ill_registration.png)
    }
    
    .home-icon-b{
      background-image: url(/ops/images/home/ill_service.png)
    }
    
    .home-icon-c{
      background-image: url(/ops/images/home/ill_instance.png)
    }
    
    .home-icon-d{
      background-image: url(/ops/images/home/ill_interface.png)

    }
    

    .title{
      padding: 15/100rem
  }




}