bab-icon/public/front/xfn/css/home.css

@import url("../js/layer_mobile/need/layer.css");
@import url("../js/swiper/swiper-4.2.2.min.css");
@import url("icons-extra.css");
@import url("mui.min.css");

*{ -webkit-user-select: auto;}
input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{ -webkit-user-select: auto;}
.mui-android.mui-android-4-2 input,.mui-android.mui-android-4-2 textarea,.mui-android.mui-android-4-3 input,.mui-android.mui-android-4-3 textarea{ -webkit-user-select: auto;}
/*body, .mui-content{ background: #191B2A;}*/
body{ font-size: 14px; font-family: "思源黑体 CN", "微软雅黑", Whitney Light, Helvetica, Arial, "sans-serif";}
ul, ol, dl, li{ list-style-type: none; margin: 0; -webkit-padding-start: 0; padding-left: 0;}
input, button, textarea, select{ margin-bottom: 0; outline: medium;}
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{ margin-bottom: 0;}
input:internal-outofill-selected{ background-color: transparent !important; color: #FFFFFF !important;}
img{display: block;}
li{ position: relative;}
::-webkit-scrollbar{ width: 0; height: 0;}
input::-webkit-input-placeholder{ color: #9B9B9B; line-height: 24px;}
input:-moz-placeholder{ color: #9B9B9B; line-height: 24px;}
input:-ms-input-placeholder{ color: #9B9B9B; line-height: 24px;}
.mui-btn.mui-disabled, .mui-btn:disabled, button.mui-disabled, button:disabled, input[type=button].mui-disabled, input[type=button]:disabled, input[type=reset].mui-disabled, input[type=reset]:disabled, input[type=submit].mui-disabled, input[type=submit]:disabled{ background: #CCCCCC; opacity: 1;}

/*a{ color: #FFFFFF;}*/
a:link, a:visited, a:hover, a:active, a:focus{ text-decoration: none; color: #888888;}

html, body, .mui-content{ background: #FFFFFF;}

/*顶部公用样式*/
.mui-bar{ background: #65d1f7; box-shadow: 0px 0px 1px rgba(102,102,102,0.2);}
.mui-bar .mui-title, .mui-bar-nav .mui-icon{ color: #FFFFFF;}
.mui-nav-btn{ position: relative; height: 43px; line-height: 43px; font-size: 15px; color: #FFFFFF; z-index: 12;}
.mui-nav-btn:link, .mui-nav-btn:visited, .mui-nav-btn:hover, .mui-nav-btn:active{ color: #FFFFFF;}

/*底部公用样式*/
.mui-bar-tab .mui-tab-item{ color: #e0e0e0;}
.mui-bar-tab .mui-tab-item.mui-active{ color: #FFFFFF;}
.mui-bar-esp, .mui-bar-esp2{ box-shadow: 0 0 0 transparent;}
.mui-bar-esp2{ background: transparent;}
.mui-bar-esp2~.mui-content{ padding-top: 0;}

/*文字图标样式*/
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?cq250g');
  src: url('../fonts/icomoon.eot?cq250g#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?cq250g') format('truetype'),
    url('../fonts/icomoon.woff?cq250g') format('woff'),
    url('../fonts/icomoon.svg?cq250g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.wk-icon{
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-excavator:before { content: "\e900";}
.icon-about:before { content: "\e901";}
.icon-fruitban:before { content: "\e902";}
.icon-house-o:before { content: "\e903";}
.icon-house:before, .mui-active .icon-house-o:before{ content: "\e904";}
.icon-home-o:before { content: "\e905";}
.icon-home:before, .mui-active .icon-home-o:before{ content: "\e906";}
.icon-purse-o:before { content: "\e907";}
.icon-purse:before, .mui-active .icon-purse-o:before{ content: "\e908";}
.icon-user-o:before { content: "\e909";}
.icon-user:before, .mui-active .icon-user-o:before{ content: "\e90a";}
.icon-city:before { content: "\e90b";}
.icon-book:before { content: "\e90c";}
.icon-roundfruit:before { content: "\e90d";}
.icon-roundclock:before { content: "\e90e";}
.icon-notice:before { content: "\e90f";}
.icon-staruser:before { content: "\e910";}
.icon-set:before { content: "\e911";}
.icon-buyorder:before { content: "\e912";}
.icon-sellorder:before { content: "\e913";}
.icon-pendingorder:before { content: "\e914";}
.icon-endorder:before { content: "\e915";}
.icon-credentials:before { content: "\e916";}
.icon-bill:before { content: "\e917";}
.icon-friend:before { content: "\e918";}
.icon-plususer:before { content: "\e919";}
.icon-lock:before { content: "\e91a";}
.icon-msg-o:before { content: "\e91b";}
.icon-squaredown:before { content: "\e91c";}
.icon-citygate:before { content: "\e91d";}
.icon-key:before { content: "\e91e";}
.icon-phone:before { content: "\e91f";}
.icon-unlock:before { content: "\e920";}
.icon-king:before { content: "\e921";}
.icon-solidplus:before { content: "\e922";}
.icon-solidclock:before { content: "\e923";}
.icon-pen:before { content: "\e924";}
.icon-fruit:before { content: "\e925";}
.icon-pvban:before { content: "\e926";}
.icon-light:before { content: "\e927";}
.icon-noticeright:before { content: "\e928";}
.icon-vip:before { content: "\e929";}
.icon-bell:before { content: "\e92a";}
.icon-notice-o:before { content: "\e92b";}
.icon-back:before { content: "\e92c";}
.icon-goto:before { content: "\e92d";}
.icon-eye:before { content: "\e92e";}
.icon-yrz:before { content: "\e92f";}
.icon-pvban2:before { content: "\e930";}
.icon-pv:before { content: "\e931";}
.icon-msg:before { content: "\e932";}
.icon-bell2:before { content: "\e933";}
.icon-wallet-o:before { content: "\e934";}
.icon-wallet:before { content: "\e935";}
.icon-pay-o:before { content: "\e936";}
.icon-pay:before { content: "\e937";}
.icon-acoin-o:before { content: "\e938";}
.icon-acoin:before { content: "\e939";}
.icon-mcoin-o:before { content: "\e93a";}
.icon-mcoin:before { content: "\e93b";}
.icon-up:before { content: "\e93c";}
.icon-down:before { content: "\e93d";}
.icon-star:before { content: "\e93e";}
.icon-star-o:before { content: "\e93f";}
.icon-mark:before { content: "\e940";}
.icon-mark-o:before { content: "\e941";}
.icon-question:before { content: "\e942";}
.icon-question-o:before { content: "\e943";}
.icon-bad:before { content: "\e944";}
.icon-bad-o:before { content: "\e945";}
.icon-team:before { content: "\e946";}
.icon-team-o:before { content: "\e947";}
.icon-record:before { content: "\e948";}
.icon-record-o:before { content: "\e949";}
.icon-truck:before { content: "\e94a";}
.icon-truck-o:before { content: "\e94b";}
.icon-medal:before { content: "\e94c";}
.icon-medal-o:before { content: "\e94d";}
.icon-gifebox:before { content: "\e94e";}
.icon-gifebox-o:before { content: "\e94f";}
.icon-caveat:before { content: "\e950";}
.icon-caveat-o:before { content: "\e951";}
.icon-close:before { content: "\e952";}
.icon-cheack:before { content: "\e953";}
.icon-drill-o:before { content: "\e954";}
.icon-drill:before { content: "\e955";}
.icon-cart-o:before { content: "\e956";}
.icon-cart:before { content: "\e957";}
.icon-del:before { content: "\e958";}
.icon-del-o:before { content: "\e959";}
.icon-pic:before { content: "\e95a";}
.icon-pic-o:before { content: "\e95b";}
.icon-plus-o:before { content: "\e95c";}
.icon-solidplus2:before { content: "\e95d";}
.icon-heart:before { content: "\e95e";}
.icon-heart-o:before { content: "\e95f";}
.icon-talk:before { content: "\e960";}
.icon-talk-o:before { content: "\e961";}
.icon-share-o:before { content: "\e962";}
.icon-share:before { content: "\e963";}
.icon-prize-o:before { content: "\e964";}
.icon-prize:before { content: "\e965";}
.icon-lineuser:before { content: "\e966";}
.icon-more:before { content: "\e967";}
.icon-backtop:before { content: "\e968";}
.icon-footprint:before { content: "\e969";}
.icon-bell3:before { content: "\e96a";}
.icon-date:before { content: "\e96b";}
.icon-reload:before { content: "\e96c";}
.icon-laud:before { content: "\e96d";}
.icon-heartuser:before { content: "\e96e";}
.icon-noticeban:before { content: "\e96f";}
.icon-bell5:before { content: "\e970";}
.icon-pic2-o:before { content: "\e971";}
.icon-service:before { content: "\e972";}
.icon-ticket:before { content: "\e973";}
.icon-msg2-o:before { content: "\e974";}


@font-face {
  font-family: 'xfn';
  src: url('../fonts/xfn.eot?cq250g');
  src: url('../fonts/xfn.eot?cq250g#iefix') format('embedded-opentype'),
    url('../fonts/xfn.ttf?cq250g') format('truetype'),
    url('../fonts/xfn.woff?cq250g') format('woff'),
    url('../fonts/xfn.svg?cq250g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.xfn-icon{
  font-family: 'xfn' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-camera:before { content: "\e900";}
.icon-camera2:before { content: "\e901";}
.icon-chat:before { content: "\e902";}
.icon-chat2:before { content: "\e903";}
.icon-transaction:before { content: "\e904";}
.icon-transaction2:before { content: "\e905";}
.icon-tree:before, .mui-active .icon-tree2:before { content: "\e906"; font-size: 26px; line-height: 24px;}
.icon-tree2:before { content: "\e907"; font-size: 26px; line-height: 24px;}



/*加载动画样式*/
.mine-dialog{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #FFFFFF; z-index: 999;}
#allload{ display: none; background: transparent;}
.close-dialog{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}

.tm-dialog{ background: rgba(102,102,102,0.2);}

[v-cloak] { display: block;}

.mine-dialog .loader-inner{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 50px; height: 50px; margin: auto;}


@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-spin-fade-loader {
  position: relative; }
  .ball-spin-fade-loader > div:nth-child(1) {
    top: 32px;
    left: 17px;
    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
            animation: ball-spin-fade-loader 1s 0s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(2) {
    top: 28.04545px;
    left: 28.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
            animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(3) {
    top: 17px;
    left: 32px;
    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
            animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(4) {
    top: 6.04545px;
    left: 28.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
            animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(5) {
    top: 2px;
    left: 17px;
    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
            animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(6) {
    top: 6.04545px;
    left: 6.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
            animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(7) {
    top: 17px;
    left: 2px;
    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
            animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(8) {
    top: 28.04545px;
    left: 6.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
            animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  .ball-spin-fade-loader > div {
    background-color: #AAAAAA;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute; }


/*弹窗样式*/
.com-dialog{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: transparent; z-index: 999; overflow: scroll;}
.dialog-close{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.2);}
.dialog-con{ position: absolute; top: 0; right: 0; bottom: 10%; left: 0; width: 86%; height: 160px; margin: auto; background: #FFFFFF; border-radius: 10px;}
.dialog-tit{ width: 100%; height: 50px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: rgba(24,132,178,0.2);}
.dialog-tit div{ width: calc(100% - 50px); height: 50px; line-height: 50px; font-size: 20px; font-weight: 600; padding-left: 10px; float: left;}
.dialog-tit-btn{ display: block; width: 40px; height: 50px; line-height: 50px; font-size: 36px; font-weight: 600; border: 0; float: right;}

.dialog-intro{ width: 100%; min-height: 60px; line-height: 24px; padding: 20px 10px; font-size: 17px; background: #FFFFFF; border-top-left-radius: 10px; border-top-right-radius: 10px;}

.dialog-inp{ width: 100%; padding: 10px; background: #FFFFFF;}
.dialog-inp input, .dialog-inp textarea{ display: block; width: 100%; line-height: 1.5em; padding: 10px; margin: 10px 0;}
.dialog-inp textarea{ height: 60px;}
.dialog-btn{ width: 100%; height: 46px; line-height: 46px; background: #FFFFFF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top: 1px solid #EEEEEE; overflow: hidden;}
.dialog-btn button{ height: 100%; padding: 0 10px; border: 0; font-size: 17px; font-weight: 500; color: #1884B2; float: left;}
.dialog-btn .dialog-btn-gray{ color: #808080; border-right: 1px solid #EEEEEE;}
.dialog-btn-1{ width: 100%;}
.dialog-btn-2{ width: 50%;}

.com-wkmsg{ position: fixed; top: 0; right: 0; bottom: 10%; left: 0; width: 86%; height: 50px; margin: auto; text-align: center; z-index: 999;}
.com-wkmsg span{ display: inline-block; max-width: 100%; padding: 8px 15px; line-height: 1.3em; background: rgba(0,0,0,0.6); color: #FFFFFF; border-radius: 10px;}

.dialog-pic{ width: 100%; height: 360px; padding: 15px; background: #FFFFFF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.dialog-pic img{ display: block; max-width: 100%; max-height: 100%; margin: 0 auto;}