reader/pages/myworks/myworks.wxss

/* pages/user/myworks/myworks.wxss */

page {
    width: 100%;
    background: #F0F1F5;
}

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

.user-works {
    width: 100%;
    box-sizing: border-box;
    /* padding: 0 15rpx; */
    background: #F0F1F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.follow-details {
    width: 100%;
    height: 230rpx;
    /* border-radius: 20rpx; */
    background: #FFFFFF;
    /* margin-top: 30rpx; */
    margin: 20rpx 0 20rpx;
    display: flex;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.follow-info {
    width: 100%;
    display: flex;
    padding: 30rpx 22rpx 10rpx 30rpx;
}

.follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 154rpx; */
    /* height: 58rpx; */
    font-size: 26rpx;
    color: #8a8a8a;
    position: absolute;
    top: 54rpx;
    right: 32rpx;
}

.follow image {
    width: 160rpx;
    height: 50rpx;
    /* margin-right: 15rpx; */
    /* margin-bottom: 8rpx; */
}

.avatar-bg {
    margin-left: 20rpx;
    margin-top: 50rpx;
    width: 152rpx;
    height: 152rpx;
    background: #61CA54;
    border-radius: 50%;
    position: relative;
}

.avatar-box {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    z-index: 300;
    /* position: absolute;
  top: 7rpx;
  left: 7rpx; */
}

.avatar-image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 28rpx;
}

.avatar-nickname {
    max-width: 290rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30rpx;
    color: rgba(0, 0, 0, .8);
    font-weight: 600;
}

.avatar-address {
    width: 500rpx;
}

.flowers-box {
    width: 26rpx;
    height: 26rpx;
    margin-left: 10rpx;
}

.flowers-box>image {
    width: 100%;
    height: 100%;
}

.occupation-title {
    width: 60rpx;
    height: 30rpx;
    background: rgba(97, 202, 84, 1);
    border-radius: 15rpx;
    font-size: 22rpx;
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
    line-height: 30rpx;
    text-align: center;
    position: absolute;
    bottom: -10rpx;
    left: 48rpx;
}

.avatar-msg {
    margin-left: 40rpx;
    font-size: 32rpx;
}

.set-msg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mine-category {
    box-sizing: border-box;
    width: 674rpx;
    /* padding-top: 30rpx; */
    border-top: 1rpx solid rgba(0, 0, 0, .2);
    padding-top: 26rpx;
    font-size: 28rpx;
    /* font-weight: 600; */
    color: rgba(0, 0, 0, .8);
    z-index: 900;
    display: flex;
    margin: 0 auto;
    /* position: absolute; */
    /* top: 246rpx; */
    /* left: 5%; */
    justify-content: space-around;
}

.border-right {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: lighter;
    height: 22rpx;
    border-right: 2rpx solid #D6D6D6;
}

.flower-count .border-right {
    border: none;
}

.play-count {
    text-align: center;
}

.point-count,
.follow-count,
.flower-count {
    width: 25%;
    text-align: center;
}

.play-img {
    width: 28rpx;
    height: 26rpx;
    margin-right: 6rpx;
    margin-bottom: 6rpx;
}

.red-heart {
    width: 26rpx;
    height: 22rpx;
    margin-right: 6rpx;
    margin-bottom: 6rpx;
}

.point-img {
    width: 24rpx;
    height: 26rpx;
    margin-right: 6rpx;
    margin-bottom: 6rpx;
}

image {
    width: 100%;
    height: 100%;
}

.color {
    text-align: right;
    padding-right: 44rpx;
}

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

.recommdSection .hotWares .worksCard {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 484rpx;
    background: #fff;
    /* padding: 26rpx; */
    /* border-radius: 12rpx; */
    /* margin: 0 0 18rpx 16rpx; */
    margin: 0 auto 10rpx;
    /* 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;
}

.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: 7rpx;
}

.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: 68rpx;
    height: 24rpx;
    background: rgba(97, 202, 84, 1);
    border-radius: 166rpx;
    border: 2rpx solid rgba(255, 255, 255, 1);
    font-size: 16rpx;
    /* font-family: PingFangSC-Medium; */
    /* font-weight: 500; */
    color: rgba(255, 255, 255, 1);
    line-height: 24rpx;
    text-align: center;
    position: absolute;
    bottom: -7rpx;
    left: 37rpx;
}

.topData .numberInfo {
    display: flex;
    flex-direction: column;
}

.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;
    margin-right: -3rpx;
}

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

.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;
}