.container { display: flex; flex-direction: column; min-width: 288px; max-width: 288px; height: 100vh; color: #fff; font-size: 12px; box-sizing: border-box; } .pointHead { display: flex; align-items: center; padding: 13px 10px 15px 15px; flex-shrink: 0; font-size: 14px; img { width: 16px; height: 16px; margin-right: 7px; } } .content { flex: 1; overflow-y: auto; padding: 0 20px; } .collapse { &.childActive { :global { .van-cell { color: #fff; } } .arrow { opacity: 1; } } &:after { display: none; border-width: 0; } .borderTop { border-top: 1px solid rgba(255, 255, 255, 0.2); } :global { .van-cell { background: transparent; font-size: 14px; color: rgba(255, 255, 255, 0.5); padding: 6px 0; } .van-cell__title { font-weight: 600; } .van-collapse-item__title--expanded { color: #fff; } .van-collapse-item--border:after { display: none; } .van-collapse-item__content { background: transparent; color: #fff; font-size: 10px; padding: 0 0 6px; } // .van-hairline--top:after { // border-color: var(--van-border-color) !important; // } // .van-collapse-item { // border-top: 1px solid rgba(255, 255, 255, 0.2); // } } .childCollapseItem { padding-left: 14px; border-top: 0; :global { .van-cell { padding-left: 0; font-size: 14px; } .van-collapse-item__content { padding-left: 0px; } } } .arrow { display: block; width: 10px; height: 10px; margin-right: 6px; transition: all 0.3s; opacity: 0.5; } :global(.van-collapse-item__title--expanded) { .arrow { transform: rotate(90deg); opacity: 1; } } } .item { display: flex; align-items: center; justify-content: flex-start; padding: 5px 5px 5px 0; border-radius: 6px; font-size: 12px; position: relative; :global { .van-icon { display: none; } .van-image { margin-left: 16px; margin-right: 6px; margin-top: -1px; width: 15px; height: 16px; } } } .itemActive { background: rgba(0, 255, 224, 0.15); color: var(--van-primary); :global { .van-icon { display: block; } } .playLoading { display: block; } } .playLoading { display: none; font-size: 12px; position: absolute; right: 4px; top: 9px; }