386 lines
9.4 KiB
SCSS
386 lines
9.4 KiB
SCSS
|
@function px2rem($px, $rem:75) {
|
||
|
|
@return $px / $rem+rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// overflow-y: none;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-top: px2rem(55, );
|
||
|
|
// background: #00B7A3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back {
|
||
|
|
width: px2rem(56, );
|
||
|
|
height: px2rem(56, );
|
||
|
|
position: fixed;
|
||
|
|
z-index: 999;
|
||
|
|
left: px2rem(40, );
|
||
|
|
top: px2rem(52, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: px2rem(360, );
|
||
|
|
height: px2rem(36, );
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto px2rem(50, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.my {
|
||
|
|
width: 100%;
|
||
|
|
height: px2rem(182, );
|
||
|
|
background: url(../images/myBg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 9;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.tx {
|
||
|
|
width: px2rem(88, );
|
||
|
|
height: px2rem(88, );
|
||
|
|
background: #005E15;
|
||
|
|
border: px2rem(1, ) solid #fff;
|
||
|
|
margin-top: px2rem(31, );
|
||
|
|
margin-left: px2rem(31, );
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: px2rem(5, );
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
float: left;
|
||
|
|
width: 2.4rem;
|
||
|
|
margin-top: px2rem(66, );
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
overflow: hidden; //超出隐藏
|
||
|
|
white-space: nowrap; //不折行
|
||
|
|
text-overflow: ellipsis; //溢出显示省略号
|
||
|
|
}
|
||
|
|
|
||
|
|
.but {
|
||
|
|
width: px2rem(80, );
|
||
|
|
height: px2rem(32, );
|
||
|
|
line-height: px2rem(32, );
|
||
|
|
border-radius: px2rem(8, );
|
||
|
|
text-align: center;
|
||
|
|
color: #1F5764;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
background: linear-gradient(0deg, #3AEAC7 0%, #FFFEBB 100%);
|
||
|
|
margin-top: px2rem(64, );
|
||
|
|
float: right;
|
||
|
|
margin-right: px2rem(20, );
|
||
|
|
margin-left: px2rem(9, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.num2 {
|
||
|
|
margin-top: px2rem(69, );
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon2 {
|
||
|
|
width: px2rem(48, );
|
||
|
|
height: px2rem(48, );
|
||
|
|
display: block;
|
||
|
|
margin-top: px2rem(56, );
|
||
|
|
// background: #FFF3AE;
|
||
|
|
margin-right: px2rem(9, );
|
||
|
|
float: right;
|
||
|
|
margin-left: px2rem(25, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.num1 {
|
||
|
|
margin-top: px2rem(69, );
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon1 {
|
||
|
|
width: px2rem(48, );
|
||
|
|
height: px2rem(48, );
|
||
|
|
display: block;
|
||
|
|
margin-top: px2rem(56, );
|
||
|
|
// background: #FFF3AE;
|
||
|
|
margin-right: px2rem(9, );
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
width: px2rem(700, );
|
||
|
|
margin: px2rem(47, ) auto 0;
|
||
|
|
height: px2rem(745, );
|
||
|
|
// background: pink;
|
||
|
|
overflow-y: scroll;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-flow: row wrap;
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
width: px2rem(330, );
|
||
|
|
height: px2rem(466, );
|
||
|
|
margin-bottom: px2rem(34, );
|
||
|
|
background: url(../images/prop.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
left: 0;
|
||
|
|
top: px2rem(37, );
|
||
|
|
color: #1F5764;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.giftImg {
|
||
|
|
width: px2rem(140, );
|
||
|
|
height: px2rem(140, );
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
top: px2rem(109, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
top: px2rem(279, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.zs {
|
||
|
|
width: 100%;
|
||
|
|
height: px2rem(44, );
|
||
|
|
line-height: px2rem(44, );
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
position: absolute;
|
||
|
|
top: px2rem(309, );
|
||
|
|
left: 0;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: px2rem(44, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
b {
|
||
|
|
display: block;
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.but {
|
||
|
|
width: px2rem(160, );
|
||
|
|
height: px2rem(50, );
|
||
|
|
line-height: px2rem(50, );
|
||
|
|
position: absolute;
|
||
|
|
bottom: px2rem(53, );
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
text-align: center;
|
||
|
|
color: #1F5764;
|
||
|
|
font-size: px2rem(24, );
|
||
|
|
background: linear-gradient(0deg, #3AEAC7 0%, #FFFEBB 100%);
|
||
|
|
border-radius: px2rem(8, );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.buy {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
background: rgba(0, 0, 0, .8);
|
||
|
|
z-index: 999;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
.buy_in {
|
||
|
|
width: px2rem(562, );
|
||
|
|
height: px2rem(570, );
|
||
|
|
background: url(../images/pub.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
left: 50%;
|
||
|
|
top: 40%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: px2rem(107, );
|
||
|
|
color: #fff;
|
||
|
|
font-size: px2rem(30, );
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.num {
|
||
|
|
position: absolute;
|
||
|
|
left: px2rem(153, );
|
||
|
|
top: px2rem(200, );
|
||
|
|
width: px2rem(260, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
line-height: px2rem(44, );
|
||
|
|
|
||
|
|
b {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
color: #fff;
|
||
|
|
margin-right: px2rem(17, );
|
||
|
|
float: left;
|
||
|
|
height: px2rem(44, );
|
||
|
|
line-height: px2rem(44, );
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
float: left;
|
||
|
|
display: inline-block;
|
||
|
|
width: px2rem(180, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
border-radius: px2rem(44, );
|
||
|
|
background: #007F6C;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
input {
|
||
|
|
background: none;
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
height: 100%;
|
||
|
|
width: 0.9rem;
|
||
|
|
color: #FEF8A8;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtraction {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(44, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: url(../images/subtraction.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.add {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(44, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
background: url(../images/add.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(450, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
line-height: px2rem(44, );
|
||
|
|
left: px2rem(153, );
|
||
|
|
top: px2rem(286, );
|
||
|
|
|
||
|
|
b {
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
color: #fff;
|
||
|
|
margin-right: px2rem(17, );
|
||
|
|
float: left;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
color: #FEF8A8;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
}
|
||
|
|
|
||
|
|
i {
|
||
|
|
color: #FEF8A8;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.zs {
|
||
|
|
position: absolute;
|
||
|
|
width: px2rem(450, );
|
||
|
|
height: px2rem(44, );
|
||
|
|
line-height: px2rem(44, );
|
||
|
|
left: px2rem(153, );
|
||
|
|
top: px2rem(364, );
|
||
|
|
|
||
|
|
b {
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
color: #fff;
|
||
|
|
margin-right: px2rem(17, );
|
||
|
|
float: left;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
color: #FEF8A8;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
}
|
||
|
|
|
||
|
|
i {
|
||
|
|
color: #FEF8A8;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.close {
|
||
|
|
width: px2rem(208, );
|
||
|
|
height: px2rem(64, );
|
||
|
|
line-height: px2rem(64, );
|
||
|
|
text-align: center;
|
||
|
|
color: #008573;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
position: absolute;
|
||
|
|
left: px2rem(49, );
|
||
|
|
bottom: px2rem(84, );
|
||
|
|
background: url(../images/close.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ok {
|
||
|
|
width: px2rem(208, );
|
||
|
|
height: px2rem(64, );
|
||
|
|
line-height: px2rem(64, );
|
||
|
|
text-align: center;
|
||
|
|
color: #8A4801;
|
||
|
|
font-size: px2rem(26, );
|
||
|
|
position: absolute;
|
||
|
|
right: px2rem(49, );
|
||
|
|
bottom: px2rem(84, );
|
||
|
|
background: url(../images/close.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|