省级大数据可视化平台看板效果-html代码-BFW代码库

代码语言：html
代码描述：省级大数据可视化平台看板效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>湖南省大数据可视化平台</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .main {
            position: relative;
            width: 100%;
            height: 100%;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5eec59613702c.png) no-repeat;
            background-size: cover;
            /* height: 880px; */
            min-width: 1386px;
        }
        .top_title {
            width: 100%;
            padding-top: 20px;
        }
        .top_title img {
            width: 100%;
        }

        .datas {
            width: 95%;
            height: 80%;
            margin: auto;
            margin-top: 2%;
        }
        .data_left,.data_middle,.data_right {
            float: left;
            height: 100%;
        }
        .data_left {
            width: 26%;
        }
        .left_top {
            width: 100%;
            height: 48%;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5eecaf434b525.png) no-repeat;
            background-size: 100%;
        }
        .left_top_title {
            font-size: 16px;
            color: #FFFFFF;
            padding-left: 10%;
            padding-top: 6%;
        }
        .left_top_main {
            width: 80%;
            height: 76%;
            margin: auto;
            margin-top: 4%;
        }
        .left_main_circle {
            float: left;
            width: 35%;
            height: 44%;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5eeca8f6508da.png) no-repeat;
            background-size: 100%;
            color: #4ADEFE;
            text-align: center;
        }
        .left_main_circle p {
            font-size: 16px;
            margin-top: 20%;
        }
        .left_main_circle span {
            font-size: 12px;
        }
        .left_main_circle:nth-of-type(2) {
            margin-left: 22%;
        }
        .left_main_circle:nth-of-type(3) {
            margin-top: 8%;
        }
        .left_bottom {
            width: 100%;
            height: 48%;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5eecaf434b525.png) no-repeat;
            background-size: 100%;
            margin-top: 7%;
        }
        .left_bottom_main {
            /* background: white; */
        }
        .data_middle {
            width: 38%;
            margin: 0 2.5%;
            /* background: white; */
        }
        .middle_top {
            width: 100%;
            height: 17%;
        }
        .middle_top_list {
            float: left;
            width: 33.2%;
            height: 65%;
            margin-top: 5%;
            text-align: center;
            color: #4ADEFE;
        }
        .middle_top_list span {
            color: #F3DB5C;
        }
        .list_title {
            font-size: 18px;
            margin-top: -15%;
        }
        .list_num {
            margin-top: 3%;
            font-size: 16px;
        }
        .list_num span {
            font-size: 30px;
        }
        .today_list_font {
            font-size: 14px;
            margin-top: 4%;
        }
        .middle_top_list:nth-of-type(2) {
            border-left: 1px solid #4E72B0;
            border-right: 1px solid #4E72B0;
        }
        .middle_bottom {
            width: 100%;
            height: 75%;
            margin-top: 9%;
            background: transparent;
        }
        .data_right {
            width: 31%;
        }
        .right_top {
            width: 100%;
            height: 48%;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5eecaf434b525.png) no-repeat;
            background-size: 100%;
        }
        .right_top_main {
            width: 95%;
        }
        .right_bottom {
            width: 100%;
            height: 48%;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5eecaf434b525.png) no-repeat;
            background-size: 100%;
            margin-top: 6%;
        }



        .highcharts-credits {
            display: none;
        }
        .highcharts-legend {
            display: none;
        }

@charset "utf-8";
        /* CSS Document */
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, dd, dl, dt, li, ol, ul,input,select,button,textarea,tr,td {
            padding: 0;
            margin: 0;
            border: none;
        }
        input,button,select,textarea,a,img {
            outline: none;
        }

        /*去掉超链接或按钮点击时出现的虚线框黄色边框*/
        ::-moz-focus-inner {
            border: 0px;
        }

        /*火狐的私有属性去掉点击时边框*/
        body,html {
            width: 100%;
            font-family: "Microsoft YaHei","Arial", "SimSun";
        }
        ul, ul li, ol li, li {
            list-style: none;
        }
        a, img, input, textarea {
            border: none;
        }
        a {
            text-decoration: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: ".";
            clear: both;
            height: 0;
        }
        * html .clearfix {
            zoom: 1;
        }
        *:first-child + html .clearfix {
            zoom: 1;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .none {
            display: none;
        }

        .inrow {
            font-size: 0;
            [;
            font-size: 12px;
            ];
            *font-size: 0;
            font-family: arial;
            [;
            letter-spacing: -3px;
            ];
            *letter-spacing: normal;
            *word-spacing: -1px;
        }
        .inrow>li,.inrow span {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            font-size: 14px;
            letter-spacing: normal;
            word-spacing: normal;
        }
        .dataNums {
            position: absolute;
            left: 34%;
            top: 50%;
            display: block;
            width: 100%;
            height: 75px;
            margin-top: -37px;
            text-align: center;
        }
        .dataNums .dataOne {
            float: left;
            width: 9px;
            height: 75px;
            text-align: center;
        }
        .dataNums .dataBoc {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .dataNums .dataBoc .tt {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .dataNums .tt span {
            width: 100%;
            height: 100%;
            font: 18px "Arial";
            color: #4ADEFE;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top_title">
            <img src="data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看