css布局实现手机端移动端红包优惠券列表页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现手机端移动端红包优惠券列表页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<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 {
            border: 0;
        }

        body {
            background: #f2f4f7;
            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;
            margin-top: 0;
            padding-bottom: 50px;
        }

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


        .aui-navBar-item {
            height: 44px;
            min-width: 40%;
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 40%;
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            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: normal;
            color: #333;
        }

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

        .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-return {
            margin-right: 15px;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACbklEQVRoQ+3awW7TQBAG4H986x2JG1LMixSbF4gtIV6AQyXg1AoQh7ZSW0HbA1IrDggOnBEOL2ACJ57CSXuoxAP0wqEZlCBVRN2s493Z1LtJ7jv7f55NNHZMWLIPLZkXK3DoHV91WLLD8fciA7AL8B0w3g7S/J1kfZNazjrcKYsnEeHDVCiibvWg+80kqNQaJ2AlFgBPupy9lApvUkccPAs7DjdiPBqm2ReToFJrRME6LMAnVZI/lwpuWkcMrMUyn1Zp/sw0pOQ6EbAv2PGFswb7hLUGd8re04j4RHnkWnSM/89n3GEfscYd9hVrBPYZ2xjsO7YROATs3OBQsHOBQ8LWgkPDasGdstiMCEfqoQLHVZptSc64i6qlHDxCxSo7HDL2Bjh07BR4GbDXYD2WLxj4uKgfFSf7EP5cRfTjfD37RXHZ2yDi9042altRxj7F5ddzIrrXtmxu8vAlxWXxmwh33WzQtqp8SZ1+8Tpi7LUtmqM8B5PB435ZHIGwqdqEgTMwf3YUYGFlGXQxTLqfrictHXrE2Bqm2fHC0jncaGq0XAb0jVk6dLTy5iHu97aJeUd1snw/3jMf0+qmL2beHaS58oI4/PqJlNY+lw5xvq59EB8auhY8PkchoecCh4SeGxwKuhE4BHRjsO9oI7DPaGOwr2grsI9oa/A/tO7Vh3b9SyEC9gktBq5DM+PNIM1eidwBWBQRBdehMeKkepj3LfJaLxUH69H8okryQ+vUFgWcgGehr4D1syT7aZHXeqkz8ORpaL94zMzbYKwRRQdV0p1+f9o6fvMCTsHN47hfsQK7v8a3u8Oqw7d7/d3v/hfF8Vt0DIFatgAAAABJRU5ErkJggg==');

        }

        .icon-sx {
            margin-right: 10px;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFiUlEQVRoQ+2afWgcRRTA39vdkqMUK1XEVqpYBbFQqzFKlSqtUEP3duZAJbSI4PdHEbUKamj1D5tq/cfvUvAbLAUrtdzM5kiIeiDVFgxJRFFEilrEYEXFJth83T2Zslem593t7N3m0qQ7/+6b995v3sybN7ODcIY1PMN4IQGe6xE3jnB/f/+84eHhzQCwCQAumuGB+RcAhohoyLKsNzzP+97UHyPgnp6eRZOTk30A0GqquIlyUwDQ5Xnec4hIYXZDgXO5XEuhUPjyNIXV+V5jjD3aMLCU8nkA6CwpIqJRAPgAEY+GKZ/G7wsA4AYAuFa3QUTXcc4P1bJbM8JBdH8HgIWBkr8dx2ldv379z9MIY6xaCLEFEbu0YPicc1Y3sO/7a4noM01BJ2Nsh7FHTRCUUuYBYI0yRUQTjuOc5brueDXTNSPs+/7dRPROqXOxWFydyWS+aAKHsYkKUV7GOf+pLmAhxEZE3KN15owxaexNEwSllC8AwNMlU7ZtL3Vd99e6gLPZ7FWWZQ1ond9mjN3XBA4jE0SEvu8PAsDKoMMxxlgp31TUEbotCSGOIOLSYI0Ubdtem06nPzfyaJqFhBBdiLhFS1q7Oed31J20VEchxCZE3Kkp+atYLK7IZDK/TTNPTfW+76eJyNdgCwCgtqWvGgJWnaWUAgD0dD+wePHiVW1tbZMzAZ3L5S6ZmpoaQkS1H5faY4yxV8P8CZ3SSkE+n18wMjIyiIiXagrfYozdH2Yg7u9SyvlENICIl2nR/ZhzfquJLSNgpcj3/cuJqB8A5muGbuec61ncxGZDMkKIfYh4i+bDD4jYyhhTB4rQZgwcTO3bAOAjTeu4ZVnXpNPpb0ItxSAgpXwSAF7UYEcdx7nSdd3DpuojASulQoidiKiOiKV2JJVKXbFu3bp/TI3WI9fd3X1joVDII6IV9CdEZJ7ndUfRFxk4OBcfBICrNUOfeJ7XjojFKMZNZbPZ7BLLstQsWqRFdxvn/FlTHSW5yMDB1L6AiL5GxHM0B7ZzzrdGdSBMvsrxVA3wzSbn33L9dQEH0GuI6FNtigEielGnWBiwEGIPIm6MawnVDRxAqxpW1bInmjorR00itYCllA8CwC5NpuEk2RBwAH1KUUJEkbaJasBSylYiOoSI87QBbXgbbBi4UlFCRMaFQCXg3t7e88bHx1Whs0SD3cU513eHsNVQ8XvDwEprlaLkEc7561G92rt3r51KpQ4g4iqtb2ylbCzAwdQ+pSghIlXMrw67YyofECnlKwCgX8bFeliJDVg5Xl6UENHRlpaWFe3t7UYXflLK/w2abds3xXkcjRW4SlHSxRh7xmRqCyF+LDugPMEYe8mkr6lMrMDB1L4QAH7RHNjJGHvYxCEp5Z9aNXWQMXa9Sb8oMrED5/N5Z3R0VD8n1wVMRPs452qKx9oS4EaHM4kwQDKla5STJ5NWsoYbXWtB/yRpNTqQSdJKklb1OaRXWknSanStJUkrphFMklaStOZY0iIiy/d9db1zohHR+5zzu0xWzKzM0sFVz8mbC/WyBgDuZYztDvtTMGuByx+aBNH9loi2cs6zc+rwoGD6+voWjo2Nqccwy8rh1D9mRNzMGDtQ/m3WRliBqMv0iYmJ9wDArRRR9eDNtu2n0um0+sl+os1qYA1iNRG9jIhtVaaysG2703Xd7+YEsAbOiGgHIi6vAK6e/aqnE+rSriX4/i5j7B6T7B5FJvbzcC3j6iGZlHIDAGxHxItrySLiA57nvRkFxkS2qcAlh4Ly804A2AYA51dw9PDx48eXd3R0qC0t1jYjwCUC9Xe/WCw+RETqNd25RKTusz90HOdx13X/iJU0UDajwCWg/fv3n23b9krHcQZd1z02HaAlnacF8HQClutOgJs52jNh6z/uCD1qSnAhWgAAAABJRU5ErkJggg==');

        }

        .icon-cd {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDJEMjk5NjVDNUU1MTFFOEE4QjZDQTk2OUVENTQxNjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDJEMjk5NjZDNUU1MTFFOEE4QjZDQTk2OUVENTQxNjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEMkQyOTk2M0M1RTUxMUU4QThCNkNBOTY5RUQ1NDE2NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEMkQyOTk2NEM1RTUxMUU4QThCNkNBOTY5RUQ1NDE2NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvzbljcAAAXBSURBVHja7Np7T9RMFAZwgXIRQVBEBAImhMD3/zqSmCB3US7LVa7+3p7Y1LZbYOnG+LrzR9PtTGeeeebMc86Zbt/9/f2Lv630v/gLSw90D3QPdA90ZyUp/Cbbt7e3d3d33RhsYGCgv7+/r6+vMKLhDFrB6K/yAOizs7Otra1Wq3V1ddWg39HVyMjI/Pz81NTU8PBwvurm5mZvb29jY8NNfj6wvn371ivj4+N1oE9OTra3t4G+uLionPpzQCdJAtaPHz/gHh0dxbohzs/PDw8PDfr9+3c/86DdY9AifPz4Uft81W+gj46OdnZ2NI0WDTKtQ71BZgFRkwd9fHzsidpok38Fdxbh1atXs7OzQ0ND1aAv0hKINR0cHGwEd+wTHLvCd3p6mtF2/6uYw2BaWMVdWrS3MiZpqhanLejYEK6WcmVl5d27d42Avr6+tkk2Nzchjv5j84Xhgmu4oJMRw60N7tbW1sCF28oXbDVpt5pW8OXLl02Zh97AaqWFPcAEDayGsM8mJydfv349NjaW0anxly9fYim0LHCXtBumWdXDHxbBmpiYsNa4Rx6OoaQqIBYkpWA/D0heV8tQWt68edPziI/QgbKQFaSqskFNb+1qnwVa10yQALnmDd1C2/uhX+WBvaWWpdpqDLpSUtbX15n49PR0V0Db75nTCfIUu8oe+vr1q5mU/YKrWqL5/v37StA24v7+vr3YLdBEBzF03g21Gk6L+3C8qgqRTbgSLclZjdJ3YBiPBQ0KwggWKLu7u9Z0cXHxw4cPzMOowHmIS1qL2syzCoC4hnCrf2AjQhYDozbmwBFAE7WCBxaCeA8z14D72H+e8yB/Uj3wx6yByMiD7PLy0vNAlglFbNwAXY6GM3eztLTUmdN9AujLtDDTzAwyHxtWntnoVVqStNQkBPZod5mGLGJADBET6N3AhFHqEQFaPq5XmBBkNWEC0/JWwYE3BhpiA0RUCaWw25CkSlxmGhG1BdDM0N0zDHMLUsuUM6FPnz7pZGFhoVugDw4OYDW2yIF5fPv27TwtQGtAxdGfqRus5kY97AHQF9JS7lMz0LtlHpBBgOmQNgoYWy1iyIjx8+095HoiMdFM+3Zi2plUPwza2MFZeD647UWGiCfEE+wwj7JQmqp0M8yjnVl3lmQ8DFrXeBUkuA92sxzpv/eTpIxJlbmRbRLuWulfQu+7JXkwoRNznFwwVxDp8hJbHBYCkJtIqCp1enV1tZ2KN+ARI4MvEGYFiIn9V0j9o4rbpwxmpaoSdLnDhkHn73HDJCI8Gk1LmS1657lm7MpN4+HH0wIDaFALDY5htSMpQyWRyD48PAy/U+kXVZEjFt+BWT/BpNDMOdtbnALZrsw6s7OBOOJwT9QrfZ6u9KO3rjMdSbUVbzcYrOHhYQpzBzp/zlJYt84O354AOg5x6JQdxiTYK0B5i0czOd/c3IQ7DlwIJRNqJxGVeVrDARPjm5qaimCaCAaLBUAmE5mBGYKrmfY1bquz05Xk8QYt6oCbfwY0SwIKbTwXZsR5minV0Gx6mumtu+Yxkpb6BVU7lpYHU0B2v7y83F3zeHwe+ngcNdH2//CE6R84Fntmyc5P6EZkwXGWTsiflLQnjZ+k1Jytcf6RAZFzP+MsPQ5/KaOf2aD1o9edT1eeDXdQ8NpqtaRk4KIZ3MjhQ9F5e8kbcZScU9X4ZlI/blJmN756fP78eXd3tynQwGWf+cKhBOhI22Rl8ZGAH8B3gPYTkspD16Rw6E2JI1fd29uL/KoR8wjzdQVL6BInrvo3jcgjocd3nqPIIL1V9ru/gWZYvBS4cQDQWVpRgxtiNsC3M2WMAo1OWI0YsW6hfUS/MzMzhTjxN9Ay7Vg+xhfpYIMbEWE8PARwZAuYfQhdX19HduGLrarZ2dm5ubniF5mC1cZhbnzIaVBA4kshpsune/HJkJGU90+oYTl26Ov98aoHuge6B/rfAf1TgAEAKEN/EzOzcgQAAAAASUVORK5CYII=');

        }

        .aui-packet-list {
            position: relative;
            overflow: hidden;
        }

        .aui-packet-list .aui-flex {
            margin: 5px;
            box-shadow: 0 2px 3px #dcdcdc;
            background: #fff;
            padding: 0 15px 0 0;
            height: 90px;
        }
        .aui-flex-title {
            background: #f76d55;
            color: #fff;
            height: 90px;
            padding: 0 12px;
            margin-right: 15px;
            text-align: center;
        }

        .aui-flex-title h2 {
            font-weight: normal;
            font-size: 30px;
            padding-top: 10px;
        }

        .aui-flex-title h2 em {
            font-size: 18px;
            font-style: normal;
        }

        .aui-flex-title  p {
            font-size: 13px;
        }

        .aui-flex-box h2 {
            font-size: 16px;
            padding-bottom: 5px;
            position: relative;
        }

        .aui-flex-box span {
            display: inline-block;
            font-size: 12px;
            color: #f56b53;
            border: 1px solid #f56b53;
            padding: 0 2px;
        }

        .aui-flex-box p {
            padding-top: 5px;
            color: #999;
            font-size: 13px;
        }

        .aui-flex-button button {
            border: 1px solid #f56b53;
            color: #f56b53;
            background: none;
            font-size: 14px;
            border-radius: 20px;
            padding: 2px 10px;
        }

        .aui-icon-yw {
            position: absolute;
            right: 20px;
            top: 3px;
            width: 16px;
            height: 16px;
            display: block;
            border: none;
            background-size: 16px;
            background-repeat: no-repeat;
            background-image: url('data:image/png;base64,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');

        }




        .tab-nav {
            /* padding-top: 10px; */
            height: 40px;
            line-height: 40px;
            /* border-radius: 80px; */
            display: block;
            position: relative;
            /* margin-bottom: 15px; */
            /* position: fixed; */
            background: #fff;
            z-index: 1;
            width: 100%;
            /* border-bottom: 10px solid #ededed; */
        }


        .tab-nav-item {
            height: 40px;
            /* line-height: 45px; */
            position: relative;
            text-align: center;
            color: #585858;
            font-size: 0.9rem;
            display: block;
            float: left;
            border-radius: 80px;
            /* padding: 0 15px; */
            width: 25%;
            /* padding-top: 10px; */
        }

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

        .tab-nav-item.tab-active a {
            color: #23beae;
            font-weight: bold;
        }

        .tab-nav-item a {
            display: inherit;
            color: inherit;
            font-size: 0.85rem;
            color: #7d7d7d;
        }

        .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-nav-item.tab-active:before {
            content: '';
            width: 100%;
            height: 1px;
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -50%;
            z-index: 4;
            background-color: #23beae;
            border: 1px solid #23beae;
        }

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



        .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: 15px 5px;
            background: #ffffff;
        }

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

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



        .aui-footer-fixed {
   .........完整代码请登录后点击上方下载按钮下载查看