css布局实现移动端手机端美容整形app首页页面效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现移动端手机端美容整形app首页页面效果代码

代码标签: 移动 手机 美容整形 app 首页 页面 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在线医疗美容手机app首页模板</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
<style>
    
html,body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

a, label, button, input, select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}

body {
    background: #fff;
    color: #666;
}

html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #08acee;
}

button {
    outline: 0;
}

img {
    border: 0;
}

button,input,optgroup,select,textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

li {
    list-style: none;
}

a {
    color: #666;
}

.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
}

.divHeight {
    width: 100%;
    height: 10px;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
}

.r-line {
    position: relative;
}

.r-line:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    height: 100%;
    border-right: 1px solid #D9D9D9;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.b-line {
    position: relative;
}

.b-line:after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #e2e2e2;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.arrow {
    position: relative;
    padding-right: 0.8rem;
}

.arrow span {
    font-size: 0.8rem;
    color: #9b9b9b;
}

.arrow:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #848484;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;
    border-radius: 1px;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 15px;
    position: relative;
}

.flex-box {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
}

/* 必要布局样式css */
.flexView {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.scrollView {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding-bottom: 53px;
}

.navBar {
    height: 44px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 102;
    background: #f3807a;
}

.navBar-item {
    height: 44px;
    min-width: 15%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 15%;
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
    padding: 0 0.9rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    color: #808080;
    position: relative;
}

.navBar-item:first-child {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    margin-right: -25%;
    font-size: 0.9rem;
    color: #333;
}

.navBar-item:last-child {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.center {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
    width: 95%;
    margin-left: 20%;
}

.center-title {
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    color: #333;
}

.icon {
    width: 20px;
    height: 20px;
    display: block;
    border: none;
    float: left;
    background-size: 20px;
    background-repeat: no-repeat;
}

.icon-return {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACh0lEQVRoQ+3ZMW8TMRQH8PcOsTBQISExVCIRCwgWFvZ+hZYBpIrEcTYkBsTGlI2VDamL3YEBpWJoR1BJaOlXYEzyDYp0bMRGRjnJoDuWs/1e3EbKeHf55b33vzsb4YJ98IJ54RKce8XZV1gIcQ8AviDiD2vtC631pzZFYQ2WUt611p4CwM0VcqqU2soSXIN1ztdKqTfZgRuw75RSz9tg3bHsWjomlh04NpYVOAWWDbjf7z8oimLipbH7bUopJdvO7L/Hk8+wwyLiCSLe8H6cww4BwGYFTo0lbWkKLBmYCksCrsNaa99rrZ/FmFnS0GrCdrvd3mg0MqEDqu58yVKaAzZZSwshHgLAsX/rcW2csrJVtaNXeIWdIuL16qJU2OgVrsMCwEGn03mSamaThVYTtizLp+PxeJkioJKFFldslJbmjA0O5o4NCm7AHpZluUM5s1FCSwjxCAA++7ceADiczWaPJ5PJL6qAihJaUspdY8w+Il7xLsASG6SlhRA/EfGa91BxNJ/Pd7hVNtiT1mAwOAeADXdCa637Hi0Wi3zBUsptY8wHRLzqwIh/nlbzbWmna0roLEOrmo11QQd9W1oHdFDwOrR3cLCH/uuFn0uQRQE7dMPKJHl6RwNzRUcF/w9N9VIRHVyhazbLDihWP5KAHbphOzQ5OhmYCzopmAM6OZgaTQL20FMAuOUtHESfaTLwCn3HWnuWEk0KpkCTg1OjWYArtDHmKyJu+jMdeh+KDdghh8NhZ7lcfvPRoXcaWYFToNmBY6NZgj20m+nb3pr3W631yzY7GWzBDtXr9TaLojjz0N+VUvezBXvoPQBw0Fda649Zg9vg6o5l3dKhse58l+AY/yqnc/4GvNDoTFOq8FwAAAAASUVORK5CYII=");
}

.m-slider {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.slider-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    position: relative;
    z-index: 1;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

.slider-item {
    width: 100%;
    height: 100%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: #f6f6f6;
}

.slider-item img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}

.slider-pagination {
    text-align: right;
    position: absolute;
    width: 100%;
    z-index: 2;
    right: 0;
    bottom: 10px;
    pointer-events: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.slider-pagination > .slider-pagination-item {
    margin: 0 .25rem;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background-color: rgba(255,255,255,0.4);
}

.slider-pagination > .slider-pagination-item.slider-pagination-item-active {
    background-color: #fff;
    border-radius: 100%;
}

.tab-nav {
    height: 40px;
    line-height: 40px;
    display: block;
    position: relative;
    background: #fff;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
}

.tab-nav-item {
    height: 40px;
    line-height: 40px;
    position: relative;
    text-align: center;
    color: #585858;
    font-size: 0.9rem;
    display: block;
    float: left;
    width: 12%;
}

.tab-nav-item.tab-active {
    /* background-color: #51bd03; */
}

.tab-nav-item.tab-active a {
    color: #ff1767;
    font-size: 0.8rem;
}

.tab-nav-item a {
    display: inherit;
    font-size: 0.8rem;
    color: #666;
}

.tab-panel {
    position: relative;
    overflow: hidden;
}

.tab-panel .tab-panel-item {
    width: 100%;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.tab-panel .tab-panel-item.tab-active~.tab-panel-item {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.tab-panel .tab-panel-item.tab-active {
    position: relative;
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.tab-nav-item.tab-active:before {
    content: '';
    width: 70%;
    height: 3px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -35%;
    z-index: 4;
    background-image: -webkit-gradient(linear, left top, right top, from(#ff6143), to(#ff1767));
    background-image: -webkit-linear-gradient(left, #ff6143, #ff1767);
    background-image: -moz-linear-gradient(left, #ff6143, #ff1767);
    background-image: linear-gradient(to right, #ff6143, #ff1767);
    background-color: #ff6143;
}

.palace {
    padding: 0.5rem 0;
    position: relative;
    overflow: hidden;
}

.palace-grid {
    position: relative;
    float: left;
    padding: 1px;
    width: 20%;
    box-sizing: border-box;
    margin: 5px 0;
}

.palace-grid-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

.palace-grid-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.palace-grid-text {
    display: block;
    text-align: center;
    color: #333;
    font-size: 0.85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 0.2rem;
}

.palace-grid-text h2 {
    font-size: 0.8rem;
    font-weight: normal;
    color: #666666;
}

.palace-one .palace-grid {
    width: 33.333%;
}

.palace-one .palace-grid-icon {
    width: 45px;
    height: 45px;
}

.search-box {
    background: #fff;
    border-radius: 22px;
    position: relative;
    width: 85%;
    margin: 0 auto;
    height: 32px;
}

.search-box input {
    width: 100%;
    background: none;
    border: none;
    font-size: 0.85rem;
    text-align: left;
    height: 32px;
    border-radius: 3px;
    padding: 0.55rem 0 0.55rem 1.8rem;
}

.icon-search {
    position: absolute;
    background-image: url('data:image/png;base64,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');
    left: 8px;
    top: 0.4rem;
    background-size: 19px;
}

.title-coll h2 {
    font-size: 0.9rem;
    color: #414141;
    font-weight: normal;
}

.title-coll p {
    font-size: 0.85rem;
    color: #bababa;
    font-weight: normal;
}

.coll-box {
    overflow: hidden;
}

.coll-box .img-coll {
    width: 70px;
    float: right;
    position: absolute;
    right: 0;
}

.coll-box .title-coll {
    float: left;
}

.flex-clear {
    padding: 0;
}

.flex-clear .flex-box {
    position: relative;
}

.flex-clear .flex-box:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    height: 100%;
    border-right: 1px solid #D9D9D9;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.img-coll {
    width: 130px;
    margin: 0 auto;
}

.title-coll {
    padding: 1rem;
}

.coll-box-bottom {
    position: relative;
}

.coll-box-bottom:after {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.color-back {
    background: #fff;
}

.flex-box h2 {
    color: #2d2d2d;
    font-weight: normal;
    font-size: 0.9rem;
    text-align: left;
}

.list-theme-box {
    padding: 0 0.8rem 0.8rem 0.8rem;
    overflow: hidden;
    position: relative;
}

.coll-box .img-coll-one {
    position: absolute;
    right: 0;
    width: 55px;
    bottom: 0;
}

.image-text {
    position: relative;
    padding: 1rem 0.8rem;
    overflow: hidden;
}

.image-text .flex {
    width: 48%;
    float: left;
    border-radius: 5px;
    margin: 0 1% 2% 1%;
    padding: 10px;
    background: #fff;
}

.shrink-img {
    width: 50px;
    margin-right: 0.5rem;
}

.shrink-img img {
    width: 100%;
    border: none;
    display: block;
    border-radius: 3px;
}

.image-text .flex-box h2 {
    font-weight: 500;
    font-size: 1rem;
    color: #3d4457;
    text-align: center;
    margin-bottom: 0.2rem;
}

.image-text .flex-box p {
    font-weight: normal;
    font-size: 0.9rem;
    color: #333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    text-align: center;
}

.image-text .flex-one {
    background: #fff6f9;
}

.image-text .flex-one .shrink-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
}

.image-text .flex-one h2 {
    color: #ffaccd;
    font-weight: normal;
    font-size: 0.8rem;
}

.image-text .flex-two {
    background: #fff9e7;
}

.image-text .flex-two .shrink-img {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

.image-text .flex-two h2 {
    color: #ffaccd;
    font-weight: normal;
    font-size: 0.8rem;
}

.image-text .flex-three {
    background: #fff6e9;
}

.image-text .flex-three .shrink-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
}

.image-text .flex-three h2 {
    color: #ffaccd;
    font-weight: normal;
    font-size: 0.8rem;
}

.image-text .flex-four {
    background: #eeeeff;
}

.image-text .flex-four .shrink-img {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

.image-text .flex-four h2 {
    color: #ffaccd;
    font-weight: normal;
    font-size: 0.8rem;
}

.user-info {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 0.3rem;
}

.flex-box p {
    color: #999;
    font-size: 0.8rem;
}

.button-go button {
    border: 1px solid #ff4e70;
    border-radius: 3px;
    background: none;
    color: #ff4e70;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
}

.icon-add {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABkUlEQVRoQ+1a203DQBCcNQ1AB3QAHQD/mEcF0AHXAaGDo4NQAY7DPy6FEqABDjkBQeSIO528G9ke/zq33nkp8siCiV0yMbwg4LErToWp8MgYoKVHJmgHjrnCoXRXAO4g2EdAgz08SOXfrYg2BRzO3SkKvG6AC6hk6a/HCbh0FQSXHXAFDqxUtlW4dA0EJx3AnziTF99YqEzAmiwHKvxNLy2t5zNmWI9bgBn+YZcZ1vMZM6zHLTP8yy0zrOczZliP24FleNVUCO4BHGuSkjH7DQFVanOSZOmtTUXGZspHHqX2LvaMNMAXbg7gJjZs1/el9lE80R+0IMLkAG8r33YtZ/f5T1L729haSQqvVF7XqzMIjmJDje9/AJijwCylCEwG3AcIvh7y9bAPH/0/g5bW5JgZZoY1/bWezQxrcswMM8Oa/mKG9dllhplhfZdZ/w9P7qOWtvl83tAxYCFL35YLJpepwn+ak7ZdPISgSm0q+mLDHHBfi+fOIeBc5oZyjgoPRancPalwLnNDOUeFh6JU7p5fHfz4PfnIw7sAAAAASUVORK5CYII=');
    background-size: 16px;
    width: 16px;
    height: 16px;
}

.img-list {
    width: 100%;
    overflow: hidden;
    padding: 0 0.5rem;
}

.sml-img {
    float: left;
    width: 46%;
    margin: 0 2%;
    position: relative;
}

.sml-img span {
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 0.1rem 0.2rem;
}

.coll-list h3 {
    padding: 0.5rem 1rem 3rem 1rem;
    font-size: 0.85rem;
    color: #a0a0a0;
    font-weight: normal;
}

.bloc-box span {
    display: block;
    float: left;
}

.bloc-box span em {
    float: left;
    font-style: normal;
    color: #999;
    font-size: 0.85rem;
    margin-right: 1rem;
}

.bloc-box {
    padding: 0.5rem 1rem;
    overflow: hidden;
}

.icon-pl {
    background-size: 16px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAADxElEQVRoQ+1aXVLbMBDedcRz6QkKJyg9QcMJSt+YSDOEE7ScoPQE0BMQZqQMb9ATNJwAOAHhBvQZx9vZjM0YW7KcDHZcIj0mO9Z++6f9Q1izg2uGFwLgt67xoOGgYQCQUh4g4h4AbAJAv0tCIaJbRJwCwEQIcT4ajR6r+Ks06cFgsIOIl4i41SWQLl6IaIqIR1rrKxeNEzCDjaLoT6rV/wHvM49JkhyOx+ORjWkr4OFwuBnH8b0D7HXH0H+28RPH8fbFxQWb+otjBayUOgaAHxklEf1FxGGVqaxSCEqpPSIaIeK7HM+/jTEcd/yApZT3eb9NkuTTeDy+XSUo392pC97k6YQQ74tBrKTh/f39LSEEm/P8EJFVUj4GVvG/lPIKEb/k7t7VWk/yvJQAK6X42eFglZ2fWms28c4fiyseGWNO1wYwAJSU9aY1HAADlMvDt+TDQcNBwwAQTNoS2rv6IBff4eDDwYeX8OG0lLxMOyGPSZIcuWpRdgUp5Qkifk/z9FNjzJHLRQaDwTCKopO0TOWOxteqjkYrJq2U4ry72PYpJe0MysIQ/2zN1S3Bk2knWutdl4DaAkwWBlwguHIpFuzXWutSn8whHNBaO7s0AXATxYNSar00LKXkTuGHvFm7mmhSSm7DHORpiejcGDMsukUasM4KtA/GGGcHtS2TLvaTrD7JjHM3pdfrTTIBEdHDbDbr25ptaZB79vk6fbVWAGdAoijqR1E0LbZUippLn7F5kBJCTHyNc47WSZJsJUkycQkmu6M1wF1JNQPgJqJ0V7TrSGxCTys08UIDIDQAuhSmXvKy1LNkGUr90lrP69euH6UUj1W+5fj0z5bS8P5cEPBU3Riz3XWwnME9PT3d+Kae1tqyOIXj2asx5rDLoKWUZzzDznjkPN1WaLgG4sUJIo9NuSqyrhEUBYGIk16vd+fLk10CZG3NZrOPRFRrgYaIhsU9FFfFVtU9KPrDogr29rdsH1RK8eYBxwzeGFrquEpO/ljlFo+tfl2Ug6oFk+K3ima56F1Mz2A3Nja+u6zLu4mXJiI8ELcuj9Rhqg7oVwB7BwDHvj0UL+AMULoKUXdfqySgKtAOsHMAAFC5aMb8xXE89dXKGY7agOtoMk9jcwcbaBdYIUR/2aBXxWtjgPlSH+i2wXqD1qJatdE7Gne8ArVpWWm8a0qzjZu0z7wtwmkcbCsazoB5nrhrIcReEz5bSopew2zrfoOfOCLipGInG5AR0VXV8K3ut+vSNRq06jLRJl0A3Ka0V3FX0PAqpN7mnWun4X/SXtFbC3mWIgAAAABJRU5ErkJggg==');
}

.icon-dz {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEZ0lEQVRoQ+2aXXLTMBDHJX88U05AOQHlBKUnAN46kWYIJ6CcgPYElBOQzkiZvtGegHKCpiegnID2OY2X2Rmn449dWXbs2KHxY2LL+/N/tdpdSYondsknxiu2wP+74luF16Xw4eHhbhiG+1LKXSHEnZRyFobhzWQyuevShrUrjKBRFH0XQrwhwO4AYGKt/dwV9FqBR6PRXhAEP4UQOy4gAJjFcXzQhdprA06Vva6CzXyIE2PMcdtKrw1Ya43KUm7MMd1FUfSybZXXAqyUOpJSfi2SAcCllHKSJMlOEARHQohX2XuSJPk4nU4nbarcOfB4PN55eHj4TbjyL2PMo+Ja63dCiB8FuNbdunNgrTVCIMzjBQD3i8Vi7/z8/Hb5Y/ph/haAcx+lDaU7BWZUEwDw2Vp7WgTQWsPGAvu6chZwo4GVUhMp5YcqV17+r7XG+YyRPOv6l9ba3HRY1a07cWnK+NRQNghtbNBCV57P59dpjpwV5MYYs8cppLXGJOPLxi1LWmsMRp+KYEmSvJ5OpzMH8JUQYr8A7HymiXu36tJNXBmNppYkXLqstc6cu3dgpRS6cs5tAeCPtRZLQPai5i9mYW0HLDSgNYVHo9E4CAIs+4rXgTEG3ZW9mIhOrtVNVM0+4wVcKNa5d2IuXHTBb8YY/N15aa1L8xfrYinlYyZWNQb+DwC3cRxfugqOSmAqenq+/D6O412faocC9nkHcw92TE6NMSfU/05gLjX0NMY78W/6USvsIL3LCayUupVSvvAEzN1WtQxlb06jNLp1rjxs8t7sM5QNLHDaocCyrtFljKmcLkXo+Xx+WkxHG708fQgAzqy1Y6+gxeS2Z1iwE0bkcmD8vy5wdsy091V3Dcb7i/V0qbxkVWCWGXJeElXOSsBNVGU80h+YCSTvjTEXRYOGAMwkL/4urZS6kFK+LcCRScRAgEvFB9VoYF2aWhu5eTkQ4FLyIoQoCcQCK6Vw++NZVuGBA2M/LBfoKHtdCnv3l/pWmAlYZP1NAtdtt/QN7Buw0Fu9gYUQrvZM0RvWuizV6ZZwwF4Rbzm/B6Cwd7eEA6baNGxdOwBgr4DlcmnvL4aD9Ansm2EtvZFTGJttucrFlRv3CcyUsGzjgQPOBaGqvlTPwLXauyXgui7St0tTGaGrFi8Bc2Vhsa7MZmA9K+wdsMigVacs7HtZauKNlMKlOSGEIMvCvoGbiFMCpnrEVNUxBJdmSlinOJTCpTU4iqLnrnZrH3OYOTEgqmzdWGDmKEXl9gzl0lSnw9ljXrfCWmvcnSwdmaiKNXWiNG5jTADgIgzD0llIACjtHUkp65zJ8urbAQBu1OGJAGps5/6zM7VcpQHvZXkHN/k2/rnUkjoz1YGZ7QxZ5wBb3b50Oxa2NApumgPAUZ3Tes7tkHQHAIND7ihCS/auNAxuoywWi+Ps4TafAb32f9IUDgMGdyiFCiLOTXAf45h7rqIomvlsw1LPewGvYNzgHt0CD06Slg3aKtzyBx3ccP8Ad9HEW2ddBRYAAAAASUVORK5CYII=');
    background-size: 16px;
    width: 16px;
    height: 16px;
}

.footer {
    width: 100%;
    position: relative;
    z-index: 100;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 7px 5px 7px 5px;
    background: #fff;
}

.footer:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #e4e4e4;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.tabBar-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #979797;
}

.tabBar-item-text {
    display: inline-block;
    font-size: 0.6rem;
    color: #818085;
    padding-top: 2px;
}

.tabBar-item-active .tabBar-item-text {
    color: #ff486a;
}

.icon-loan {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAIAAAC1eHXNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDI3M0E4QUZDRjMxMTFFOUJCMUFDRTI5RDc3QkJFQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDI3M0E4QjBDRjMxMTFFOUJCMUFDRTI5RDc3QkJFQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MjczQThBRENGMzExMUU5QkIxQUNFMjlENzdCQkVDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MjczQThBRUNGMzExMUU5QkIxQUNFMjlENzdCQkVDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po0LxpgAAAW0SURBVHja1Fj7bxRVFP5mdgp9UKSlFtRQediohfCIUI2tGiJKK1A0ghWNYjEaoz+aGP8FfzFBMdbGRDQoJS0gEqoERY0gAiIK5dEgLSoNShvKo6Xd7mP8ztzZme1uO860FnSy2dyd2XPud8/jO+eMZpom/gOXPiJpnkF91HoElzEiELw0zV6rxbWzh3N6bsxP50WEI7IYmWH0wF7glvHE6fc349U38fZGdF91oahFwEvzG6eO5WNxhHREItixB/U75WckipLpeGkFiibLT12zoQTxlD8czim5jRHCpW580oSvDsojYuJ9Qrm5EGuqcFcJ4nHbZUGg+MDhgOAGoRDaO/D+Fhw9JZhuKcTS+9H6B3YTk4acTFRX4JEyy0EQw/iG4iNfbBCmgDh2GnVbcPa8gLhjGmqW4fap6I8g/wZs+xY9fVi/DR0XsKoSYwzBres+ofyTPZyn1LX7ADY0iVO4Qfk8PLsUN+aJR+gpbvTNIXy4HZd75GnZPKxZjvzx/qEMgSM57JWKj5skMPvCMAwsKUf1w8gci1hMjOQExMkzWFePc51yn9Z64THMmOI+DYzDAaF83NuHdxuw7yiiUYzPQfViVJZZ2Zu0gYOYTllbj5Ot4rhJE1GzHHfPslVp8ECThsMFYYpJ28/jnU1oOWNF5STUVGF+yQA7pRuvrx91m7HnsIhkjcWqCsFNVQo3BkczEIdCTQFhOB2HWyQ1aGcG6awZePFxYQghsTRdSjAZX8MubP0a/f3ygDm1chFysmzuSTlGKg6bK+MiSXd8sVdo6spV2YBx9/yj4hSC8MjGFId+9xM++EwiNxpD2Rw8swSTC2TNuE4rSQkcDmFTninAqPx8r8iMycDS+yQqDX956JKNKUdn5NY24OxfiDByp+K5Ktw5TdTy0UCi00wKwHTvXrwiDPHDEUmEvFyJygdLof7jkwxSyPccee9TNJ+WUjBxAlYvQ/lc17kJhQPt0daO2s042YZxWejpFTqiJQifRtIDVsRkCqZzX18rlZnIyG9PVqDqgRTX6DZwVTzfWI+WNmSOEbw8SsEEN3EClVAnfQiCynOzRZUyT38UH20Xk4f7kyuzlU487qHjkp9MjewsFN9q51g85ioN2uY4pU5PbEYc2ZmYlC8LJsFbG6UgJLhHt1LOik3uPSEXKxbh6Ur5KRtrHhnvF42DKRzGlMl4pVpIlvpbfkvsoupcyHJ86Sy5RTMumIljrRiN3pnOZVlgp/LaaknGmdOFUdx6qxDxT/fMtqwXs7wwCjhMq1kh2xbmS9YkN5eCw220YjYgzUc6pCzEgwN94QGFAcC9uJHKQQuA4bpQ3fXWoqU5fiiI3kFjGK6sbY9glk3KnR+P4/tf0NmFDAO3FWHhfKHt4c4QRmBq4nfXZdQ2ShVk4pElacgjpyT0nqpARZnbtY8KDqcE9vZi3SYcPCakRDLIGy/pR/Im/9ZthZGBRaXDgBLEHhJlGnbtx6ETUv/mFGPlQ9Kf9oaltDZ+iQuXsWEH5hajIC/oCKMHyzpWiuZfxTA3FeDlJ6T5YwVgHVh8L5YvFAt19wjK4HOUHiBIqb3rEjq6BMeCEiFfNTURCmvh7GJpBFnfWeVHMU5ViETjEpsERCrUdbeCaLoUUtrDjEslG/0527QpP8Xw2iCra/j+4/q/h9EwwhceQeJDzfKq8qnmNBqzUXgkRNySGnQkGw4OCrKPImdnJP2Hc6yuWf3s0DTDOS8jTa3cMQPiMC11ZIud+yy2UD2V5QvyB4dpXR9Mp2a/hqDIe42pDzmah/Tg9lC7/tyCA82JsqKoLCRGor9US5siozqH3//EibbUh7k53vHk6ZecTIzLduu9lugxSaaFeamWoOWLi6QEkj/ovnR/heHhmpS5MjHSRaJebCYtjOZ2McnvSFRQe8g6oTPkXHldL8Or7fPTiweV8jXv/1/fa/97198CDADnpvvDwX7w2gAAAABJRU5ErkJggg==');
}

.icon-credit {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAIAAAC1eHXNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzdCNTM3QUFDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzdCNTM3QUJDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3N0I1MzdBOENGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3N0I1MzdBOUNGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtDZ9I8AAAifSURBVHja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');
}

.icon-ions {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI3OTk3QTVDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI3OTk3QTZDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Qjc5OTdBM0NGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Qjc5OTdBNENGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psnyw+kAAA3YSURBVHja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');
    width: 35px;
    height: 35px;
    background-size: 35px;
}

.icon-car {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAIAAAC1eHXNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzdCNTM3QUVDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzdCNTM3QUZDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3N0I1MzdBQ0NGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3N0I1MzdBRENGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl7XG24AAAT1SURBVHja7JhJSyRLEMen237uCyqo8FDE53ZQ9KAHEQQXvAh6EEQQ/AiCePXg3at+BC/iQRAUBMWTHkQPKgjKCO4L7ru+sZ0fFTM5OVlZ3bb0DA5MHIqqXCL/EZnxj8jyvb6+fvoA4v/0MeSj4AgY379nm3w+Hwvx/NHyQc5HQPcEAF9eXq6urryM+N8RXuLi4vx+v9uGx8dHGmNiYhjg7hX9KSkp0qv7w9yXy8vLvr6+QCDgc8S9a6IdEFaswWDw27mzDaDx9PS0t7e3traWkcD1xMHadIPj+fkZ043efxzh5eHhwWpufHy8GM0ANwg8gXK3eRYcog4QxcXFRUVFoNYt29zc3NjYYEBDQwNKDd8+PT3Nz8/f3d1lZ2dXV1eruTKM7V5YWLCC8MSBxvLy8paWFqNrcnJybW0N7a2trRkZGUYvblheXj47OwNHe3u70XtycjI7O6vvRRgc4kMc+8UR9ki2AHw0yrnBuNTUVOUPZbG8fPkuzJVDg0J6edIYAQ7UMUe06DiUnwOOGJ5XtvKu5ioc9IbgiL+8/qfisG5q1LOB372AYlJjsdCfVtp9O1wzXjjVHG+YgKdkRZ1X3Pytr0dykXYJHL2Lp3R58ZjpDzJQWloa8ba1tUXEw+K+73J8fLy4uJiQkEDj1NQUWIlG6ZKXpaUlCIZenqyq5krv9vY2L0lJSYmJiW4cMQMDA4Y/SEU7Ozs8b25uYEashKpXVlZGRkaOjo7EoMPDQwgejai+v7+/uLiYnp6emZmBiGm5vr5eX18Xd9KChtXV1fHxcfDl5ubW19eDxvDND88rsgJ4f38/Q+E+lZawnqTDS0VFBbAAwXqxsbFiK3MZTF6EZJOTk/Ec4+lV03EPvTy7urqam5tl0+15X9QhbI0kVbQIPUvBkZWVBYiOjo7b29vR0VFyHnZjrpAvvsnLyyMlFRYWjo2N0Ys7ZYMkUaenp9fV1TU1NemhYK/HZATOxx8sT87Mz89HF4CwsrS0FK+qnPLZEXwjhQ8oKysrOT2ian9/n16qGUko1ANMLygoUF4PUwepPIehzGxsbDQyqpRhWPmfI+46CO08/3XEGs+iwfBHIEQpCxSsYW2JQ78jKuEFHdHHqwHSq1hE1TS4lmrBDSIUDlEnBaIcRgOlSr9WG9R4WRUEQ0NDbFNnZ2dZWZmy7f35RUwMhhSDxBBONKHLiSEYDXoM7w8vW0PUyVbyFUASg14TA+/wB2vs7e3hardSCXs9rNxJJzo42FoOzfDwMIwJ1+lQ6OJoE5yDg4PWwxhBnnujUKxnZmbCmOQglZwhUw4Hzyjcb98orEfWIAi7u7sVNU1MTOzu7urB/MtxyC7AnjU1Naplbm5OksBvxSG8+eKIcIm8ROe/Q6Si6MjrghQFHJiLn4Wh9e3Qx8gAnbKkBjAupGFdFQjhc7ZfLkI/TXBapHyUG7nuG3XFMmZJKEX2PwgBPtzAVVb+Z+imyCcFGKmcCoMCUcULjZAYSUQa9VmQHlZRJFj/mtjrj/Pzc4pFuAH3HhwcqHulXi7BH7QDl8Sh+EMamQU+wzYiPCcnhzqtp6enpKTEnecs/qBObmtroyCl7uKSjt1e/33kh0foRjkcFGNVVVW8UK0ZR8f+f0wUMZTqF8soGt4dikaSo6JTt223Tsu+RJoa3pEmw9RjasSv+4noZafv73/tn+SrAAMA213c80k+EwEAAAAASUVORK5CYII=');
}

.icon-mine {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAIAAAC1eHXNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzdCNTM3QjJDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI3OTk3QTJDRjNEMTFFOUJCMUFDRTI5RDc3QkJFQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3N0I1MzdCMENGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3N0I1MzdCMUNGM0QxMUU5QkIxQUNFMjlENzdCQkVDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhCxQDcAAAa0SURBVHja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');
}

.footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 49;
}

</style>
</head>
<body>

<section class="flexView">
	<header class="navBar navBar-fixed">
		<a href="javascript:;" class="navBar-item">
			北京
		</a>
		<div class="center">
			<div class="search-box">
				<i class="icon icon-search"></i>
				<input type="text" placeholder="搜索项目/商品/专家">
			</div>
		</div>
	</header>
	<section class="scrollView">
		<div class="m-slider" data-ydui-slider>
			<div class="slider-wrapper">
				<div class="slider-item">
					<a href="javascript:;">
						<img src="//repo.bfw.wiki/bfwrepo/image/60722d8443eb8.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="//repo.bfw.wiki/bfwrepo/image/60722d8443eb8.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="//repo.bfw.wiki/bfwrepo/image/60722d8443eb8.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="//repo.bfw.wiki/bfwrepo/image/60722d8443eb8.png" alt="">
					</a>
				</div>
				<div class="slider-item">
					<a href="javascript:;">
						<img src="//repo.bfw.wiki/bfwrepo/image/60722d8443eb8.png" alt="">
					</a>
				</div>
			</div>
			<div class="slider-pagination"></div>
		</div>
		<div class="palace palace-one">
			<a href="javascript:;" class="palace-grid">
				<div class="palace-grid-icon">
					<img src="//repo.bfw.wiki/bfwrepo/image/60d41f165b68a.png" alt="">
				</div>
				<div class="palace-grid-text">
					<h2>项目宝典</h2>
				</div>
			</a>
			<a href="javascript:;" class="palace-grid">
				<div class="palace-grid-icon">
					<img src="//repo.bfw.wiki/bfwrepo/image/60d41edaee3b0.png" alt="">
				</div>
				<div class="palace-grid-text">
					<h2>名医专家</h2>
				</div>
			</a>
			<a href="javascript:;" class="palace-grid">
				<div class="palace-grid-icon">
					<img src="//repo.bfw.wiki/bfwrepo/image/60d41ef79501a.png" alt="">
				</div>
				<div class="palace-grid-text">
					<h2>热门医院</h2>
				</div>
			</a>
		</div>
		<div class="divHeight"></div>
		<div class="flex flex-clear">
			<div class="flex-box">
				<div class="title-coll">
					<h2 style="color:#ff496c">"0"恢复期</h2>
					<p>变美只要个午休时间</p>
				</div>
				<div class="img-coll">
					<img style="width:40px;float: right;" src="//repo.bfw.wiki/bfwrepo/icon/5ea62c616e8d5.png" alt="">
				</div>
			</div>
			<div class="flex-box">
				<div class="coll-box coll-box-bottom">
					<div class="title-coll">
						<h2>牙套妹的蜕变</h2>
						<p>美牙 <em style="color:#ff496c; font-style:normal">30元起</em></p>
					</div>
					<div class="img-coll img-coll-one">
						<img style="width:40px;" src="//repo.bfw.wiki/bfwrepo/image/601fc3b5721f5.png" alt="">
					</div>
				</div>
				<div class="coll-box">
					<div class="title-coll">
						<h2>明星同款线提升</h2>
						<p>提拉紧致 <em style="color:#ff496c; font-style:normal">2折起</em></p>
					</div>
					<div class="img-coll">
						<img style="width:40px;" src="//repo.bfw.wiki/bfwrepo/icon/5ea62c6ed8890.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="divHeight"></div>
		<div class="flex b-line">
			<div class="flex-box">
				<h2 style="text-align:center">大家都在买</h2>
			</div>
		</div>
		<div class="image-text ">
			<a href="javascript:;" class="flex flex-one ">
				<div class="flex-box">
					<h2>超值特惠</h2>
					<p>打造百变女神</p>
				</div>
				<div class="shrink-img">
					<img src="//repo.bfw.wiki/bfwrepo/icon/5ea62c758823d.png" alt="">
				</div>
			</a>
			<a href="javascript:;" class="flex flex-two ">
				<div class="flex-box">
					<h2>只需要5招</h2>
					<p>夏日咋整</p>
				</div>
				<div class="shrink-img">
					<img src="//repo.bfw.wiki/bfwrepo/icon/5ea62c616e8d5.png" alt="">
				</div>
			</a>
			<a href="javascript:;" class="flex flex-three">
				<div class="flex-box">
					<h2>ranking list</h2>
					<p>百变女神推荐</p>
				</div>
				<div class="shrink-img">
					<img src="//repo.bfw.wiki/bfwrepo/icon/5ea627e20b5a7.png" alt="">
				</div>
			</a>
			<a href="javascript:;" class="flex flex-four">
				<div class="flex-box">
					<h2>beauty</h2>
					<p>美丫实力</p>
				</div>
				<div class="shrink-img">
					<img src="//repo.bfw.wiki/bfwrepo/icon/5ea627d168090.png" alt="">
				</div>
			</a>
		</div>
		<div class="divHeight"></div>
		<div class="tab" data-ydui-tab>
			<ul class="tab-nav b-line">
				<li class="tab-nav-item tab-active">
					<a href="javascript:;">
						<span>推荐</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>眼部</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>鼻部</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>牙齿</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>身材</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>脂肪</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>微整</span>
					</a>
				</li>
				<li class="tab-nav-item">
					<a href="javascript:;">
						<span>视频</span>
					</a>
				</li>
			</ul>
			<div class="tab-panel">
				<div class="tab-panel-item tab-active">
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
						<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
				</div>
				<div class="tab-panel-item">
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz"></i>点赞·2890</em>
							</span>
						</div>
						<div class="divHeight b-line"></div>
					</div>
					<div class="coll-list">
						<div class="flex">
							<div class="user-info">
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
							</div>
							<div class="flex-box">
								<h2>微微安</h2>
								<p>5月20日</p>
							</div>
							<div class="button-go">
								<button> <i class="icon icon-add"></i> 关注</button>
							</div>
						</div>
											<div class="img-list">
							<div class="sml-img">
								<span>before</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png" alt="">
							</div>
							<div class="sml-img">
								<span>after</span>
								<img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png" alt="">
							</div>
						</div>
						<h3 class="b-line">恰好拍到了发际线的细节的照片给大家分享,提供给大额头找不到出路的盆友们,希望大家都可以变得美美哒!</h3>
						<div class="bloc-box b-line">
							<span>
								<em><i class="icon icon-pl"></i>评论·2890</em>
								<em>|</em>
								<em><i class="icon icon-dz".........完整代码请登录后点击上方下载按钮下载查看

网友评论0