$layout-title-height: 30px;
$layout-title-fontsize: 16px;
$sidebar-width: 33%;
$section-padding: 10px;
$content-padding: 1%;
$bottom-padding: 1.5%;
$white-color: #FFFFFF;


.layout_wapper {
  width: 100%;
  height: 100%;
  font-size: 12px;
}

.layout_content {
  @extend .layout_wapper;
  display: flex;
  color: $white-color;
}


.layout_m10 {
  padding: $section-padding 0 0 0;
}

.layout_title {
  background: url(@/assets/images/largeScreen/preview.png) center/100% 100%;
  height: $layout-title-height;
  width: 90%;
  line-height: $layout-title-height;
  
  span {
    padding-left: $section-padding * 3;
    font-size: $layout-title-fontsize;
  }
}


%sidebar-layout {
  width: $sidebar-width;
  height: 100%;
  padding-bottom: $bottom-padding;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.layout_left {
  @extend %sidebar-layout;
  padding-left: $content-padding;
  
  .left_top { height: 37%; }
  .left_center { height: 32%; }
  .left_bottom { height: 31%; }
}


.layout_center {
  @extend %sidebar-layout;
  
  .center_top { height: 37%; }
  .center_center { height: 32%; }
  .center_bottom { height: 31%; }
}


.layout_right {
  @extend %sidebar-layout;
  
  .right_top { height: 64%; }
  .right_bottom { height: 35%; }
}

// .layout_wapper {
//     width: 100%;
//     height: 100%;
//     font-size: 12px;

//     .layout_content {
//         display: flex;
//         color: #FFFFFF;
//         width: 100%;
//         height: 100%;

//         .layout_m10 {
//             padding: 10px 0 0 0;
//         }

//         .layout_title {
//             background-image: url(@/assets/images/largeScreen/preview.png);
//             background-size: 100% 100%;
//             height: 30px;
//             width: 90%;
//             line-height: 30px;

//             span {
//                 padding-left: 30px;
//                 font-size: 16px;
//             }
//         }

//         .layout_left {
//             width: 33%;
//             height: 100%;
//             padding-left: 1%;
//             padding-bottom: 1.5%;
//             display: flex;
//             flex-direction: column;
//             justify-content: space-between;

//             .left_top {
//                 width: 100%;
//                 height: 37%;
//             }

//             .left_center {
//                 width: 100%;
//                 height: 32%;
//             }

//             .left_bottom {
//                 width: 100%;
//                 height: 31%;
//             }
//         }

//         .layout_center {
//             width: 33%;
//             height: 100%;
//             padding-bottom: 1.5%;
//             display: flex;
//             flex-direction: column;
//             justify-content: space-between;


//             .center_top {
//                 width: 100%;
//                 height: 37%;
//             }

//             .center_center {
//                 width: 100%;
//                 height: 32%;
//             }

//             .center_bottom {
//                 width: 100%;
//                 height: 31%;
//             }
//         }

//         .layout_right {
//             width: 33%;
//             height: 100%;
//             padding-bottom: 1.5%;
//             display: flex;
//             flex-direction: column;
//             justify-content: space-between;

//             .right_top {
//                 width: 100%;
//                 height: 64%;
//             }

//             .right_bottom {
//                 width: 100%;
//                 height: 35%;
//             }
//         }
//     }
// }