782 lines
13 KiB
Plaintext
782 lines
13 KiB
Plaintext
page {
|
|
background-color: #f8f8fa;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
/* 头部 */
|
|
/* 双节 */
|
|
.Usetop {
|
|
width: 100%;
|
|
position: relative;
|
|
padding-top: 52%;
|
|
}
|
|
|
|
/* .Usetop {
|
|
width: 100%;
|
|
position: relative;
|
|
padding-top: 48%;
|
|
} */
|
|
|
|
.Usetop-back,
|
|
.Usetop-range {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.Usetop-back {
|
|
z-index: 1;
|
|
}
|
|
|
|
.Usetop-range {
|
|
z-index: 2;
|
|
}
|
|
|
|
.Usetop-see {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 3;
|
|
bottom: -30rpx;
|
|
display: flex;
|
|
padding: 0 15rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.Usetop-see-label {
|
|
flex: 3;
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
border-radius: 60rpx;
|
|
margin: 0 15rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.Usetop-see-icon {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin: 17rpx 10rpx 0 0;
|
|
}
|
|
|
|
.Usetop-see-name {
|
|
color: #404145;
|
|
}
|
|
|
|
.Usetop-see-name text {
|
|
font-size: 600;
|
|
color: #6c79fb;
|
|
}
|
|
|
|
.Usetop-cont {
|
|
padding: 40rpx 0 0 50rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.Usetop-head {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
border: 6rpx solid #ffe0a8;
|
|
position: relative;
|
|
}
|
|
|
|
.Usetop-head.active {
|
|
border-color: rgb(223, 223, 223);
|
|
}
|
|
|
|
.Usetop-head-avatar {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* 双节 */
|
|
.userTop-head-frame {
|
|
position: absolute;
|
|
left: -22rpx;
|
|
top: -26rpx;
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
z-index: 9;
|
|
}
|
|
|
|
.Usetop-head-ancrown {
|
|
position: absolute;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
right: 0;
|
|
top: -34rpx;
|
|
}
|
|
|
|
.Usetop-text {
|
|
width: calc(100% - 110rpx);
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
line-height: 100rpx;
|
|
font-size: 34rpx;
|
|
padding-top: 10rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.Usetop-text image {
|
|
width: 110rpx;
|
|
margin: 34rpx 0 0 15rpx;
|
|
}
|
|
|
|
/* 物质含量 */
|
|
.matter {
|
|
padding: 50rpx 30rpx 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.matter-center {
|
|
width: 42%;
|
|
height: auto;
|
|
}
|
|
|
|
.matter-text {
|
|
width: 29%;
|
|
font-size: 24rpx;
|
|
padding-top: 60rpx;
|
|
}
|
|
|
|
.matter-text-label {
|
|
position: relative;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.matter-text-label::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: calc(50% - 7rpx);
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
background-color: #6970fc;
|
|
border: 4rpx solid #dde0ff;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.matter-text-label text {
|
|
font-size: 22rpx;
|
|
color: #ababab;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.matter-left {
|
|
text-align: right;
|
|
}
|
|
|
|
.matter-left .matter-text-label {
|
|
padding-right: 30rpx;
|
|
}
|
|
|
|
.matter-right .matter-text-label {
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.matter-left .matter-text-label::after {
|
|
right: 0;
|
|
}
|
|
|
|
.matter-right .matter-text-label::after {
|
|
left: 0;
|
|
}
|
|
|
|
/* 会员 */
|
|
.member {
|
|
margin: 0 30rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding-top: 28%;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.member-image {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.member-text {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 50rpx 40rpx 0 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.member-text-time {
|
|
display: flex;
|
|
color: #6059e1;
|
|
margin-top: 20rpx;
|
|
font-size: 22rpx;
|
|
opacity: .7;
|
|
}
|
|
|
|
.member-text-time text {
|
|
flex: 1;
|
|
}
|
|
|
|
.member-text-top {
|
|
display: flex;
|
|
}
|
|
|
|
.member-text-top-icon {
|
|
width: 35rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.member-text-top-title {
|
|
width: 160rpx;
|
|
}
|
|
|
|
.member-text-tips {
|
|
color: #c1bbeb;
|
|
font-size: 24rpx;
|
|
margin-top: 25rpx;
|
|
}
|
|
|
|
.member-text-name {
|
|
display: inline-block;
|
|
padding-right: 10rpx;
|
|
}
|
|
|
|
.member-text-more {
|
|
display: inline-block;
|
|
}
|
|
|
|
.member-text-tips text {
|
|
color: #6059e1;
|
|
}
|
|
|
|
.member-text-tips image {
|
|
width: 22rpx;
|
|
vertical-align: -3rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
|
|
/* 入口 */
|
|
.entry {
|
|
padding: 30rpx 15rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.entry-label {
|
|
flex: 2;
|
|
margin: 0 15rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
padding-top: 30%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.entry-label-img,
|
|
.entry-label-title {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.entry-label-title {
|
|
z-index: 9;
|
|
padding: 25rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.entry-label-title text {
|
|
display: block;
|
|
}
|
|
|
|
.entry-label-english {
|
|
text-transform: uppercase;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.entry-collect .entry-label-title text {
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.entry-label-more {
|
|
font-size: 25rpx;
|
|
color: #999999;
|
|
margin-top: 30rpx;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.entry-label-more image {
|
|
width: 110rpx;
|
|
display: block;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.entry-goods .entry-label-title {
|
|
color: #ffffff;
|
|
text-shadow: 0 0 8rpx rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.entry-goods-icon {
|
|
width: 100rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.entry-goods-img {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 15rpx;
|
|
width: 145rpx;
|
|
animation: rot 3s steps(28) infinite;
|
|
}
|
|
|
|
@keyframes rot {
|
|
0%,
|
|
65% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
70% {
|
|
-webkit-transform: rotate(4deg);
|
|
transform: rotate(4deg);
|
|
}
|
|
75% {
|
|
-webkit-transform: rotate(-4deg);
|
|
transform: rotate(-4deg);
|
|
}
|
|
80% {
|
|
-webkit-transform: rotate(4deg);
|
|
transform: rotate(4deg);
|
|
}
|
|
85% {
|
|
-webkit-transform: rotate(-4deg);
|
|
transform: rotate(-4deg);
|
|
}
|
|
90% {
|
|
-webkit-transform: rotate(4deg);
|
|
transform: rotate(4deg);
|
|
}
|
|
95% {
|
|
-webkit-transform: rotate(-4deg);
|
|
transform: rotate(-4deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rot {
|
|
0%,
|
|
65% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
70% {
|
|
-webkit-transform: rotate(4deg);
|
|
transform: rotate(4deg);
|
|
}
|
|
75% {
|
|
-webkit-transform: rotate(-4deg);
|
|
transform: rotate(-4deg);
|
|
}
|
|
80% {
|
|
-webkit-transform: rotate(4deg);
|
|
transform: rotate(4deg);
|
|
}
|
|
85% {
|
|
-webkit-transform: rotate(-4deg);
|
|
transform: rotate(-4deg);
|
|
}
|
|
90% {
|
|
-webkit-transform: rotate(4deg);
|
|
transform: rotate(4deg);
|
|
}
|
|
95% {
|
|
-webkit-transform: rotate(-4deg);
|
|
transform: rotate(-4deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 每日任务 */
|
|
.task {
|
|
padding: 0 30rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.taskCont {
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
padding: 0 5rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.taskCont-tab {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
line-height: 100rpx;
|
|
height: 100rpx;
|
|
color: #585858;
|
|
padding-left: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.taskCont-tab-label {
|
|
flex: 4;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.taskCont-tab-label text {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
z-index: 9;
|
|
}
|
|
|
|
.taskCont-tab-label::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 15%;
|
|
bottom: 24rpx;
|
|
background-image: linear-gradient(to right,#ffffff, #ffffff);
|
|
width: 70%;
|
|
height: 16rpx;
|
|
border-radius: 30rpx;
|
|
z-index: 0;
|
|
}
|
|
|
|
.taskCont-tab-label.active::after {
|
|
background-image: linear-gradient(to right,#e2e4fe, #ffffff);
|
|
}
|
|
|
|
.taskCont-tab-label.active {
|
|
color: #000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.taskCont-list {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.taskCont-item {
|
|
display: flex;
|
|
margin-bottom: 50rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.taskCont-item:last-child {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.taskCont-item-icon {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.taskCont-item-icon image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.taskCont-item-text {
|
|
width: calc(100% - 200rpx);
|
|
}
|
|
|
|
.taskCont-item-title {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.taskCont-item-tips {
|
|
color: #949494;
|
|
font-size: 24rpx;
|
|
font-weight: 300;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.taskCont-item-tips text {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.taskCont-item-go {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.taskCont-item-number {
|
|
font-size: 22rpx;
|
|
color: #afafaf;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.taskCont-item-number.active {
|
|
color: #d8d8d8;
|
|
}
|
|
|
|
.taskCont-item-more {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
.taskCont-no {
|
|
text-align: center;
|
|
font-size: 25rpx;
|
|
color: #999;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.taskCont-no image {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
display: block;
|
|
margin: 0 auto 10rpx;
|
|
}
|
|
|
|
/* 右侧导航 */
|
|
.rightBack {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 98;
|
|
background-color: transparent;
|
|
display: none;
|
|
}
|
|
|
|
.rightBack.active {
|
|
display: block;
|
|
}
|
|
|
|
.rightNav {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: auto;
|
|
height: 100%;
|
|
z-index: 99;
|
|
display: flex;
|
|
}
|
|
|
|
.rightIcon {
|
|
margin-top: 400rpx;
|
|
width: 80rpx;
|
|
display: block;
|
|
margin-right: -2rpx;
|
|
}
|
|
|
|
.rightCont {
|
|
background-color: #f9f9f9;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
width: 0;
|
|
transition: .4s;
|
|
}
|
|
|
|
.rightNav.active .rightCont {
|
|
width: auto;
|
|
}
|
|
|
|
.rightCont-text {
|
|
padding: 30rpx 20rpx 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rightCont-text-item {
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 30rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.rightCont-text-number {
|
|
font-size: 20rpx;
|
|
right: 15rpx;
|
|
top: 15rpx;
|
|
background-color: #6c79fb;
|
|
color: #fff;
|
|
display: inline-block;
|
|
position: absolute;
|
|
border-radius: 50rpx;
|
|
padding: 0 10rpx;
|
|
transform: scale(.9);
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.rightCont-text-name {
|
|
font-size: 26rpx;
|
|
background-color: transparent;
|
|
width: auto !important;
|
|
margin-bottom: 5rpx;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
}
|
|
|
|
.rightCont-text-tips {
|
|
font-size: 22rpx;
|
|
color: #6f6f6f;
|
|
}
|
|
|
|
.rightCont-text-icon {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
|
|
.rightCont-text-top {
|
|
text-align: right;
|
|
margin-bottom: 30rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.rightCont-top-img {
|
|
width: 120rpx;
|
|
}
|
|
|
|
.rightCont-top-name {
|
|
color: #d5a56d;
|
|
font-size: 28rpx;
|
|
height: 44rpx;
|
|
position: relative;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
.rightCont-top-name::after {
|
|
position: absolute;
|
|
content: '';
|
|
right: 0;
|
|
bottom: 6rpx;
|
|
background-image: linear-gradient(to right,#f5d1a9, #ffffff);
|
|
width: 120rpx;
|
|
height: 14rpx;
|
|
border-radius: 30rpx;
|
|
z-index: 0;
|
|
display: none;
|
|
}
|
|
|
|
.rightNav.active .rightCont-top-name::after {
|
|
display: block;
|
|
}
|
|
|
|
.rightCont-top-name text {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.rightCont-top-text {
|
|
font-size: 22rpx;
|
|
color: #9f8b73;
|
|
}
|
|
|
|
/* 弹出层提示 */
|
|
.publicBack {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
z-index: 99;
|
|
}
|
|
|
|
.publicPop {
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 240px;
|
|
margin-left: -120px;
|
|
margin-top: -340rpx;
|
|
position: fixed;
|
|
z-index: 100;
|
|
}
|
|
|
|
.publicPop-cont {
|
|
height: 540rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.publicPop-img {
|
|
width: 70%;
|
|
}
|
|
|
|
.publicPop-text {
|
|
color: #9d9d9d;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.publicPop-text text {
|
|
color: #000000;
|
|
font-size: 40rpx;
|
|
display: block;
|
|
font-weight: 600;
|
|
margin: 20rpx 0 10rpx;
|
|
}
|
|
|
|
.publicPop-btn {
|
|
background-color: #1d37e2;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
line-height: 78rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 30rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.publicPop-close {
|
|
text-align: center;
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
.publicPop-close image {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
} |