css布局实现p2p贷款app首页h5页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现p2p贷款app首页h5页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线借首页</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: #f1f1f1;
    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;
}

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: #f5f7fc;
    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: 20px;
    width: 90%;
    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%;
}

.aui-arrow {
    position: relative;
    padding-right: 0.8rem;
    color: #d5a376;
    font-size: 0.85rem;
}

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

.aui-arrow:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #d5a376;
    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;
}

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

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

/* 蹇呰甯冨眬鏍峰紡css */
.aui-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;
}

.aui-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: 13px;
}

.aui-navBar {
    height: 44px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 102;
    background-color: #4367fd;
    color: white;
    border: none;
}

.aui-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;
}

.aui-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;
    font-weight: bold;
}

.aui-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;
    font-size: 14px;
    color: #333333;
}

.aui-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: 80%;
    margin-left: 25%;
}

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

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

.aui-flex-box h1 {
    color: #fff;
    font-weight: 500;
    font-size: 1.5rem;
    overflow: hidden;
}

.aui-flex-box h2 {
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    text-align: left;
    height: 25px;
    line-height: 25px;
}

.aui-flex-box p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    color: #ffffffcf;
    font-size: 0.7rem;
    text-align: left;
}

.aui-flex-box h3 {
    font-size: 0.9rem;
    color: #fee3b7;
    font-weight: normal;
    width: 100%;
    overflow: hidden;
    padding-left: 0.5rem;
}

.aui-palace {
    padding: 0.4rem 0;
    position: relative;
    overflow: hidden;
}

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

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

.aui-palace-grid img {
    width: 100%;
    margin: 0 auto;
}

.aui-palace-grid p {
    text-align: center;
    font-size: 12px;
    color: #919191;
}

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

.aui-palace-grid-text h2 {
    font-size: 0.85rem;
    font-weight: normal;
    color: #333;
}

.m-slider {
    overflow-x: hidden;
    width: 92%;
    margin: 15px auto 0;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 1px 90px #0000003b;
    background-image: url("//repo.bfw.wiki/bfwrepo/image/6085fabb307f7.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}

.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: 10rem;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-image: url("//repo.bfw.wiki/bfwrepo/image/6085fa955c872.png");
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 8px;
}

.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: 60px;
    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: 15px;
    height: 3px;
    display: inline-block;
    border-radius: 1px;
    background-color: rgba(255,255,255,0.3);
}

.slider-pagination > .slider-pagination-item.slider-pagination-item-active {
    background-color: #fff;
    width: 15px;
}

.aui-vip {
    width: 28px;
}

.aui-one {
    padding: 0.85rem 0.85rem 0 0.85rem ;
}

.aui-one .aui-flex-box {
    color: white;
    font-size: 0.8rem;
    text-align: center;
}

.aui-logo-img {
    width: 40px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 10px;
}

.aui-apple-btn button {
    background: #fff;
    border-radius: 100px;
    border: none;
    color: #5069f5;
    font-size: 0.85rem;
    padding: 0.32rem 1.2rem;
}

.aui-flex-text h1 {
    color: #fff;
    font-weight: 500;
    font-size: 1.5rem;
    overflow: hidden;
}

.aui-flex-text p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    color: #ffffffcf;
    font-size: 0.7rem;
    text-align: left;
}

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

.aui-flex-one {
    padding: 0 5px;
}

.aui-flex-one .aui-flex-box {
    padding: 0 5px;
}

.aui-list-white {
    background: #fff;
    border-radius: 20px 20px 0 0;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

.aui-flex-box h4 {
    color: #333;
    font-size: 1rem;
    position: relative;
    padding-left: 0.7rem;
}

.aui-flex-box h4:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 0;
    width: 4px;
    height: 16px;
    border-radius: 10px;
    background: #4367fd;
}

.aui-link-logo {
    width: 40px;
    margin-right: 10px;
    margin-top: -20px;
}

.aui-link-list {
    padding: 0 15px;
}

.aui-link-list .aui-flex {
    box-shadow: 0 1px 6px #0000003b;
    border-radius: 8px;
    margin-bottom:1rem;
    padding-bottom: 2.5rem;
}

.aui-tags {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fd7843;
    width: 100%;
    color: #fff;
    border-radius: 0 0 8px 8px;
    padding: 0.4rem 1rem 0.3rem 0.8rem;
    font-size: 0.8rem;
}

.aui-title-one h2 {
    color: #333333;
    font-size: 1rem;
}

.aui-title-one h3 {
    color: #fb362c;
    font-size: 1.3rem;
    font-weight: normal;
}

.aui-title-one p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    color: #989898;
    font-size: 0.7rem;
    text-align: left;
}

.aui-title-two {
    padding: 0 1rem;
}

.aui-title-two p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    color: #989898;
    font-size: 0.7rem;
}

.aui-stn button {
    background: #5069f5;
    border-radius: 100px;
    border: none;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
}

.aui-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: #fefefe;
    box-shadow: 0 0 1px #a5a5a5;
}

.aui-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;
    position: relative;
}

.aui-tabBar-item-text {
    display: inline-block;
    font-size: 0.65rem;
    color: #7d7d7d;
    padding-top: 2px;
}

.aui-tabBar-item-active .aui-tabBar-item-text {
    color: #3267F4;
}

.icon-return {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEC0lEQVRoQ+1bTW9MURh+HhsLLNjYiA0bH6Figahod4LQjR+AShBWYqEW2gUiPlbKxsdfUN87bdLShQWi7YYFiQWi3ZCw8cg7vXdy5vSemc7MneZec08ymXbu+Xifc8577jnveR5iHklSF4DdAOx7ZfRZESj6AsAIyYF5VB3MIukCgEMANgQyTQP4Gn0eAXhJcrxWm6yWQdIBAGcBdNaqyHs+QXJjnWUqskuyjrMOrieNArhK8mGoUBCwpDsAjtbTmpN3kmRoZOZVpaTXALbOK/PcTHdJ9iaVTQQs6QmAvQ02ZsUGSPY3UR6SrLxN60bTW5IdfuE5gCUp0MIvAO8BTACw3p8K5DP/DdVRl/GSzD5bO5LSWgAGaHP0vTRxRMkKjBX/SHoTVeCXvQ3gCslPdVm8QJklGfjrAGzN8dMzkuXZWgZcxWf3k7QpnvkkqQ/AxQRDyz5dAhytxkNz5rs3HTKPODIw4JYHbfWOAdtyvtMDdJ7kpbyAdO2UtA/AY8/2MZKdlLQdwCvv4SOSSf6QG/ySbgE44RncZYDPALjmPPgJYAvJD7lBl2CopNUAJgEscR73G2B/RzNKcleewca2S7Kt5jYHy7ABtl5Y5/w4SPLUfwL4LoAjDpYpA/wDgHsQOEbStpW5T5LMh82X4zRtgP1dUTfJ4dyjnX3d2uHDXLacCsAAihHO6/QupjSAtvRhW5HLZ07m9MAQcjvvLTRpI2yRBQuW/QZge+imIhVZ83cH33cAw1WDeFkzPg17CsBp9GKW6yhGOMujk4Zt7TfCzh3O+jR6MMN12H5jJCnikWGbmzZtot0AV+y0/vcpPVKx04rucZqeM1mtIL7var9VOqsj0iq7ihFuVc9mpV73unQxyT9ZMaxVdth72GgF9jHwQW5Eqwxodb3OTvJbvNPyySOrSH5ptSELVb8X4inttIqbh+KqZaHmX8rtFIH4dg3Et92iZazU5Y779JK0m/PcJ0nHARipLk4zSZSHmyRP5x7t7IW4T5AtUR7ajtSSRFvqIPkxz6Ncjba0w9jkHrghkj05BzwI4KSHobsa9bCP5OU8gq5KPTRAkg4CeOCDy+tdcYBc2kNyyD0P+ySuGP8+kk/zMNKSzgFIIsTeI1mSM7iA7W8jiG9KAGfkLiOIf84icElrANwIEMSfm5whMWoZhWr/BkAZ6dTo/yYDCEoASFr8N7UkqZoEIKb/mxRgWaDRRa4kIUnzYL/ZFN7ToNW2VTWRRxq6pTgS04gp70wL4esvQqqWUrgHwOFGWrKZkIJuqRkZz32TICWJTWoJtWz1NqGWz5av1Q9p6JYq2EW1Goyej0VCrTlyhrh8zbh05NdJUjz3wOHaM3uH0yQbyGHfhO68ZnwpHoDxWhKif/jd4LhYKbvpAAAAAElFTkSuQmCC');
}

.icon-news {
    background-image: url('data:image/png;base64,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');
}

.home {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEFUlEQVRoQ+2bTYjcZBjH/092XdjdZApCxUMpVPHgrlQ2GbBSoe2havEmpYLFg9gmo2K1Qg/14lTQipR+iEsnQaEoeFAK4mX9gu1B6WXeFCq1Ujy0iB/4hTuZobXaPJLCyjIzmcn7TpJGmr3u8/8//9/M+zDvZp4l3GQ/lCfv/U8t3frXOG3UMHZbyOEaaHQJjJ99V/8krxy5AZu1pZ3E2n4As91wzLxAuOU14U1+mTV45sCW/cdaovE6g54cAsMA6sI1XskSOlNgs9beSRweAOjOpBBM9IWGsN5sVL5KqpGpywR4c53H2z+15xmwZcKsqL0KcF24lYOK+lhZ6sBmLdhBQB2Mu0cNy0QLFIYvCq/y7ahey/pUgatO8BYDz6YV7roPcwcUzXblUBq+qQBbdusBaDQPxvo0QvXzYMLHlSu/PXbqxLoro/QYGdistQ8T895RQiTWMv5kjfb6Df1EYk1XoTLwfbt+X/OPNvERCJZqc1UdM076nrFdRa8EbNqtfUT0hkrD1DSMX0nDjmbDOCXjKQ1sOcFpABtkmmRZS4DXdA0naY/EwFUn2M7Ah0mN862jH8LxsY1n5icvDeubCLjqBCcZeHSY2Q3/PdF+0dBfH5RjILD5dMeiMGzecBCZAISzomHcGyeJBZ555hd98tpkINOrMLWM88IzZvrliQU27da7RPREYSAkgxBwtOkaPfeDvsCmHbxMhLpkj8KVM6Pue8aBlcH6AltOED2BeKhwBPKBPhWu8XAC4NYSQBV5/6IpuCXcyqqBwJbdMUGhKFp05TysWcKb9pf1PUe6Wgs2M2NRuUHBhETYsvL6WQKX73DBjqhsnPJId79i5ZGWPUMFqy+PdHmky4tHwYZSMk45w+UMlzMsOTQFKy9nuJzhcoYVhpLxPo9ph/3j08qPiq7/ERNiNwiPKyT4T5L5DDPCbb67KrW9q1G3CjIGps+Fqz84yjvSrY3WnkAT5wGeUvHNGBjHhGu8oBJskMZyguip45yKb7bAzG8Lr7JbJdgQ4AsA7lLxzRYYOCdc4x6VYHGaqtPeyuDPVD2zBo5yLU5M6Y+cPkKXVUMu6+acYEYDPui3n5nUOw/gKMsZgHxm/j5psO46Ir4DoGhhpmcZVcYzL2CZTJnWlsA3/V36f7nXMWgomNYLT/96uaTnyzTL/nEKZHQyHazczOmicPV1K9vFbQAo32xyY0nUiN4Rrr5rKLBpd14iCl9N5FngIgZt6/4HktgtHssJonOf6q0pz9eGGa7vGbWez/f4EExmrb1IjE15Bk2lF+NN4RnP9/Maunpo2cEeEI6lEiRrE8J3RNqe5vHphbhWQ4Ej4dxzweqxvzEbhpjVNKzOOresfwi6qOHaN1c7l8+dfe/2gZ8wiYBlAxS5/l8gF+ZMIl4tQAAAAABJRU5ErkJggg==');
}

.news {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAADz0lEQVRoQ+2bPWgUQRTH/+9irhEFQQURQfALLAQbxUJRELQXJaK1FmpxHjOTXEQiRJKduzOCYqF1LBQEUVAQ8QO0EUEECz+CoKKFiNpY5HLzZDUhl+R2d/b2dmLMXrvv/d/77Zt9Mzs3S5hnP5pnvLAG9jxvgzFmhasblM/nR4rF4sd2xwsFHhwc7MrlcscBbAKwqN3BLfQ+A3hmjNHd3d1PLewjTZoCa63XATgD4GCkgjsDLaVUScMFAd8DsDupeAr+g1LKniS6M4C11h4AmUQ0TV9mPqyUGm41RjPg9wBWtyqYth8RXRVCHGo1zhTgarW6ql6vf2hVzIUfM79RSm1oNdYU4IGBgZ0dHR0PWhVz5SeltJ5Op+eUAWcVdjVOY8RxOaQfEdGwMeZdjPximeZyuS3MXAKwOMjRJXDiid+Gvlwu32XmPTbAlUplx+jo6KtSqfTNRjtW02LmY0qpSzbCSWy01tcA7LcBnphZmPkXET0noqoQ4maQbyxgAG8BnJRS3k4CFOZbLpePM/OFMJvGId1sKmXm80qpQjONuMATGpwWMBD9yhoF7OfGzFeUUkf+u3k4bLHEzGeVUqcaoVutcIoFjpa2qfC4yoiUcu18AsbY2NjyUqn0dQL6f68w6vX6rp6enocZsH8H5uLbUlTOSSv8HcAdZvbn41R+RLQVwN4k83CjbyJgIrokhDiWCumkKGmtnwDYFmelFWSbCBjAASnl9ZSBobW+CCDwxsaYlhI3rVu1Wu1ob2/vl7SgPc/bQkS3ACz/Fyrs5+C/lbxMCxjArihtlxWOysXJ9Qw4ZOMxadNyUsGoIFmFswpPjpFsSDc+L1Hr0nHbR1HPWMP1ZQA2xrC3MnX2DDPzGaVUn1VWf43I87w3RDTlJTyGf1NTZ8DTnwebxLXW/n9VO21sbW2cARNRUQhxzjYx387zvNdEtD6OT5StM+A/Y5SozxgzIyciaraT6Vc2cqkYBTj9ulPguMmlYZ8BZwuPbOGR7Vr+GQOWK600+lAszaxpZU0ra1pZ05pTTQvAUSnl5UqlstQY0w2gGNT1QjcA+vv7V+bz+U+xWubsGftnqReE7V/7qXV2di4pFAo/JtJsdrjUP5K0ZvY42hr5hZRyc6PiDGDP86pEdLKtYWdJjIgKQojzocD+Ra31YwDbZynPtoQlohtCiH3TxZqeSvU/6ADQR0RdbYnuXiTwc4HQY7haa/+bhxPjH3ksdJ93rIg/ieiVMea0Uup+kKfVuWNmpqGhoY21Wi3wH71YqbXZmIg+SClHbGStgG2E5orNvAP+DSqHj1s7ysqGAAAAAElFTkSuQmCC');
}

.icon-zhi {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFwklEQVRoQ+2beaxeQxjGnydBopYmROwk+EOKRkksJagKLUK1pZqonVqqsRRREW1Cm1SJrSqItrZQKhpLKV3EGhJFNCEh9qXUH0qCRPLIczv3utpzvjNnznzflVxvcvL9cd/3nfd35szMO+/MJfqZsJ/xoiPAkrYGcAiAI8OzA4DtAawBsBTAOwBeJfl5uzugrcCSNgMwOTy7VsD8DuBpPyT92xZpG7CkQQAeAnBgQuTLAdxA8s0E25YmbQEOsAsB7NMg4D8C9OwGPjYybRfwCgBHZQp0EcmxmXzln7Qk3QhgWq4Ag593SR6Uw2fWHpa0C4CvcwRW4GMNSc/ujSQ38KkAPHbbJetIDmziPDfwTQCubxJQhO0KkkdH6BWqNAaWNJzkMnuXNAfAJanB1LBbSHJcDf0e1UbAkoYAGETy0QD8GIDxKYEk2EwjOb2uXTKwpJ0BfOwZmeStAXgJgBF1g2igP4zkyjr2ScCSNgXgtfYwALNIXhuAFwM4qU4ADXVXkhxWx0cq8HwAZ4WGHiR5XofHcG/GKd1fWAx4bWBJswBc3cv5YpKjAvBlAO6Ma.........完整代码请登录后点击上方下载按钮下载查看