红绿项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

853 lines
14 KiB

.content{
position: relative;
}
.item{
margin-top: 60rpx;
/* height: 380rpx;
overflow-y: scroll;
overflow-x: hidden; */
}
.img2{
width: 60rpx;
height: 60rpx;
}
.p2{
font-size: 28rpx;
color: #303133FF;
margin-left: 20rpx;
}
.p1{
font-size: 28rpx;
color: #606266FF;
}
.colseKefu{
position: absolute;
right: 36rpx;
top: 36rpx;
width: 36rpx;
height: 36rpx;
}
.img1{
display: block;
margin: 0 auto;
width: 108rpx;
height: 108rpx;
}
.title{
text-transform: capitalize;
font-size: 28rpx;
color: #954DE3FF;
text-align: center;
}
.title p{
margin-top: 18rpx;
}
.body_item{
display: flex;
align-items: center;
padding-bottom: 40rpx;
}
.body_item_info{
font-size: 28rpx;
color: #606266;
text-transform: capitalize;
margin-top: 28rpx;
margin-bottom: 20rpx;
}
.tc{
width: 600rpx;
background-color: #fff;
border-radius: 24rpx;
padding-top: 48rpx;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 999;
}
.tc_body{
padding: 48rpx 36rpx;
padding-bottom: 0rpx;
position: relative;
}
.tc_body::before{
content: '';
position: absolute;
top: 20rpx;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 2rpx;
background-color: #EDEFF2FF;
}
.my-cont{
width: 180rpx;
height: 180rpx;
position: fixed;
top: 75%;
right: 0;
}
.my-cont image{
width: 100%;
height: 100%;
}
.flex{
align-items: center;
}
.flex .my-cont{
margin-left: auto;
}
.rules-btn{
font-size: 24rpx;
color: #FFFFFF;
text-transform: capitalize;
position: relative;
padding-right: 70rpx;
}
.rules-btn::before{
content: '';
width: 24rpx;
height: 24rpx;
background: url(../../../static/home/top_icon_ins.png)no-repeat;
position: absolute;
right: 36rpx;
top: 50%;
transform: translateY(-50%);
}
.bg_white{
position: relative;
top: -36rpx;
background-color: #fff;
border-radius: 48rpx 48rpx 0 0;
}
.gameNav{
padding: 0 36rpx;
display: flex;
height: 96rpx;
justify-content: space-around;
font-size: 28rpx;
color: #909399;
line-height: 96rpx;
align-items: center;
}
.flex{
display: flex;
justify-content: space-around;
align-items: center;
}
.gameNav-item{
position: relative;
}
.gameNav-item::after{
content: '';
width: 0rpx;
height: 4rpx;
background: #954DE3;
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.active{
color: #954DE3;
}
.active::after{
width: 80rpx;
}
.donna2{
background-color: #3F0380;
margin-bottom: 16rpx;
}
.don_con{
border-radius: 16rpx;
height: 160rpx;
padding: 24rpx 24rpx;
justify-content: space-between;
}
.follow_xiazhu_con{
background-color: #34026B;
border-radius: 48rpx 48rpx 0 0;
padding: 0 36rpx;
position: absolute;
left: 0;
bottom: 0;
z-index: 9999;
}
.tc{
width: 600rpx;
background-color: #fff;
border-radius: 24rpx;
padding: 0 36rpx;
padding-top: 48rpx;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.tc_body{
padding: 48rpx 0;
}
.body_item_info{
font-size: 28rpx;
color: #606266;
text-transform: capitalize;
margin-bottom: 20rpx;
}
.body_item_info image{
width: 40rpx;
height: 40rpx;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.cancel{
width: 50%;
text-align: center;
text-transform: capitalize;
font-size: 32rpx;
line-height: 108rpx;
}
.title{
text-transform: capitalize;
font-size: 36rpx;
color: #303133;
text-align: center;
}
.xia_head{
height: 72rpx;
position: relative;
}
.tiao{
width: 32rpx;
height: 6rpx;
border-radius: 4rpx;
background-color: rgba(255,255,255,.1);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 24rpx;
}
.xia_item{
width: 678rpx;
padding: 36rpx 0;
}
.info{
justify-content: space-between;
}
.info .imgcon{
width: 76rpx;
height: 76rpx;
}
.info .imgcon image{
width: 100%;
height: 100%;
}
.doname{
margin-left: 24rpx;
}
.doname .name{
color: #fff;
font-size: 32rpx;
}
.doname .win{
width: 124rpx;
padding: 4rpx 8rpx;
line-height: 32rpx;
color: #fff;
font-size: 20rpx;
background-color: #491C7A;
border-radius: 8rpx;
margin-top: 6rpx;
}
.recharge{
position: relative;
padding-left: 50rpx;
}
.recharge image{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 0;
bottom: 0;
}
.recharge i{
font-style: normal;
margin-right: 8rpx;
}
.recharge span{
color: #fff;
font-size: 32rpx;
}
.follow{
width: 142rpx;
line-height: 60rpx;
background-color: #954DE3;
color: #fff;
font-size: 24rpx;
border-radius: 16rpx;
position: relative;
text-align: center;
padding-right: 10rpx;
}
.follow::after{
content: '';
width: 24rpx;
height: 24rpx;
background: url(../../../static/color/[email protected])no-repeat;
background-size: contain;
position: absolute;
right: 10rpx;
top: 50%;
transform: translateY(-50%) rotate(90deg);
}
.list{
border-top: 2rpx solid #34026B;
justify-content: space-between;
flex-wrap: wrap;
overflow: hidden;
max-height: 0;
transition: .5s all;
padding: 0 24rpx;
}
.list_con{
align-items: center;
padding: 26rpx 0;
}
.list_con .img1{
width: 32rpx;
height: 32rpx;
margin-left: 16rpx;
}
.num{
font-size: 24rpx;
color: #fff;
}
.instit{
text-transform: capitalize;
font-size: 24rpx;
margin-left: 16rpx;
}
.red{
color: #F25B5B !important;
}
.green{
color: #00B977;
}
.donna2.on .list,.follow:hover .list{
max-height: 1000rpx;
}
.donna2.on .follow::after{
transform: translateY(-50%) rotate(
270deg
);
padding: 0 !important;
}
.xiazhu{
background-color: #fff;
position: fixed;
bottom: 0;
padding-top: 48rpx;
width: 100%;
border-radius: 48rpx 48rpx 0 0;
z-index: 9999;
}
.xiazhu .top{
padding: 0 40rpx;
}
.xiazhu .title{
font-size: 36rpx;
text-align: center;
color: #303133FF;
text-transform: capitalize;
}
.contract{
margin-top: 80rpx;
}
.xname{
color: #606266FF;
font-size: 28rpx;
}
.contract .numcon{
display: flex;
}
.contract .numcon .num{
padding: 16rpx 24rpx;
border: 2rpx solid #EDEFF2FF;
color: #303133FF;
font-size: 28rpx;
text-align: center;
}
.active{
border-color: #954DE3FF !important;
}
.bujin,.TotalMoney,.agree,.btn_con{
margin-top: 60rpx;
}
.agree{
color: #606266FF;
font-size: 28rpx;
text-transform: capitalize;
display: flex;
align-items: center;
}
.agree .img{
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
.agree .s2{
color: #954DE3FF;
}
.agree .s1{
margin-right:10rpx ;
}
.btn_con .btn{
line-height: 108rpx;
text-align: center;
color: #303133FF;
font-size: 32rpx;
background-color: #F5F7FAFF;
text-transform: capitalize;
}
.btn_con .btn1{
width: 240rpx;
}
.btn_con .btn2{
width: 510rpx;
background-color: #954DE3FF;
opacity: .5;
color: #fff;
}
.on{
opacity: 1 !important;
}
.timeCon{
margin-top: 38rpx;
}
.time,.count{
color: #303133;
font-size: 36rpx;
}
.perCoun,.timeCon{
align-items: center;
justify-content: space-between;
}
.period{
display: flex;
align-items: center;
}
.period span{
margin-left: 12rpx;
}
.period,.coDown{
text-transform: capitalize;
color: #909399;
font-size: 28rpx;
}
.perCon{
padding-top: 24rpx;
padding-bottom: 48rpx;
}
.gameContent{
padding: 0 36rpx;
}
.flex{
display: flex;
align-items: center;
}
.gNum{
line-height: 96rpx;
text-align: center;
}
.ga{
font-size: 28rpx;
color: #909399;
width: 250rpx;
position: relative;
}
.ga::before{
content: '';
width: 0%;
height: 4rpx;
background: #954DE3;
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
}
.gaactive{
color: #954DE3FF !important;
}
.gaactive::before{
width: 80rpx;
}
.icon-con{
justify-content: space-between;
}
.ico{
width: 210rpx;
height: 80rpx;
border: 2rpx solid #EDEFF2;
border-radius: 16rpx;
position: relative;
}
.ico image{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.multiple-con{
justify-content: space-between;
flex-wrap: wrap;
margin-top: 24rpx;
}
.mul-item{
width: 112rpx;
line-height: 80rpx;
color: #fff;
font-size: 32rpx;
border-radius: 16rpx;
text-align: center;
}
.bg_green{
background-color: #00B977;
}
.bg_red{
background-color: #F25B5B;
}
.bg_jb1{
background-image: linear-gradient(-30deg, #954DE3 50% , #F25B5B 50% );
}
.bg_jb2{
background-image: linear-gradient(-30deg,#954DE3 50% , #00B977 50% );
}
.donna{
background-color: #34026B;
border-radius: 16rpx;
height: 160rpx;
padding: 24rpx 24rpx;
margin-top: 48rpx;
justify-content: space-between;
}
.info{
justify-content: space-between;
}
.info .imgcon{
width: 76rpx;
height: 76rpx;
}
.info .imgcon image{
width: 100%;
height: 100%;
}
.doname{
margin-left: 24rpx;
}
.doname .name{
color: #fff;
font-size: 32rpx;
}
.doname .win{
width: 124rpx;
padding: 4rpx 8rpx;
line-height: 32rpx;
color: #fff;
font-size: 20rpx;
background-color: #491C7A;
border-radius: 8rpx;
margin-top: 6rpx;
}
.recharge{
position: relative;
padding-left: 50rpx;
}
.recharge image{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 0;
bottom: 0;
}
.recharge i{
font-style: normal;
margin-right: 8rpx;
}
.recharge span{
color: #fff;
font-size: 32rpx;
}
.follow{
width: 142rpx;
line-height: 60rpx;
background-color: #954DE3;
color: #fff;
font-size: 24rpx;
border-radius: 16rpx;
position: relative;
text-align: center;
padding-right: 10rpx;
}
.follow::after{
content: '';
width: 24rpx;
height: 24rpx;
background: url(../../../static/color/[email protected])no-repeat;
background-size: contain;
position: absolute;
right: 12rpx;
top: 50%;
transform: translateY(-50%);
}
.gNum{
line-height: 96rpx;
text-align: center;
}
.ga{
font-size: 28rpx;
color: #909399;
width: 250rpx;
position: relative;
}
.ga::before{
content: '';
width: 0%;
height: 4rpx;
background: #954DE3;
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
}
.gaactive{
color: #954DE3FF !important;
}
.gaactive::before{
width: 80rpx;
}
.timeCon{
margin-top: 38rpx;
}
.time,.count{
color: #303133;
font-size: 36rpx;
}
.perCoun,.timeCon{
align-items: center;
justify-content: space-between;
}
.period,.coDown{
text-transform: capitalize;
color: #909399;
font-size: 28rpx;
}
.perCon{
padding-top: 24rpx;
padding-bottom: 48rpx;
}
.gameContent{
padding: 0 36rpx;
}
.flex{
display: flex;
align-items: center;
}
.icon-con{
justify-content: space-between;
}
.ico{
width: 210rpx;
height: 80rpx;
border: 2rpx solid #EDEFF2;
border-radius: 16rpx;
position: relative;
}
.ico image{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.multiple-con{
justify-content: space-between;
flex-wrap: wrap;
margin-top: 24rpx;
}
.mul-item{
width: 112rpx;
line-height: 80rpx;
color: #fff;
font-size: 32rpx;
border-radius: 16rpx;
text-align: center;
}
.bg_ash{
background-color: #E0E0E0;
}
.bg_green{
background-color: #00B977;
}
.bg_red{
background-color: #F25B5B;
}
.bg_jb1{
background-image: linear-gradient(-30deg, #954DE3 50% , #F25B5B 50% );
}
.bg_jb2{
background-image: linear-gradient(-30deg,#954DE3 50% , #00B977 50% );
}
.donna{
background-color: #34026B;
border-radius: 16rpx;
height: 160rpx;
padding: 24rpx 24rpx;
margin-top: 48rpx;
justify-content: space-between;
}
.info{
justify-content: space-between;
}
.info .imgcon{
width: 76rpx;
height: 76rpx;
}
.info .imgcon image{
width: 100%;
height: 100%;
}
.doname{
margin-left: 24rpx;
}
.doname .name{
color: #fff;
font-size: 32rpx;
}
.doname .win{
width: 124rpx;
padding: 4rpx 8rpx;
line-height: 32rpx;
color: #fff;
font-size: 20rpx;
background-color: #491C7A;
border-radius: 8rpx;
margin-top: 6rpx;
}
.recharge{
position: relative;
padding-left: 50rpx;
}
.recharge image{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 0;
bottom: 0;
}
.recharge i{
font-style: normal;
margin-right: 8rpx;
}
.recharge span{
color: #fff;
font-size: 32rpx;
}
.follow{
width: 142rpx;
line-height: 60rpx;
background-color: #954DE3;
color: #fff;
font-size: 24rpx;
border-radius: 16rpx;
position: relative;
text-align: center;
padding-right: 10rpx;
}
.follow::after{
content: '';
width: 24rpx;
height: 24rpx;
background: url(../../../static/color/[email protected])no-repeat;
background-size: contain;
position: absolute;
right: 12rpx;
top: 50%;
transform: translateY(-50%);
}
.sul{
text-align: center;
}
.ok{
color: #954DE3FF;
line-height: 108rpx;
border-top: 2rpx solid #F7F9FCFF;
font-size: 32rpx;
}
.color_icon{
width: 36rpx;
height: 36rpx;
}