reader/pages/index/index.wxss

/**index.wxss**/


/*热门推荐*/


/* @import "/component/hot/hot.wxss"; */

@import "/component/setGrade/index.wxss";

/*热团*/

@import "/component/group/group.wxss";

/*关注*/


/* @import "/component/follow/follow.wxss"; */


/*我的*/

@import "/component/my/my.wxss";
@import "/templates/courses/courses.wxss";
.container {
    /* background: rgba(242, 242, 242, 1); */
    /* background: #eee; */
    height: 100%;
    /* overflow: hidden; */
}

.template {
    height: 100%;
}

.scroll-view {
    height: 100%;
}

.top-tab {
    position: fixed;
    top: 0;
    /* top: 118rpx; */
    width: 100%;
    height: 80rpx;
    background: #ededed;
    /* color: #383838; */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 15rpx; */
    z-index: 999;
    padding: 0 48rpx 0 48rpx;
}

.activity-img {
    width: 100%;
    height: 321rpx;
}

.activity-img image {
    width: 100%;
    height: 100%;
}

.activity-buy {
    position: fixed;
    right: 17rpx;
    bottom: 300rpx;
    width: 148rpx;
    height: 149rpx;
    z-index: 999;
}

.activity-buy image {
    width: 100%;
    height: 100%;
}

.no_follow {
    display: flex;
    width: 100%;
    height: 98%;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .4);
    font-size: 34rpx;
    flex-direction: column;
}

.no_follow_icon {
    width: 274rpx;
    height: 258rpx;
}

.tabbar {
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 58rpx;
    line-height: 60rpx;
    font-size: 40rpx;
    opacity: 0.7;
    font-weight: 800;
    /* border-radius: 30rpx; */
    /* background: #fff; */
    border-bottom: none;
    color: #333;
}

.select {
    color: #333;
    /* font-size: 40rpx; */
    /* font-family: SourceHanSansSC-bold; */
    /* background: #61ca54; */
    font-size: 40rpx;
    border-bottom: 6rpx solid #14c962;
    opacity: 1;
}

.bottom-tab image {
    width: 54rpx;
    height: 54rpx;
    margin-right: 20rpx;
}

.jurisdiction {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* 部分公用css */

.red-text {
    color: #ff3600;
}


/* 作品列表 */

.hotWares {
    display: flex;
    flex-wrap: wrap;
    /* background: #e8e8e8; */
}

.recommdSection .hotWares .worksCard {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 496rpx;
    background: #fff;
    /* padding: 26rpx; */
    /* border-radius: 12rpx; */
    /* margin: 0 0 18rpx 16rpx; */
    margin: 0 auto 20rpx;
    /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
}

.worksCard {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 496rpx;
    background: #fff;
    margin: 0 auto 20rpx;
}

.worksCard .wareCardImg {
    display: block;
    width: 704rpx;
    height: 290rpx;
    margin: 21rpx auto 0;
    border-radius: 20rpx;
}

.worksCard .titleSummary {
    display: flex;
    justify-content: space-between;
    margin-top: 12rpx;
}

.worksCard .wareCardTitle {
    /* margin: 0 auto; */
    width: 80%;
    height: 46rpx;
    display: block;
    /* text-align: left; */
    color: #444;
    font-size: 32rpx;
    /* letter-spacing: 4rpx; */
    margin-left: 28rpx;
    font-family: MicrosoftYaHei;
}

.worksCard .topData {
    height: 92rpx;
    margin-top: 22rpx;
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    align-items: center;
}

.worksLeft {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin-left: 10rpx;
    position: relative;
}

.worksLeft .worksInfo .authorName {
    color: #393939;
    font-size: 30rpx;
    margin-top: 8rpx;
}

.worksLeft .worksInfo .time {
    color: #393939;
    font-size: 30rpx;
}

.worksCard .topData .wareCardPlays {
    width: 100rpx;
    /* margin-left: 270rpx; */
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: 35rpx;
    margin-bottom: 6rpx;
    margin-left: 4rpx;
}

.worksCard .topData .authorAvatar {
    width: 92rpx;
    height: 92rpx;
    margin: 0 22rpx 0 22rpx;
    display: block;
    border: 4rpx solid #61CA54;
    border-radius: 50%;
}

.worksCard .topData .profession {
    width: 60rpx;
    height: 30rpx;
    background: rgba(97, 202, 84, 1);
    border-radius: 15rpx;
    font-size: 22rpx;
    /* font-family: PingFangSC-Medium; */
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
    line-height: 30rpx;
    text-align: center;
    position: absolute;
    bottom: -7rpx;
    left: 42rpx;
}

.topData .numberInfo {
    display: flex;
    flex-direction: column;
    margin-top: -5rpx;
}

.worksCard .wareCardTip {
    width: 178rpx;
    height: 40rpx;
    display: block;
    text-align: left;
    color: #444;
    font-size: 24rpx;
    line-height: 44rpx;
}

.worksCard .wareCardPlays .wareCardPlaysImg {
    width: 30rpx;
    height: 26rpx;
    margin-left: 7rpx;
    float: right;
}

.worksCard .wareCardPlays text {
    /* margin-left: 4rpx; */
    color: #848484;
    font-size: 24rpx;
    text-align: right;
    /* width:57%; */
    float: right;
    line-height: 37rpx;
}

.worksCard .wareCardLikes {
    width: 100rpx;
    margin-right: 18rpx;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.worksCard .wareCardLikes .wareCardLikesImg {
    width: 22rpx;
    height: 26rpx;
    margin-left: 7rpx;
}

.worksCard .wareCardLikes text {
    /* margin-left: 4rpx; */
    color: #848484;
    font-size: 24rpx;
}

.index-dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background: rgba(0, 0, 0, .3)
}

.index-dialog-wrapper {
    width: 392rpx;
    height: 240rpx;
    background: #fff;
    border-radius: 30rpx;
    box-shadow: 0 0 10 0 rgba(0, 0, 0, .5);
    position: fixed;
    top: 281rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.index-dialog-text {
    width: 100%;
    font-size: 29rpx;
    color: #535353;
    font-weight: 800;
    text-align: center;
    margin-top: 59rpx;
}

.index-dialog-btn {
    width: 160rpx;
    height: 50rpx;
    border: 3rpx solid #f75642;
    border-radius: 25rpx;
    line-height: 50rpx;
    text-align: center;
    color: #f75642;
    font-size: 30rpx;
    font-weight: 800;
    margin: 41rpx auto;
}

.index-dialog-btn-hide {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0);
    top: 0;
}

.comment_section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, .3);
    overflow: hidden;
}

.comment_close {
    position: absolute;
    bottom: 760rpx;
    right: 10rpx;
    font-size: 60rpx;
    padding: 20rpx;
    z-index: 999;
}

.change_grade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.change_grade .change_brage_wrapper {
    width: 548rpx;
    /* height: 453rpx; */
    background: #fff;
    border-radius: 20rpx;
}

.change_grade .change_brage_wrapper .title {
    width: 100%;
    text-align: center;
    color: rgba(0, 0, 0, .6);
    font-size: 40rpx;
    margin-top: 33rpx;
    margin-bottom: 66rpx;
    display: flex;
    justify-content: center;
}

.change_grade .change_brage_wrapper .change_row {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 65rpx;
}

.change_grade .change_brage_wrapper .change_row .change_item {
    width: 220rpx;
    height: 68rpx;
    background: #14c962;
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: #fff;
}

.change_grade .change_brage_wrapper .change_item_blank {
    background: #ffffff !important;
}

.upgrade,
.help-pay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    z-index: 9999;
}

.help-pay-main,
.upgrade-main {
    position: absolute;
    left: 50%;
    top: 14%;
    transform: translate(-50%, 0);
}

.upgrade-icon {
    width: 629rpx;
    height: 692rpx;
}

.upgrade-main .close {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 103%;
}

.help-pay-icon {
    width: 570rpx;
    height: 747rpx;
}

.tips-icon {
    width: 570rpx;
    height: 390rpx;
}

.help-close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -100rpx;
    width: 65rpx;
    height: 65rpx;
}

.pay-price {
    position: absolute;
    bottom: 65rpx;
    left: 88rpx;
    color: #FFFFFF;
    font-size: 49rpx;
}

.pay-price text {
    font-size: 30rpx;
}