.musicDetail { .musicContainer { position: relative; height: 300px; overflow: hidden; background-color: #fff; &::before { pointer-events: none; content: ' '; position: absolute; top: 0; left: 0; right: 0; display: block; height: 38px; background: linear-gradient(180deg, #e3f4fa 0%, #ffffff 100%); } } .container { position: relative; height: 300px; display: flex; flex-direction: column; &.downContainer { display: block; height: auto; min-height: 300px; position: absolute; top: 0; z-index: -1; } .iframeSection { flex: 1 auto; height: 100%; iframe { height: 100%; } } .imgSection { flex: 1 auto; overflow-x: hidden; overflow-y: auto; height: 100%; padding: 0 18px; } .right-musicName { position: relative; text-align: center; padding: 20px 0; width: 185px; margin: 0 auto; .name { width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 18px; color: #131415; line-height: 25px; } &.isScroll { text-align: left; :global { .van-notice-bar__wrap { justify-content: normal !important; } } } } .downloadMusicName { width: 95%; .name { width: 100%; } } .noticeBar { padding: 0; height: 28px; font-weight: 600; font-size: 18px; color: #131415; line-height: 25px; :global { .van-notice-bar__wrap { justify-content: center; } } } .staff { width: 100%; } } } .btnGroup { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 34px; border-top: 1px solid #f2f2f2; background-color: #fff; .item { margin-right: 20px; text-align: center; .icon { width: 28px; height: 28px; display: block; margin-bottom: 2px; } font-size: 12px; color: #777777; } .operation { display: flex; align-items: center; } .goBtn { margin-left: 12px; background: linear-gradient(90deg, #44c9ff 0%, #259cfe 100%); font-weight: 500; font-size: 18px; color: #ffffff; line-height: 25px; flex: 1 auto; border: none; &::after { display: none; } } }