603 lines
15 KiB
SCSS
603 lines
15 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: px2rem(1334);
|
|
background: #fff;
|
|
}
|
|
|
|
.back {
|
|
width: 100%;
|
|
height: px2rem(44);
|
|
line-height: px2rem(44);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
padding-top: px2rem(110);
|
|
padding-bottom: px2rem(22);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(38);
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
background: #FFFFFF;
|
|
|
|
img {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
position: absolute;
|
|
left: px2rem(18);
|
|
// top: px2rem(0);
|
|
}
|
|
|
|
p {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(32);
|
|
color: #313131;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
.tab_box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: px2rem(180);
|
|
padding-bottom: px2rem(20);
|
|
gap: px2rem(180);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: #FFFFFF;
|
|
width: 100%;
|
|
div {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(32);
|
|
color: #AFB1B3;
|
|
line-height: px2rem(44);
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
position: relative;
|
|
.xian {
|
|
width: px2rem(28);
|
|
height: px2rem(8);
|
|
border-radius: px2rem(8);
|
|
background: linear-gradient( 270deg, #E29030 0%, #FCC074 100%);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-20);
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
color: #313131;
|
|
font-size: px2rem(32);
|
|
// width: px2rem(26);
|
|
// height: px2rem(8);
|
|
// background: linear-gradient( 270deg, #E29030 0%, #FCC074 100%);
|
|
// border-radius: px2rem(520);
|
|
// position: absolute;
|
|
}
|
|
}
|
|
|
|
.personal_content {
|
|
margin: px2rem(260) px2rem(32) 0;
|
|
display: none;
|
|
|
|
.user_box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F2F3F7;
|
|
padding: px2rem(24) px2rem(40);
|
|
border-radius: px2rem(16);
|
|
|
|
.avatar {
|
|
img {
|
|
width: px2rem(110);
|
|
height: px2rem(110);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
margin: 0 px2rem(24);
|
|
|
|
.nick {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(34);
|
|
color: #333333;
|
|
line-height: px2rem(48);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.erbanNo {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(28);
|
|
color: #7B7B7D;
|
|
line-height: px2rem(28);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-top: px2rem(2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.diamondNumBox {
|
|
background: #F2F3F7;
|
|
padding: px2rem(24) px2rem(22);
|
|
border-radius: px2rem(16);
|
|
margin-top: px2rem(20);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.My_diamond {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(30);
|
|
color: #313131;
|
|
line-height: px2rem(42);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.Withdraw {
|
|
background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
|
|
border-radius: px2rem(402);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(26);
|
|
color: #FFFFFF;
|
|
line-height: px2rem(36);
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: px2rem(14) px2rem(20);
|
|
}
|
|
}
|
|
|
|
.Enter_account {
|
|
background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
|
|
border-radius: px2rem(16);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(30);
|
|
color: #FFFFFF;
|
|
line-height: px2rem(42);
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: px2rem(12);
|
|
margin-top: px2rem(20);
|
|
}
|
|
}
|
|
|
|
.content_CycleIncome_box {
|
|
margin: px2rem(32) px2rem(32) 0;
|
|
background: #F2F3F7;
|
|
border-radius: px2rem(16);
|
|
padding-bottom: px2rem(28);
|
|
margin-top: px2rem(260);
|
|
.CycleIncome_box {
|
|
.top_title {
|
|
background: linear-gradient(270deg, #F2F3F7 0%, #FFF6C8 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: px2rem(16) px2rem(16) 0px 0px;
|
|
padding-left: px2rem(18);
|
|
padding: px2rem(18) 0 px2rem(18) px2rem(18);
|
|
|
|
.top_left {
|
|
img {
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
}
|
|
}
|
|
|
|
.Cycle_Income {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(30);
|
|
color: #313131;
|
|
line-height: px2rem(42);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin: 0 px2rem(8);
|
|
}
|
|
|
|
.top_right {
|
|
margin-left: auto;
|
|
padding-right: px2rem(18);
|
|
|
|
img {
|
|
width: px2rem(42);
|
|
height: px2rem(42);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.ThisCycle_box,
|
|
.Last_Cycle_box {
|
|
margin: px2rem(30) px2rem(18) 0;
|
|
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(28);
|
|
color: #313131;
|
|
line-height: px2rem(40);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.periodDateStr {
|
|
font-family: PingFang HK, PingFang HK;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #AFB1B3;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-top: px2rem(16);
|
|
}
|
|
|
|
.diamondNumBox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: px2rem(20);
|
|
|
|
.diamondNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(40);
|
|
color: #03AFFF;
|
|
line-height: px2rem(56);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(56);
|
|
height: px2rem(56);
|
|
margin: 0 px2rem(4);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.xian {
|
|
background: #E4E4E4;
|
|
border-radius: px2rem(502);
|
|
height: px2rem(2);
|
|
margin: px2rem(28) px2rem(18) 0;
|
|
}
|
|
}
|
|
|
|
.content_DailyIncome_box {
|
|
margin: px2rem(32) px2rem(32) 0;
|
|
background: #F2F3F7;
|
|
border-radius: px2rem(16);
|
|
padding-bottom: px2rem(28);
|
|
|
|
.DailyIncome_box {
|
|
.top_title {
|
|
background: linear-gradient(270deg, #F2F3F7 0%, #C8FFFD 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: px2rem(16) px2rem(16) 0px 0px;
|
|
padding-left: px2rem(18);
|
|
padding: px2rem(18) 0 px2rem(18) px2rem(18);
|
|
|
|
.top_left {
|
|
img {
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
}
|
|
}
|
|
|
|
.Daily_Income {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(30);
|
|
color: #313131;
|
|
line-height: px2rem(42);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin: 0 px2rem(8);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.content_box {
|
|
margin: px2rem(30) px2rem(18) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.Today_box,
|
|
.Yesterday_box {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.left {
|
|
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(28);
|
|
color: #313131;
|
|
line-height: px2rem(40);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.diamondNumBox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: px2rem(20);
|
|
|
|
.diamondNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(40);
|
|
color: #03AFFF;
|
|
line-height: px2rem(56);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(56);
|
|
height: px2rem(56);
|
|
margin: 0 px2rem(4);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
|
|
img {
|
|
width: px2rem(42);
|
|
height: px2rem(42);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xian {
|
|
background: #E4E4E4;
|
|
border-radius: px2rem(502);
|
|
height: px2rem(100);
|
|
width: px2rem(2);
|
|
margin: px2rem(28) px2rem(18) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.content_WeeklyIncome_box {
|
|
margin: px2rem(32) px2rem(32) 0;
|
|
background: #F2F3F7;
|
|
border-radius: px2rem(16);
|
|
padding-bottom: px2rem(28);
|
|
|
|
.WeeklyIncome_box {
|
|
.top_title {
|
|
background: linear-gradient(270deg, #F2F3F7 0%, #C9ECFF 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: px2rem(16) px2rem(16) 0px 0px;
|
|
padding-left: px2rem(18);
|
|
padding: px2rem(18) 0 px2rem(18) px2rem(18);
|
|
|
|
.top_left {
|
|
img {
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
}
|
|
}
|
|
|
|
.Weekly_Income {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(30);
|
|
color: #313131;
|
|
line-height: px2rem(42);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin: 0 px2rem(8);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.content_box {
|
|
margin: px2rem(30) px2rem(18) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.thisWeek_box,
|
|
.lastWeek_box {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.left {
|
|
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(28);
|
|
color: #313131;
|
|
line-height: px2rem(40);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.diamondNumBox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: px2rem(20);
|
|
|
|
.diamondNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(40);
|
|
color: #03AFFF;
|
|
line-height: px2rem(56);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(56);
|
|
height: px2rem(56);
|
|
margin: 0 px2rem(4);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
|
|
img {
|
|
width: px2rem(42);
|
|
height: px2rem(42);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xian {
|
|
background: #E4E4E4;
|
|
border-radius: px2rem(502);
|
|
height: px2rem(100);
|
|
width: px2rem(2);
|
|
margin: px2rem(28) px2rem(18) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content_MonthlyIncome_box {
|
|
margin: px2rem(32) px2rem(32) 0;
|
|
background: #F2F3F7;
|
|
border-radius: px2rem(16);
|
|
padding-bottom: px2rem(28);
|
|
|
|
.MonthlyIncome_box {
|
|
.top_title {
|
|
background: linear-gradient(270deg, #F2F3F7 2%, #EEDBFF 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: px2rem(16) px2rem(16) 0px 0px;
|
|
padding-left: px2rem(18);
|
|
padding: px2rem(18) 0 px2rem(18) px2rem(18);
|
|
|
|
.top_left {
|
|
img {
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
}
|
|
}
|
|
|
|
.Monthly_Income {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(30);
|
|
color: #313131;
|
|
line-height: px2rem(42);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin: 0 px2rem(8);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.content_box {
|
|
margin: px2rem(30) px2rem(18) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.thisMonth_box,
|
|
.lastMonth_box {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.left {
|
|
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(28);
|
|
color: #313131;
|
|
line-height: px2rem(40);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.diamondNumBox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: px2rem(20);
|
|
|
|
.diamondNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(40);
|
|
color: #03AFFF;
|
|
line-height: px2rem(56);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(56);
|
|
height: px2rem(56);
|
|
margin: 0 px2rem(4);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
|
|
img {
|
|
width: px2rem(42);
|
|
height: px2rem(42);
|
|
}
|
|
}
|
|
}
|
|
|
|
.xian {
|
|
background: #E4E4E4;
|
|
border-radius: px2rem(502);
|
|
height: px2rem(100);
|
|
width: px2rem(2);
|
|
margin: px2rem(28) px2rem(18) 0;
|
|
}
|
|
}
|
|
} |