// @import './../../variable/config.scss';
// @import './../common/animate.scss';
// @import './../../mixins/rem.scss';

// .view-port {
//   height: 100%;
//   background: url('/src/assets/bg/bg-right.png') no-repeat 100% 100%;

//   .content-body {
//     position: absolute;
//     left: 0;
//     width: 100%;
//     height: $content-height;
//     overflow: hidden;
//     opacity: 1;
//     transition: opacity;
//     transition-duration: 0.45s;
//     backface-visibility: hidden;

//     .main-container {
//       display: flex;
//       padding-top: 16px;
//       padding-right: 5px;
//       padding-bottom: 10px;
//       padding-left: 5px;
//     }

//     .main-self-container {
//       width: 100%;
//       height: 100%;
//       padding: 16px 5px 10px 5px;
//     }

//     .desktop {
//       width: 100%;
//       height: 100%;
//       opacity: 1;
//       transition: opacity;
//       transition-duration: 0.45s;

//       .box-left-normal {
//         position: absolute;
//         top: 0;
//         z-index: 100;
//         height: calc(100% - 0.06rem);
//         margin-top: 0.06rem;
//       }

//       .box-left-min {
//         position: absolute;
//         top: calc(50% - 1.2rem);
//         z-index: 100;
//         width: 0.6rem;

//         .box-min {
//           left: calc(-0.6rem + 3px);
//           border-right: 3px solid transparent;
//           transition: left 0.4s;

//           &:hover {
//             left: 0;
//             border-right: 0;
//           }
//         }
//       }

//       .box-right-normal {
//         position: absolute;
//         top: 0;
//         right: 0;
//         z-index: 100;
//         height: calc(100% - 0.06rem);
//         margin-top: 0.06rem;
//       }

//       .box-right-min {
//         position: absolute;
//         top: calc(50% - 0.6rem);
//         right: 0;
//         z-index: 100;
//         width: 0.6rem;

//         .box-min {
//           right: calc(-0.6rem + 3px);
//           border-left: 3px solid transparent;
//           transition: right 0.4s;

//           &:hover {
//             right: 0;
//             border-left: 0;
//           }
//         }
//       }

//       .box-close {
//         position: absolute;
//         top: calc(50% - 50px);
//         width: 0.216rem;
//         height: 0.96rem;
//         line-height: 0.96rem;
//         color: white;
//         cursor: pointer;
//         background-color: rgba(0, 0, 0, 0.3);

//         &.left {
//           right: -20px;
//           border-radius: 0 12px 12px 0;
//           box-shadow: 2px 2px 5px rgba(43, 22, 54, 0.2);
//         }

//         &.right {
//           left: -20px;
//           border-radius: 12px 0 0 12px;
//           box-shadow: -2px 0 5px rgba(43, 22, 54, 0.2);
//         }

//         &:hover {
//           background-color: #562984;
//         }
//       }
//     }
//   }
// }

// .main-view {
//   width: 100%;
//   height: 100%;

//   > .main-content {
//     overflow: auto;
//   }
// }

// .box-min {
//   position: absolute;
//   display: table;
//   width: 0.6rem;
//   height: 100%;

//   .box-min-cont {
//     position: relative;
//     display: table-cell;
//     width: 100%;
//     text-align: center;
//     vertical-align: middle;

//     .box-min-item {
//       position: relative;
//       width: 100%;
//       height: 60px;
//       padding: 10px 0 4px;
//       cursor: pointer;

//       &:hover {
//         transition-duration: 0.2s;
//       }
//     }
//   }
// }

// .app-list {
//   position: relative;
//   height: 100%;

//   .tab-content-item {
//     img {
//       position: relative;
//       top: 0.048rem;
//     }
//   }

//   .amos-category-tab {
//     height: calc(100% - 0.36rem);

//     .nav-tab-all {
//       height: calc(100% - 0.12rem);
//       background-color: rgba(0, 0, 0, 0.4);
//     }

//     .nav-tab-content {
//       width: calc(100% - 1.2rem);
//       height: calc(100% - 0.12rem);
//       background-color: rgba(0, 0, 0, 0.2);
//     }
//   }

//   .app-search {
//     width: 90%;
//     height: 0.264rem;
//     padding-right: 0.264rem;
//     line-height: 0.264rem;
//     border: 0;
//     border-radius: 0.132rem;

//     & > input {
//       background-color: rgba(255, 255, 255, 0.2);
//       border: 1px solid rgba(0, 0, 0, 0.2);
//       border-radius: 100px;
//     }
//   }

//   .app-search-icon {
//     position: absolute;
//     top: 0.012rem;
//     right: 7%;
//   }
// }

// .form-footer {
//   display: block;
//   margin-top: 0.12rem;
//   text-align: right;
// }

// .ant-tabs-ink-bar {
//   // width: $tab-width !important;
//   // background-color: transparent;
//   background-color: #fec006;
// }

// .ant-tabs-tab-inner {
//   .amosicon {
//     margin-right: 0.06rem;
//   }
// }

// .ant-tabs-tab {
//   width: $tab-width !important;
//   margin-right: 0 !important;
//   text-align: center;
// }

// .ant-tabs {
//   color: white;
// }

// .amos-skin-img {
//   position: fixed;
//   width: 100%;
//   height: 100%;
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

// .amos-jump-spiner {
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   z-index: 999;
//   transform: translate(-50%, -50%);
// }

// .app-sider {
//   .amos-tabs {
//     width: 3.36rem;
//     height: 100%;

//     .amos-tabs-list {
//       .amos-tabs-tabitem {
//         .amos-tabs-tabitem-inner {
//           color: white;

//           .amos-tabs-tabitem-content {
//             i {
//               position: relative;
//               top: 1px;
//               margin-right: 2px;
//             }
//           }
//         }
//       }

//       .amos-tabs-tabitem-active {
//         > .amos-tabs-tabitem-inner {
//           background-color: transparent;
//           border-bottom: 2px solid #97d747;
//         }
//       }
//     }

//     .amos-tabs-panel {
//       height: calc(100% - 40px);
//     }
//   }
// }
