template/Plantar_pressure.git

parent: 71ee5269 | 补丁 | 提交 | ignore whitespace

cshenfu

2023-03-28 60edbee179c2a5af004f85799544346c9bdabfd8

change style

19个文件已添加

5个文件已修改

	.DS_Store	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/.DS_Store	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/css/insole.css	134 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/css/style copy.css	581 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/css/style.css	106 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.css	49 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.eot	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.less	51 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.svg	20 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.symbol.svg	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.ttf	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.woff	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/icon/remixicon.woff2	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/bg.jpg	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/logo.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/pdf.svg	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/player.svg	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/repeat.svg	10 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/skip-back.svg	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/skip-next.svg	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/images/stop.svg	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/index.html	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/index2.html	488 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	read_com/js/function.js	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 .DS_Store

Binary files differ

 read_com/.DS_Store

Binary files differ

 read_com/css/insole.css

New file
@@ -0,0 +1,134 @@
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #050715;
    min-width: 1080px;
    overflow-x: scroll;
}
ul,li{
    list-style: none;
}
.main{
    display: flex;
    width: 100vw;
}
.sidebar{
    width: 100px;
    height: 100vh;
    display: flex;
    flex-direction:column;
    justify-content:space-between;
    padding: 32px 20px;
}
.wrapper{
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    background: url(../images/bg.jpg) #fff no-repeat;
    background-size: cover;
    border-radius: 24px 0 0 24px;
}
.logo{
    width: 56px;
    height: 56px;
}
.menu{
    justify-content:center;
    padding-top: 24px;
}
.menu li{
    margin-bottom: 24px;
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    background: #fff;
    overflow: hidden;
    border-radius: 36px;
}
.logout{
    width: 56px;
    height: 56px;
    border-radius: 36px;
    background: #fff;
    overflow: hidden;
}
.operate{
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 9;
    left: calc((100vw - 800px) / 2 + 50px);
    bottom: 32px;
    width: 850px;
    padding: 16px 16px;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(8px);
}
.operate .btn{
    font-size: 14px;
    line-height: 16px;
    border: none;
    padding: 8px 12px;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
}
.operate .btn i{
    display: inline-block;
    vertical-align: middle;
}
.key{
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 0;
    right: 0;
    z-index: 8;
    padding: 12px 0 12px 16px;
    border-radius: 0 0 0 12px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(8px);
}
.key > span{
    display: inline-block;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    margin-right: 16px;
    box-sizing: border-box;
}
.key .color1{
    color: #050715;
    border: 1px solid #050715;
}
.key .color2{
    background: #EF5DA8;
}
.key .color3{
    background: #5D5FEF;
}
.key .color4{
    background: #FFC530;
}
.key .color5{
    background: #16D7CB;
}
.key .color6{
    background: #AD2222;
}
.key .color7{
    background: #460F68;
}

.container{
    padding: 56px 24px;
    position: relative;
}

 read_com/css/style copy.css

New file
@@ -0,0 +1,581 @@
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    height: 100%;
    width: 100%;
}

.head{
    padding: 10px 16px;
    height: 56px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    /* transform: scale(0.9); */
}
.head button{
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
}
.fbox{
    left: -20px;
}
.fbox,.fbox2 {
    position: relative;
    padding: 6px 16px;
    /* margin-left: 16px; */
    margin-top: 15px;
    width: 242px;
    height: 640px;
    background: url(../images/bg.png) #fff no-repeat;
    background-size: cover;
}
.fbox2{
    transform:scale(-1,1);
    position: absolute;
    top:56px;
    left: 700px;
}
.fbox2 .mask{
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 9;
    width: 100%;
    height: 100%;
}
.fbox .mask{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
}

     
/* 
.data {
    border-radius: 20px;
    border: 1px solid #000;
    background: #fff;
} */



.none {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}




.Y15>.data18,
.Y15>.data17,
.Y15>.data16,
.Y15>.data15{top:18px}
.Y15>.data18{left: 82px;}
.Y15>.data17{left: 108px;}
.Y15>.data16{left: 134px;}
.Y15>.data15{left: 161px;}

.Y14>.data12,
.Y14>.data11,
.Y14>.data10,
.Y14>.data9,
.Y14>.data8,
.Y14>.data7{top:60px}
.Y14>.data12{left: 50px;}
.Y14>.data11{left: 77px;}
.Y14>.data10{left: 104px;}
.Y14>.data9{left: 131px;}
.Y14>.data8{left: 157px;}
.Y14>.data7{left: 183px;}

.Y13>.data0,
.Y13>.data1,
.Y13>.data2,
.Y13>.data3,
.Y13>.data4,
.Y13>.data5,
.Y13>.data6{top:97px}
.Y13>.data6{left: 33px;}
.Y13>.data5{left: 60px;}
.Y13>.data4{left: 86px;}
.Y13>.data3{left: 113px;}
.Y13>.data2{left: 141px;}
.Y13>.data1{left: 167px;}
.Y13>.data0{left: 194px;}

.Y12>.data27,
.Y12>.data26,
.Y12>.data25,
.Y12>.data24,
.Y12>.data23,
.Y12>.data22,
.Y12>.data21{top:135px}
.Y12>.data27{left:33px}
.Y12>.data26{left:60px}
.Y12>.data25{left:86px}
.Y12>.data24{left:113px}
.Y12>.data23{left:141px}
.Y12>.data22{left:167px}
.Y12>.data21{left:194px}

.Y11>.data20,
.Y11>.data19,
.Y11>.data18,
.Y11>.data17,
.Y11>.data16,
.Y11>.data15,
.Y11>.data14{top:174px}
.Y11>.data20{left:22px}
.Y11>.data19{left:50px}
.Y11>.data18{left:80px}
.Y11>.data17{left:109px}
.Y11>.data16{left:137px}
.Y11>.data15{left:165px}
.Y11>.data14{left:193px}

.Y10>.data13,
.Y10>.data12,
.Y10>.data11,
.Y10>.data10,
.Y10>.data9,
.Y10>.data8,
.Y10>.data7{top:214px}
.Y10>.data13{left:25px}
.Y10>.data12{left:53px}
.Y10>.data11{left:82px}
.Y10>.data10{left:112px}
.Y10>.data9{left:140px}
.Y10>.data8{left:166px}
.Y10>.data7{left:193px}

.Y09>.data6,
.Y09>.data5,
.Y09>.data4,
.Y09>.data3,
.Y09>.data2,
.Y09>.data1,
.Y09>.data0{top:254px}
.Y09>.data6{left:27px}
.Y09>.data5{left:53px}
.Y09>.data4{left:78px}
.Y09>.data3{left:104px}
.Y09>.data2{left:129px}
.Y09>.data1{left:156px}
.Y09>.data0{left:182px}

.Y08>.data27,
.Y08>.data26,
.Y08>.data25,
.Y08>.data24,
.Y08>.data23,
.Y08>.data22,
.Y08>.data21{top:291px}
.Y08>.data27{left:26px}
.Y08>.data26{left:51px}
.Y08>.data25{left:76px}
.Y08>.data24{left:101px}
.Y08>.data23{left:126px}
.Y08>.data22{left:150px}
.Y08>.data21{left:174px}

.Y07>.data20,
.Y07>.data19,
.Y07>.data18,
.Y07>.data17,
.Y07>.data16,
.Y07>.data15,
.Y07>.data14{top:333px}
.Y07>.data20{left:29px}
.Y07>.data19{left:53px}
.Y07>.data18{left:77px}
.Y07>.data17{left:101px}
.Y07>.data16{left:125px}
.Y07>.data15{left:148px}
.Y07>.data14{left:171px}

.Y06>.data13,
.Y06>.data12,
.Y06>.data11,
.Y06>.data10,
.Y06>.data9,
.Y06>.data8,
.Y06>.data7{top:377px}
.Y06>.data13{left:29px}
.Y06>.data12{left:53px}
.Y06>.data11{left:77px}
.Y06>.data10{left:101px}
.Y06>.data9{left:125px}
.Y06>.data8{left:148px}
.Y06>.data7{left:171px}

.Y05>.data6,
.Y05>.data5,
.Y05>.data4,
.Y05>.data3,
.Y05>.data2,
.Y05>.data1,
.Y05>.data0{top:421px}
.Y05>.data6{left:32px}
.Y05>.data5{left:55px}
.Y05>.data4{left:78px}
.Y05>.data3{left:101px}
.Y05>.data2{left:125px}
.Y05>.data1{left:148px}
.Y05>.data0{left:171px}

.Y04>.data27,
.Y04>.data26,
.Y04>.data25,
.Y04>.data24,
.Y04>.data23,
.Y04>.data22,
.Y04>.data21{top:463px}
.Y04>.data27{left:34px}
.Y04>.data26{left:57px}
.Y04>.data25{left:80px}
.Y04>.data24{left:103px}
.Y04>.data23{left:127px}
.Y04>.data22{left:150px}
.Y04>.data21{left:173px}

.Y03>.data20,
.Y03>.data19,
.Y03>.data18,
.Y03>.data17,
.Y03>.data16,
.Y03>.data15,
.Y03>.data14{top:507px}
.Y03>.data20{left:38px}
.Y03>.data19{left:60px}
.Y03>.data18{left:83px}
.Y03>.data17{left:107px}
.Y03>.data16{left:130px}
.Y03>.data15{left:153px}
.Y03>.data14{left:175px}

.Y02>.data13,
.Y02>.data12,
.Y02>.data11,
.Y02>.data10,
.Y02>.data9,
.Y02>.data8,
.Y02>.data7{top:549px}
.Y02>.data13{left:38px}
.Y02>.data12{left:60px}
.Y02>.data11{left:83px}
.Y02>.data10{left:107px}
.Y02>.data9{left:130px}
.Y02>.data8{left:153px}
.Y02>.data7{left:175px}

.Y01>.data5,
.Y01>.data4,
.Y01>.data3,
.Y01>.data2,
.Y01>.data1{top:586px}
.Y01>.data5{left:58px}
.Y01>.data4{left:83px}
.Y01>.data3{left:108px}
.Y01>.data2{left:133px}
.Y01>.data1{left:157px}










.data {
    position: absolute;
    width: 24px;
    height: 24px;
}


/* .foot{
    margin: 10px;
    display: flex;
    justify-content: space-around;
    width: 600px;
} */

.foot div,.region_data div{
    border: 1px solid black;
    padding: 5px;
}
.foot span,.region_data span{
    display: inline-block;
    width: 120px;
    margin: 0 5px;
    text-align: right;
}
.foot p,.region_data p{
    line-height: 24px;
    font-size: 24px;
    height: 24px;
    margin: 33px 0px;
    background-color: #fff;
}
.dataLeft{
    position: absolute;
    top: 100px;
    left: 240px;
}
.dataRight{
    position: absolute;
    top: 100px;
    left: 980px;
}

.region_data .dataLeft{
    position: absolute;
    top: 100px;
    left: 1540px;
}
.region_data .dataRight{
    position: absolute;
    top: 100px;
    left: 1980px;
}







/* .region1{
    background-color: #1D38C3;
}
.region2{
    background-color: #FF4C4F;
}
.region3{
    background-color: #fdec3d;
}
.region4{
    background-color: #73d13d;
}
.region5{
    background-color: #41a8ff;
}
.region6{
    background-color: #37cfca;
}
.region7{
    background-color: #ffa940;
}
.region8{
    background-color: #f75baa;
}
.region9{
    background-color: #9153de;
} */




.region_main,.region_1,.region_2,.region_3,.region_4,.region_5,.region_6,.region_7,.region_8,.region_9{
    position: absolute;
}
.region_main{
    z-index: 8;
    width: 242px;
    height: 640px;
    left: 0;
    top: 0;
}
.region_1{
    width: 139px;
    height: 185px;
    right: 0;
    bottom: 0;
    background: url(../images/r1_n.png) no-repeat;
    background-size: cover;
}
.region_2{
    width: 110px;
    height: 185px;
    left: 0;
    bottom: 0;
    background: url(../images/r2_n.png) no-repeat;
    background-size: cover;
}
.region_3{
    width: 141px;
    height: 171px;
    right: 0;
    top: 284px;
    background: url(../images/r3_n.png) no-repeat;
    background-size: cover;
}
.region_4{
    width: 101px;
    height: 171px;
    left: 0;
    top: 284px;
    background: url(../images/r4_n.png) no-repeat;
    background-size: cover;
}
.region_5{
    width: 88px;
    height: 195px;
    right: 0;
    top: 89px;
    background: url(../images/r5_n.png) no-repeat;
    background-size: cover;
}
.region_6{
    width: 91px;
    height: 195px;
    left: 75px;
    top: 89px;
    background: url(../images/r6_n.png) no-repeat;
    background-size: cover;
}
.region_7{
    width: 86px;
    height: 195px;
    left: 0;
    top: 89px;
    background: url(../images/r7_n.png) no-repeat;
    background-size: cover;
}
.region_8{
    width: 87px;
    height: 89px;
    right: 0;
    top: 0;
    background: url(../images/r8_n.png) no-repeat;
    background-size: cover;
}
.region_9{
    width: 163px;
    height: 126px;
    left: 0;
    top: 0;
    background: url(../images/r9_n.png) no-repeat;
    background-size: cover;
}





.foot .colorCircle,.region_data .colorCircle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.region1 .colorCircle,.region1_2 .colorCircle{
    background-color: #1D38C3;
}
.region2 .colorCircle,.region2_2 .colorCircle{
    background-color: #FF4C4F;
}
.region3 .colorCircle,.region3_2 .colorCircle{
    background-color: #fdec3d;
}
.region4 .colorCircle,.region4_2 .colorCircle{
    background-color: #73d13d;
}
.region5 .colorCircle,.region5_2 .colorCircle{
    background-color: #41a8ff;
}
.region6 .colorCircle,.region6_2 .colorCircle{
    background-color: #37cfca;
}
.region7 .colorCircle,.region7_2 .colorCircle{
    background-color: #ffa940;
}
.region8 .colorCircle,.region8_2 .colorCircle{
    background-color: #f75baa;
}
.region9 .colorCircle,.region9_2 .colorCircle{
    background-color: #9153de;
}


.chart {
    width: 200px;
    grid-area: chart;
    padding: 50px;
    background: white;
    box-shadow: 2px 3px 10px rgba(0,0,0,.3)
}
.chart2 {
    grid-area: chart2;
    padding: 50px;
    background: white;
    box-shadow: 2px 3px 10px rgba(0,0,0,.3)
}


.chart_line{
    width: 100%;
    display: flex;
}


.heatmap_box{
    width: 100%;
    height: 500px;
    min-width: 1000px;
    display: flex;
    justify-content: baseline;
    margin: 80px;
}
.heatmap_box div{
    width: 500px;
    height: 500px;
    /* background-color: gray; */
    margin: 80px;
}

.left_map{
    background: url(../images/bg.png) no-repeat center;
    background-size: 50% 100%;
}

.right_map{
    background: url(../images/bg.png) no-repeat center;
    background-size: 50% 100%;
    transform:scale(-1,1);
}
.right_map_top,.right_map_middle,.right_map_buttom{
    transform:scale(-1,1);
}


.sum_data{
    width: 300px;
    height: 500px;
    position: absolute;
    left: 1500px;
    top: 100px;
    border: 1px solid black;
}

#chart-container,#chart-container2 {
    position: relative;
    height: 1500px;
    width: 1500px;
    overflow: hidden;
    margin-bottom: 500px;
    }

 read_com/css/style.css

@@ -10,6 +10,11 @@
    width: 100%;
}

a{
    text-decoration:none;
    color: black;
}

.head{
    padding: 10px 16px;
    height: 56px;
@@ -24,24 +29,30 @@
    border: none;
    border-radius: 4px;
}
.fbox{
    left: -20px;
.xiedian{
    transform: scale(0.5,0.5);
    float: left;
    position: relative;
    left: -100px;
    top: -200px;
}
/* .fbox{
    transform:scale(0.5,0.5);
} */
.fbox,.fbox2 {
    position: relative;
    padding: 6px 16px;
    /* margin-left: 16px; */
    margin-top: 15px;
    width: 242px;
    height: 640px;
    margin: 0;
    margin-top: 200px;
    float: left;
    background: url(../images/bg.png) #fff no-repeat;
    background-size: cover;
    z-index: 0;
}
.fbox2{
    transform:scale(-1,1);
    position: absolute;
    top:56px;
    left: 700px;
}
.fbox2 .mask{
    position: absolute;
@@ -59,14 +70,6 @@
    width: 100%;
    height: 100%;
}

     
/* 
.data {
    border-radius: 20px;
    border: 1px solid #000;
    background: #fff;
} */



@@ -307,12 +310,6 @@
}


/* .foot{
    margin: 10px;
    display: flex;
    justify-content: space-around;
    width: 600px;
} */

.foot div,.region_data div{
    border: 1px solid black;
@@ -329,29 +326,28 @@
    font-size: 24px;
    height: 24px;
    margin: 33px 0px;
    background-color: #fff;
    /* background-color: #fff; */
}
.dataLeft{
.foot{
    float: left;
    position: absolute;
    top: 100px;
    left: 240px;
    top: -10px;
    left: 100px;
    display: flex;
    justify-content: space-around;
	
}
.dataRight{
.region_data{
    float: left;
    position: absolute;
    top: 100px;
    left: 980px;
    top: -10px;
    right: -180px;
    display: flex;
    justify-content: space-around;
	
}

.region_data .dataLeft{
    position: absolute;
    top: 100px;
    left: 1540px;
}
.region_data .dataRight{
    position: absolute;
    top: 100px;
    left: 1980px;
}




@@ -473,6 +469,10 @@
    background-size: cover;
}

.foot,.region_data{
    transform: scale(0.5,0.5);
}




@@ -530,32 +530,27 @@
.chart_line{
    width: 100%;
    display: flex;
    justify-content: space-evenly
}


.heatmap_box{
    width: 100%;
    height: 500px;
    min-width: 1000px;
    position: relative;
    left: -1325px;
    border: 1px solid black;
    height: 640px;
    width: 3872px;
    display: flex;
    justify-content: baseline;
    margin: 80px;
    margin-top: 80px;
    transform: scale(0.3);
}
.heatmap_box div{
    width: 500px;
    height: 500px;
    /* background-color: gray; */
    margin: 80px;
    width: 484px;
}

.left_map{
    background: url(../images/bg.png) no-repeat center;
    background-size: 50% 100%;
}

.right_map{
    background: url(../images/bg.png) no-repeat center;
    background-size: 50% 100%;
    transform:scale(-1,1);
}
.right_map_top,.right_map_middle,.right_map_buttom{
@@ -573,9 +568,12 @@
}

#chart-container,#chart-container2 {
    border: 1px solid black;
    position: relative;
    height: 1500px;
    width: 1500px;
    margin: 0 auto;
    top: -100px;
    height: 500px;
    width: 500px;
    overflow: hidden;
    margin-bottom: 500px;
    }

 read_com/icon/remixicon.css

New file
@@ -0,0 +1,49 @@

/*
* https://remixicon.com
* https://github.com/Remix-Design/RemixIcon
* Copyright RemixIcon.com
* Released under the Apache License Version 2.0
*/

@font-face {
    font-family: "remixicon";
    src: url('remixicon.eot?t=1678761064569'); /* IE9*/
    src: url('remixicon.eot?t=1678761064569#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url("remixicon.woff2?t=1678761064569") format("woff2"),
    url("remixicon.woff?t=1678761064569") format("woff"),
    url('remixicon.ttf?t=1678761064569') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('remixicon.svg?t=1678761064569#remixicon') format('svg'); /* iOS 4.1- */
    font-display: swap;
}

[class^="ri-"], [class*="ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }

.ri-repeat-2-fill:before { content: "\f071"; }
.ri-play-circle-line:before { content: "\f009"; }
.ri-stop-circle-line:before { content: "\f19f"; }
.ri-skip-back-mini-fill:before { content: "\f141"; }
.ri-skip-forward-mini-fill:before { content: "\f145"; }
.ri-download-2-fill:before { content: "\ec53"; }

 read_com/icon/remixicon.eot

Binary files differ

 read_com/icon/remixicon.less

New file
@@ -0,0 +1,51 @@

/*
* https://remixicon.com
* https://github.com/Remix-Design/RemixIcon
* Copyright RemixIcon.com
* Released under the Apache License Version 2.0
*/

@font-face {
    font-family: "remixicon";
    src: url('remixicon.eot?t=1678761064569'); /* IE9*/
    src: url('remixicon.eot?t=1678761064569#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url("remixicon.woff2?t=1678761064569") format("woff2"),
    url("remixicon.woff?t=1678761064569") format("woff"),
    url('remixicon.ttf?t=1678761064569') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('remixicon.svg?t=1678761064569#remixicon') format('svg'); /* iOS 4.1- */
    font-display: swap;
}

[class^="ri-"], [class*="ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:global {
.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }

.ri-repeat-2-fill:before { content: "\f071"; }
.ri-play-circle-line:before { content: "\f009"; }
.ri-stop-circle-line:before { content: "\f19f"; }
.ri-skip-back-mini-fill:before { content: "\f141"; }
.ri-skip-forward-mini-fill:before { content: "\f145"; }
.ri-download-2-fill:before { content: "\ec53"; }
}

 read_com/icon/remixicon.svg

New file
@@ -0,0 +1,20 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <font id="remixicon" horiz-adv-x="1200">
    <font-face font-family="remixicon"
        units-per-em="1200" ascent="1200"
        descent="0" />
    <missing-glyph horiz-adv-x="0" /><glyph glyph-name="repeat-2-fill"
            unicode="&#xF071;"
            horiz-adv-x="1200" d="M400 200V103.4000000000001A25 25 0 0 0 359 84.1500000000001L153 255.8A25 25 0 0 0 169.1 300H900A100 100 0 0 1 1000 400V800H1100V400A200 200 0 0 0 900 200H400zM800 1000V1096.6A25 25 0 0 0 841 1115.85L1047 944.2A25 25 0 0 0 1030.95 900H300A100 100 0 0 1 200 800V400H100V800A200 200 0 0 0 300 1000H800z" /><glyph glyph-name="play-circle-line"
            unicode="&#xF009;"
            horiz-adv-x="1200" d="M600 100C323.85 100 100 323.85 100 600S323.85 1100 600 1100S1100 876.15 1100 600S876.15 100 600 100zM600 200A400 400 0 1 1 600 1000A400 400 0 0 1 600 200zM531.1 779.25L775.05 616.6500000000001A20.000000000000004 20.000000000000004 0 0 0 775.05 583.3500000000001L531.05 420.7500000000001A20.000000000000004 20.000000000000004 0 0 0 499.9999999999999 437.3500000000002V762.65A20.000000000000004 20.000000000000004 0 0 0 531.0999999999999 779.25z" /><glyph glyph-name="stop-circle-line"
            unicode="&#xF19F;"
            horiz-adv-x="1200" d="M600 100C323.85 100 100 323.85 100 600S323.85 1100 600 1100S1100 876.15 1100 600S876.15 100 600 100zM600 200A400 400 0 1 1 600 1000A400 400 0 0 1 600 200zM450 750H750V450H450V750z" /><glyph glyph-name="skip-back-mini-fill"
            unicode="&#xF141;"
            horiz-adv-x="1200" d="M350 900A50 50 0 0 0 400 850V350A50 50 0 0 0 300 350V850A50 50 0 0 0 350 900zM453.95 579.5999999999999A25 25 0 0 0 453.95 620.4L810.6 872.1999999999999A25 25 0 0 0 850 851.75V348.25A25 25 0 0 0 810.6 327.8000000000001L453.95 579.6z" /><glyph glyph-name="skip-forward-mini-fill"
            unicode="&#xF145;"
            horiz-adv-x="1200" d="M389.4000000000001 327.8000000000001A25 25 0 0 0 350 348.25V851.75A25 25 0 0 0 389.4000000000001 872.2L746.05 620.4000000000001A25 25 0 0 0 746.05 579.6L389.4 327.8000000000001zM800 850A50 50 0 0 0 900 850V350A50 50 0 1 0 800 350V850z" /><glyph glyph-name="download-2-fill"
            unicode="&#xEC53;"
            horiz-adv-x="1200" d="M200 250H1000V600H1100V200A50 50 0 0 0 1050 150H150A50 50 0 0 0 100 200V600H200V250zM700 750H950L600 400L250 750H500V1050H700V750z" /></font></defs></svg>

 read_com/icon/remixicon.symbol.svg

New file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:none;"><symbol viewBox="0 0 24 24" id="repeat-2-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 20v1.932a.5.5 0 0 1-.82.385l-4.12-3.433A.5.5 0 0 1 3.382 18H18a2 2 0 0 0 2-2V8h2v8a4 4 0 0 1-4 4H8zm8-16V2.068a.5.5 0 0 1 .82-.385l4.12 3.433a.5.5 0 0 1-.321.884H6a2 2 0 0 0-2 2v8H2V8a4 4 0 0 1 4-4h10z"/></symbol><symbol viewBox="0 0 24 24" id="play-circle-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"/></symbol><symbol viewBox="0 0 24 24" id="stop-circle-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9 9h6v6H9V9z"/></symbol><symbol viewBox="0 0 24 24" id="skip-back-mini-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6a1 1 0 0 1 1 1v10a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1zm2.079 6.408a.5.5 0 0 1 0-.816l7.133-5.036a.5.5 0 0 1 .788.409v10.07a.5.5 0 0 1-.788.409l-7.133-5.036z"/></symbol><symbol viewBox="0 0 24 24" id="skip-forward-mini-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.788 17.444A.5.5 0 0 1 7 17.035V6.965a.5.5 0 0 1 .788-.409l7.133 5.036a.5.5 0 0 1 0 .816l-7.133 5.036zM16 7a1 1 0 0 1 2 0v10a1 1 0 1 1-2 0V7z"/></symbol><symbol viewBox="0 0 24 24" id="download-2-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7zM14 9h5l-7 7-7-7h5V3h4v6z"/></symbol></svg>

 read_com/icon/remixicon.ttf

Binary files differ

 read_com/icon/remixicon.woff

Binary files differ

 read_com/icon/remixicon.woff2

Binary files differ

 read_com/images/bg.jpg


 read_com/images/logo.png


 read_com/images/pdf.svg

New file
@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8806 0.833344L16.8611 4.89687V7.84315H17.9167V16.4706H16.8611V17.549C16.8611 17.9781 16.6943 18.3895 16.3974 18.6929C16.1004 18.9962 15.6977 19.1667 15.2778 19.1667H4.72223C4.30231 19.1667 3.89958 18.9962 3.60265 18.6929C3.30571 18.3895 3.1389 17.9781 3.1389 17.549V16.4706H2.08334V7.84315H3.1389V2.45099C3.1389 2.02196 3.30571 1.61051 3.60265 1.30714C3.89958 1.00377 4.30231 0.833344 4.72223 0.833344H12.8806ZM15.2778 16.4706H4.72223V17.549H15.2778V16.4706ZM6.88876 10.1979H5.39251V14.056H6.34251V12.8816H6.58001C6.8094 12.8814 7.03831 12.8603 7.26401 12.8185C7.38383 12.7928 7.50139 12.7571 7.61551 12.7117C7.71368 12.6664 7.80551 12.613 7.89101 12.5516C8.04618 12.4319 8.16176 12.283 8.23776 12.1051C8.31059 11.9175 8.34701 11.7217 8.34701 11.5179C8.34425 11.339 8.31214 11.1618 8.25201 10.9938C8.1862 10.8266 8.08573 10.6759 7.95751 10.5522C7.80734 10.4205 7.63054 10.3244 7.43976 10.2707C7.25927 10.2258 7.07449 10.2014 6.88876 10.1979ZM9.92876 10.1979H8.59876V14.056H9.92876C10.0776 14.0528 10.2264 14.0398 10.3753 14.0172C10.5083 13.9945 10.6381 13.9605 10.7648 13.9153C10.8788 13.8667 10.988 13.8101 11.0925 13.7454C11.1875 13.6742 11.2746 13.5933 11.3538 13.5028C11.4298 13.4057 11.4963 13.3022 11.5533 13.1922C11.6074 13.0715 11.6519 12.9465 11.6863 12.8185C11.7338 12.592 11.7591 12.3623 11.7623 12.1294C11.7589 11.9718 11.7462 11.8146 11.7243 11.6586C11.7022 11.5201 11.6689 11.3838 11.6245 11.251C11.58 11.131 11.5243 11.0156 11.4583 10.9064C11.3919 10.8063 11.3155 10.7136 11.2303 10.6298C11.1396 10.5498 11.0409 10.4798 10.9358 10.4211C10.8216 10.3628 10.7023 10.3157 10.5795 10.2804C10.3662 10.2289 10.148 10.2012 9.92876 10.1979ZM14.5505 10.1979H12.0235V14.056H12.9735V12.6001H14.3463V11.8479H12.9735V10.9744H14.5505V10.1979ZM10.0808 10.9744C10.1884 10.9776 10.2898 11.0083 10.3848 11.0666C10.4829 11.1345 10.5637 11.2219 10.627 11.3286C10.6967 11.458 10.7458 11.5939 10.7743 11.7363C10.7964 11.8689 10.8091 12.0016 10.8123 12.1342C10.8091 12.2701 10.7964 12.4044 10.7743 12.537C10.7461 12.6783 10.6964 12.8143 10.627 12.9398C10.5637 13.0433 10.4829 13.1291 10.3848 13.197C10.2923 13.2513 10.1874 13.2798 10.0808 13.2795H9.54876V10.9744H10.0808ZM6.79851 10.9744C6.88401 10.9776 6.96793 10.9938 7.05026 11.0229C7.12309 11.052 7.18801 11.0941 7.24501 11.1491C7.34634 11.2623 7.39701 11.395 7.39701 11.547C7.39701 11.7088 7.33843 11.843 7.22126 11.9498C7.15864 12.0044 7.08596 12.0457 7.00751 12.0711C6.92219 12.0938 6.8344 12.1052 6.74626 12.1051H6.34251V10.9744H6.79851ZM11.5026 2.45045L4.72223 2.45099V7.84315H15.2778V6.73829H11.5031L11.5026 2.45099V2.45045ZM13.0859 3.32937V5.12065H14.8403L13.0859 3.32937Z" fill="black"/>
</svg>

 read_com/images/player.svg

New file
@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 18.3333C5.39751 18.3333 1.66667 14.6025 1.66667 9.99999C1.66667 5.39749 5.39751 1.66666 10 1.66666C14.6025 1.66666 18.3333 5.39749 18.3333 9.99999C18.3333 14.6025 14.6025 18.3333 10 18.3333ZM8.85167 7.01249C8.80152 6.97903 8.74323 6.9598 8.68301 6.95684C8.62279 6.95389 8.5629 6.96732 8.50971 6.99571C8.45652 7.0241 8.41203 7.06638 8.38097 7.11806C8.34991 7.16973 8.33345 7.22887 8.33334 7.28916V12.7108C8.33345 12.7711 8.34991 12.8302 8.38097 12.8819C8.41203 12.9336 8.45652 12.9759 8.50971 13.0043C8.5629 13.0327 8.62279 13.0461 8.68301 13.0431C8.74323 13.0402 8.80152 13.021 8.85167 12.9875L12.9175 10.2775C12.9632 10.2471 13.0007 10.2058 13.0267 10.1574C13.0526 10.109 13.0662 10.0549 13.0662 9.99999C13.0662 9.94507 13.0526 9.891 13.0267 9.84258C13.0007 9.79417 12.9632 9.75292 12.9175 9.72249L8.85167 7.01249Z" fill="black"/>
</svg>

 read_com/images/repeat.svg

New file
@@ -0,0 +1,10 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_21_23)">
<path d="M4.99999 3.33334H17.5C17.721 3.33334 17.933 3.42114 18.0892 3.57742C18.2455 3.7337 18.3333 3.94566 18.3333 4.16668V10H16.6667V5.00001H4.99999V7.50001L0.833328 4.16668L4.99999 0.833344V3.33334ZM15 16.6667H2.49999C2.27898 16.6667 2.06702 16.5789 1.91074 16.4226C1.75446 16.2663 1.66666 16.0544 1.66666 15.8333V10H3.33333V15H15V12.5L19.1667 15.8333L15 19.1667V16.6667Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_21_23">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>

 read_com/images/skip-back.svg

New file
@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 5C6.05435 5 6.26631 5.0878 6.42259 5.24408C6.57887 5.40036 6.66667 5.61232 6.66667 5.83333V14.1667C6.66667 14.3877 6.57887 14.5996 6.42259 14.7559C6.26631 14.9122 6.05435 15 5.83333 15C5.61232 15 5.40036 14.9122 5.24408 14.7559C5.0878 14.5996 5 14.3877 5 14.1667V5.83333C5 5.61232 5.0878 5.40036 5.24408 5.24408C5.40036 5.0878 5.61232 5 5.83333 5ZM7.56583 10.34C7.51149 10.3015 7.46716 10.2505 7.43658 10.1914C7.40599 10.1322 7.39002 10.0666 7.39002 10C7.39002 9.9334 7.40599 9.86777 7.43658 9.80862C7.46716 9.74946 7.51149 9.6985 7.56583 9.66L13.51 5.46333C13.5724 5.41936 13.6457 5.39337 13.7219 5.38822C13.7981 5.38307 13.8742 5.39895 13.9419 5.43412C14.0097 5.46929 14.0665 5.52241 14.1061 5.58767C14.1458 5.65292 14.1667 5.72782 14.1667 5.80417V14.1958C14.1667 14.2722 14.1458 14.3471 14.1061 14.4123C14.0665 14.4776 14.0097 14.5307 13.9419 14.5659C13.8742 14.6011 13.7981 14.6169 13.7219 14.6118C13.6457 14.6066 13.5724 14.5806 13.51 14.5367L7.56583 10.34Z" fill="black"/>
</svg>

 read_com/images/skip-next.svg

New file
@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.49 14.5367C6.42759 14.5806 6.35429 14.6066 6.27812 14.6118C6.20194 14.6169 6.12582 14.6011 6.05805 14.5659C5.99029 14.5307 5.93349 14.4776 5.89386 14.4123C5.85423 14.3471 5.83329 14.2722 5.83333 14.1958V5.80417C5.83329 5.72782 5.85423 5.65292 5.89386 5.58767C5.93349 5.52241 5.99029 5.46929 6.05805 5.43412C6.12582 5.39895 6.20194 5.38307 6.27812 5.38822C6.35429 5.39337 6.42759 5.41936 6.49 5.46333L12.4342 9.66C12.4885 9.6985 12.5328 9.74946 12.5634 9.80862C12.594 9.86777 12.61 9.9334 12.61 10C12.61 10.0666 12.594 10.1322 12.5634 10.1914C12.5328 10.2505 12.4885 10.3015 12.4342 10.34L6.49 14.5367ZM13.3333 5.83333C13.3333 5.61232 13.4211 5.40036 13.5774 5.24408C13.7337 5.0878 13.9457 5 14.1667 5C14.3877 5 14.5996 5.0878 14.7559 5.24408C14.9122 5.40036 15 5.61232 15 5.83333V14.1667C15 14.3877 14.9122 14.5996 14.7559 14.7559C14.5996 14.9122 14.3877 15 14.1667 15C13.9457 15 13.7337 14.9122 13.5774 14.7559C13.4211 14.5996 13.3333 14.3877 13.3333 14.1667V5.83333Z" fill="black"/>
</svg>

 read_com/images/stop.svg

New file
@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 18.3333C5.39751 18.3333 1.66667 14.6025 1.66667 9.99999C1.66667 5.39749 5.39751 1.66666 10 1.66666C14.6025 1.66666 18.3333 5.39749 18.3333 9.99999C18.3333 14.6025 14.6025 18.3333 10 18.3333ZM7.50001 7.49999V12.5H12.5V7.49999H7.50001Z" fill="black"/>
</svg>

 read_com/index.html

@@ -3,7 +3,7 @@
<head>
 <meta charset="UTF-8">
 <title>足压分析</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/style copy.css"/>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> -->
    <!-- 4.0.1版本 ↓ 在项目node中没有配置相关静态访问资源，所以这个会报错404 GET http://localhost:3000/socket.io.js net::ERR_ABORTED 404 (Not Found)-->
@@ -422,13 +422,13 @@
</div>

<!-- heatmap热力图 -->
<div class="heatmap_box" style="display: none;">
<div class="heatmap_box">
  <div class="left_map"></div>
  <div class="left_map_top"></div> 
  <div class="left_map_middle"></div>
  <div class="left_map_buttom"></div>
</div>
<div class="heatmap_box" style="display: none;">
<div class="heatmap_box">
  <div class="right_map"></div>
  <div class="right_map_top"></div>
  <div class="right_map_middle"></div>

 read_com/index2.html

New file
@@ -0,0 +1,488 @@
<!DOCTYPE html>
<html>
    <head>
        <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
        <title>智能鞋垫</title>
        <link rel="stylesheet" href="css/insole.css">
        <link rel="stylesheet" href="icon/remixicon.css">
        <link rel="stylesheet" href="./css/style.css">
        <script src="./js/socket.io.js"></script>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/heatmap_data.js"></script>
        <script src="./js/heatmap.js"></script>
        <script src="./js/excel.js"></script>
        <script src="./js/jspdf.js"></script>
        <script src="./js/html2canvas.js"></script>
    </head>
    <body>
        <div class="main">
            <div class="sidebar">
                <img src="images/logo.png" class="logo">
                <nav class="menu">
                    <ul class="">
                        <li class="current"><a href="#region_demo">分区</a> </li>
                        <li><a href="#circle-line">曲线图</a></li>
                        <li><a href="#heatmap">热力图</a></li>
                        <li><a href="#chart-container">3D等高</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                </nav>
                <div class="logout"></div>
            </div>
            <div class="wrapper">
                <!-- <div class="key">
                    <span class="color1">0-200</span>
                    <span class="color2">201-300</span>
                    <span class="color3">301-500</span>
                    <span class="color4">501-800</span>
                    <span class="color5">801-1200</span>
                    <span class="color6">1201-1700</span>
                    <span class="color7">1701-2500</span>
                </div> -->
                <div class="operate">
                    <button class="btn start"><i class="ri-play-circle-line"></i> 采集</button>
                    <button class="btn end"><i class="ri-stop-circle-line"></i> 结束</button>
                    <button class="btn last"><i class="ri-skip-back-mini-fill"></i> 上一帧</button>
                    <button class="btn next"><i class="ri-skip-forward-mini-fill"></i> 下一帧</button>
                    <button class="btn back"><i class="ri-repeat-2-fill"></i> 回放</button>
                    <button class="btn download"><i class="ri-download-2-fill"></i> 导出报告</button>
                    <button class="btn"><i class="ri-repeat-2-fill"></i><input style="opacity: 0;cursor:pointer;position: absolute;left: 0;top: 0;" type="file" id="excel-file-left" multiple>左脚文件</button>
                    <button class="btn"><i class="ri-download-2-fill"></i> <input  style="opacity: 0;cursor:pointer;position: absolute;left: 0;top: 0;" type="file" id="excel-file-right" multiple>右脚文件</button>
                </div>
				
                <div class="container">
                    <div style="width: 100%;min-width: 1200px; height: 3000px; border: 1px solid #000;position: relative;">
                        <div id="region_demo" style="text-align: center;height: 50px;line-height: 50px;font-size: 20px;">分区示例</div>
                          <div class="xiedian">
                            <!-- 左脚 -->
                            <div id="region" class="fbox">
                                <img src="images/bg_t.png" class="mask">
                                <div class="region_main">
                                <div class="region_1"></div>
                                <div class="region_2"></div>
                                <div class="region_7"></div>
                                <div class="region_6"></div>
                                <div class="region_5"></div>
                                <div class="region_4"></div>
                                <div class="region_3"></div>
                                <div class="region_9"></div>
                                <div class="region_8"></div>
                            </div>
                                <div id="D">
                                    <div class="Y15">
                                        <div class="data20 data none"></div>
                                        <div class="data19 data none"></div>
                                        <div class="data18 data"></div>
                                        <div class="data17 data"></div>
                                        <div class="data16 data"></div>
                                        <div class="data15 data"></div>
                                        <div class="data14 data none"></div>
                                    </div>
                                    <div class="Y14">
                                        <div class="data13 data none"></div>
                                        <div class="data12 data"></div>
                                        <div class="data11 data"></div>
                                        <div class="data10 data"></div>
                                        <div class="data9 data"></div>
                                        <div class="data8 data"></div>
                                        <div class="data7 data"></div>
                                    </div>
                                    <div class="Y13">
                                        <div class="data6 data"></div>
                                        <div class="data5 data"></div>
                                        <div class="data4 data"></div>
                                        <div class="data3 data"></div>
                                        <div class="data2 data"></div>
                                        <div class="data1 data"></div>
                                        <div class="data0 data"></div>
                                    </div>
                                </div>
                                <div id="C">
                                    <div class="Y12">
                                        <div class="data27 data"></div>
                                        <div class="data26 data"></div>
                                        <div class="data25 data"></div>
                                        <div class="data24 data"></div>
                                        <div class="data23 data"></div>
                                        <div class="data22 data"></div>
                                        <div class="data21 data"></div>
                                    </div>
                                    <div class="Y11">
                                        <div class="data20 data"></div>
                                        <div class="data19 data"></div>
                                        <div class="data18 data"></div>
                                        <div class="data17 data"></div>
                                        <div class="data16 data"></div>
                                        <div class="data15 data"></div>
                                        <div class="data14 data"></div>
                                    </div>
                                    <div class="Y10">
                                        <div class="data13 data"></div>
                                        <div class="data12 data"></div>
                                        <div class="data11 data"></div>
                                        <div class="data10 data"></div>
                                        <div class="data9 data"></div>
                                        <div class="data8 data"></div>
                                        <div class="data7 data"></div>
                                    </div>
                                    <div class="Y09">
                                        <div class="data6 data"></div>
                                        <div class="data5 data"></div>
                                        <div class="data4 data"></div>
                                        <div class="data3 data"></div>
                                        <div class="data2 data"></div>
                                        <div class="data1 data"></div>
                                        <div class="data0 data"></div>
                                    </div>
                                </div>
                                <div id="B">
                                    <div class="Y08">
                                        <div class="data27 data"></div>
                                        <div class="data26 data"></div>
                                        <div class="data25 data"></div>
                                        <div class="data24 data"></div>
                                        <div class="data23 data"></div>
                                        <div class="data22 data"></div>
                                        <div class="data21 data"></div>
                                    </div>
                                    <div class="Y07">
                                    <div class="data20 data"></div>
                                    <div class="data19 data"></div>
                                    <div class="data18 data"></div>
                                    <div class="data17 data"></div>
                                    <div class="data16 data"></div>
                                    <div class="data15 data"></div>
                                    <div class="data14 data"></div>
                                    </div>
                                    <div class="Y06">
                                    <div class="data13 data"></div>
                                    <div class="data12 data"></div>
                                    <div class="data11 data"></div>
                                    <div class="data10 data"></div>
                                    <div class="data9 data"></div>
                                    <div class="data8 data"></div>
                                    <div class="data7 data"></div>
                                    </div>
                                    <div class="Y05">
                                    <div class="data6 data"></div>
                                    <div class="data5 data"></div>
                                    <div class="data4 data"></div>
                                    <div class="data3 data"></div>
                                    <div class="data2 data"></div>
                                    <div class="data1 data"></div>
                                    <div class="data0 data"></div>
                                    </div>
                                </div>
                                <div id="A">
                                    <div class="Y04">
                                    <div class="data27 data"></div>
                                    <div class="data26 data"></div>
                                    <div class="data25 data"></div>
                                    <div class="data24 data"></div>
                                    <div class="data23 data"></div>
                                    <div class="data22 data"></div>
                                    <div class="data21 data"></div>
                                    </div>
                                    <div class="Y03">
                                    <div class="data20 data"></div>
                                    <div class="data19 data"></div>
                                    <div class="data18 data"></div>
                                    <div class="data17 data"></div>
                                    <div class="data16 data"></div>
                                    <div class="data15 data"></div>
                                    <div class="data14 data"></div>
                                    </div>
                                    <div class="Y02">
                                    <div class="data13 data"></div>
                                    <div class="data12 data"></div>
                                    <div class="data11 data"></div>
                                    <div class="data10 data"></div>
                                    <div class="data9 data"></div>
                                    <div class="data8 data"></div>
                                    <div class="data7 data"></div>
                                    </div>
                                    <div class="Y01">
                                    <div class="data6 data none"></div>
                                    <div class="data5 data"></div>
                                    <div class="data4 data"></div>
                                    <div class="data3 data"></div>
                                    <div class="data2 data"></div>
                                    <div class="data1 data"></div>
                                    <div class="data0 data none"></div>
                                    </div>
                                </div>
                            </div>
							
                            <!-- 右脚 -->
                            <div class="fbox2">
                                <img src="images/bg_t.png" class="mask">
                                <div class="region_main">
                                    <div class="region_1"></div>
                                    <div class="region_2"></div>
                                    <div class="region_3"></div>
                                    <div class="region_4"></div>
                                    <div class="region_5"></div>
                                    <div class="region_6"></div>
                                    <div class="region_7"></div>
                                    <div class="region_8"></div>
                                    <div class="region_9"></div>
                                </div>
                                <div id="D2">
                                    <div class="Y15">
                                        <div class="data20 data none"></div>
                                        <div class="data19 data none"></div>
                                        <div class="data18 data"></div>
                                        <div class="data17 data"></div>
                                        <div class="data16 data"></div>
                                        <div class="data15 data"></div>
                                        <div class="data14 data none"></div>
                                    </div>
                                    <div class="Y14">
                                        <div class="data13 data none"></div>
                                        <div class="data12 data"></div>
                                        <div class="data11 data"></div>
                                        <div class="data10 data"></div>
                                        <div class="data9 data"></div>
                                        <div class="data8 data"></div>
                                        <div class="data7 data"></div>
                                    </div>
                                    <div class="Y13">
                                        <div class="data6 data"></div>
                                        <div class="data5 data"></div>
                                        <div class="data4 data"></div>
                                        <div class="data3 data"></div>
                                        <div class="data2 data"></div>
                                        <div class="data1 data"></div>
                                        <div class="data0 data"></div>
                                    </div>
                                </div>
                                <div id="C2">
                                    <div class="Y12">
                                        <div class="data27 data"></div>
                                        <div class="data26 data"></div>
                                        <div class="data25 data"></div>
                                        <div class="data24 data"></div>
                                        <div class="data23 data"></div>
                                        <div class="data22 data"></div>
                                        <div class="data21 data"></div>
                                    </div>
                                    <div class="Y11">
                                        <div class="data20 data"></div>
                                        <div class="data19 data"></div>
                                        <div class="data18 data"></div>
                                        <div class="data17 data"></div>
                                        <div class="data16 data"></div>
                                        <div class="data15 data"></div>
                                        <div class="data14 data"></div>
                                    </div>
                                    <div class="Y10">
                                        <div class="data13 data"></div>
                                        <div class="data12 data"></div>
                                        <div class="data11 data"></div>
                                        <div class="data10 data"></div>
                                        <div class="data9 data"></div>
                                        <div class="data8 data"></div>
                                        <div class="data7 data"></div>
                                    </div>
                                    <div class="Y09">
                                        <div class="data6 data"></div>
                                        <div class="data5 data"></div>
                                        <div class="data4 data"></div>
                                        <div class="data3 data"></div>
                                        <div class="data2 data"></div>
                                        <div class="data1 data"></div>
                                        <div class="data0 data"></div>
                                    </div>
                                </div>
                                <div id="B2">
                                    <div class="Y08">
                                        <div class="data27 data"></div>
                                        <div class="data26 data"></div>
                                        <div class="data25 data"></div>
                                        <div class="data24 data"></div>
                                        <div class="data23 data"></div>
                                        <div class="data22 data"></div>
                                        <div class="data21 data"></div>
                                    </div>
                                    <div class="Y07">
                                        <div class="data20 data"></div>
                                        <div class="data19 data"></div>
                                        <div class="data18 data"></div>
                                        <div class="data17 data"></div>
                                        <div class="data16 data"></div>
                                        <div class="data15 data"></div>
                                        <div class="data14 data"></div>
                                    </div>
                                    <div class="Y06">
                                        <div class="data13 data"></div>
                                        <div class="data12 data"></div>
                                        <div class="data11 data"></div>
                                        <div class="data10 data"></div>
                                        <div class="data9 data"></div>
                                        <div class="data8 data"></div>
                                        <div class="data7 data"></div>
                                    </div>
                                    <div class="Y05">
                                        <div class="data6 data"></div>
                                        <div class="data5 data"></div>
                                        <div class="data4 data"></div>
                                        <div class="data3 data"></div>
                                        <div class="data2 data"></div>
                                        <div class="data1 data"></div>
                                        <div class="data0 data"></div>
                                    </div>
                                </div>
                                <div id="A2">
                                    <div class="Y04">
                                        <div class="data27 data"></div>
                                        <div class="data26 data"></div>
                                        <div class="data25 data"></div>
                                        <div class="data24 data"></div>
                                        <div class="data23 data"></div>
                                        <div class="data22 data"></div>
                                        <div class="data21 data"></div>
                                    </div>
                                    <div class="Y03">
                                        <div class="data20 data"></div>
                                        <div class="data19 data"></div>
                                        <div class="data18 data"></div>
                                        <div class="data17 data"></div>
                                        <div class="data16 data"></div>
                                        <div class="data15 data"></div>
                                        <div class="data14 data"></div>
                                    </div>
                                    <div class="Y02">
                                        <div class="data13 data"></div>
                                        <div class="data12 data"></div>
                                        <div class="data11 data"></div>
                                        <div class="data10 data"></div>
                                        <div class="data9 data"></div>
                                        <div class="data8 data"></div>
                                        <div class="data7 data"></div>
                                    </div>
                                    <div class="Y01">
                                        <div class="data6 data none"></div>
                                        <div class="data5 data"></div>
                                        <div class="data4 data"></div>
                                        <div class="data3 data"></div>
                                        <div class="data2 data"></div>
                                        <div class="data1 data"></div>
                                        <div class="data0 data none"></div>
                                    </div>
                                </div>
                            </div>
                          </div>
						
							
							
                            <!-- 数据框 -->
                            <div class="foot">
                                <div class="dataLeft">
                                    <p>左脚</p>
                                    <p class="region9"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region8"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region7"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region6"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region5"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region4"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region3"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region1"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p></p>
                                </div>
                                <div class="dataRight">
                                    <p>右脚</p>
                                    <p class="region9"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region8"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region7"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region6"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region5"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region4"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region3"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p class="region1"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                    <p></p>
                                </div>
                            </div>
							
                            <!-- 总览数据框 -->
                            <div class="region_data">
                                <div class="dataLeft">
                                <p>左脚(总)</p>
                                <p class="region9_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region8_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region7_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region6_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region5_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region4_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region3_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region2_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region1_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
                            </div>
                            <div class="dataRight">
                                <p>右脚(总)</p>
                                <p class="region9_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region8_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region7_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region6_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region5_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region4_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region3_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region2_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="region1_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
                                <p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
                            </div>
                            </div>
							
                            <!-- chart曲线 -->
                            <div id="circle-line" style="position: relative;height: 50px;font-size: 20px; margin-top: 100px;top: 500px;">曲线图</div>
                            <div class="chart_line">
                                <div class="chart2" style="width:47%;"><canvas id="chart2"></canvas></div>
                                <div class="chart" style="width:47%;"><canvas id="chart"></canvas></div>
                            </div>
							
                            <!-- heatmap热力图 -->
                            <div id="heatmap" style="position: relative;height: 50px;font-size: 20px;text-align: center; margin-top: 100px;top: 300px;">受力图</div>
                            <div class="heatmap_box">
                                <div class="left_map"></div>
                                <div class="left_map_top"></div> 
                                <div class="left_map_middle"></div>
                                <div class="left_map_buttom"></div>
                                <div class="right_map_buttom"></div>
                                <div class="right_map_middle"></div>
                                <div class="right_map_top"></div>
                                <div class="right_map"></div>
                            </div>
                            <!-- <div class="heatmap_box">
                                <div class="right_map"></div>
                                <div class="right_map_top"></div>
                                <div class="right_map_middle"></div>
                                <div class="right_map_buttom"></div>
                            </div> -->
							
							
                            <div id="heatmap3d" style="position: relative;height: 50px;font-size: 20px;text-align: center; margin-top: 100px;">重力等高线</div>
                            <div name="threeD" id="chart-container"></div>
							
							
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="./js/3d_data.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/echarts.gl.min.js"></script>
<script src="./js/charts.js"></script>

<!-- 9分区数据和JS -->
<!-- <script src="./js/region.js"></script>
<script src="./js/function.js"></script> -->

<!-- 七分区数据和JS -->
<script src="./js/region7.js"></script>
<script src="./js/function_7.js"></script>
<script src="./js/dpdf.js"></script>
    </body>
</html>

 read_com/js/function.js

@@ -82,7 +82,7 @@
            type: 'continuous',
            calculable: false, 
            itemHeight: 350, 
            left: 'right',
            left: ' center',
            top: 'center',
            show: false,
            dimension: 2,
@@ -94,10 +94,6 @@
                    '#313695',
                    '#4575b4',
                    '#74add1',
                    // '#abd9e9',
                    // '#e0f3f8',
                    // '#ffffbf',
                    // '#fee090',
                    '#73d13d',
                    '#fdae61',
                    '#f46d43',

New file
			@@ -0,0 +1,134 @@
			*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			}
			body{
			background: #050715;
			min-width: 1080px;
			overflow-x: scroll;
			}
			ul,li{
			list-style: none;
			}
			.main{
			display: flex;
			width: 100vw;
			}
			.sidebar{
			width: 100px;
			height: 100vh;
			display: flex;
			flex-direction:column;
			justify-content:space-between;
			padding: 32px 20px;
			}
			.wrapper{
			flex: 1;
			height: 100vh;
			overflow-y: auto;
			background: url(../images/bg.jpg) #fff no-repeat;
			background-size: cover;
			border-radius: 24px 0 0 24px;
			}
			.logo{
			width: 56px;
			height: 56px;
			}
			.menu{
			justify-content:center;
			padding-top: 24px;
			}
			.menu li{
			margin-bottom: 24px;
			width: 56px;
			height: 56px;
			text-align: center;
			line-height: 56px;
			background: #fff;
			overflow: hidden;
			border-radius: 36px;
			}
			.logout{
			width: 56px;
			height: 56px;
			border-radius: 36px;
			background: #fff;
			overflow: hidden;
			}
			.operate{
			display: flex;
			justify-content: space-between;
			position: absolute;
			z-index: 9;
			left: calc((100vw - 800px) / 2 + 50px);
			bottom: 32px;
			width: 850px;
			padding: 16px 16px;
			border-radius: 100px;
			background-color: rgba(0, 0, 0, 0.8);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(8px);
			}
			.operate .btn{
			font-size: 14px;
			line-height: 16px;
			border: none;
			padding: 8px 12px;
			border-radius: 48px;
			overflow: hidden;
			position: relative;
			}
			.operate .btn i{
			display: inline-block;
			vertical-align: middle;
			}
			.key{
			position: absolute;
			display: flex;
			justify-content: space-between;
			top: 0;
			right: 0;
			z-index: 8;
			padding: 12px 0 12px 16px;
			border-radius: 0 0 0 12px;
			background-color: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(8px);
			}
			.key > span{
			display: inline-block;
			border-radius: 20px;
			color: #fff;
			font-size: 12px;
			padding: 4px 8px;
			margin-right: 16px;
			box-sizing: border-box;
			}
			.key .color1{
			color: #050715;
			border: 1px solid #050715;
			}
			.key .color2{
			background: #EF5DA8;
			}
			.key .color3{
			background: #5D5FEF;
			}
			.key .color4{
			background: #FFC530;
			}
			.key .color5{
			background: #16D7CB;
			}
			.key .color6{
			background: #AD2222;
			}
			.key .color7{
			background: #460F68;
			}

			.container{
			padding: 56px 24px;
			position: relative;
			}

New file
			@@ -0,0 +1,581 @@
			* {
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			border: 0;
			}

			body {
			height: 100%;
			width: 100%;
			}

			.head{
			padding: 10px 16px;
			height: 56px;
			margin-bottom: 20px;
			background: #fff;
			box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
			/* transform: scale(0.9); */
			}
			.head button{
			height: 36px;
			padding: 0 12px;
			border: none;
			border-radius: 4px;
			}
			.fbox{
			left: -20px;
			}
			.fbox,.fbox2 {
			position: relative;
			padding: 6px 16px;
			/* margin-left: 16px; */
			margin-top: 15px;
			width: 242px;
			height: 640px;
			background: url(../images/bg.png) #fff no-repeat;
			background-size: cover;
			}
			.fbox2{
			transform:scale(-1,1);
			position: absolute;
			top:56px;
			left: 700px;
			}
			.fbox2 .mask{
			position: absolute;
			top: 0;
			left: 0px;
			z-index: 9;
			width: 100%;
			height: 100%;
			}
			.fbox .mask{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			height: 100%;
			}


			/*
			.data {
			border-radius: 20px;
			border: 1px solid #000;
			background: #fff;
			} */



			.none {
			background-color: rgba(0, 0, 0, 0);
			border: 0;
			}




			.Y15>.data18,
			.Y15>.data17,
			.Y15>.data16,
			.Y15>.data15{top:18px}
			.Y15>.data18{left: 82px;}
			.Y15>.data17{left: 108px;}
			.Y15>.data16{left: 134px;}
			.Y15>.data15{left: 161px;}

			.Y14>.data12,
			.Y14>.data11,
			.Y14>.data10,
			.Y14>.data9,
			.Y14>.data8,
			.Y14>.data7{top:60px}
			.Y14>.data12{left: 50px;}
			.Y14>.data11{left: 77px;}
			.Y14>.data10{left: 104px;}
			.Y14>.data9{left: 131px;}
			.Y14>.data8{left: 157px;}
			.Y14>.data7{left: 183px;}

			.Y13>.data0,
			.Y13>.data1,
			.Y13>.data2,
			.Y13>.data3,
			.Y13>.data4,
			.Y13>.data5,
			.Y13>.data6{top:97px}
			.Y13>.data6{left: 33px;}
			.Y13>.data5{left: 60px;}
			.Y13>.data4{left: 86px;}
			.Y13>.data3{left: 113px;}
			.Y13>.data2{left: 141px;}
			.Y13>.data1{left: 167px;}
			.Y13>.data0{left: 194px;}

			.Y12>.data27,
			.Y12>.data26,
			.Y12>.data25,
			.Y12>.data24,
			.Y12>.data23,
			.Y12>.data22,
			.Y12>.data21{top:135px}
			.Y12>.data27{left:33px}
			.Y12>.data26{left:60px}
			.Y12>.data25{left:86px}
			.Y12>.data24{left:113px}
			.Y12>.data23{left:141px}
			.Y12>.data22{left:167px}
			.Y12>.data21{left:194px}

			.Y11>.data20,
			.Y11>.data19,
			.Y11>.data18,
			.Y11>.data17,
			.Y11>.data16,
			.Y11>.data15,
			.Y11>.data14{top:174px}
			.Y11>.data20{left:22px}
			.Y11>.data19{left:50px}
			.Y11>.data18{left:80px}
			.Y11>.data17{left:109px}
			.Y11>.data16{left:137px}
			.Y11>.data15{left:165px}
			.Y11>.data14{left:193px}

			.Y10>.data13,
			.Y10>.data12,
			.Y10>.data11,
			.Y10>.data10,
			.Y10>.data9,
			.Y10>.data8,
			.Y10>.data7{top:214px}
			.Y10>.data13{left:25px}
			.Y10>.data12{left:53px}
			.Y10>.data11{left:82px}
			.Y10>.data10{left:112px}
			.Y10>.data9{left:140px}
			.Y10>.data8{left:166px}
			.Y10>.data7{left:193px}

			.Y09>.data6,
			.Y09>.data5,
			.Y09>.data4,
			.Y09>.data3,
			.Y09>.data2,
			.Y09>.data1,
			.Y09>.data0{top:254px}
			.Y09>.data6{left:27px}
			.Y09>.data5{left:53px}
			.Y09>.data4{left:78px}
			.Y09>.data3{left:104px}
			.Y09>.data2{left:129px}
			.Y09>.data1{left:156px}
			.Y09>.data0{left:182px}

			.Y08>.data27,
			.Y08>.data26,
			.Y08>.data25,
			.Y08>.data24,
			.Y08>.data23,
			.Y08>.data22,
			.Y08>.data21{top:291px}
			.Y08>.data27{left:26px}
			.Y08>.data26{left:51px}
			.Y08>.data25{left:76px}
			.Y08>.data24{left:101px}
			.Y08>.data23{left:126px}
			.Y08>.data22{left:150px}
			.Y08>.data21{left:174px}

			.Y07>.data20,
			.Y07>.data19,
			.Y07>.data18,
			.Y07>.data17,
			.Y07>.data16,
			.Y07>.data15,
			.Y07>.data14{top:333px}
			.Y07>.data20{left:29px}
			.Y07>.data19{left:53px}
			.Y07>.data18{left:77px}
			.Y07>.data17{left:101px}
			.Y07>.data16{left:125px}
			.Y07>.data15{left:148px}
			.Y07>.data14{left:171px}

			.Y06>.data13,
			.Y06>.data12,
			.Y06>.data11,
			.Y06>.data10,
			.Y06>.data9,
			.Y06>.data8,
			.Y06>.data7{top:377px}
			.Y06>.data13{left:29px}
			.Y06>.data12{left:53px}
			.Y06>.data11{left:77px}
			.Y06>.data10{left:101px}
			.Y06>.data9{left:125px}
			.Y06>.data8{left:148px}
			.Y06>.data7{left:171px}

			.Y05>.data6,
			.Y05>.data5,
			.Y05>.data4,
			.Y05>.data3,
			.Y05>.data2,
			.Y05>.data1,
			.Y05>.data0{top:421px}
			.Y05>.data6{left:32px}
			.Y05>.data5{left:55px}
			.Y05>.data4{left:78px}
			.Y05>.data3{left:101px}
			.Y05>.data2{left:125px}
			.Y05>.data1{left:148px}
			.Y05>.data0{left:171px}

			.Y04>.data27,
			.Y04>.data26,
			.Y04>.data25,
			.Y04>.data24,
			.Y04>.data23,
			.Y04>.data22,
			.Y04>.data21{top:463px}
			.Y04>.data27{left:34px}
			.Y04>.data26{left:57px}
			.Y04>.data25{left:80px}
			.Y04>.data24{left:103px}
			.Y04>.data23{left:127px}
			.Y04>.data22{left:150px}
			.Y04>.data21{left:173px}

			.Y03>.data20,
			.Y03>.data19,
			.Y03>.data18,
			.Y03>.data17,
			.Y03>.data16,
			.Y03>.data15,
			.Y03>.data14{top:507px}
			.Y03>.data20{left:38px}
			.Y03>.data19{left:60px}
			.Y03>.data18{left:83px}
			.Y03>.data17{left:107px}
			.Y03>.data16{left:130px}
			.Y03>.data15{left:153px}
			.Y03>.data14{left:175px}

			.Y02>.data13,
			.Y02>.data12,
			.Y02>.data11,
			.Y02>.data10,
			.Y02>.data9,
			.Y02>.data8,
			.Y02>.data7{top:549px}
			.Y02>.data13{left:38px}
			.Y02>.data12{left:60px}
			.Y02>.data11{left:83px}
			.Y02>.data10{left:107px}
			.Y02>.data9{left:130px}
			.Y02>.data8{left:153px}
			.Y02>.data7{left:175px}

			.Y01>.data5,
			.Y01>.data4,
			.Y01>.data3,
			.Y01>.data2,
			.Y01>.data1{top:586px}
			.Y01>.data5{left:58px}
			.Y01>.data4{left:83px}
			.Y01>.data3{left:108px}
			.Y01>.data2{left:133px}
			.Y01>.data1{left:157px}










			.data {
			position: absolute;
			width: 24px;
			height: 24px;
			}


			/* .foot{
			margin: 10px;
			display: flex;
			justify-content: space-around;
			width: 600px;
			} */

			.foot div,.region_data div{
			border: 1px solid black;
			padding: 5px;
			}
			.foot span,.region_data span{
			display: inline-block;
			width: 120px;
			margin: 0 5px;
			text-align: right;
			}
			.foot p,.region_data p{
			line-height: 24px;
			font-size: 24px;
			height: 24px;
			margin: 33px 0px;
			background-color: #fff;
			}
			.dataLeft{
			position: absolute;
			top: 100px;
			left: 240px;
			}
			.dataRight{
			position: absolute;
			top: 100px;
			left: 980px;
			}

			.region_data .dataLeft{
			position: absolute;
			top: 100px;
			left: 1540px;
			}
			.region_data .dataRight{
			position: absolute;
			top: 100px;
			left: 1980px;
			}







			/* .region1{
			background-color: #1D38C3;
			}
			.region2{
			background-color: #FF4C4F;
			}
			.region3{
			background-color: #fdec3d;
			}
			.region4{
			background-color: #73d13d;
			}
			.region5{
			background-color: #41a8ff;
			}
			.region6{
			background-color: #37cfca;
			}
			.region7{
			background-color: #ffa940;
			}
			.region8{
			background-color: #f75baa;
			}
			.region9{
			background-color: #9153de;
			} */




			.region_main,.region_1,.region_2,.region_3,.region_4,.region_5,.region_6,.region_7,.region_8,.region_9{
			position: absolute;
			}
			.region_main{
			z-index: 8;
			width: 242px;
			height: 640px;
			left: 0;
			top: 0;
			}
			.region_1{
			width: 139px;
			height: 185px;
			right: 0;
			bottom: 0;
			background: url(../images/r1_n.png) no-repeat;
			background-size: cover;
			}
			.region_2{
			width: 110px;
			height: 185px;
			left: 0;
			bottom: 0;
			background: url(../images/r2_n.png) no-repeat;
			background-size: cover;
			}
			.region_3{
			width: 141px;
			height: 171px;
			right: 0;
			top: 284px;
			background: url(../images/r3_n.png) no-repeat;
			background-size: cover;
			}
			.region_4{
			width: 101px;
			height: 171px;
			left: 0;
			top: 284px;
			background: url(../images/r4_n.png) no-repeat;
			background-size: cover;
			}
			.region_5{
			width: 88px;
			height: 195px;
			right: 0;
			top: 89px;
			background: url(../images/r5_n.png) no-repeat;
			background-size: cover;
			}
			.region_6{
			width: 91px;
			height: 195px;
			left: 75px;
			top: 89px;
			background: url(../images/r6_n.png) no-repeat;
			background-size: cover;
			}
			.region_7{
			width: 86px;
			height: 195px;
			left: 0;
			top: 89px;
			background: url(../images/r7_n.png) no-repeat;
			background-size: cover;
			}
			.region_8{
			width: 87px;
			height: 89px;
			right: 0;
			top: 0;
			background: url(../images/r8_n.png) no-repeat;
			background-size: cover;
			}
			.region_9{
			width: 163px;
			height: 126px;
			left: 0;
			top: 0;
			background: url(../images/r9_n.png) no-repeat;
			background-size: cover;
			}





			.foot .colorCircle,.region_data .colorCircle{
			display: inline-block;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			}
			.region1 .colorCircle,.region1_2 .colorCircle{
			background-color: #1D38C3;
			}
			.region2 .colorCircle,.region2_2 .colorCircle{
			background-color: #FF4C4F;
			}
			.region3 .colorCircle,.region3_2 .colorCircle{
			background-color: #fdec3d;
			}
			.region4 .colorCircle,.region4_2 .colorCircle{
			background-color: #73d13d;
			}
			.region5 .colorCircle,.region5_2 .colorCircle{
			background-color: #41a8ff;
			}
			.region6 .colorCircle,.region6_2 .colorCircle{
			background-color: #37cfca;
			}
			.region7 .colorCircle,.region7_2 .colorCircle{
			background-color: #ffa940;
			}
			.region8 .colorCircle,.region8_2 .colorCircle{
			background-color: #f75baa;
			}
			.region9 .colorCircle,.region9_2 .colorCircle{
			background-color: #9153de;
			}


			.chart {
			width: 200px;
			grid-area: chart;
			padding: 50px;
			background: white;
			box-shadow: 2px 3px 10px rgba(0,0,0,.3)
			}
			.chart2 {
			grid-area: chart2;
			padding: 50px;
			background: white;
			box-shadow: 2px 3px 10px rgba(0,0,0,.3)
			}


			.chart_line{
			width: 100%;
			display: flex;
			}


			.heatmap_box{
			width: 100%;
			height: 500px;
			min-width: 1000px;
			display: flex;
			justify-content: baseline;
			margin: 80px;
			}
			.heatmap_box div{
			width: 500px;
			height: 500px;
			/* background-color: gray; */
			margin: 80px;
			}

			.left_map{
			background: url(../images/bg.png) no-repeat center;
			background-size: 50% 100%;
			}

			.right_map{
			background: url(../images/bg.png) no-repeat center;
			background-size: 50% 100%;
			transform:scale(-1,1);
			}
			.right_map_top,.right_map_middle,.right_map_buttom{
			transform:scale(-1,1);
			}


			.sum_data{
			width: 300px;
			height: 500px;
			position: absolute;
			left: 1500px;
			top: 100px;
			border: 1px solid black;
			}

			#chart-container,#chart-container2 {
			position: relative;
			height: 1500px;
			width: 1500px;
			overflow: hidden;
			margin-bottom: 500px;
			}

			@@ -10,6 +10,11 @@
			width: 100%;
			}

			a{
			text-decoration:none;
			color: black;
			}

			.head{
			padding: 10px 16px;
			height: 56px;
			@@ -24,24 +29,30 @@
			border: none;
			border-radius: 4px;
			}
			.fbox{
			left: -20px;
			.xiedian{
			transform: scale(0.5,0.5);
			float: left;
			position: relative;
			left: -100px;
			top: -200px;
			}
			/* .fbox{
			transform:scale(0.5,0.5);
			} */
			.fbox,.fbox2 {
			position: relative;
			padding: 6px 16px;
			/* margin-left: 16px; */
			margin-top: 15px;
			width: 242px;
			height: 640px;
			margin: 0;
			margin-top: 200px;
			float: left;
			background: url(../images/bg.png) #fff no-repeat;
			background-size: cover;
			z-index: 0;
			}
			.fbox2{
			transform:scale(-1,1);
			position: absolute;
			top:56px;
			left: 700px;
			}
			.fbox2 .mask{
			position: absolute;
			@@ -59,14 +70,6 @@
			width: 100%;
			height: 100%;
			}


			/*
			.data {
			border-radius: 20px;
			border: 1px solid #000;
			background: #fff;
			} */



			@@ -307,12 +310,6 @@
			}


			/* .foot{
			margin: 10px;
			display: flex;
			justify-content: space-around;
			width: 600px;
			} */

			.foot div,.region_data div{
			border: 1px solid black;
			@@ -329,29 +326,28 @@
			font-size: 24px;
			height: 24px;
			margin: 33px 0px;
			background-color: #fff;
			/* background-color: #fff; */
			}
			.dataLeft{
			.foot{
			float: left;
			position: absolute;
			top: 100px;
			left: 240px;
			top: -10px;
			left: 100px;
			display: flex;
			justify-content: space-around;

			}
			.dataRight{
			.region_data{
			float: left;
			position: absolute;
			top: 100px;
			left: 980px;
			top: -10px;
			right: -180px;
			display: flex;
			justify-content: space-around;

			}

			.region_data .dataLeft{
			position: absolute;
			top: 100px;
			left: 1540px;
			}
			.region_data .dataRight{
			position: absolute;
			top: 100px;
			left: 1980px;
			}




			@@ -473,6 +469,10 @@
			background-size: cover;
			}

			.foot,.region_data{
			transform: scale(0.5,0.5);
			}




			@@ -530,32 +530,27 @@
			.chart_line{
			width: 100%;
			display: flex;
			justify-content: space-evenly
			}


			.heatmap_box{
			width: 100%;
			height: 500px;
			min-width: 1000px;
			position: relative;
			left: -1325px;
			border: 1px solid black;
			height: 640px;
			width: 3872px;
			display: flex;
			justify-content: baseline;
			margin: 80px;
			margin-top: 80px;
			transform: scale(0.3);
			}
			.heatmap_box div{
			width: 500px;
			height: 500px;
			/* background-color: gray; */
			margin: 80px;
			width: 484px;
			}

			.left_map{
			background: url(../images/bg.png) no-repeat center;
			background-size: 50% 100%;
			}

			.right_map{
			background: url(../images/bg.png) no-repeat center;
			background-size: 50% 100%;
			transform:scale(-1,1);
			}
			.right_map_top,.right_map_middle,.right_map_buttom{
			@@ -573,9 +568,12 @@
			}

			#chart-container,#chart-container2 {
			border: 1px solid black;
			position: relative;
			height: 1500px;
			width: 1500px;
			margin: 0 auto;
			top: -100px;
			height: 500px;
			width: 500px;
			overflow: hidden;
			margin-bottom: 500px;
			}

New file
			@@ -0,0 +1,49 @@

			/*
			* https://remixicon.com
			* https://github.com/Remix-Design/RemixIcon
			* Copyright RemixIcon.com
			* Released under the Apache License Version 2.0
			*/

			@font-face {
			font-family: "remixicon";
			src: url('remixicon.eot?t=1678761064569'); /* IE9*/
			src: url('remixicon.eot?t=1678761064569#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url("remixicon.woff2?t=1678761064569") format("woff2"),
			url("remixicon.woff?t=1678761064569") format("woff"),
			url('remixicon.ttf?t=1678761064569') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			url('remixicon.svg?t=1678761064569#remixicon') format('svg'); /* iOS 4.1- */
			font-display: swap;
			}

			[class^="ri-"], [class*="ri-"] {
			font-family: 'remixicon' !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			}

			.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
			.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
			.ri-xxs { font-size: .5em; }
			.ri-xs { font-size: .75em; }
			.ri-sm { font-size: .875em }
			.ri-1x { font-size: 1em; }
			.ri-2x { font-size: 2em; }
			.ri-3x { font-size: 3em; }
			.ri-4x { font-size: 4em; }
			.ri-5x { font-size: 5em; }
			.ri-6x { font-size: 6em; }
			.ri-7x { font-size: 7em; }
			.ri-8x { font-size: 8em; }
			.ri-9x { font-size: 9em; }
			.ri-10x { font-size: 10em; }
			.ri-fw { text-align: center; width: 1.25em; }

			.ri-repeat-2-fill:before { content: "\f071"; }
			.ri-play-circle-line:before { content: "\f009"; }
			.ri-stop-circle-line:before { content: "\f19f"; }
			.ri-skip-back-mini-fill:before { content: "\f141"; }
			.ri-skip-forward-mini-fill:before { content: "\f145"; }
			.ri-download-2-fill:before { content: "\ec53"; }

New file
			@@ -0,0 +1,51 @@

			/*
			* https://remixicon.com
			* https://github.com/Remix-Design/RemixIcon
			* Copyright RemixIcon.com
			* Released under the Apache License Version 2.0
			*/

			@font-face {
			font-family: "remixicon";
			src: url('remixicon.eot?t=1678761064569'); /* IE9*/
			src: url('remixicon.eot?t=1678761064569#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url("remixicon.woff2?t=1678761064569") format("woff2"),
			url("remixicon.woff?t=1678761064569") format("woff"),
			url('remixicon.ttf?t=1678761064569') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			url('remixicon.svg?t=1678761064569#remixicon') format('svg'); /* iOS 4.1- */
			font-display: swap;
			}

			[class^="ri-"], [class*="ri-"] {
			font-family: 'remixicon' !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			}

			:global {
			.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
			.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
			.ri-xxs { font-size: .5em; }
			.ri-xs { font-size: .75em; }
			.ri-sm { font-size: .875em }
			.ri-1x { font-size: 1em; }
			.ri-2x { font-size: 2em; }
			.ri-3x { font-size: 3em; }
			.ri-4x { font-size: 4em; }
			.ri-5x { font-size: 5em; }
			.ri-6x { font-size: 6em; }
			.ri-7x { font-size: 7em; }
			.ri-8x { font-size: 8em; }
			.ri-9x { font-size: 9em; }
			.ri-10x { font-size: 10em; }
			.ri-fw { text-align: center; width: 1.25em; }

			.ri-repeat-2-fill:before { content: "\f071"; }
			.ri-play-circle-line:before { content: "\f009"; }
			.ri-stop-circle-line:before { content: "\f19f"; }
			.ri-skip-back-mini-fill:before { content: "\f141"; }
			.ri-skip-forward-mini-fill:before { content: "\f145"; }
			.ri-download-2-fill:before { content: "\ec53"; }
			}

New file
			@@ -0,0 +1,20 @@
			<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
			<svg xmlns="http://www.w3.org/2000/svg">
			<defs>
			<font id="remixicon" horiz-adv-x="1200">
			<font-face font-family="remixicon"
			units-per-em="1200" ascent="1200"
			descent="0" />
			<missing-glyph horiz-adv-x="0" /><glyph glyph-name="repeat-2-fill"
			unicode=""
			horiz-adv-x="1200" d="M400 200V103.4000000000001A25 25 0 0 0 359 84.1500000000001L153 255.8A25 25 0 0 0 169.1 300H900A100 100 0 0 1 1000 400V800H1100V400A200 200 0 0 0 900 200H400zM800 1000V1096.6A25 25 0 0 0 841 1115.85L1047 944.2A25 25 0 0 0 1030.95 900H300A100 100 0 0 1 200 800V400H100V800A200 200 0 0 0 300 1000H800z" /><glyph glyph-name="play-circle-line"
			unicode=""
			horiz-adv-x="1200" d="M600 100C323.85 100 100 323.85 100 600S323.85 1100 600 1100S1100 876.15 1100 600S876.15 100 600 100zM600 200A400 400 0 1 1 600 1000A400 400 0 0 1 600 200zM531.1 779.25L775.05 616.6500000000001A20.000000000000004 20.000000000000004 0 0 0 775.05 583.3500000000001L531.05 420.7500000000001A20.000000000000004 20.000000000000004 0 0 0 499.9999999999999 437.3500000000002V762.65A20.000000000000004 20.000000000000004 0 0 0 531.0999999999999 779.25z" /><glyph glyph-name="stop-circle-line"
			unicode=""
			horiz-adv-x="1200" d="M600 100C323.85 100 100 323.85 100 600S323.85 1100 600 1100S1100 876.15 1100 600S876.15 100 600 100zM600 200A400 400 0 1 1 600 1000A400 400 0 0 1 600 200zM450 750H750V450H450V750z" /><glyph glyph-name="skip-back-mini-fill"
			unicode=""
			horiz-adv-x="1200" d="M350 900A50 50 0 0 0 400 850V350A50 50 0 0 0 300 350V850A50 50 0 0 0 350 900zM453.95 579.5999999999999A25 25 0 0 0 453.95 620.4L810.6 872.1999999999999A25 25 0 0 0 850 851.75V348.25A25 25 0 0 0 810.6 327.8000000000001L453.95 579.6z" /><glyph glyph-name="skip-forward-mini-fill"
			unicode=""
			horiz-adv-x="1200" d="M389.4000000000001 327.8000000000001A25 25 0 0 0 350 348.25V851.75A25 25 0 0 0 389.4000000000001 872.2L746.05 620.4000000000001A25 25 0 0 0 746.05 579.6L389.4 327.8000000000001zM800 850A50 50 0 0 0 900 850V350A50 50 0 1 0 800 350V850z" /><glyph glyph-name="download-2-fill"
			unicode=""
			horiz-adv-x="1200" d="M200 250H1000V600H1100V200A50 50 0 0 0 1050 150H150A50 50 0 0 0 100 200V600H200V250zM700 750H950L600 400L250 750H500V1050H700V750z" /></font></defs></svg>

New file
			@@ -0,0 +1 @@
			<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:none;"><symbol viewBox="0 0 24 24" id="repeat-2-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 20v1.932a.5.5 0 0 1-.82.385l-4.12-3.433A.5.5 0 0 1 3.382 18H18a2 2 0 0 0 2-2V8h2v8a4 4 0 0 1-4 4H8zm8-16V2.068a.5.5 0 0 1 .82-.385l4.12 3.433a.5.5 0 0 1-.321.884H6a2 2 0 0 0-2 2v8H2V8a4 4 0 0 1 4-4h10z"/></symbol><symbol viewBox="0 0 24 24" id="play-circle-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"/></symbol><symbol viewBox="0 0 24 24" id="stop-circle-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9 9h6v6H9V9z"/></symbol><symbol viewBox="0 0 24 24" id="skip-back-mini-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6a1 1 0 0 1 1 1v10a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1zm2.079 6.408a.5.5 0 0 1 0-.816l7.133-5.036a.5.5 0 0 1 .788.409v10.07a.5.5 0 0 1-.788.409l-7.133-5.036z"/></symbol><symbol viewBox="0 0 24 24" id="skip-forward-mini-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.788 17.444A.5.5 0 0 1 7 17.035V6.965a.5.5 0 0 1 .788-.409l7.133 5.036a.5.5 0 0 1 0 .816l-7.133 5.036zM16 7a1 1 0 0 1 2 0v10a1 1 0 1 1-2 0V7z"/></symbol><symbol viewBox="0 0 24 24" id="download-2-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7zM14 9h5l-7 7-7-7h5V3h4v6z"/></symbol></svg>

New file
			@@ -0,0 +1,3 @@
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12.8806 0.833344L16.8611 4.89687V7.84315H17.9167V16.4706H16.8611V17.549C16.8611 17.9781 16.6943 18.3895 16.3974 18.6929C16.1004 18.9962 15.6977 19.1667 15.2778 19.1667H4.72223C4.30231 19.1667 3.89958 18.9962 3.60265 18.6929C3.30571 18.3895 3.1389 17.9781 3.1389 17.549V16.4706H2.08334V7.84315H3.1389V2.45099C3.1389 2.02196 3.30571 1.61051 3.60265 1.30714C3.89958 1.00377 4.30231 0.833344 4.72223 0.833344H12.8806ZM15.2778 16.4706H4.72223V17.549H15.2778V16.4706ZM6.88876 10.1979H5.39251V14.056H6.34251V12.8816H6.58001C6.8094 12.8814 7.03831 12.8603 7.26401 12.8185C7.38383 12.7928 7.50139 12.7571 7.61551 12.7117C7.71368 12.6664 7.80551 12.613 7.89101 12.5516C8.04618 12.4319 8.16176 12.283 8.23776 12.1051C8.31059 11.9175 8.34701 11.7217 8.34701 11.5179C8.34425 11.339 8.31214 11.1618 8.25201 10.9938C8.1862 10.8266 8.08573 10.6759 7.95751 10.5522C7.80734 10.4205 7.63054 10.3244 7.43976 10.2707C7.25927 10.2258 7.07449 10.2014 6.88876 10.1979ZM9.92876 10.1979H8.59876V14.056H9.92876C10.0776 14.0528 10.2264 14.0398 10.3753 14.0172C10.5083 13.9945 10.6381 13.9605 10.7648 13.9153C10.8788 13.8667 10.988 13.8101 11.0925 13.7454C11.1875 13.6742 11.2746 13.5933 11.3538 13.5028C11.4298 13.4057 11.4963 13.3022 11.5533 13.1922C11.6074 13.0715 11.6519 12.9465 11.6863 12.8185C11.7338 12.592 11.7591 12.3623 11.7623 12.1294C11.7589 11.9718 11.7462 11.8146 11.7243 11.6586C11.7022 11.5201 11.6689 11.3838 11.6245 11.251C11.58 11.131 11.5243 11.0156 11.4583 10.9064C11.3919 10.8063 11.3155 10.7136 11.2303 10.6298C11.1396 10.5498 11.0409 10.4798 10.9358 10.4211C10.8216 10.3628 10.7023 10.3157 10.5795 10.2804C10.3662 10.2289 10.148 10.2012 9.92876 10.1979ZM14.5505 10.1979H12.0235V14.056H12.9735V12.6001H14.3463V11.8479H12.9735V10.9744H14.5505V10.1979ZM10.0808 10.9744C10.1884 10.9776 10.2898 11.0083 10.3848 11.0666C10.4829 11.1345 10.5637 11.2219 10.627 11.3286C10.6967 11.458 10.7458 11.5939 10.7743 11.7363C10.7964 11.8689 10.8091 12.0016 10.8123 12.1342C10.8091 12.2701 10.7964 12.4044 10.7743 12.537C10.7461 12.6783 10.6964 12.8143 10.627 12.9398C10.5637 13.0433 10.4829 13.1291 10.3848 13.197C10.2923 13.2513 10.1874 13.2798 10.0808 13.2795H9.54876V10.9744H10.0808ZM6.79851 10.9744C6.88401 10.9776 6.96793 10.9938 7.05026 11.0229C7.12309 11.052 7.18801 11.0941 7.24501 11.1491C7.34634 11.2623 7.39701 11.395 7.39701 11.547C7.39701 11.7088 7.33843 11.843 7.22126 11.9498C7.15864 12.0044 7.08596 12.0457 7.00751 12.0711C6.92219 12.0938 6.8344 12.1052 6.74626 12.1051H6.34251V10.9744H6.79851ZM11.5026 2.45045L4.72223 2.45099V7.84315H15.2778V6.73829H11.5031L11.5026 2.45099V2.45045ZM13.0859 3.32937V5.12065H14.8403L13.0859 3.32937Z" fill="black"/>
			</svg>

New file
			@@ -0,0 +1,10 @@
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
			<g clip-path="url(#clip0_21_23)">
			<path d="M4.99999 3.33334H17.5C17.721 3.33334 17.933 3.42114 18.0892 3.57742C18.2455 3.7337 18.3333 3.94566 18.3333 4.16668V10H16.6667V5.00001H4.99999V7.50001L0.833328 4.16668L4.99999 0.833344V3.33334ZM15 16.6667H2.49999C2.27898 16.6667 2.06702 16.5789 1.91074 16.4226C1.75446 16.2663 1.66666 16.0544 1.66666 15.8333V10H3.33333V15H15V12.5L19.1667 15.8333L15 19.1667V16.6667Z" fill="black"/>
			</g>
			<defs>
			<clipPath id="clip0_21_23">
			<rect width="20" height="20" fill="white"/>
			</clipPath>
			</defs>
			</svg>

			@@ -3,7 +3,7 @@
			<head>
			<meta charset="UTF-8">
			<title>足压分析</title>
			<link rel="stylesheet" href="css/style.css"/>
			<link rel="stylesheet" href="css/style copy.css"/>

			<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> -->
			<!-- 4.0.1版本 ↓ 在项目node中没有配置相关静态访问资源，所以这个会报错404 GET http://localhost:3000/socket.io.js net::ERR_ABORTED 404 (Not Found)-->
			@@ -422,13 +422,13 @@
			</div>

			<!-- heatmap热力图 -->
			<div class="heatmap_box" style="display: none;">
			<div class="heatmap_box">
			<div class="left_map"></div>
			<div class="left_map_top"></div>
			<div class="left_map_middle"></div>
			<div class="left_map_buttom"></div>
			</div>
			<div class="heatmap_box" style="display: none;">
			<div class="heatmap_box">
			<div class="right_map"></div>
			<div class="right_map_top"></div>
			<div class="right_map_middle"></div>

New file
			@@ -0,0 +1,488 @@
			<!DOCTYPE html>
			<html>
			<head>
			<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
			<title>智能鞋垫</title>
			<link rel="stylesheet" href="css/insole.css">
			<link rel="stylesheet" href="icon/remixicon.css">
			<link rel="stylesheet" href="./css/style.css">
			<script src="./js/socket.io.js"></script>
			<script src="./js/jquery-1.11.3.min.js"></script>
			<script src="./js/heatmap_data.js"></script>
			<script src="./js/heatmap.js"></script>
			<script src="./js/excel.js"></script>
			<script src="./js/jspdf.js"></script>
			<script src="./js/html2canvas.js"></script>
			</head>
			<body>
			<div class="main">
			<div class="sidebar">
			<img src="images/logo.png" class="logo">
			<nav class="menu">
			<ul class="">
			<li class="current"><a href="#region_demo">分区</a> </li>
			<li><a href="#circle-line">曲线图</a></li>
			<li><a href="#heatmap">热力图</a></li>
			<li><a href="#chart-container">3D等高</a></li>
			<li><a href="#">1</a></li>
			</ul>
			</nav>
			<div class="logout"></div>
			</div>
			<div class="wrapper">
			<!-- <div class="key">
			<span class="color1">0-200</span>
			<span class="color2">201-300</span>
			<span class="color3">301-500</span>
			<span class="color4">501-800</span>
			<span class="color5">801-1200</span>
			<span class="color6">1201-1700</span>
			<span class="color7">1701-2500</span>
			</div> -->
			<div class="operate">
			<button class="btn start"><i class="ri-play-circle-line"></i> 采集</button>
			<button class="btn end"><i class="ri-stop-circle-line"></i> 结束</button>
			<button class="btn last"><i class="ri-skip-back-mini-fill"></i> 上一帧</button>
			<button class="btn next"><i class="ri-skip-forward-mini-fill"></i> 下一帧</button>
			<button class="btn back"><i class="ri-repeat-2-fill"></i> 回放</button>
			<button class="btn download"><i class="ri-download-2-fill"></i> 导出报告</button>
			<button class="btn"><i class="ri-repeat-2-fill"></i><input style="opacity: 0;cursor:pointer;position: absolute;left: 0;top: 0;" type="file" id="excel-file-left" multiple>左脚文件</button>
			<button class="btn"><i class="ri-download-2-fill"></i> <input style="opacity: 0;cursor:pointer;position: absolute;left: 0;top: 0;" type="file" id="excel-file-right" multiple>右脚文件</button>
			</div>

			<div class="container">
			<div style="width: 100%;min-width: 1200px; height: 3000px; border: 1px solid #000;position: relative;">
			<div id="region_demo" style="text-align: center;height: 50px;line-height: 50px;font-size: 20px;">分区示例</div>
			<div class="xiedian">
			<!-- 左脚 -->
			<div id="region" class="fbox">
			<img src="images/bg_t.png" class="mask">
			<div class="region_main">
			<div class="region_1"></div>
			<div class="region_2"></div>
			<div class="region_7"></div>
			<div class="region_6"></div>
			<div class="region_5"></div>
			<div class="region_4"></div>
			<div class="region_3"></div>
			<div class="region_9"></div>
			<div class="region_8"></div>
			</div>
			<div id="D">
			<div class="Y15">
			<div class="data20 data none"></div>
			<div class="data19 data none"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data none"></div>
			</div>
			<div class="Y14">
			<div class="data13 data none"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y13">
			<div class="data6 data"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data"></div>
			</div>
			</div>
			<div id="C">
			<div class="Y12">
			<div class="data27 data"></div>
			<div class="data26 data"></div>
			<div class="data25 data"></div>
			<div class="data24 data"></div>
			<div class="data23 data"></div>
			<div class="data22 data"></div>
			<div class="data21 data"></div>
			</div>
			<div class="Y11">
			<div class="data20 data"></div>
			<div class="data19 data"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data"></div>
			</div>
			<div class="Y10">
			<div class="data13 data"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y09">
			<div class="data6 data"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data"></div>
			</div>
			</div>
			<div id="B">
			<div class="Y08">
			<div class="data27 data"></div>
			<div class="data26 data"></div>
			<div class="data25 data"></div>
			<div class="data24 data"></div>
			<div class="data23 data"></div>
			<div class="data22 data"></div>
			<div class="data21 data"></div>
			</div>
			<div class="Y07">
			<div class="data20 data"></div>
			<div class="data19 data"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data"></div>
			</div>
			<div class="Y06">
			<div class="data13 data"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y05">
			<div class="data6 data"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data"></div>
			</div>
			</div>
			<div id="A">
			<div class="Y04">
			<div class="data27 data"></div>
			<div class="data26 data"></div>
			<div class="data25 data"></div>
			<div class="data24 data"></div>
			<div class="data23 data"></div>
			<div class="data22 data"></div>
			<div class="data21 data"></div>
			</div>
			<div class="Y03">
			<div class="data20 data"></div>
			<div class="data19 data"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data"></div>
			</div>
			<div class="Y02">
			<div class="data13 data"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y01">
			<div class="data6 data none"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data none"></div>
			</div>
			</div>
			</div>

			<!-- 右脚 -->
			<div class="fbox2">
			<img src="images/bg_t.png" class="mask">
			<div class="region_main">
			<div class="region_1"></div>
			<div class="region_2"></div>
			<div class="region_3"></div>
			<div class="region_4"></div>
			<div class="region_5"></div>
			<div class="region_6"></div>
			<div class="region_7"></div>
			<div class="region_8"></div>
			<div class="region_9"></div>
			</div>
			<div id="D2">
			<div class="Y15">
			<div class="data20 data none"></div>
			<div class="data19 data none"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data none"></div>
			</div>
			<div class="Y14">
			<div class="data13 data none"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y13">
			<div class="data6 data"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data"></div>
			</div>
			</div>
			<div id="C2">
			<div class="Y12">
			<div class="data27 data"></div>
			<div class="data26 data"></div>
			<div class="data25 data"></div>
			<div class="data24 data"></div>
			<div class="data23 data"></div>
			<div class="data22 data"></div>
			<div class="data21 data"></div>
			</div>
			<div class="Y11">
			<div class="data20 data"></div>
			<div class="data19 data"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data"></div>
			</div>
			<div class="Y10">
			<div class="data13 data"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y09">
			<div class="data6 data"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data"></div>
			</div>
			</div>
			<div id="B2">
			<div class="Y08">
			<div class="data27 data"></div>
			<div class="data26 data"></div>
			<div class="data25 data"></div>
			<div class="data24 data"></div>
			<div class="data23 data"></div>
			<div class="data22 data"></div>
			<div class="data21 data"></div>
			</div>
			<div class="Y07">
			<div class="data20 data"></div>
			<div class="data19 data"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data"></div>
			</div>
			<div class="Y06">
			<div class="data13 data"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y05">
			<div class="data6 data"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data"></div>
			</div>
			</div>
			<div id="A2">
			<div class="Y04">
			<div class="data27 data"></div>
			<div class="data26 data"></div>
			<div class="data25 data"></div>
			<div class="data24 data"></div>
			<div class="data23 data"></div>
			<div class="data22 data"></div>
			<div class="data21 data"></div>
			</div>
			<div class="Y03">
			<div class="data20 data"></div>
			<div class="data19 data"></div>
			<div class="data18 data"></div>
			<div class="data17 data"></div>
			<div class="data16 data"></div>
			<div class="data15 data"></div>
			<div class="data14 data"></div>
			</div>
			<div class="Y02">
			<div class="data13 data"></div>
			<div class="data12 data"></div>
			<div class="data11 data"></div>
			<div class="data10 data"></div>
			<div class="data9 data"></div>
			<div class="data8 data"></div>
			<div class="data7 data"></div>
			</div>
			<div class="Y01">
			<div class="data6 data none"></div>
			<div class="data5 data"></div>
			<div class="data4 data"></div>
			<div class="data3 data"></div>
			<div class="data2 data"></div>
			<div class="data1 data"></div>
			<div class="data0 data none"></div>
			</div>
			</div>
			</div>
			</div>



			<!-- 数据框 -->
			<div class="foot">
			<div class="dataLeft">
			<p>左脚</p>
			<p class="region9"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region8"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region7"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region6"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region5"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region4"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region3"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region1"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p></p>
			</div>
			<div class="dataRight">
			<p>右脚</p>
			<p class="region9"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region8"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region7"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region6"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region5"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region4"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region3"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region1"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p></p>
			</div>
			</div>

			<!-- 总览数据框 -->
			<div class="region_data">
			<div class="dataLeft">
			<p>左脚(总)</p>
			<p class="region9_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region8_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region7_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region6_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region5_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region4_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region3_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region2_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region1_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
			</div>
			<div class="dataRight">
			<p>右脚(总)</p>
			<p class="region9_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region8_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region7_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region6_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region5_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region4_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region3_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region2_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="region1_2"><span class="colorCircle"></span>平均:<span class="ave"></span>占比:<span class="pr"></span></p>
			<p class="sum_region_2"><span class="colorCircle"></span>总值:<span class="ave"></p>
			</div>
			</div>

			<!-- chart曲线 -->
			<div id="circle-line" style="position: relative;height: 50px;font-size: 20px; margin-top: 100px;top: 500px;">曲线图</div>
			<div class="chart_line">
			<div class="chart2" style="width:47%;"><canvas id="chart2"></canvas></div>
			<div class="chart" style="width:47%;"><canvas id="chart"></canvas></div>
			</div>

			<!-- heatmap热力图 -->
			<div id="heatmap" style="position: relative;height: 50px;font-size: 20px;text-align: center; margin-top: 100px;top: 300px;">受力图</div>
			<div class="heatmap_box">
			<div class="left_map"></div>
			<div class="left_map_top"></div>
			<div class="left_map_middle"></div>
			<div class="left_map_buttom"></div>
			<div class="right_map_buttom"></div>
			<div class="right_map_middle"></div>
			<div class="right_map_top"></div>
			<div class="right_map"></div>
			</div>
			<!-- <div class="heatmap_box">
			<div class="right_map"></div>
			<div class="right_map_top"></div>
			<div class="right_map_middle"></div>
			<div class="right_map_buttom"></div>
			</div> -->


			<div id="heatmap3d" style="position: relative;height: 50px;font-size: 20px;text-align: center; margin-top: 100px;">重力等高线</div>
			<div name="threeD" id="chart-container"></div>


			</div>
			</div>
			</div>
			</div>
			</div>
			<script src="./js/3d_data.js"></script>
			<script src="./js/echarts.min.js"></script>
			<script src="./js/echarts.gl.min.js"></script>
			<script src="./js/charts.js"></script>

			<!-- 9分区数据和JS -->
			<!-- <script src="./js/region.js"></script>
			<script src="./js/function.js"></script> -->

			<!-- 七分区数据和JS -->
			<script src="./js/region7.js"></script>
			<script src="./js/function_7.js"></script>
			<script src="./js/dpdf.js"></script>
			</body>
			</html>

			@@ -82,7 +82,7 @@
			type: 'continuous',
			calculable: false,
			itemHeight: 350,
			left: 'right',
			left: ' center',
			top: 'center',
			show: false,
			dimension: 2,
			@@ -94,10 +94,6 @@
			'#313695',
			'#4575b4',
			'#74add1',
			// '#abd9e9',
			// '#e0f3f8',
			// '#ffffbf',
			// '#fee090',
			'#73d13d',
			'#fdae61',
			'#f46d43',