.detail { min-height: 100vh; // background: url('../images/banner1.png') no-repeat top center; // background-size: contain; background-color: #F8F9FC; // backdrop-filter: blur(11px); // filter: blur(11px); position: relative; z-index: 9; .bgSection { position: absolute; top: 0; left: 0; width: 100%; height: 315px; .bg { width: 100%; height: 315px; object-fit: cover; } &::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(15px); } } } .musicHeader { display: flex; align-items: flex-start; margin: 0 25px 25px; .imgSection { position: relative; width: 76px; height: 76px; margin-right: 46px; .img { width: 76px; height: 76px; border-radius: 2px; overflow: hidden; position: relative; z-index: 9; } &::before { content: ''; position: absolute; left: 0; top: 0; z-index: 10; display: inline-block; width: 5px; height: 76px; background: linear-gradient(270deg, rgba(0, 0, 0, 0.13) 0%, rgba(255, 255, 255, 0) 100%); } .pan { content: ''; position: absolute; top: 2px; right: -23px; display: inline-block; width: 72px; height: 72px; background: url('../images/icon-pan.png') no-repeat center; background-size: contain; display: flex; align-items: center; justify-content: center; img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } } } .musicContent { flex: 1; .musicTitle { max-width: 200px; overflow: hidden; // white-space: nowrap; text-overflow: ellipsis; font-size: 18px; font-weight: 600; color: #000000; line-height: 24px; :global { .van-notice-bar { color: #000000; padding: 0; height: 24px; } } } .musicInto { padding-top: 4px; font-size: 12px; color: rgba(0, 0, 0, 0.5); line-height: 24px; margin-right: 12px; span { margin-right: 12px; } } } } .container { position: relative; border-radius: 16px; margin: 20px 0 16px; .content { padding: 20px 25px; font-size: 14px; line-height: 20px; background: #FFFFFF; border-radius: 16px; img, video { width: 100% !important; } } }