93 lines
2.1 KiB
SCSS
93 lines
2.1 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background: #FE614B;
|
|
}
|
|
|
|
.header {
|
|
width: px2rem(750);
|
|
height: px2rem(1246);
|
|
position: relative;
|
|
margin: 0 auto 0;
|
|
background: url(../images/share/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.swiper {
|
|
width: px2rem(695);
|
|
height: px2rem(723);
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-53%);
|
|
top: px2rem(504);
|
|
}
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(750);
|
|
height: px2rem(458);
|
|
background: url(../images/share/box.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: -1rem auto px2rem(0);
|
|
position: relative;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
|
|
.xz {
|
|
width: px2rem(482);
|
|
height: px2rem(92);
|
|
line-height: px2rem(92);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(32);
|
|
background: url(../images/share/xzBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: px2rem(100) auto px2rem(30);
|
|
}
|
|
.codeBg{
|
|
width: px2rem(482);
|
|
height: px2rem(92);
|
|
line-height: px2rem(92);
|
|
margin: 0 auto px2rem(0);
|
|
background: url(../images/share/codeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.copy{
|
|
width: px2rem(160);
|
|
height: px2rem(60);
|
|
position: absolute;
|
|
top: px2rem(16);
|
|
right: px2rem(16);
|
|
}
|
|
.num{
|
|
width: 2rem;
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
left: 2rem;
|
|
top: 0;
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: px2rem(28);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.bottom{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/share/bottom.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
width: px2rem(750);
|
|
height: px2rem(100);
|
|
line-height: px2rem(100);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(30);
|
|
font-weight: 400;
|
|
z-index: 3;
|
|
} |