cardtest/pages/classify/classify.wxss

/* 卡券权益 */
.cont {
    width: 100%;
    overflow: hidden;
}

.contBack {
    position: relative;
    width: 200%;
    height: 400rpx;
    left: -50%;
    text-align: center;
    background: #000000;
    border-radius: 0 0 100% 100%;
    overflow: hidden;
}

.contBack::after {
    width: 100%;
    height: 30rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    content: '';
    background-image: linear-gradient(transparent, rgba(0,0,0,.25));
}

.classBack {
    position: absolute;
    left: 30%;
    right: 30%;
    width: 40%;
    top: 40rpx;
}

.classCircle {
    position: relative;
}

.classCircle::after,
.contBack::before {
    position: absolute;
    border-radius: 50%;
    content: '';
    z-index: 1;
    background-color: rgba(255,255,255,.1);
}

.classCircle::after {
    left: 20%;
    top: -20rpx;
    width: 260rpx;
    height: 260rpx;
}

.contBack::before {
    right: 20%;
    top: 55%;
    width: 300rpx;
    height: 300rpx;
}

.rightsCont {
    position: absolute;
    z-index: 3;
    left: calc(30% - 2rpx);
    right: calc(30% - 2rpx);
    width: calc(40% + 4rpx);
    top: 58rpx;
}

.rightsCont-title {
    color: #63320a;
    font-size: 60rpx;
    margin: 60rpx 0 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.rightsCont-btn {
    background-color: #f4dfcc;
    width: 100%;
    line-height: 70rpx;
    font-size: 38rpx;
    color: #2d2d2d;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.rightsCont-tips {
    color: #fff;
}

/* 须知 */
.notice,
.indexNews,
.special {
    border-radius: 10rpx;
    padding: 25rpx 20rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 30rpx 20rpx;
}

.indexColor {
    background: #c4c4c4;
}

.noticeTitle {
    color: #747d86;
    display: flex;
    line-height: 46rpx;
}

.noticeTitle-flex {
    flex: 1;
    display: flex;
    font-size: 30rpx;
    color: #000;
}

.noticeTitle-img {
    width: 46rpx;
    height: 46rpx;
    margin-right: 20rpx;
}

.noticeText {
    font-size: 26rpx;
    height: 0;
    overflow: hidden;
}

.noticeText.active {
    height: auto;
}

.noticeText-top {
    margin: 30rpx 0 10rpx;
    font-weight: 600;
}

.noticeText-cont {
    line-height: 60rpx;
}

.noticeTitle-row {
    width: 32rpx;
    height: 32rpx;
    margin-top: 6rpx;
    transform:rotate(-180deg);
}

.noticeTitle-row.active {
    transform: rotate(90deg);
}


/* 公告 */
.indexNews {
    display: flex;
    font-size: 28rpx;
    line-height: 46rpx;
}

.indexNews image {
    width: 42rpx;
    height: 42rpx;
    margin: 4rpx 20rpx 0 0;
}

/* 卡券专区 */
.special-list {
    margin: 20rpx -10rpx 0;
    flex-wrap: wrap;
    display: flex;
}

.special-label {
    margin: 10rpx;
    width: calc(50% - 20rpx);
    height: 330rpx;
    flex: 0 0 calc(50% - 20rpx);
    border: 4rpx solid #fb9b00;
    background-color: #ffe0b8;
    border-radius: 10rpx;
    text-align: center;
    padding: 20rpx 0;
    box-sizing: border-box;
    position: relative;
}

.special-label:last-child {
    margin-bottom: 0;
}

.special-rebate {
    position: absolute;
    top: -30rpx;
    right: 10rpx;
    background: #fe0002;
    color: #fff;
    border-radius: 30rpx;
    line-height: 52rpx;
    height: 52rpx;
    font-size: 26rpx;
    padding: 0 20rpx;
    font-weight: 600;
}

.welfareCont-top{
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    margin: 10rpx 0;
}

.welfareCont-list-img {
    border: 2rpx solid #eccc69;
    border-radius: 50%;
    width: 100rpx;
    height: 100rpx;
    display: inline-block;
    margin: 0 10rpx;
    overflow: hidden;
}

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


.special-text {
    padding: 0 15rpx;
    box-sizing: border-box;
    position: relative;
    font-size: 26rpx;
    border-top: 4rpx dashed #fb9b00;
    margin-top: 20rpx;
    padding-top: 20rpx;
}

.special-name {
    color: #6f4a2d;
    font-weight: 600;
    font-size: 28rpx;
}

.special-tips {
    background-color: #242424;
    color: #fff;
    border-radius: 10rpx;
    padding: 4rpx 20rpx;
    line-height: 46rpx;
    height: 46rpx;
    margin-top: 20rpx;
    font-size: 24rpx;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 滚动  */
/*首页跑马灯效果*/
@keyframes around {
    from {
        margin-left: 60rpx;
    }

    to {
        /* var接受传入的变量 */
        margin-left: var(--marqueeWidth--);
    }
}

.marquee_container {
    width: calc(100% - 40rpx);
    overflow: hidden;
}

.marquee_container:hover {
    /* 不起作用 */
    animation-play-state: paused;
}

.marquee_text {
    font-size: 28rpx;
    display: inline-block;
    white-space: nowrap;
}

.marquee_text.active {
    animation-name: around;
    animation-duration: 20s;
    /*过渡时间*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


/* 权益提示 */
.legalTips {
    text-align: center;
    font-size: 26rpx;
    color: #999;
}

.legalTips image {
    width: 180rpx;
    height: 180rpx;
    display: block;
    margin: 0 auto;
}