cardtest/pages/index/index.wxss

/* 首页 */
page {
    background: #fff;
}

.indexTab {
    position: fixed;
    display: flex;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    z-index: 999;
    padding: 0 40rpx;
    top: 80rpx;
    box-sizing: border-box;
    background-color: #07081d;
}

.indexTab-lable {
    text-align: center;
    flex: 3;
    color: #fff;
    position: relative;
}

.indexTab-lable.active {
    background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 38rpx;
}

/* 轮播图 */
.indexBanner {
    height: 360rpx;
    position: relative;
    padding-top: 20rpx;
}

.indexBanner::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 240rpx;
    width: 100%;
    content: '';
    background: #07081d;
    border-radius: 0 0 200rpx 200rpx;
}

.banner {
    position: relative;
    padding-top: 48%;
    width: calc(100% - 100rpx);
    background: white;
    margin: 0 50rpx;
    border-radius: 30rpx;
    overflow: hidden;
    z-index: 99;
}

.banner-swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

/* 指示点 */
.dots {
    margin: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dots view {
    width: 14rpx;
    height: 14rpx;
    margin: 0 6rpx;
    border-radius: 50%;
    background-color: #c5c5c5;
}

.dots .active {
    width: 24rpx;
    border-radius: 40rpx;
    background-color: #f46851;
}

/* 提示 */
.indexNews {
    background: #dddddd;
    padding: 25rpx 40rpx;
    display: flex;
    font-size: 28rpx;
}

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

/* 权益列表 */
.cardArr {
    padding: 40rpx 30rpx 30rpx;
    box-sizing: border-box;
    overflow: hidden;
}

.cardArr-top {
    flex-wrap: wrap;
    display: flex;
}

.indexCard {
    width: 33.33%;
    text-align: center;
    position: relative;
    flex: 0 0 33.3333%;
    margin-bottom: 40rpx;
}

.indexCard-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
}

.activity-tips {
    position: absolute;
    top: -10rpx;
    right: 10rpx;
    z-index: 9;
    background-image: -webkit-linear-gradient(left, #ff0000, #ff0000);
    color: #fff;
    font-size: 24rpx;
    padding: 0 18rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    animation: zy 2.5s .15s linear infinite;
    -moz-animation: zy 2.5s .15s linear infinite;
    -webkit-animation: zy 2.5s .15s linear infinite;
    -o-animation: zy 2.5s .15s linear infinite;
}

.indexCard-tips {
    background-image: -webkit-linear-gradient(left, #ef354c, #ef001e);
    color: #fff300;
    height: 34rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    right: 25rpx;
}

@keyframes zy {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

.indexCard-title {
    font-weight: 600;
    margin: 5rpx 20rpx;
    font-size: 30rpx;
}

.indexCard-remark {
    font-size: 26rpx;
    color: #8a8a8a;
}

/* 新增活动权利列表样式 */
.activity-remark {
    background-color: #000000;
    display: inline-block;
    border-radius: 40rpx;
    height: 38rpx;
    line-height: 38rpx;
    padding: 0 10rpx;
}

.activity-remark text {
    display: block;
    background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 22rpx;
}


/* 定位 */

.locationPicker {
    background: #000;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    position: fixed;
    width: 100%;
    z-index: 1009;
    top: 0;
    left: 0;
}

.locationPicker-icon {
    width: 38rpx;
    height: 38rpx;
    float: left;
    vertical-align: middle;
    margin: 22rpx 10rpx 0 20rpx;
}

.locationPicker-region-icon {
    width: 44rpx;
    height: 44rpx;
    margin-top: 12rpx;
}

.cityCont {
    width: 60%;
    display: flex;
}

.cityCont view {
    max-width: calc(100% - 50rpx);
}

.cityCont image {
    width: 50rpx;
    height: 50rpx;
    margin-top: 16rpx;
}

/* 权益提示 */
.legalTips {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    padding: 80rpx;
    margin: 0 auto;
}

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

/* 滚动  */
/*首页跑马灯效果*/
@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;
}

/* 福利日 */

.Welfare {
    text-align: center;
}

.WelfareTitle {
    display: inline-block;
    background-color: #020202;
    border-radius: 20rpx 20rpx 10rpx 10rpx;
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 50rpx;
}

.WelfareTitle text,
.WelfareList-btn text {
    background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.WelfareTitle text {
    font-weight: 600;
    font-size: 38rpx;
}

.WelfareList {
    background-color: #020202;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.WelfareList::after {
    position: absolute;
    content: '';
    top: -60rpx;
    right: 0;
    background-image: -moz-linear-gradient(right, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
    background-image: linear-gradient(right, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
}

.WelfareList-back {
    position: relative;
    width: 100%;
    height: 220rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 40rpx;
}

.WelfareList-back:last-child {
    margin: 0;
}

.WelfareList-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.WelfareList-img.active {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.WelfareList-left,
.WelfareList-right,
.WelfareList-btn {
    position: absolute;
    z-index: 2;
    left: 0;
}

.WelfareList-left {
    top: -4rpx;
    width: 180rpx;
    font-weight: 600;
    display:table;
    height: 226rpx;
}

.cell {
    display:table-cell;
    vertical-align:middle;
}

.WelfareList-left-title {
    font-size: 28rpx;
    word-break:normal;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.WelfareList-left .WelfareList-left-price {
    font-size: 40rpx;
}

.WelfareList-left text {
    font-size: 28rpx;
    font-weight: 600;
}

.WelfareList-right {
    line-height: 44rpx;
    width: 100%;
    padding-left: 200rpx;
    padding-right: 160rpx;
    box-sizing: border-box;
    text-align: left;
    display: flex;
}

.WelfareList-cont {
    width: 100%;
    margin-top: -8rpx;
}

.WelfareList-btn {
    left: auto;
    top: 55rpx;
    right: 30rpx;
    background-color: #020202;
    width: 110rpx;
    height: 110rpx;
    text-align: center;
    line-height: 110rpx;
    border-radius: 50%;
    overflow: hidden;
}

.WelfareList-btn::after {
    position: absolute;
    content: '';
    top: -50rpx;
    left: 0;
    background-image: -moz-linear-gradient(right, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0));
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0));
    background-image: linear-gradient(right, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0));
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.WelfareList-btn.active {
    background-color: #9c9c9c;
}

.WelfareList-btn.active::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 4rpx;
    background-color: #cecece;
    left: 0;
    top: 50%;
    transform:rotate(45deg);
}

.WelfareList-btn.active text {
    background-image: -moz-linear-gradient(#c3c3c3);
    background-image: -webkit-linear-gradient(#c3c3c3);
    background-image: linear-gradient(#c3c3c3);
    -webkit-text-fill-color: #c3c3c3;
}


.WelfareList-btn text {
    font-weight: 600;
    font-size: 54rpx;
}

.WelfareList-all {
    font-size: 24rpx;
}

.WelfareList-text {
    font-size: 28rpx;
}

.light {
    cursor: pointer;
    position: absolute;
    left: -100%;
    top: 0;
    width: 40px;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    transform: skewx(25deg);
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
    animation-name: example;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}


@keyframes example {
    0% {
        left: -100%;
        background: rgba(255, 255, 255, .4);
    }

    50% {
        left: -50%;
        background: rgba(255, 255, 255, .7);
    }

    100% {
        left: 100%;
        background: rgba(255, 255, 255, 0);
    }
}