index.wxss 5.4 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;
 white-space:nowrap;
 overflow:hidden;
 text-overflow: ellipsis;
 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;
 padding:0 10rpx;
 height: 84rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 background: rgba(235,250,227,1);
 border-radius: 42rpx;
}
.num_inbox{
 /* width: 231rpx; */
 padding:0 10rpx;
 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:#7BD64D;
 font-size:26rpx;
 padding:0 30rpx 0 0;
 border-right:1rpx solid #E6E6E6;
}
.center_item:last-child{
 border-right:none;
}
.item_img{
 margin: 0 13rpx 0 0;
 width:29rpx;
 height: 25rpx;
 box-sizing: border-box;
}
.item_img image{
 width:100%;
 height: 100%;
}
.icon_box{
display: flex;
 align-items: center;
justify-content: space-between;
margin: 0 60rpx 20rpx 60rpx;
text-align: center;
}
.icon_marginbottom{
 margin: 28rpx 60rpx 40rpx 60rpx;
}
.icon_cell{
 position: relative;
 width:120rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 color:#979DA8;
 font-size: 26rpx;
 border:1px #fff solid;
 background: #fff;
}
.icon_cell button{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 z-index:100%;
 opacity: 0;

}
.cell_img{
 width:84rpx;
 height: 84rpx;
 margin: 0 0 20rpx 0;
 overflow: hidden;
}
.cell_img image{
width:100%;
height: 100%;
}
.adv_box{
 display: flex;
 justify-items: center;
 border:1rpx solid #EBEBEB;
 
 color:#53555C;
 font-size:22rpx;
 padding:0 40rpx;
 height: 56rpx;
 line-height: 56rpx;
}
.adv_left{
 color:#7BD64D;
 margin: 0 20rpx 0 0;
}
.app{
 width:213rpx;
 height: 213rpx;
 line-height: 213rpx;
 margin: 0 auto 40rpx 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: -4px;
    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;
}
.indexd_btn{
 display: flex;
 position: relative;
 justify-content: center;
 align-items: center;
 color:#fff;
 font-size: 32rpx;
 background:rgba(141,224,99,1);
box-shadow:0rpx 4rpx 14rpx 0rpx rgba(141,224,99,0.7);
 border:1rpx solid #8DE063;
 border-radius:40rpx;
 margin: 0 auto;
 width: 686rpx;
 height: 80rpx;
}
.indexd_btn button{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0%;
 left:0;
 z-index:1000;
 opacity: 0; 
}
.jieli_btn{
 margin: 24rpx auto 0 auto;
 background: #fff;
 color:#8DE063;
 border:1rpx solid #8DE063;
 box-shadow:none;
}
.void_line{
 background: #F0F0F0;
 height: 16rpx;
}
.index_logoimg{
 margin: 38rpx auto 17rpx auto;
 width:164rpx;
 height: 194rpx;
}
.index_logoimg image{
 width:100%;
 height: 100%;
}
.index_logotxt{
 color:rgba(141,224,99,1);
 font-size:28rpx;
 text-align: center;
 margin: 0 0 28rpx 0;
}