.woringBook { position: relative; min-height: 100vh; background: url('./images/wroing-bg.png') no-repeat top center; background-size: contain; overflow: hidden; background-color: #fff; } .woringHeader { display: flex; align-items: center; height: var(--van-nav-bar-height); .leftArrow { padding: 0 var(--k-padding-md); } .title { position: relative; z-index: 1; i { width: 100px; height: 20px; display: inline-block; background: url('./images/wroing-title.png') no-repeat center; background-size: contain; } &::after { content: ' '; display: inline-block; position: absolute; left: 0; bottom: -2px; width: 48px; height: 6px; background: linear-gradient(270deg, rgba(119, 255, 239, 0.59) 0%, #42CDFF 100%); opacity: 0.5; z-index: -1; } } } .woringSecgtion { height: calc(100vh - var(--header-height) - var(--bottom-height) - 36px); overflow-y: auto; margin-top: 36px; background: #FFFFFF; border-radius: 16px 16px 0 0; padding: 0 15px 12px; .emptyContainer { height: calc(100vh - var(--header-height) - var(--bottom-height) - 92px); } .title { display: flex; align-items: center; font-size: 17px; font-weight: 600; color: #333333; line-height: 24px; position: sticky; top: 0; left: 0; z-index: 99; padding-top: 12px; padding-bottom: 8px; background-color: #fff; &::before { content: ' '; display: inline-block; margin-right: 6px; width: 4px; height: 14px; border-radius: 4px; background: linear-gradient(128deg, #259CFE 0%, #5BECFF 100%); } } .cell { padding: 18px 0; .iconImg { width: 39px; height: 39px; margin-right: 14px; } .cellTitle { font-size: 17px; font-weight: 600; color: #333333; line-height: 24px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cellContent { font-size: 14px; color: #777777; line-height: 20px; span { color: #FF5A56; padding-right: 5px; } } :global { .van-cell__label { margin-top: 0; } } } } // .groupButtom { // position: fixed; // bottom: 0; // left: 0; // width: 100%; // }