/* header start  */
.header {
    display: flex;
    align-items: center;
    height: 6.667vw;
    /* margin-top: 2.933vw; */
    width: 100vw;
    margin: 2.933vw auto 0;
}

.header .logo-wrap {
    flex-grow: 1;
    margin-left: 4.533vw;
}

.header .logo-wrap .logo {
    width: 19.467vw;
}

.header .search {
    margin-right: 6.667vw;
}

.header .search .search-img {
    width: 4.8vw;
}

.header .login-wrap {
    margin-right: 5.467vw;
}

.header .login-wrap .login {
    width: 6.133vw;
}

.header .download {
    margin-right: 6vw;
    width: 19.2vw;
    height: 6.4vw;
    line-height: 6.4vw;
    text-align: center;
    background-color: #FF9F00;
    color: #fff;
    font-size: 3.333vw;
    border-radius: 1.067vw;
}

/* end header */

/* nav start */
.nav {
    width: 100vw;
    /* margin-top: 6vw; */
    margin: 6vw auto 0;
    padding-left: 4.667vw;
    border-bottom: var(--border-width) solid #F3F3F3;
}

.nav .swiper-slide a {
    display: inline-block;
    padding-bottom: 2.8vw;
    border-bottom: var(--border-width) solid transparent;
    color: #6B6B6B;
    font-size: 3.733vw;

}

.nav .swiper-slide a.active {
    color: #FF9F00;
    border-color: #FF9F00;
}

/* end nav */

/* banner start */
.banner {
    width: 94.933vw;
    height: 31.467vw;
    margin: 2.4vw auto;
    background-color: khaki;
}

.banner .swiper {
    height: 31.467vw;
    --swiper-pagination-bullet-horizontal-gap: 0.8vw;
}

.banner .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .swiper-pagination .swiper-pagination-bullet {
    width: 2vw;
    height: 0.8vw;
    border-radius: 0;
    background-color: #fff;
}

.banner .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fff;
}

/* end banner */

/* menu start */
.menu {
    width: 94.933vw;
    margin: 2.4vw auto;
    padding-bottom: 4.133vw;
    background-color: #F7F7F7;
    border-radius: 1.067vw;
}

.menu ul {
    display: flex;
    flex-wrap: wrap;
}

.menu ul li {
    width: 20%;
    padding-top: 4vw;
    text-align: center;
}

.menu ul li img {
    width: 10.133vw;
    height: 10.133vw;
    object-fit: cover;
}

.menu ul li a {
    display: block;
    color: #6B6B6B;
}

.menu ul li p {
    margin-top: 1.733vw;
}

/* end menu */

/* main start */

/* tabs start */
.tabs {
    margin-bottom: 2.4vw;
    background-color: #F7F7F7;
    border-radius: 1.067vw;
}

.tabs .tab-header {
    display: flex;
    align-items: center;
    height: 13.867vw;
    padding-left: 1.6vw;
}

.tabs .tab-header .tab-header-item {
    width: 15.733vw;
    height: 5.867vw;
    border: 0.267vw solid #6B6B6B;
    margin-right: 3.867vw;
    line-height: 5.867vw;
    text-align: center;
    font-size: 2.933vw;
    color: #6c6c6c;
    border-radius: 2.933vw;
}

.tabs .tab-header .tab-header-item.active {
    border-color: #FF9F00;
    color: #FF9F00;
}

.tabs .tab-content .tab-content-item {
    display: none;
}

.tabs .tab-content .swiper {
    min-height: 39.067vw;
}

/* conmmend-card start */
.common-card .img {
    position: relative;
    height: 25.867vw;
}

.common-card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.common-card .img .card-info {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 7.467vw;
    padding: 2vw 1.6vw 1.867vw 1.867vw;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}

.common-card .card-info span {
    padding-left: 5.733vw;
    color: #fff;
    line-height: 3.6vw;
}

.common-card .card-info .play-count {
    background: url(../images/icon-play@2x.png) left center/4.133vw 3.6vw no-repeat;
}

.common-card .card-info .number {
    background: url(../images/icon-nav@2x.png) left center/4.133vw 3.6vw no-repeat;
}

.common-card .title {
    margin: 1.067vw 0 2.533vw;
    height: 9.6vw;
    line-height: 4.8vw;
    color: #000;
}

/* end conmmend-card */
/* end tabs */

/* recommend-list start */
.recommend-list {
    background-color: #F7F7F7;
    border-radius: 1.067vw;
}

/* 边框的位置确定内外边距 */
.recommend-list ul li {
    padding: 2.667vw 0;
    margin: 0 2.667vw;
    border-bottom: var(--border-width) solid #E6E6E6;
}

.recommend-list ul li:last-child {
    border-bottom: none;
}

/* 可以跳转需要a标签，弹性布局 */
.recommend-list ul li a {
    display: flex;
    align-items: center;
}

/* 图片和按钮不能弹性缩小 */
.recommend-list ul li .img-wrap {
    flex-shrink: 0;
    width: 10.133vw;
    height: 10.133vw;
    margin-right: 2.4vw;
}

/* 用户上传的图片要等比缩放裁剪覆盖父容器 */
.recommend-list ul li .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 
    弹性占满剩余空间，
    文本溢出显示省略号会不换行（防御式编程）
    如果不设置宽度，文字太长宽就是文字内容宽
    设置最小宽是0，就不会参照文字内容来
    最大宽就是剩余空间的宽了
*/
.recommend-list ul li .info {
    flex-grow: 1;
    min-width: 0;
}

.recommend-list ul li .title {
    margin-bottom: 3.067vw;
    font-size: 3.467vw;
    color: #FF9F00;
}

.recommend-list ul li .desc {
    color: #000;
}

/* 背景图是2倍图，要控制大小，将来容器改变大小，背景图才会跟着改变 */
.recommend-list ul li .play-button {
    flex-shrink: 0;
    width: 5.867vw;
    height: 5.867vw;
    margin: 0 2vw 0 3.467vw;
    background-image: url(../images/icon-play-@2x.png);
    background-size: cover;
    /* 或者 */
    /* background-size: 5.867vw; */
}

/* end recommend-list */

/* history start */
.history {
    margin-top: 2.4vw;
    background-color: #F7F7F7;
    border-radius: 1.067vw;
}

/* 设置高度，弹性布局，垂直居中对齐 */
.history .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10.933vw;
}

.history .history-header .title {
    margin-left: 1.467vw;
    font-size: 4.267vw;
}

/* 内边距放置箭头，背景图一定要控制大小 */
.history .history-header .more {
    margin-right: 2.667vw;
    padding-right: 4vw;
    color: #B9B9BD;
    background: url(../images/arrow-right.png) right center/1.467vw 2.667vw no-repeat;
}

/* 设置 slide 的宽度，根据内容自动控制显示页数 */
.history .swiper .swiper-slide {
    width: 22.667vw;
}

.history .swiper-slide .img-wrap {
    height: 30.4vw;
}

/* 用户上传的图片要控制等比缩放裁剪 */
.history .swiper-slide .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 防御式编程 两行文本 设置高度 根据行高调整上下外边距 */
.history .history-list .title {
    margin: 1.333vw 0 1.467vw 0;
    height: 9.6vw;
    line-height: 4.8vw;
    color: #000;
}

/* end history */

/* information-list start */
.information-list {
    margin-top: 2.4vw;
    padding-bottom: 18.667vw;
}

/* 弹性布局 两端对齐 放不下换行 */
.information-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 要设置宽度，因为里面的内容宽是没有设置的 */
.information-list ul li {
    width: 46.133vw;
}

/* 样式重写 */
.information-list .common-card .title {
    margin-bottom: 2.267vw;
}

/* end information-list */

/* tabbar start */
/* 大小要与浏览器一样大小，后面要做rem适配，先按100vw处理 */
.tabbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 22;
    width: 100vw;
    height: 13.2vw;
    padding-bottom: 2.667vw;
    /* 兼容 IOS<11.2 */
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 IOS>11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    box-shadow: 0 0 0.267vw #ddd;
}

/* 不要控制下面的内边距，中间添加按钮与下面的距离是不一样的 */
.tabbar ul {
    display: flex;
    justify-content: space-between;
    padding: 2vw 5.2vw 0;
}

.tabbar ul li a {
    display: flex;
    flex-direction: column;
    color: #000;
}

.tabbar ul li.active a {
    color: #FF9F00;
}

.tabbar ul li.add a {
    width: 10.4vw;
    height: 10.133vw;
    background: #FF9F00 url(../images/f-icon-add.png) no-repeat center/4.133vw;
    border-radius: 3.733vw;
}

.tabbar ul li .icon {
    height: 4.933vw;
    margin-bottom: 1.467vw;
    background-repeat: no-repeat;
    background-size: auto 4.933vw;
    background-position: top center;
}

.tabbar ul li .icon1 {
    background-image: url(../images/f-icon1-active@2x.png);
}

.tabbar ul li .icon2 {
    background-image: url(../images/f-icon2@2x.png);
}

.tabbar ul li .icon3 {
    background-image: url(../images/f-icon3@2x.png);
}

.tabbar ul li .icon4 {
    background-image: url(../images/f-icon4@2x.png);
}

/* end tabbar */
/* end main */