html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-family: PingFangSC-Semibold, PingFang SC;
vertical-align: baseline;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
html{
font-size:62.5%
}
a[href^="javascript"] {
-webkit-touch-callout: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: ' ';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color:#353535;
font: 13px/1.5 Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
input,
button {
outline: 0;
outline: none;
border: 0;
background: rgba(0, 0, 0, 0);
border-radius: 0px;
}
.none {
display: none;
}
table {
margin-left: 1px;
}
table td,
table th {
padding: 5px 10px;
border: 1px solid #ccc;
vertical-align: middle;
}
a {
text-decoration: none;
color: #444;
}
a:visited,
a:hover {
color: #444;
}
* {
box-sizing: border-box;
}
/*层级关系
公共头部:3
内容:1
公共底部:3
搜索栏:2
全屏页:4
*/
#app {
/*position: absolute;
width: 100%;
height: 100%;
overflow: hidden;*/
}
#app.lock {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.outter {
transition: 0.5s;
position: absolute;
top: 0;
height: 100%;
width: 100%;
padding-bottom: 50px;
/*overflow: hidden;*/
/*bottom: 0;*/
}
/*iphonex 适配*/
.is-ipx .outter{
padding-bottom: 72px;
}
.is-ipx .doubleFooter .mt-footer-ct{
height: 52px !important;
padding-bottom: 0 !important;
bottom: 80px !important;
}
/*.outter.hideLeft::before {
content: "";
z-index: 4;
position: absolute;
top: 0;
width: 100%;
bottom: 0;
background: rgba(0, 0, 0, 0.3)
}*/
.outter.hideLeft {
opacity: 0.75;
transform: translate3d(-100%, 0, 0);
transition: 1.0s;
overflow: hidden;
}
body {
background: #FAFAFA;;
color:#353535;
font-size: 12px;
}
.icon-back{
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 15px;
}
.icon-back:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
top: 8px;
left: 7px;
border: 1px solid #fff !important;
border-width: 1px 0 0 1px !important;
top: 50% !important;
margin-top: -6px;
}
.app-header {
/*position: absolute;*/
position: relative;
transition: 0.3s;
width: 100%;
z-index: 3;
height: 45px;
line-height: 45px;
font-size: 17px;
background: linear-gradient(180deg, #303036, #3c3b40);
color: #fff;
text-align: center;
}
.app-header.header-hide {
margin-top: -45px;
}
.app-content {
/*overflow-x: hidden;
overflow-y: auto;*/
z-index: 1;
width: 100%;
background: #f6f6f6;
height:100%;
}
.app-footer {
bottom: 0;
left: 0 !important;
width: 100%;
position: fixed;
z-index: 999;
}
.app-footer:not(:first-child)::before {
content: "";
position: absolute;
width: 200%;
left: 0px;
top: 0;
transform: scale(.5);
transform-origin: 0 0;
-webkit-transform: scale(.5);
-webkit-transform-origin: 0 0;
background-color: #b7b7b7;
height: 1px;
z-index: 4;
}
.new-msg-count {
position: absolute;
font-style: normal;
font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Helvetica;
right: -9px;
top: -5px;
z-index: 2;
padding: 0 4px;
width: auto;
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 9px;
color: #fff;
text-align: center;
font-size: 14px;
background-color: #f43531;
}
.new-msg-dot {
position: absolute;
right: -4px;
top: -3px;
width: 10px;
height: 10px;
z-index: 2;
border-radius: 50%;
color: #ffffff;
text-align: center;
background-color: red;
background-color: #f43531;
font-size: 0;
}
.sub-page {
position: absolute;
top: 0px;
bottom: 0px;
background: #f8f8f8;
height: 100%;
width: 100%;
/* overflow: hidden; */
right: 0;
left: 0;
z-index: 5;
}
a {
cursor: pointer;
}
.fl {
float: left !important;
}
.fr {
float: right !important;
}
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
.clearfloat {
zoom: 1
}
/*border*/
/*底部 eee边框*/
.border-bottom-1 {
position: relative;
}
.border-bottom-1:before {
content: '';
width: 100%;
height: 1px;
background: #eee;
position: absolute;
left: 0;
bottom: 0;
transform: scale(1, .5);
-webkit-transform: scale(1, .5);
-o-transform: scale(1, .5);
-moz-transform: scale(1, .5);
z-index: 1;
}
/*底部 eee边框*/
.border-bottom-2 {
position: relative;
}
.border-bottom-2:before {
content: '';
width: 100%;
height: 1px;
background: #f6f6f6;
position: absolute;
left: 0;
bottom: 0;
transform: scale(1, .5);
-webkit-transform: scale(1, .5);
-o-transform: scale(1, .5);
-moz-transform: scale(1, .5);
z-index: 1;
}
/*顶部 eee边框*/
.border-top-1 {
position: relative;
}
.border-top-1:before {
content: '';
width: 100%;
height: 1px;
background: #eee;
position: absolute;
left: 0;
top: 0;
transform: scale(1, .5);
-webkit-transform: scale(1, .5);
-o-transform: scale(1, .5);
-moz-transform: scale(1, .5);
}
/*顶部 #f6f6f6*/
.border-top-2 {
position: relative;
}
.border-top-2:before {
content: '';
width: 100%;
height: 1px;
background: #f6f6f6;
position: absolute;
left: 0;
top: 0;
transform: scale(1, .5);
-webkit-transform: scale(1, .5);
-o-transform: scale(1, .5);
-moz-transform: scale(1, .5);
}
/*右边 eee边框*/
.border-right-1 {
position: relative;
}
.border-right-1:before {
content: '';
width: 1px;
height: 100%;
background: #eee;
position: absolute;
right: 0;
top: 50%;
transform: scale(0.5, 1) translate(0,-50%);
-webkit-transform: scale(0.5, 1) translate(0,-50%);
-o-transform: scale(0.5, 1) translate(0,-50%);
-moz-transform: scale(0.5, 1) translate(0,-50%);
z-index: 1;
}
/* 右边 aaa边框 */
.border-right-2 {
position: relative;
}
.border-right-2:before {
content: '';
width: 1px;
height: 100%;
background: #aaa;
position: absolute;
right: 0;
top: 50%;
transform: scale(0.5, 1) translate(0,-50%);
-webkit-transform: scale(0.5, 1) translate(0,-50%);
-o-transform: scale(0.5, 1) translate(0,-50%);
-moz-transform: scale(0.5, 1) translate(0,-50%);
z-index: 1;
}
/* 右边 f6f6f6边框 */
.border-right-3 {
position: relative;
}
.border-right-3:before {
content: '';
width: 1px;
height: 100%;
background: #f6f6f6;
position: absolute;
right: 0;
top: 50%;
transform: scale(0.5, 1) translate(0,-50%);
-webkit-transform: scale(0.5, 1) translate(0,-50%);
-o-transform: scale(0.5, 1) translate(0,-50%);
-moz-transform: scale(0.5, 1) translate(0,-50%);
z-index: 1;
}
/*font*/
.f12 {
font-size: 12px !important;
}
.f14 {
font-size: 14px !important;
}
.f16 {
font-size: 16px !important;
}
.f18 {
font-size: 18px !important;
}
.tl {
text-align: left !important;
}
.tr {
text-align: right !important;
}
.tc {
text-align: center !important;
}
.gold {
color: #ffae11 !important;
}
.black {
color: #353535 !important;
}
.all-black{
color: #000000 !important;
}
.grey {
color: #aaaaaa !important;
}
.line-gray {
color: #888 !important;
}
.blue {
color: #1690e0 !important;
}
.red {
color: #f5222d !important;
}
.orange {
color: #ff6a00 !important;
}
.bg-orange{
background-color: #ff6a00 !important;
color: #fff !important;
}
.bg-grey{
background-color: #aaa !important;
color: #fff !important;
}
.popup-content {
width: 100%;
background: #fff;
min-height: 234px;
}
.grey-box{
background-color: #fff !important;
color: #353535 !important;
}
.mt5 {
margin-top: 5px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mt10{
margin-top: 10px !important;
}
.plr-20{
padding-left:20px !important;
padding-right:20px !important;
}
.pl-20{
padding-left:20px !important;
}
.pr-20{
padding-left:20px !important;
}
.bold{
font-weight: 700;
}
.weight-default{
font-weight: 400 !important;
}
/*header里的icon*/
.default-shadow {
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
@media(max-width:360px){
.plr-20{
padding-left:15px !important;
}
}
@media (min-width:360px) {
html {
font-size: 18px;
}
}
@media (min-width:370px) {
html {
font-size: 18px;
}
}
@media (min-width:384px) {
html {
font-size: 18px;
}
}
@media (min-width:410px) {
html {
font-size: 20px;
}
}
.is-ipx .home-wrap{
padding-bottom: 80px !important;
}
.is-ipx .car-wrap.noTab .mt-footer-ct{
height: 72px !important;
padding-bottom: 20px !important;
}
/* 通用box */
.img-text{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.img-text p{
margin: 8px 0px 16px;
font-size: 14px;
white-space: nowrap;
}
.common-box{
padding:24px 16px;
}
.flex-row{
display:flex;
flex-direction: row;
}
.blue-text{
color: #127BFF;
font-size: 14px;
}
.card-icon{
width: 50px;
height: 50px;
border-radius: 100%;
color:white;
background-color: #127BFF;
font-size: 16px;
vertical-align: middle;
text-align: center;
margin-right: 14px;
padding: 12px;
}