.page-apps { background-color: #282c34; height 100% .apps-type-nav{ height 43px padding 8px 0; margin-bottom 3px } .scrollbar-type-nav{ display flex align-items center height 43px padding 0 5px li{ flex-shrink 0 display flex align-items center justify-content center margin 0 10px height 26px border-radius 4px border 1px solid rgb(80,80,80) padding 2px 12px background rgba(60,60,60 0.9) color #fff font-size 14px cursor pointer .image { width 22px height 22px overflow hidden margin-right 5px border-radius 50% } &.active{ background #21aa93; } } } .app-list-container { display flex color #ffffff padding 2px 15px; overflow-y visible overflow-x hidden .item__list-box { .item { display flex flex-flow row border 1px solid rgb(80,80,80) padding 10px background rgba(60,60,60 0.5) .image { width 80px height 80px min-width 80px border-radius 5px overflow hidden } .inner { display flex flex-flow column padding 0 0 0 10px width 100% .info { text-align left .info-title { color var(--el-text-color) font-size 1.25rem line-height 1.75rem letter-spacing: .025em; font-weight: 600; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .info-text { padding 8px 0 overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; height 34px font-size: .875rem; color #999999 } } .btn { margin-top 10px display flex justify-content right .el-button { margin-left 10px .el-icon { margin-right 5px } } } } } } } }