/* nova-werun/components/home/index.wxss */
.all{
width: 100vw;
background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
font-family: MicrosoftYaHei;
color: #333333;
display: flex;
flex-direction: column;
align-items: center;
.navbox{
width: 100vw;
display: flex;
align-items: flex-end;
.nav{
width: 100%;
display: flex;
justify-content: center;
position: relative;
margin-bottom: 20rpx;
height: 40rpx;
.nav-addbox{
position: absolute;
left: 32rpx;
top: 8rpx;
font-size: 28rpx;
height: 40rpx;
color: white;
display: flex;
.nav-add{
margin-left: 4rpx;
}
}
.nav-title{
height: 36rpx;
font-family: MicrosoftYaHei;
font-size: 36rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
}
}
}
.sco{
width: 100%;
padding-left: 33rpx;
padding-right: 33rpx;
overflow-y: scroll;
.topbox{
width: 686rpx;
height: 81rpx;
display: flex;
background-color: #4F9AF7;
padding-left: 20rpx;
padding-right: 20rpx;
border-radius: 15rpx;
padding-top: 20rpx;
.top-tex{
font-size: 26rpx;
height: 34rpx;
color: white;
border-left: 8rpx solid white;
padding-left: 10rpx;
display: flex;
align-items: center;
}
.top-tex2{
width: 200rpx;
height: 34rpx;
display: flex;
align-items: center;
margin-left: auto;
font-size: 26rpx;
.top-tex2-tex{
height: 34rpx;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
padding-left: 4rpx;
padding-right: 4rpx;
margin-left: 4rpx;
margin-right: 4rpx;
}
}
}
.clockinbox{
width: 686rpx;
height: 331rpx;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/6p04ra030721696.png);
background-position: center; /* 背景图片居中 */
background-size: cover; /* 背景图片覆盖整个元素 */
background-repeat: no-repeat; /* 不重复背景图片 */
margin-top: -16rpx;
.clockinbox2{
width: 100%;
display: flex;
justify-content: center;
.runbox{
width: 217rpx;
height: 217rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
.run{
width: 195rpx;
height: 195rpx;
border-radius: 50%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: #9BC5F9;
.tody-steps{
font-size: 24rpx;
color: white;
}
.step-num{
font-size: 50rpx;
color: #333333;
}
.objective{
width: 100%;
height: 50rpx;
align-items: center;
justify-content: center;
display: flex;
margin-top: 20rpx;
image{
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.ob-num{
font-size: 28rpx;
}
}
}
}
.objbox{
height: 217rpx;
display: flex;
justify-content: center;
flex-direction: column;
margin-left: 120rpx;
.obj1{
height: 74rpx;
border-left: 8rpx solid #0178EE;
padding-left: 10rpx;
.boj1-ti{
font-size: 24rpx;
color: #0178EE;
}
.obj1-numbox{
height: 40rpx;
display: flex;
font-size: 36rpx;
align-items: center;
margin-top: 4rpx;
image{
width: 32rpx;
height: 32rpx;
margin-right: 15rpx;
}
}
}
.obj2{
font-size: 14rpx;
margin-left: 20rpx;
margin-top: 4rpx;
}
}
}
.today-check{
width: 142rpx;
height: 43rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
margin-top: 10rpx;
border-radius: 40rpx;
color: white;
background-color: #69A9F8;
}
}
.a{
width: 686rpx;
border-radius: 15rpx;
height: 55rpx;
margin-top: 24rpx;
}
.typebox{
width: 686rpx;
height: 153rpx;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 26rpx;
background-color: white;
border-radius: 15rpx;
.column{
height: 153rpx;
display: flex;
flex-direction: column; /* 使内容垂直排列 */
align-items: center; /* 水平居中对齐 */
justify-content: center;
image{
width: 74rpx;
height: 82rpx;
}
.item-text{
font-size: 26rpx;
}
}
}
.rankbox{
width: 686rpx;
background-color: white;
min-height: 618rpx;
margin-top:30rpx;
display: flex;
align-items: center;
flex-direction: column;
border-radius: 15rpx;
margin-bottom: 40rpx;
.ran-top{
width: 100%;
height: 120rpx;
padding-right: 16rpx;
padding-left: 16rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #E0E0E0;
.top-til{
height: 34rpx;
font-size: 30rpx;
padding-left: 14rpx;
border-left: solid 8rpx #58A5FE;
display: flex;
align-items: center;
justify-content: center;
}
.top-box{
display: flex;
margin-left: auto;
font-size: 20rpx;
justify-content: center;
align-items: center;
image{
width: 20rpx;
height: 18rpx;
margin-left: 4rpx;
}
}
}
.cardbox{
width: 100%;
height: 120rpx;
padding-right: 16rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #E0E0E0;
.paiming{
width: 37rpx;
height: 37rpx;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
.image1{
width: 37rpx;
height: 37rpx;
margin-left: 6rpx;
background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/n5b6q2120548337.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
}
.image2{
width: 37rpx;
height: 37rpx;
margin-left: 6rpx;
background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/d61fa4120559975.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
}
.image3{
width: 37rpx;
height: 37rpx;
margin-left: 6rpx;
background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/2c1osg120613150.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
}
.avarter{
width: 82rpx;
height: 82rpx;
border-radius: 50%;
margin-left: 10rpx;
}
.name{
font-size: 24rpx;
margin-left: 20rpx;
.name2{
font-size: 18rpx;
}
}
.num{
font-size: 32rpx;
color: #00B108;
margin-left: auto;
}
.good{
margin-left: 20rpx;
font-size: 22rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.good-num{
font-size: 22rpx;
}
image{
width: 34rpx;
height: 34rpx;
}
}
}
}
}
}