152 lines
3.5 KiB
Plaintext
152 lines
3.5 KiB
Plaintext
page{
|
|
background-color:var(--main-color);
|
|
}
|
|
.scroll-view{
|
|
height:100vh;
|
|
}
|
|
|
|
.logo-area{
|
|
background-color: rgba(237, 181, 0, 1);
|
|
border-radius: 50%;
|
|
width:132rpx;height:132rpx;
|
|
margin:70rpx auto 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.logo-area .logo{
|
|
width:84rpx;height:84rpx;
|
|
}
|
|
.share-title{
|
|
width:512rpx;
|
|
margin:36rpx auto 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.main{
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
margin:40rpx 24rpx;
|
|
padding:40rpx 24rpx;
|
|
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.main .head{
|
|
font-size: 36rpx;
|
|
display: flex;
|
|
gap: 24rpx;
|
|
align-items: center;
|
|
color: var(--main-color);
|
|
}
|
|
.main .head::before{
|
|
content: '';
|
|
background-color: var(--main-color);
|
|
border-radius: 18rpx;
|
|
width:8rpx;height:32rpx;
|
|
}
|
|
|
|
.main .m-item{
|
|
display: flex;
|
|
align-items: center;
|
|
margin:50rpx 0 60rpx 0;
|
|
}
|
|
.main .m-item.small{
|
|
margin:30rpx 0;
|
|
}
|
|
.main .m-item .left{
|
|
width:70rpx;height:70rpx;
|
|
background-color: rgba(255, 246, 217, 1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.main .m-item.small .left{
|
|
width:52rpx;height:52rpx;
|
|
}
|
|
.main .m-item .right{
|
|
margin-left:24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
.main .m-item .icon{
|
|
width:40rpx;height:40rpx;
|
|
}
|
|
.main .m-item .title{
|
|
font-weight: 500;
|
|
}
|
|
.main .m-item .sub-title{
|
|
font-size:26rpx;
|
|
color: rgba(85, 85, 85, 1);
|
|
}
|
|
.main .m-item .point{
|
|
color: var(--main-color);
|
|
font-weight: 600;
|
|
margin:0 12rpx;
|
|
}
|
|
|
|
.spliter{
|
|
position: relative;
|
|
margin:64rpx 0 60rpx 0;
|
|
}
|
|
.spliter::before{
|
|
content:'积分说明';
|
|
position: absolute;
|
|
top:-14rpx;left:50%;
|
|
margin-left: -78rpx;
|
|
padding:0 22rpx;
|
|
font-size: 28rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.btn-share{
|
|
border-radius: 60rpx;
|
|
margin:60rpx 70rpx 0 70rpx!important;
|
|
line-height: 1;
|
|
}
|
|
|
|
.step-area{
|
|
background-color: rgba(255, 246, 217, 1);
|
|
border-radius: 18rpx;
|
|
padding:30rpx 24rpx 34rpx 24rpx;
|
|
margin-top:60rpx;
|
|
}
|
|
.step-area .title{
|
|
color: var(--main-color);
|
|
text-align: center;
|
|
}
|
|
.step-area .steps{
|
|
display: flex;
|
|
font-size: 22rpx;
|
|
margin-top:34rpx;
|
|
}
|
|
.step-area .steps .item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
flex: 1;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.step-area .steps .icon{
|
|
width:60rpx;height:60rpx;
|
|
background-color: rgba(237, 181, 0, 1);
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.step-area .steps .item::after{
|
|
background:transparent url(data:image/svg+xml,%3Csvg%20t%3D%221743574928938%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20p-id%3D%2245741%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M456.99072%20608.60416l-272.9984-28.73344a68.23936%2068.23936%200%200%201%200-135.74144l272.9984-28.73344A61.44%2061.44%200%200%200%20512%20354.28352v-132.15744C512%20201.23648%20529.73568%20184.32%20551.60832%20184.32c10.15808%200%2019.94752%203.72736%2027.32032%2010.4448L882.688%20470.91712a54.90688%2054.90688%200%200%201%200%2082.1248L578.92864%20829.25568a40.96%2040.96%200%200%201-56.0128-1.31072A36.90496%2036.90496%200%200%201%20512%20801.87392V669.696a61.44%2061.44%200%200%200-55.00928-61.11232z%22%20p-id%3D%2245742%22%20fill%3D%22%23EDB500%22%3E%3C/path%3E%3C/svg%3E);
|
|
content: '';
|
|
position: absolute;
|
|
width:40rpx;height:40rpx;
|
|
right: -20rpx;top:10rpx;
|
|
background-size: 100%;
|
|
}
|
|
.step-area .steps .item:last-child::after{
|
|
display: none;
|
|
} |