echart实现物流快递大数据大屏看板效果代码-html代码-BFW代码库

代码语言：html
所属分类：图表
代码描述：使用echart实现的物流快递大数据大屏看板效果代码，包含派件数、收件书、物流公司分类、收入、全国统计、支持分类条件查询。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">

    <script type="text/javascript">
        (function (doc, win) {
     var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function () {
             var clientWidth = docEl.clientWidth;
             if (!clientWidth) return;
             if (clientWidth >= 1920) {
                 docEl.style.fontSize = '100px'; //1rem  = 100px
             } else {
                 docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
             }
         };
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);
     doc.addEventListener('DOMContentLoaded', recalc, false);
 })(document, window);
    </script>
    <style>
        /** 初始化 **/
    
    html,
    body {
        width: 100%;
        height: 100%;
    }
    
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    button,
    textarea,
    p,
    blockquote,
    th,
    td,
    form,
    pre {
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        color: #333;
    }
    
    body {
        -webkit-font-feature-settings: 'kern' 1;
        -moz-font-feature-settings: 'kern' 1;
        -o-font-feature-settings: 'kern' 1;
        text-rendering: geometricPrecision;
        font-family: "Microsoft YaHei";
    }
    
    a:active,
    a:hover {
        outline: 0
    }
    
    img {
        display: inline-block;
        border: none;
        vertical-align: middle;
    }
    
    li {
        list-style: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    h1,
    h2,
    h3 {
        font-size: 14px;
        font-weight: 400;
    }
    
    h4,
    h5,
    h6 {
        font-size: 100%;
        font-weight: 400;
    }
    
    button,
    input,
    select,
    textarea {
        font-size: 100%;
    }
    
    input,
    button,
    textarea,
    select,
    optgroup,
    option {
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
        outline: 0;
    }
    
    pre {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }
    
    
    /** 滚动条 **/
    
    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }
    
    ::-webkit-scrollbar-button:vertical {
        display: none;
    }
    
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background-color: rgba(14, 148, 234, 0.2);
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 0;
        background-color: rgba(0, 0, 0, .3);
    }
    
    ::-webkit-scrollbar-thumb:vertical:hover {
        background-color: rgba(0, 0, 0, .35);
    }
    
    ::-webkit-scrollbar-thumb:vertical:active {
        background-color: rgba(0, 0, 0, .38);
    }
    
    
    /*下拉框*/
    
    .select {
        width: 1.6rem;
        height: 0.4rem;
        position: relative;
        font-size: 0.18rem;
        color: #cdddf7;
        outline: none;
    }
    
    .select-div {
        box-sizing: border-box;
        width: 1.6rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border: 1px solid #0E94EA;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/arrow.png) 95% center no-repeat;
        padding-left: 10px;
        cursor: default;
        position: absolute;
        top: 0;
        left: 0;
        color: #cdddf7;
    }
    
    .select-ul {
        position: absolute;
        width: 1.6rem;
        top: 0.5rem;
        left: 0;
        z-index: 10;
        display: none;
    }
    
    .select-ul.company {
        height: 1.2rem;
        overflow-y: auto;
    }
    
    .select-ul>li {
        height: 0.4rem;
        line-height: 0.4rem;
        padding-left: 10px;
        box-sizing: border-box;
        background-color: rgba(14, 148, 234, 0.2);
        cursor: default;
        color: #cdddf7;
    }
    
    .select-ul>li.active,
    .select-ul>li:hover {
        color: white;
        background: #0e94eb;
    }
    
    .select-ul>li {
        width: 1.6rem;
    }
    
    .data-box {
        width: 4.9rem;
        position: absolute;
        margin: auto;
        top: 0.42rem;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .chart-box {
        position: absolute;
        top: 0.42rem;
        bottom: 0;
        width: 90%;
        margin: auto;
        left: 0;
        right: 0;
        height: auto;
    }
    
    .container-flex {
        width: 100%;
        height: 100%;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/index_bg.png) left top no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        outline: none;
    }
    
    .box-left {
        width: 28%;
        height: 100%;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/line_img.png) top right repeat-y;
    }
    
    .left-top {
        width: 100%;
        height: 20.4%;
        position: relative;
    }
    
    .left-top>.current-num {
        width: 4.9rem;
        height: 1.8rem;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/border_bg01.png) top left no-repeat;
        background-size: 100% 100%;
    }
    
    .current-num>div {
        width: 100%;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/title_bg01.png) center center no-repeat;
        font-size: 0.2rem;
        color: #0e94ea;
        background-size: 1.8rem 0.25rem;
        font-weight: 900;
    }
    
    .current-num>p {
        font-size: 0.46rem;
        text-align: center;
        color: white;
    }
    
    .left-center {
        width: 100%;
        height: 37%;
        position: relative;
    }
    
    .pie-chart>div {
        float: left;
        width: 50%;
        height: 100%;
        position: relative;
    }
    
    .pie-data {
        height: 2.25rem;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        overflow-y: auto;
        padding-right: 5px;
    }
    
    .pie-data p {
        width: 100%;
        height: 0.45rem;
        line-height: 0.45rem;
        font-size: 0.2rem;
        color: #cdddf7;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        cursor: default;
    }
    
    .pie-data p>span {
        width: 0;
        flex-grow: 1;
        margin: 0 5px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .pie-data p>.pie-number {
        flex-grow: 2;
    }
    
    .legend {
        display: inline-block;
        width: 0.2rem;
        height: 0.16rem;
        line-height: 0.2rem;
        border-radius: 2px;
        background: white;
    }
    
    .left-bottom {
        width: 100%;
        height: 42.6%;
        position: relative;
    }
    
    .filter-con {
        width: 100%;
        height: 0.4rem;
        position: absolute;
        float: left;
        top: 10px;
        left: 0;
        display: none;
        flex-flow: row nowrap;
        justify-content: space-between;
        /*    visibility: hidden;*/
        z-index: 999;
    }
    
    .pop-filter {
        width: 5.2rem;
        top: 1.1rem;
        left: 0.5rem;
    }
    
    .pop-filters {
        width: 5.2rem;
        top: 1.1rem;
        left: 0.5rem;
    }
    
    .gd-map {
        width: 100%;
        height: 90%;
    }
    
    .box-center {
        width: 44%;
        height: 100%;
        /*    background: green;*/
    }
    
    .center-top {
        width: 100%;
        height: 8.8%;
        position: relative;
        top: 0;
        left: 0;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/title_border.png) bottom center no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .center-top>h1 {
        color: #cdddf7;
        font-size: 0.45rem;
        font-weight: 900;
        letter-spacing: 5px;
    }
    
    .center-center {
        width: 100%;
        height: 15.3%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .weather-box {
        width: 4.1rem;
        height: 1.1rem;
        border: 1px solid #0E94EA;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
    }
    
    .weather-box>.data {
        width: 2.19rem;
        height: 0.65rem;
        border-right: 2px solid #cdddf7;
    }
    
    .data>p {
        font-size: 0.16rem;
        margin: 0 5px;
        color: #cdddf7;
        text-align: center;
        margin: 0;
    }
    
    .data>p>span {
        margin: 0 5px;
    }
    
    .data>p.time {
        font-size: 0.42rem;
        height: 0.42rem;
        line-height: 0.42rem;
    }
    
    .weather-box>.weather {
        width: 1.8rem;
        height: 0.65rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        margin-left: 10px;
    }
    
    .weather>img {
        height: 100%;
    }
    
    .weather>div {
        width: 0.8rem;
        height: 100%;
    }
    
    .weather>div>p {
        font-size: 0.12rem;
        color: #cdddf7;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 0.24rem;
        line-height: 0.24rem;
    }
    
    .weather>div>p.active {
        color: white;
        font-size: 0.16rem;
    }
    
    .select-box {
        width: 3.4rem;
        height: 1.1rem;
        box-sizing: border-box;
        position: relative;
    }
    
    .select-pop {
        width: 1.6rem;
    }
    
    .select-box>ul,
    .select-pop>ul {
        width: 1.6rem;
        height: 0.4rem;
        font-size: 0.18rem;
        overflow: hidden;
        border: 1px solid #0E94EA;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .select-box>ul>li,
    .select-pop>ul>li {
        width: 0.8rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        float: left;
        color: #cdddf7;
        cursor: pointer;
    }
    
    .select-box>ul>li.active,
    .select-pop>ul>li.active {
        background: #0e94eb;
        color: white;
    }
    
    .select-box>div {
        width: 100%;
        height: 0.4rem;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    
    .center-center>img {
        width: 0.13rem;
        height: 1.1rem;
        margin: 0 0.2rem;
    }
    
    .center-bottom {
        width: 100%;
        height: 75.9%;
        position: relative;
    }
    
    .center-bottom>.city-data {
        width: 8.05rem;
        height: 100%;
        margin: auto;
        position: absolute;
    }
    
    .city-box {
        width: 1.8rem;
        /*    height: 1.9rem;*/
        border: 1px solid #0e94ea;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .city-box>p {
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        border-bottom: 1px solid #0e94ea;
        font-size: 0.18rem;
        color: #cdddf7;
        box-sizing: border-box;
    }
    
    .city-box>p>span {
        color: #d09d26;
    }
    
    .city-btn {
        width: 100%;
        /*    height: 0.5rem;*/
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
        overflow: hidden;
    }
    
    .city-btn>li,
    .city-div>li {
        font-size: 0.14rem;
        height: 0.2rem;
        line-height: 0.2rem;
        float: left;
        color: white;
        margin: 0.02rem 0;
        padding: 0 0.03rem;
        cursor: pointer;
    }
    
    .city-btn>li.active,
    .city-btn>li:hover,
    .city-div>li.active,
    .city-div>li:hover {
        background: #0e94ea;
    }
    
    .city-div {
        width: 100%;
        height: 1rem;
        display: flex;
        flex-flow: row wrap;
        /*    align-items: center;*/
        justify-content: flex-start;
        overflow-y: auto;
    }
    
    .city-div>li {
        padding: 0 0.05rem;
        text-align: center;
    }
    
    .ranking-box {
        width: 2.5rem;
        border: 1px solid #0e94ea;
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: rgba(14, 148, 235, 0.102);
    }
    
    .ranking-box>li {
        width: 100%;
        height: 0.3rem;
        line-height: 0.3rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        font-size: 0.18rem;
        color: rgba(255, 255, 255, .7);
    }
    
    .ranking-box>li>span {
        width: 0;
        flex-grow: 1;
        text-align: center;
    }
    
    .ranking-box>li>p {
        width: 0;
        flex-grow: 2;
        color: rgba(255, 255, 255, .7);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .ranking-box>li:nth-child(2n+1) {
        background: rgba(14, 148, 235, 0.102);
    }
    
    .ranking-box>li:first-child {
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.2rem;
        background: rgba(14, 148, 235, 0.8);
    }
    
    .ranking-box>li:first-child>p {
        color: white;
    }
    
    .box-right {
        width: 28%;
        height: 100%;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/line_img.png) top left repeat-y;
    }
    
    .right-top {
        width: 100%;
        height: 41%;
        box-sizing: border-box;
        padding-top: 0.2rem;
        position: relative;
    }
    
    .right-top>.data-box,
    .right-top>.chart-box {
        top: 1rem;
    }
    
    .table1 {
        font-size: 0.16rem;
        border: 1px solid #0e94ea;
        border-top: none;
        border-right: none;
        margin: auto;
    }
    
    .table1 tr {
        border-top: 1px solid #0e94ea;
        background: rgba(14, 148, 234, 0.1);
    }
    
    .table1 tr.bg-color {
        background: rgba(14, 148, 234, 0.2);
    }
    
    .table1 tr td {
        border-right: 1px solid #0e94ea;
        height: 0.4rem;
        line-height: 0.4rem;
        color: #cdddf7;
        text-align: center;
    }
    
    .table1 tr td.data-table {
        color: #fff;
    }
    
    .table1 tr td:nth-child(2n+1) {
        width: 1rem;
    }
    
    .table1 tr td:nth-child(2n) {
        width: 1.4rem;
    }
    
    .table2 {
        font-size: 0.16rem;
        border: 1px solid #0e94ea;
        border-top: none;
        border-right: none;
        margin: auto;
    }
    
    .table2 tr {
        border-top: 1px solid #0e94ea;
        background: rgba(14, 148, 234, 0.1);
    }
    
    .table2 tr.bg-color {
        background: rgba(14, 148, 234, 0.2);
    }
    
    .table2 tr td {
        border-right: 1px solid #0e94ea;
        height: 0.6rem;
        line-height: 0.6rem;
        color: #cdddf7;
        text-align: center;
    }
    
    .table2tr td.data-table {
        color: #fff;
    }
    
    .table2 tr td:nth-child(2n+1) {
        width: 1.8rem;
    }
    
    .table2 tr td:nth-child(2n) {
        width: 2.5rem;
    }
    
    .right-center {
        width: 100%;
        height: 29%;
        position: relative;
    }
    
    .time-box {
        width: 3.9rem;
        height: 0.4rem;
        position: absolute;
        top: 5px;
        right: 0;
        overflow: hidden;
        z-index: 10;
        display: none;
    }
    
    .time-div {
        float: left;
        width: 1.8rem;
        height: 0.4rem;
        position: relative;
    }
    
    .time-div.end {
        float: right;
    }
    
    .time-div>img {
        width: 0.2rem;
        height: 0.2rem;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0.1rem;
    }
    
    .time-input {
        width: 1.8rem;
        height: 0.4rem;
        box-sizing: border-box;
        border: 1px solid #0E94EA;
        font-size: 0.16rem;
        background: rgba(14, 148, 234, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        color: #cdddf7;
        padding-left: 10px;
    }
    
    .data-box>.data-number {
        width: 4.9rem;
        height: 2.3rem;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/bg_img03.png) top left no-repeat;
        background-size: 100% 100%;
        color: #cdddf7;
        font-size: 0.4rem;
        line-height: 2.3rem;
        text-align: center;
    }
    
    .right-bottom {
        width: 100%;
        height: 30%;
        position: relative;
    }
    
    .data-box>.settings-box {
        box-sizing: border-box;
        width: 4.9rem;
        height: 2.38rem;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(14, 148, 234, 0.2);
        border: 1px solid #0E94EA;
        color: white;
        font-size: 0.18rem;
        overflow: hidden;
    }
    
    .settings-box>p {
        color: #cdddf7;
        margin-bottom: 0.46rem;
        padding-left: 0.4rem;
        height: 0.22rem;
        line-height: 0.22rem;
    }
    
    .settings-box>p:first-child {
        padding-top: 0.46rem;
    }
    
    .settings-box>div {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        padding-top: 0.2rem;
    }
    
    .settings-box>div>p {
        width: 2.9rem;
        font-size: 0.14rem;
        padding: 0;
        color: #cdddf7;
    }
    
    .settings-box>p>img {
        width: 0.2rem;
        height: 0.22rem;
        margin-right: 5px;
    }
    
    .settings-box>p>span,
    .settings-box>div>p>span {
        color: white;
        margin: 0 0.15rem;
    }
    
    .settings-box>div>img {
        height: 0.2rem;
        margin: 0 0.05rem;
    }
    
    .config {
        text-decoration: underline;
        cursor: pointer;
    }
    
    .settings-box>form label {
        color: #cdddf7;
        margin-right: 10px;
    }
    
    .four-f {
        letter-spacing: 0.045rem;
    }
    
    .settings-box>form input {
        width: 1.2rem;
        height: 0.4rem;
        border: 1px solid #0E94EA;
        background: rgba(14, 148, 235, 0.2);
        color: white;
        padding-left: 0.1rem;
    }
    
    .settings-box>form>div {
        width: 94%;
        margin: auto;
    }
    
    .set-ter {
        height: 0.64rem;
        line-height: 0.64rem;
    }
    
    .set-time {
        height: 0.4rem;
        width: 3.56rem;
        padding-left: 1.2rem;
    }
    
    .set-time>.time-div,
    .set-time>.time-div>input {
        width: 1.6rem;
    }
    
    .end-1 {
        margin-left: 0.1rem;
    }
    
    .set-peo {
        height: 0.70rem;
        line-height: 0.7rem;
    }
    
    .settings-box>.set-btn {
        height: 0.64rem;
        line-height: 0.64rem;
        text-align: center;
        padding-top: 0;
    }
    
    .set-btn>button {
        width: 0.9rem;
        height: 0.4rem;
        border: 1px solid #0E94EA;
        background: rgba(14, 148, 235, 0.2);
        color: white;
        margin: 0 5px;
        cursor: pointer;
    }
    
    .settings-box>.close-icon {
        display: block;
        width: 0.16rem;
        height: 0.16rem;
        position: absolute;
        top: 5px;
        right: 5px;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/close_icon.png) top left no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
    
    .settings-box>.kf {
        padding-top: 0.8rem;
        line-height: 0.3rem;
    }
    
    .title-box {
        width: 4.9rem;
        height: 0.42rem;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/box_title.png) top left no-repeat;
        background-size: 100% 100%;
        margin: auto;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        position: relative;
    }
    
    .title-box>h6,
    .title-box>p {
        font-size: 0.2rem;
        color: white;
        height: 0.42rem;
        line-height: 0.42rem;
        margin-left: 0.4rem;
    }
    
    .title-box>p>span {
        cursor: pointer;
        color: rgba(255, 255, 255, .6);
    }
    
    .title-box>p>span.active {
        color: rgba(255, 255, 255, 1);
    }
    
    .line-img {
        width: 1px;
        height: 0.2rem;
        margin: 0 10px;
    }
    
    .title-box>.line-img {
        position: absolute;
        right: 1.3rem;
    }
    
    .title-box>button {
        font-size: 0.18rem;
        border: none;
        background: transparent;
        color: #cdddf7;
        height: 0.42rem;
        position: absolute;
        right: 0.6rem;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        cursor: pointer;
    }
    
    .title-box>button:hover {
        color: white;
    }
    
    .title-box>button>img {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 5px;
    }
    
    .unit {
        font-size: 0.16rem;
        height: 0.4rem;
        color: #cdddf7;
        text-align: right;
        padding-right: 0.3rem;
        line-height: 0.4rem;
    }
    
    .container {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .7);
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        visibility: hidden;
        justify-content: center;
        align-items: center;
    }
    
    .pop-up {
        width: 70%;
        height: 80%;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/popUP_bg.png) top left no-repeat;
        background-size: 100% 100%;
        position: absolute;
        padding: 0.2rem 0.5rem;
        visibility: hidden;
    }
    
    .pop-up .title {
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.3rem;
        color: white;
        padding-left: 0.2rem;
        background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/title_line.png) center left no-repeat;
    }
    
    .pop-up .pie-chart {
        width: 76%;
        height: 80%;
    }
    
    .pop-up .pie-data {
        width: 80%;
    }
    
    .pop-chart {
        width: 80%;
        top: 1.5rem;
        left: 2.3rem;
        bottom: 0.5rem;
    }
    
    .pop-charts {
        width: 60%;
        top: 0.45rem;
        left: 2.3rem;
        bottom: 0.5rem;
    }
    
    .pop-up .pie-data p {
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
    }
    
    .pop-up .pie-data .legend {
        width: 0.38rem;
        height: 0.28re.........完整代码请登录后点击上方下载按钮下载查看