.main_launch {
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  box-shadow: 0 0 10px #ccc;
  .header {
    background: #fbfbfb;
    width:100%;
    min-height: 42px;
    padding: 0 10px;
    padding-top: 3px;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    .title {
      // min-width:105px;
      flex: 1;
      min-height:36px;
      span {
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block;
        text-align: center;
        height:36px;
        line-height: 36px;
        margin-left: 3px;
        cursor: pointer;
      }
      .currentApp {
        color: #5ab45a;
        border-bottom: 3px solid #5ab45a;
      }
    }
    .search {
      height: 100%;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 330px;
      .se-comm {
        display: inline-block;
        width:39px;
        height:39px;
        line-height: 39px;
        line-height: 39px;
        text-align: center;
        font-size: 17px;
        background: #777777;
        overflow: hidden;
        color: white;
        cursor: pointer;
      }
      span:nth-child(1) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      span:nth-child(2) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;  
      }
      .input {
        margin-left: 10px;
      }
      .activeType {
        background:#0b84c6;
      }
      
    }
  }
  .launch-wrap {
    width: 100%;
    height: calc(100% - 42px);
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    .scrollbar {
      height: 100%; 
      width:100%;
      overflow-x: hidden;
      .small-icon-list {
        height: 100%; 
        width:100%;
        $bg: #4F000B;
        $itemBg1: #720026;
        $itemBg2: #CE4257;
        $itemBg3: #FFC093;
        $itemBg4: #FF7F51;
        $counterBg: #222;
        .masonry {
          column-count: 4;
          column-gap: 0;
          counter-reset: item-counter;
          // @media screen and (min-width: 400px) {
          //   column-count: 2;
          // }
          
          // @media screen and (min-width: 600px) {
          //   column-count: 3;
          // }
          
          // @media screen and (min-width: 800px) {
          //   column-count: 4;
          // }
          
          // @media screen and (min-width: 1100px) {
          //   column-count: 5;
          // }
        }

        .item {
          width:220px;
          box-sizing: border-box;
          break-inside: avoid;
          padding: 10px;
          counter-increment: item-counter;
          border-bottom: 1px solid #ccc;
          &__content {
            position: relative;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            .title {
              font-size: 16px;
            }
            .menu-list {
              li {
                cursor: pointer;
                height: 30px;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                color: #666666;
                .img {
                  display:inline-block;
                  display: -webkit-flex;
                  display: flex;
                  align-items: center;
                  margin-right: 15px;
                  width: 14px;
                  height: 100%;
                  img {
                    width: 100%;
                    height: 14px;
                  }
                }
              }
              li:hover {
                background: #eeeeee;
              }
              
            }
            
            // &:before {
            //   position: absolute;
            //   top: 0;
            //   left: 0;
            //   font-size: 13px;
            //   width: 2em;
            //   height: 2em;
            //   line-height: 2em;
            //   text-align: center;
            //   font-weight: bold;
            //   background-color: $counterBg;
            //   content: counter(item-counter);
            // }
            
            // &:after {
            //   color: darken($bg, 10%);
            //   content: 'ಠ‿ಠ';
            // }
            
            // &--small {
            //   height: 100px;
              
            //   &:after {
            //     content: '♥◡♥';
            //   }
            // }
            
            // &--medium {
            //   height: 175px;
              
            //   &:after {
            //     content: '◔ᴗ◔';
            //   }
            // }
            
            // &--large {
            //   height: 280px;
              
            //   &:after {
            //     content: 'ಠ_๏';
            //   }
            // }
          }
        }
      }
      .big-icon-list {
        width: 100%;
        height: 100%;
        .list-con {
          width: 100%;
          min-height: 30px;
          .ul-con {
            width: 100%;
            min-height: 30px;
            padding-left: 20px;
            box-sizing: border-box;
            .ul {
              display: -webkit-flex;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              li {
                display: inline-block;
                display: -webkit-flex;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                width: 100px;
                height: 105px;
                cursor: pointer;
                .menu-name {
                  width: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  text-align: center;
                  padding: 0 3px;
                  box-sizing: border-box;
                  font-size: 12px;
                }
                .icon {
                  width: 60px;
                  height: 70px;
                  .menu-icon-img {
                    width: 60px;
                  }
                }
              }
              li:hover {
                color: #23527c;
              }
            }
          }
        }
      }
    }
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

}