129 lines
2.7 KiB
SCSS
129 lines
2.7 KiB
SCSS
![]() |
$ppr: 750px/16/1rem; // pixel per rem
|
||
|
* {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
-moz-box-sizing: border-box;
|
||
|
-webkit-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
-webkit-text-size-adjust: none;
|
||
|
-webkit-tap-highlight-color: transparent;
|
||
|
}
|
||
|
|
||
|
input:-webkit-autofill {
|
||
|
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
width: 16rem;
|
||
|
max-width: 16rem;
|
||
|
margin: 0 auto;
|
||
|
font-family: Helvetica,PingFangSC-Regular,"Droid Sans",Arial,sans-serif;
|
||
|
font-size: 0.34133rem;
|
||
|
line-height: 1;
|
||
|
color: #232326;
|
||
|
overflow-x: hidden;
|
||
|
}
|
||
|
|
||
|
.p:before, .p:after {
|
||
|
content: "";
|
||
|
clear: both;
|
||
|
display: block;
|
||
|
font-size: 0;
|
||
|
height: 0;
|
||
|
}
|
||
|
|
||
|
ul, li {
|
||
|
list-style: none;
|
||
|
}
|
||
|
|
||
|
em {
|
||
|
font-style: normal;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
text-decoration: none;
|
||
|
color: #666666;
|
||
|
}
|
||
|
|
||
|
.fl {
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.fr {
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.but_ad {
|
||
|
cursor: pointer;
|
||
|
display: block;
|
||
|
padding: 0.08533rem 1.06667rem;
|
||
|
line-height: 1.024rem;
|
||
|
background: #1B9AF7;
|
||
|
border-color: #1B9AF7;
|
||
|
color: white;
|
||
|
font-size: 0.64rem;
|
||
|
text-align: center;
|
||
|
border-radius: 0.08533rem;
|
||
|
-webkit-box-shadow: 0 0.14933rem 0 #0880d7, 0 0.17067rem 0.064rem rgba(0, 0, 0, 0.3);
|
||
|
box-shadow: 0 0.14933rem 0 #0880d7, 0 0.17067rem 0.064rem rgba(0, 0, 0, 0.3);
|
||
|
}
|
||
|
|
||
|
.but_ad:active {
|
||
|
-webkit-box-shadow: 0 0.04267rem 0 #0662a6, 0 0.064rem 0.064rem rgba(0, 0, 0, 0.2);
|
||
|
box-shadow: 0 0.04267rem 0 #0662a6, 0 0.064rem 0.064rem rgba(0, 0, 0, 0.2);
|
||
|
background-color: #2798eb;
|
||
|
border-color: #2798eb;
|
||
|
color: #0880d7;
|
||
|
}
|
||
|
.abacus{
|
||
|
background: url(../images/background-picture0.png) no-repeat;
|
||
|
width: 750px/$ppr;
|
||
|
height: 1334px/$ppr;
|
||
|
display: inline-block;
|
||
|
background-size: cover;
|
||
|
}
|
||
|
.abacus2{
|
||
|
background: url(../images/background-picture.png) no-repeat;
|
||
|
background-size: cover;
|
||
|
}
|
||
|
.buttonbox{
|
||
|
position: absolute;
|
||
|
left: 50%;
|
||
|
margin-top: 606px/$ppr;
|
||
|
margin-left: -463px/2/$ppr;
|
||
|
a{
|
||
|
display: block;
|
||
|
width: 463px/$ppr;
|
||
|
height: 126px/$ppr;
|
||
|
font-size: 60px/$ppr;
|
||
|
color: white;
|
||
|
text-align: center;
|
||
|
line-height: 126px/$ppr;
|
||
|
i{
|
||
|
background-size: cover;
|
||
|
display: inline-block;
|
||
|
vertical-align: middle;
|
||
|
margin-right: 30px/$ppr;
|
||
|
}
|
||
|
}
|
||
|
.but1{
|
||
|
background: url(../images/button2x.png) no-repeat;
|
||
|
background-size: cover;
|
||
|
i{
|
||
|
background: url(../images/icon12x.png) no-repeat;
|
||
|
width: 62px/$ppr;
|
||
|
height: 63px/$ppr;
|
||
|
}
|
||
|
}
|
||
|
.but2{
|
||
|
background: url(../images/button22x.png) no-repeat;
|
||
|
background-size: cover;
|
||
|
margin-top: 150px/$ppr;
|
||
|
i{
|
||
|
background: url(../images/icon22x.png) no-repeat;
|
||
|
width: 57px/$ppr;
|
||
|
height: 43px/$ppr;
|
||
|
}
|
||
|
}
|
||
|
}
|