.indexMain {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    background: #fff;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    width: 9.2rem;
}
.header .logo {
    width: 4rem;
    height: 0.6533rem;
}
.header .user {
    /* flex: 1; */
    display: flex;
    align-items: center;
}
.header .user .text {
    font-size: 0.3466rem;
    margin-right: 0.2666rem;
}
.header .user .icon {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
}
.header .tipInfo {
    font-size: 0.32rem;
    color: #888;
    text-align: center;
    font-style: italic;
    line-height: 0.3733rem;
}
.header .tipInfo span {
    color: #fd4c60;
    letter-spacing: 0;
}
.search {
    width: 9.2rem;
    background-color: #f2f2f2;
    height: 0.9333rem;
    border-radius: 0.4666rem;
    margin: 0.4rem 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.2666rem;
}
.search .icon {
    width: 0.5333rem;
    height: 0.5333rem;
}
.search span {
    font-size: 0.32rem;
    color: #92959b;
    padding-left: 0.2666rem;
}
.banner {
    width: 9.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner .item {
    width: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.banner .item .van-image {
    width: 0.9333rem;
    height: 0.9333rem;
}
.banner .item span {
    font-size: 0.32rem;
    color: #333;
    text-align: center;
    margin-top: 0.1333rem;
}
.hotLive {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 9.2rem;
    box-sizing: border-box;
    padding: 0.4rem;
    margin: 0.4rem 0;
    border-radius: 0.2666rem;
    background: #fff;
}
.hotLive .top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.2666rem;
}
.hotLive .top .left {
    font-size: 0.5066rem;
    font-weight: 500;
}
.hotLive .top .right {
    font-size: 0.3466rem;
    color: #fd4c60;
    text-align: center;
    line-height: 0.6666rem;
    border-radius: 0.3333rem;
    width: 1.6rem;
    background-color: #f5f6f7;
}

.hotLive .list {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}
.hotLive .list .item {
    display: inline-block;
    width: 3.2rem;
    height: 4.8rem;
    background-color: #f5f6f7;
    border-radius: 0.2133rem;
    margin-right: 0.4rem;
    overflow: hidden;
    position: relative;
}
.hotLive .list .item:last-child {
    margin-right: 0;
}
.hotLive .list .item .van-image {
    width: 3.2rem;
    height: 4rem;
}
.hotLive .list .item .value {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 0.5333rem;
    box-sizing: border-box;
    padding: 0 0.2rem;
}

.hotLive .list .item .value .label {
    font-size: 0.2666rem;
    color: #888;
}
.hotLive .list .item .value span {
    color: #000;
    font-weight: 600;
    font-size: 0.2933rem;
}
.hotLive .list .item .liveLabel {
    position: absolute;
    left: 0.1333rem;
    top: 0.2666rem;
    background-color: #fd4c60;
    height: 0.4533rem;
    font-size: 0.2666rem;
    line-height: 0.4533rem;
    color: #fff;
    text-align: center;
    padding: 0 0.1333rem;
    border-radius: 0.2266rem;
}
.hotLive .list .item .peopleLabel {
    position: absolute;
    right: 0.1333rem;
    top: 0.2666rem;
    color: #fff;
    font-size: 0.2666rem;
}
.hotLive .list .item .author {
    display: flex;
    align-items: center;
    justify-content: start;
    position: absolute;
    left: 0.1333rem;
    bottom: 1.0666rem;
}

.hotLive .list .item .author .van-image {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    margin-right: 0.0666rem;
}
.hotLive .list .item .author span {
    white-space: nowrap;
    font-size: 0.2933rem;
    color: #fff;
}
.swiper {
    border-radius: 0.2666rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.normalCard {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 9.2rem;
    box-sizing: border-box;
    padding: 0.4rem;
    margin: 0 0 0.4rem;
    border-radius: 0.2666rem;
    background-color: #fff;
}
.normalCard .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.normalCard .top .title {
    font-size: 0.5333rem;
    color: #000;
    font-weight: bold;
}
.normalCard .top .title .date {
    color: #bbb;
    font-size: 0.3733rem;
    font-weight: normal;
    margin-left: 0.2666rem;
}
.normalCard .top .more {
    width: 1.8666rem;
    height: 0.6666rem;
    border-radius: 0.3333rem;
    background-color: #f5f6f7;
    text-align: center;
    line-height: 0.6666rem;
    color: #fd4c60;
    font-size: 0.3733rem;
}
.normalCard .item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.2666rem 0;
    /*height: 1.8933rem;*/
}
.normalCard .item .imgWrapper {
}
.normalCard .item .imgWrapper .van-image {
    width: 1.7333rem;
    height: 1.7333rem;
}
.normalCard .item .imgWrapper .van-image img {
    border-radius: 0.2666rem;
}

.normalCard .item .imgWrapper .van-image.round {
    width: 1.7333rem;
    height: 1.7333rem;
    border-radius: 50%;
}

.normalCard .item .info {
    flex: 1;
    padding: 0 0.2rem;
}
.normalCard .item .info .name {
    font-size: 0.4266rem;
    color: #333;
    max-width: 30.6666rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: normal;
    margin-bottom: 0.1333rem;
}
.normalCard .item .info .desc {
    display: flex;
    align-items: center;
}
.normalCard .item .info .desc .tag {
    display: inline-block;
    background-color: #ffe4dc;
    color: #fd4c60;
    font-size: 0.2933rem;
    padding: 0.0666rem 0.1333rem;
    border-radius: 0.08rem;
    margin-right: 0.1333rem;
}
.normalCard .item .info .desc .label {
    color: #888;
    font-size: 0.32rem;
    margin-left: 0.1333rem;
    margin-right: 0.0666rem;
}
.normalCard .item .info .desc .value {
    font-size: 0.32rem;
    color: #333;
}
.normalCard .item .info .author {
    display: flex;
    align-items: center;
}
.normalCard .item .info .author .van-image {
    width: 0.5333rem;
    height: 0.5333rem;
    border-radius: 50%;
}
.normalCard .item .info .author .userName {
    font-size: 0.32rem;
    color: #333;
    margin-left: 0.1333rem;
    width: 2.6666rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.normalCard .item .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.normalCard .item .right .label {
    color: #888;
    font-size: 0.32rem;
}
.normalCard .item .right .value {
    font-size: 0.4266rem;
    color: #333;
    font-weight: bold;
}
.normalCard .item .info .tag {
    background-color: #ffe4dc;
    color: #fd4c60;
    font-size: 0.2666rem;
    display: inline-block;
    padding: 0 0.0666rem;
}
.noImg {
    width: 1.8933rem;
    height: 1.8933rem;
    border-radius: 0.2666rem;
    margin-right: 0.2666rem;
    background-color: rgba(253, 76, 96, 0.7);
    line-height: 1.8933rem;
    text-align: center;
    color: #fff;
    font-size: 0.5066rem;
    font-weight: bold;
}
.favCard {
    width: 9.2rem;
    margin-top: 0.4rem;
    margin-bottom: 0.2666rem;
}
.favCard .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.favCard .title .left {
    font-size: 0.4533rem;
    font-weight: bold;
    color: #000;
}
.favCard .title .right {
    background-color: #f5f5f5;
    color: #fd4c60;
    font-size: 0.32rem;
    text-align: center;
    line-height: 0.6666rem;
    height: 0.6666rem;
    border-radius: 0.2666rem;
    padding: 0 0.2666rem;
}
.favCard .top {
    box-sizing: border-box;
    margin-top: 0.2666rem;
    width: 9.2rem;
    height: 1.1733rem;
    padding-left: 0.2666rem;
}
.favCard .top .user {
    display: inline-block;
    width: 1.0666rem;
    height: 1.0666rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    overflow: hidden;
    line-height: 1.0666rem;
    text-align: center;
    font-size: 0.32rem;
    color: #888;
    background-color: #f5f5f5;
}
.favCard .top .user.active {
    border: 0.0533rem solid #fd4c60;
    box-shadow: 0 2px 12px 0 rgb(253, 76, 96, .1);
}
.favCard .top .user:last-child {
    margin-right: 0;
}
.favCard .top .user .van-image {
    width: 100%;
    height: 100%;
}
.favCard .top .user.add {
    background-color: #efefef;
    position: relative;
}
.favCard .top .user.add .van-image {
    width: 40%;
    height: 40%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.favCard .userInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.2666rem;
}
.favCard .userInfo .info {
    width: 9.2rem;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 0.1333rem;
    box-sizing: border-box;
    padding: 0.2666rem;
}
.favCard .userInfo .info .userIcon {
    width: 0.6666rem;
    height: 0.6666rem;
    border-radius: 50%;
    margin-right: 0.2rem;
}
.favCard .userInfo .info .middle {
    flex: 1;
}
.favCard .userInfo .info .middle .name {
    font-size: 0.3466rem;
    color: #000;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 6rem;
}
.favCard .userInfo .info .middle .base {
    display: flex;
    align-items: center;
}
.favCard .userInfo .info .middle .fans {
    color: #888;
    font-size: 0.32rem;
}
.favCard .userInfo .info .middle .changeFans {
    color: #888;
    font-size: 0.32rem;
    margin-left: 0.2666rem;
}
.favCard .userInfo .info .middle .changeFans.red span {
    color: #fd4c60;
}
.favCard .userInfo .info .middle .changeFans.green span {
    color: #00c853;
}
.favCard .userInfo .info .right {
    width: 1.0666rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.favCard .userInfo .info .right .text {
    font-size: 0.2666rem;
    color: #333;
    text-align: center;
}
.favCard .userInfo .info .right .col {
    width: 0.4666rem;
    height: 0.4666rem;
}
.favCard .userInfo .info .right .van-image {
    width: 0.4rem;
    height: 0.4rem;
}
.favCard .userInfo .infoList {
    width: 9.2rem;
}
.favCard .userInfo .infoList .item {
    display: flex;
    align-items: center;
    margin-top: 0.2666rem;
    justify-content: space-between;
}
.favCard .userInfo .infoList .item .van-image {
    width: 0.52rem;
    height: 0.36rem;
    margin-right: 0.1333rem;
}
.favCard .userInfo .infoList .item .itemTitle {
    flex: 1;
    font-size: 0.32rem;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 6rem;
    margin-right: 0.2666rem;
}
.favCard .userInfo .infoList .item .time {
    font-size: 0.2666rem;
    color: #888;
}


.bannerItem {
    width: 9.4666rem;
    height: 2rem;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0.1333rem;
    position: fixed;
    left: 0.2666rem;
    bottom: 0.1333rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.2666rem;
}
.bannerItem .icon {
    width: 0.9333rem;
    height: 0.9333rem;
    margin-right: 0.2666rem;
}
.bannerItem .close {
    width: 0.8rem;
    height: 0.8rem;
}
.bannerItem .info {
    flex: 1;
}
.bannerItem .info .title {
    font-size: 0.4266rem;
    color: #fff;
}
.bannerItem .info .sub {
    font-size: 0.2933rem;
    color: #e3e3e3;
}
.bannerItem .login {
    opacity: 0;
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
}
.bannerItem .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.2666rem;
    font-size: 0.3733rem;
    color: #fff;
    text-align: center;
    background-color: #fd4c60;
    line-height: 0.8rem;
    border-radius: 0.4rem;
    padding: 0 0.2666rem;
}
.detailFooter {
    font-size: 0.37333rem;
    color: #8b9197;
    text-align: center;
    padding: 0.53333rem 0 2.13333rem;
}
.detailFooter span {
    font-size: 0.37333rem;
    color: #fd4c60;
    margin: 0 0 0 0.13333rem;
}
