css布局手机端移动端招聘私活求职h5首页效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局手机端移动端招聘私活求职h5首页效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
    <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 {
    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%;
}

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

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

.aui-navBar-item {
    height: 44px;
    min-width: 25%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    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;
    min-width: 15%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 15%;
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
}

.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: 50%;
    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: #333;
}

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

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

.aui-center {
    margin-left: 5%;
    width: 100%;
}

.aui-jop-search {
    width: 100%;
    background: #f4f4f4;
    border-radius: 50px;
    padding: 0.35rem 0.2rem 0.35rem 1rem;
    font-size: 0.8rem;
    position: relative;
}

.aui-center input {
    width: 100%;
    background: none;
    border: none;
    padding-left: 0.5rem;
}

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

.icon-search {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAKhElEQVRoQ91bDXBcVRU+5+1uUpI2QGpbQkMZsOLPCJYBEai2InUGsIMD2PAzjjV/796XapEqdnDELrX8yE8d0yb77ibtanVwiILt0Kk/KBW0UGmtVmQQcYRSikMpTYW2STb73nHO5r315mU3+zY/Jemdyewm775zz3fvPeeec+4XhDFutm1/DBGvJqKzEfEMAKglohpEnEFEvQDwHwA44H3y9+cRcYsQ4r9jrEpecTjaQVKp1JS+vr7PIOJiALgeAGZ5Mh0AMABgyBhERIjYDwAR/iEiFxH/AACPO46ztaWl5aXR6lXo/REDZqDpdHoZANwJAKcCADE4Iv4AQCwu2u/rKdePiFFvgp4iom9IKXePNfDiWgVG7Orqihw5cmSp67r3IuJMb3V4JYc0BhQErk/IMJPDqx8joscMw7jDNM1/jhXwkgAnEonZbG+IeBFvy4GF/L8IfcX8v/OEAMBBAHgFEU8lojmIONUH4D038slBRMebtNuFEN8fC9ChASeTyUWu6z4KAJWIyHanr14WPCtERP9AxM2u6/46Fou9UlVV9XpdXR3bc661trZWxWKxOQDADu5aAFiMiBW+zOCnJ3drLBa7pbGx8d3RAC8KmLdwd3f3KgD4tjdwblU1xQ4i4oORSKSrqalpX6kKKaViiLiQiG4hoqU8wIBfG6QeTxp798VCiOdLHcPvPyzg9evXT4/FYryqnyKi7LbTV5aIuhHx3r6+vtbly5f3jVQJ/b2Ojo4PO46zBhGvz+MfMp4pCSllaiTjFQTMs05E2wHgIgCYooHlMfk8fcBxnAeWLVt2dCQDF3vHtu2LAeB7iHiFZi66GV0nhNhcTE7w+XCAf0xEN7O9eluZB2MH9HYkErm8qanpX6UONpL+yWRyJRHdp9u1dwSmiehiy7L+XorcvICVUssB4Ae6IM+bvoqInxRCcIR0wppSaikRpXSjJiIHEd+MxWLzGhoa3gqrzBDASqkriOi33pHjP2cvvN9xnHktLS3dYYWPZb9EIlFnGMYj2nGW3XFEtAcRLxdC8NldtA0C3NXVVXb48OHXAOA0RCz3tzIAHCWi8y3LerWoxHHskEgkViPindoZ79v0SiHE/WGGHgTYtu2vAsBaL8TTJpPmSymfDSNwvPsopbYR0VVa0MN+5Wgmk5kdxoHmAHNs3Nvb+5phGO/TA34iahjpETAe4NeuXXtKRUXFXgD4QCCaWyWlXFNszBxgpdTtRHSPv7pemLhbSvnxYkJO9HOl1IeI6MVAYPJuWVnZnPr6+iPD6ZMF7EVTB4mIbVdPBC4YTVQznhOhlNpCRByWZu3YO0WKrnIWsG3bn0XE3wQ84K+EEFePp9Kjkd3e3n5uJBLhWED3Qy8IIT5adIWVUusAwASAMr8zIl5imuau0Sg13u8mk8nNRPR5fZxoNDq7sbHxjUJjZ2dHKcUHNzurbCOid6SUnNRP6JZMJm8gop9rSnKC8TUhxPqCgJPJ5Dwi+ou+nQEgJaVsmNBoBxaqAgDe8UpFWTtGxO1CiEUFASulVhHRNzkf1UAvklL+bqID9nbnMwBwmaYrn8vThBDH8+mPtm0/ioh8kOcAHzt2rGLFihU9kwGwbdt3IeJ3dF0Rcb5pmjwRQxoD/iMAzNfOtF4hxCmTASzrmEgkvmwYxqDcmI8rKeXjeQErpV4GgLmes+KP/VJKLr9MisbJDgA8qSs7XHTIK3wIEaf7L7iuu9OyLN0mJjRwpdT7AUDPzTmDWimlfLDQlua8MhddEdEjUsqbJjRKTbl4PB6tqanRU0P+/pAQ4o5CW5pTP65EZutVALBNSvm5yQI4lUqdlk6nu7VaWz8RrZFSri4EeD8R1WqZx1+llBdOFsC2bX8EEV/QjtQMIi4XQiQKbek9AHChv8JE9IZlWbMnC2CulxPRE4EbjSVSSj0Cy8Fhp/UjAPiib8dE1COlzJ3JEx24bdtfQsQf6kkEIn7aNM2nCm3pr3CVg+9y/A7FAvCJNAm2bXcCQKNeM49EItObmpoO5wXc0dFxqeu6z2pGz57r62N1lzPek2Pb9tuIWK3Z8MtSyvMKjYtewb0vUAKdFI6LKx8A8KIGjj10h5SSr3HzNr8AwGXZK7WjibOOggH4eK9aWPmJRCKOiKsCVcw6IcTPigG+EQAe1gMQ13VvtSyrNezg70U/pRQn+jX62MPZL/fzCwB8j8QXY5Xay1wUm1lfX8/3SBOuJRKJBkTckAUxcMtIrututyzryuGUzdWDuMhtGMa3tGSaI6+7LMuKTzS0nt9hZzVN180wjMuam5t3hgK8adOmyp6eHi716KlhGgBmniiGTdiJtW2b4+R7tP6c9O+QUi4oJmPQzYNXm75PC0L4/aellAuLCTpRz7laaRgGcz4iAZpEqCrNIMDe7cPrhmHk0kXvfL5bCJFlALyXra2tbWo0Gv03AMzIGu0A7YLjBi4pXxNGtyG3h7ZtL0DE3/uUA03oVUKIXO06jPCx7MP6KKV2IKKeqzPYQ47jfDDsrWbe++FEIsGUJC7s6bcQadd1L7UsK1fhHEtAxWTZtr0REZd6ZLcc9YKIFkopny72vv88L+B4PG7U1NT8ma9IfQaAt4UyAHBzoUwk7KCl9GNnevz48V96dTd9AZh6sUtK+YlS5BWkPHR2dlY7jsMx9tzASjN3ap2U8rZSBhpJ387OzrMdx3nG42oO0tUzNcd13ZRlWc1h5Q/L4vFA7yKicwIcIgb9EhGZlmXtCDtY2H5cYEfEFUTEtMayfIw+TVZJoIvytJhEVl5ezluKt06O4AIAHG8z8OcikUhzc3OzHsSHxTaoH9enZs2aJRHxbgAoD7AQ2EHxVUo0D52Rddlomqbpee2C4xcF7NkuJpPJh/jexieQBjhbXCn8GyJyMeEnQohDYRGz921ra7skFovxZR5zs6YF/AYfPRwAMbeEc9y5RMREtkFDeCSXh03TZGLbAMM1TwsF2H8vmUxe67puFyLyLeOQd/0jjMtEAPAEAHCtaa9hGPt6e3v3TZ06taq/v/8sRDzPcZzzDcPgXTOfiFjeIOKbRlNiMlqqsrLytp6eHmbbPgcA5xQCDQA/FUJwFSQv6JIAM/ANGzacmclkWonoBv69EE04wKvKloK9S2t2B3pZeJAMjaDK4eKbRLRE9xO+Mx0p6JIB+6vNFEHXdb/r3cJnt1gR51JwlwdYuGweXHZdPWXKlGS+bI1BZzKZXYh41jAr/ZgQ4sbgSo8YsK+9RxRn27sVAJgumJcKrO+GAF/TpywcR0Q+gtZXV1dvDTJwg7O1cePGGel0eucwoDlm2CyEqNNBjxqwrkh7e/vpiPgFwzD4XGTwheRz0MCZGdv4k0S0uVQKIY8bAjR79V9UV1ff5E/gmALWwfMRU1tby06qKhqNVvG/Cbiue8QwjIMHDhx4Kx6Ps42OujHo/v5+pmacOcz23lZdXX0dgx43wKNGUoKAtra2M6LRKCf+eUEDAG/vLaZpLjkpAPPchADNl2wrTxrAGmhOemYGIzLvSNx7UgFm0B0dHbWu6/4pD2jmfOw56QBroHcT0eke94z5KuVEtOCkBOxv70gksg4RLyAi5l+2SSk3/Q9JZW7m4kILewAAAABJRU5ErkJggg==');
    position: absolute;
    left: 5px;
    background-size: 15px;
}

.aui-image-text {
    position: relative;
    overflow: hidden;
    padding: 0 10px 12px 10px;
}

.aui-image-text .aui-flex {
    width: 48%;
    float: left;
    border: 1px solid #e6e6e6;
    box-shadow: 0 3px 9px #e6e6e6;
    border-radius: 10px;
    margin: 0 1%;
    padding: 8px 5px;
}

.aui-shrink-img {
    width: 40px;
    height: 40px;
    margin-right: 0.5rem;
}

.aui-shrink-img img {
    width: 40px;
    height: 40px;
    border: none;
    display: block;
    border-radius: 3px;
}

.aui-flex-box h2 {
    font-weight: normal;
    font-size: 0.92rem;
    color: #2d2d2d;
    margin-bottom: 0.3rem;
}

.aui-flex-box p {
    font-weight: normal;
    font-size: 0.8rem;
    color: #a9a9a9;
    margin-bottom: 0.3rem;
}

.aui-flex-box h1 {
    font-size: 0.99rem;
    color: #010101;
    font-weight: normal;
    position: relative;
    padding-left: 0.6rem;
}

.aui-flex-box h1:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 0;
    width: 4px;
    height: 80%;
    background-color: #88c856;
    border-radius: 2px;
}

.aui-sam-img {
    width: 100px;
    height: auto;
}

.aui-sam-img img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    border-radius: 10px;
}

.aui-sam-text p {
    font-size: 0.7rem;
    color: #999;
    text-align: center;
    margin-top: 0.2rem;
}

.aui-flex-box h3 {
    font-size: 0.9rem;
    color: #000000;
    margin-bottom: 0.4rem;
}

.aui-flex-box h4 {
    font-size: 0.7rem;
    color: #a8a8a8;
    margin-bottom: 0.4rem;
    font-weight: normal;
}

.aui-flex-box h4 em {
    font-style: normal;
    color: #eb5942;
    font-size: 0.9rem;
}

.aui-flex-box h5 {
    font-size: 0.8rem;
    color: #797979;
    margin-bottom: 0.4rem;
    font-weight: normal;
}

.aui-flex-box h5 i {
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    margin-right: 0.2rem;
}

.aui-flex-box h5 i img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}

.aui-news-list-box .b-line:after {
    left: 15px;
    width: 92%;
}

.aui-news-list-box {
    padding-bottom: 55px;
}

.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: #f9f9f9;
}

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

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

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

.aui-tabBar-item-active .aui-tabBar-item-text {
    color: #7bbf46;
}

.icon-loan {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzZGODYzNkYzQzlFMTFFOUEzMzZFNDMyQzZFQjJDRjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzZGODYzNzAzQzlFMTFFOUEzMzZFNDMyQzZFQjJDRjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NkY4NjM2RDNDOUUxMUU5QTMzNkU0MzJDNkVCMkNGNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NkY4NjM2RTNDOUUxMUU5QTMzNkU0MzJDNkVCMkNGNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkF0AcUAAAn7SURBVHja1FnbbxxXGf+dM7MXu7ng0iYUmgIBqbwgUUAIEK+88IaExCPP/FmoUoRU9RLS0iAQadVScBsnaUpS1KQmvsS39dr1fXd2zjn9LmfGs+s43nX8Uku2Z2ZnzvzO9/2+33dZE0LAV+0n5T/dbnd05N7AWAeHAIMarKElfEAwls5zwNTgPJBYvtfB03+DBIaOgzke2EajIU/a4z3uYelJAWwUCG/CE2Drewg2gfc5Afb0P5PX8EYCHfOmTsTSo/9YAkx2IwCerGtpBz50gZCiawNcdx0hJGimddhknLbYk/OEvBFOih6j/hhj6OUeHA8WddoA8cDWsN5Zxs3FK5jfuUPnKZ4bu4iXzv8Gz45/i7ZYp2fyE+G04RePymkTrPDZk/VAQAxZeDWbwQczl7DWW4QQjz4j5uBsMoGfX/gDzjcv0NaIRtbI8yfO6WC8LGyR9F+PtweTl4B5ie28hesLV9DOCDBdDxx1VgNzw23g+tJrWHdLdGcNJhTv0Njg8yIwLcyQ5DzEkmBgzEW5RW9jhTBMBWIVb4yvZ/keJhf+gsWte0Ib773SJ3gJOktBur7zEFMLb2PHb+1b2Qddly3v9NgZ92SgQ/zYGnanV+uwpgdVAraQo+tTK2/i/1/coK3kyIO637OqsPkCbZzOc9PDws5/MbV0hY67Si/mDqyoDD9TeO3YoHWRwiJOuCgY6Jc9X2zo45WruNt6X9xq2KouBSu3Nxyk+kDOWs2f0enMxhRurfw9eokkkDZpkrRiLD8U8EdzOrhSj4XfrMXR4pbdTvS42/onbi5clU2xkqi7vV.........完整代码请登录后点击上方下载按钮下载查看