index.wxss 4.1 KB
.index_header{
 background: #8DE063;
 padding:0 32rpx 100rpx 32rpx;
 color:#fff;
 font-size:30rpx;
 position: relative;
 
 
}
.header_top{
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.header_top_left{
 position: relative;
 padding:0 40rpx 0 20rpx;
 text-align: center;
 line-height: 60rpx;
 height: 60rpx;
 color:#fff;
 font-size: 26rpx;
 background: #7BD64D;
 border-radius: 30rpx;
}
.tri_box{
height:17rpx;
width:17rpx;
position:absolute;
overflow:hidden;
right:14rpx;
bottom:20rpx;
z-index:3;

}
.tri_box image{
 display: block;
 width:100%;
 height: 100%;
}
.header_top_rigth{
 width:430rpx;
 height: 60rpx;
 text-align: center;
 line-height: 60rpx;
 color:#fff;
 font-size:30rpx;
 font-weight: bold;
 border-radius: 30rpx;
 background: #7BD64D;
}
.header_main{
 padding:30rpx 0 20rpx 0;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.num_box{
 margin: 23rpx 0 25rpx 0;
 width:255rpx;
 height: 84rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 background: rgba(235,250,227,1);
 border-radius: 42rpx;
}
.num_inbox{
 width: 231rpx;
 height: 60rpx;
 color:#46D043;
 font-size:36rpx;
 background: #FFFFFF;
 border-radius: 30rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}
.header_txt{
 color:#fff;
 font-size:26rpx;
 font-weight: bold;
}
.header_center{
 margin: 30rpx 90rpx 37rpx 90rpx;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.center_item{
 display: flex;
 align-items: cneter;
 justify-content: cneter;
 color:#979DA8;
 font-size:26rpx;
}
.item_img{
 margin: 0 13rpx 0 0;
 width:29rpx;
 height: 36rpx;
 box-sizing: border-box;
}
.item_img image{
 width:100%;
 height: 100%;
}
.icon_box{
display: flex;
 align-items: center;
justify-content: space-between;
margin: 0 100rpx 20rpx 100rpx;
text-align: center;
}
.icon_cell{
 color:#979DA8;
 font-size: 26rpx;
}
.cell_img{
 width:84rpx;
 height: 84rpx;
 border-radius: 50%;
 overflow: hidden;
}
.cell_img image{
width:100%;
height: 100%;
border-radius: 50%;
}
.adv_box{
 display: flex;
 justify-items: center;
 border:1rpx solid #EBEBEB;
 margin: 37rpx 0 27rpx 0;
 color:#53555C;
 font-size:22rpx;
 padding:0 40rpx;
 height: 49rpx;
 line-height: 49rpx;
}
.adv_left{
 color:#7BD64D;
 margin: 0 10rpx 0 0;
}
.app{
 width:213rpx;
 height: 213rpx;
 line-height: 213rpx;
 margin: 0 auto 20rpx auto;
 color:#fff;
 font-size:36rpx;
 text-align: center;
 border-radius: 50%;
 background: #8DE063;
 box-shadow: #D5D5DD 0 0 10rpx 5rpx;
}
.in_cell{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 color:#252629;
 font-size:26rpx;
}
.in_cellimg{
 width:100rpx;
 height: 100rpx;
 border-radius: 50%;
 overflow: hidden;
 margin: 0 0 10rpx 0;
}
.in_cellimg image{
 width:100%;
 height: 100%;
 display: block;
}
.waveWrapper {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    bottom:-1rpx;
    height: 100rpx;
    z-index:300;
}
.waveWrapper image {
    width: 100%;
    height: 100%;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    bottom: -1px;
    height: 100%;
}

.bgTop {
    z-index: 15;
    opacity: 0.5;
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}

.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    bottom: 0;
    transform-origin: center bottom;
}

.waveAnimation .waveTop {
    animation: move-wave 10s linear infinite;
   
}

.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}

.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}
@-webkit-keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(0.75);
    }

    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55);
    }

    100% {
        transform: translateX(-50%) translateZ(0) scaleY(0.75);
    }
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(0.75);
    }

    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55);
    }

    100% {
        transform: translateX(-50%) translateZ(0) scaleY(0.75);
    }
}
swiper{
 height: auto;
 width:500rpx;
}