.header { top: 0; left: 0; right: 0; width: 100%; background: var(--whiteColor); z-index: 999; height: .9rem; i { font-size: .44rem; } .icon-wujiaoxing { margin-right: .1rem; } .header_title { color: var(--textColor); font-size: .32rem; margin: 0 .16rem; flex: 1; } } .footer { width: 100%; height: 1rem; background-color: var(--whiteColor); padding: 0 .52rem; bottom: 0; left: 0; right: 0; z-index: 999; li { a { display: flex; align-items: center; flex-direction: column; i {} div { font-size: 0.22rem; margin-top: 0.1rem; } } } .active { i, div { color: var(--themeColor); } } } .recommend-model { margin-top: .5rem; .title { height: .9rem; font-size: .38rem; font-weight: bolder; } .list { li { width: 3.32rem; margin-bottom: 0.4rem; a { img { width: 100%; border-radius: 0.14rem; margin-bottom: 0.18rem; height: 4.98rem; object-fit: cover; } .desc { .name { font-size: .34rem; color: var(--textColor); margin-bottom: 0.12rem; } .time { font-size: .2rem; color: var(--tipsTextColor); .text {} .view { i {} span {} } } } } } } } .roll { .list { overflow-x: scroll; } li { flex-shrink: 0; margin-right: .3rem; &:last-child { margin-right: 0; } } } .swiper-pagination-bullet-active { background: var(--themeColor); } .content { margin-top: .9rem; margin-bottom: 1rem; } #nprogress { .bar { background: var(--themeColor); height: .08rem; .peg { box-shadow: 0 0 10px var(--themeColor), 0 0 5px var(--themeColor) } } .spinner-icon { border-top-color: var(--themeColor); border-left-color: var(--themeColor); } }