浏览器回退,图标颜色动态更改

public/img/overview_rgb.svg

@@ -0,0 +1 @@
+<?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 t="1638325192035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2222" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M979.792374 404.577188 574.183101 83.942886c-34.918864-27.694272-89.619352-27.694272-124.538216 0L44.207626 404.577188c-13.933143 11.008903-16.169326 31.134554-5.332437 44.895683s30.618512 16.169326 44.551655 5.332437l12.55703-10.320847 0 387.547791c0 54.872501 57.968755 95.983874 108.712918 95.983874l639.892491 0c50.22812 0 83.254829-38.531161 83.254829-95.983874L927.844112 445.860575l11.69696 8.944734c5.84848 4.644381 13.073072 6.880564 20.125651 6.880564 9.460776 0 18.921552-4.128339 25.286074-12.213002C995.9617 435.711742 993.725517 415.586091 979.792374 404.577188zM479.919368 864.026877 479.919368 686.508315c0-8.77272 15.997312-13.245087 31.994625-13.245087s31.994625 4.472367 31.994625 13.245087l0 177.346548L479.919368 864.026877 479.919368 864.026877zM864.026877 832.032253c0 21.157736-5.84848 31.994625-19.26558 31.994625L608.585923 864.026877c0-0.516042-0.688056-0.860071-0.688056-1.376113L607.897867 686.508315c0-37.155048-29.930455-77.234336-95.983874-77.234336s-95.983874 40.079288-95.983874 77.234336l0 176.142449c0 0.516042 0.860071 0.860071 0.860071 1.376113L204.868806 864.026877c-20.125651 0-44.723669-17.373425-44.723669-31.994625L160.145137 393.740299 488.864102 134.171006c11.868974-9.288762 33.198723-9.288762 44.895683 0l330.095078 261.11742L863.854863 832.032253z" p-id="2223" fill="#1684FC"></path></svg>

public/img/pro_rgb.svg

@@ -0,0 +1 @@
+<?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 t="1638171446718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2430" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 69.717333l383.018667 221.141334v442.282666L512 954.282667 128.981333 733.141333V290.858667L512 69.717333zM192.96 375.402667v320.768L480 861.888V541.141333l-287.04-165.76z m638.058667 0L544 541.162667V861.866667l287.018667-165.717334V375.424zM512 143.637333L215.722667 314.666667 512 485.717333l296.256-171.050666L512 143.616z" fill="#1684FC" p-id="2431"></path></svg>

public/img/user_rgb.svg

@@ -0,0 +1 @@
+<?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 t="1638171175505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2087" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M947.924 963.76c0 21.752-17.62 39.372-39.354 39.372-21.75 0-39.37-17.62-39.37-39.371l-0.354-3.655c0-1.554 0.283-3.054 0.442-4.59-24.576-172.792-172.72-299.768-353.104-301.763-1.447 0.036-2.825 0.23-4.29 0.23-1.43 0-2.807-0.194-4.237-0.23C329.34 655.731 182.607 779.9 155.56 949.69c0.9 3.337 1.536 6.78 1.536 10.4l0.37 3.707c0 22.086-17.902 39.989-39.97 39.989s-39.99-17.903-39.99-39.99l-0.035-0.352h-0.76c0.107-1.165 0.336-2.278 0.46-3.425 0-3.302 0.53-6.427 1.27-9.499C98.94 791.217 205.684 662.422 350.968 606.95c-84.586-54.2-139.74-149.963-139.74-259.372 0-169.224 131.478-306.405 300.702-306.405 169.208 0 300.703 137.18 300.703 306.405 0 109.374-55.102 205.118-139.652 259.32 144.278 55.03 250.544 182.325 272.19 340.038 1.465 4.131 2.436 8.528 2.436 13.17l0.318 3.656z m-204.43-616.094c0-127.947-103.706-231.654-231.653-231.654S280.188 219.736 280.188 347.666c0 127.929 103.724 231.636 231.653 231.636s231.654-103.707 231.654-231.636z" fill="#1684FC" p-id="2088"></path></svg>

web_src/js/components/DataAnalysis.vue

@@ -3,7 +3,7 @@
         <el-tabs tab-position="left" v-model="activeName" style="height:100%" @tab-click="handleClick" >
             <el-tab-pane label="概览" name="first" >
                 <span slot="label"> 
-                    <el-image style="width: 13px; height: 13px" src="/img/overview.png">
+                    <el-image style="width: 13px; height: 13px" src="/img/overview_rgb.svg">
                     </el-image>
                     概览 
                 </span>    
@@ -13,14 +13,14 @@
             <el-tab-pane label="项目分析" name="second" id="second" >
                 <ProAnalysis  ref='ProAnalysis'id="pro" v-if="isRouterAlive"></ProAnalysis>
                 <span slot="label"> 
-                    <el-image style="width: 13px; height: 13px" src="/img/pro_new.svg">
+                    <el-image style="width: 13px; height: 13px" src="/img/pro_rgb.svg">
                     </el-image>
                     项目分析 
                 </span> 
             </el-tab-pane>
             <el-tab-pane name="third" id='third' > 
                 <span slot='label'>
-                    <el-image style="width: 13px; height: 13px" src="/img/name.png">
+                    <el-image style="width: 13px; height: 13px" src="/img/user_rgb.svg">
                     </el-image>
                     用户分析 
                 </span>
@@ -121,6 +121,14 @@
     /deep/ .el-tabs__item {
         padding: 0px 20px 0px 20px;
     }
-
+    /deep/ .el-tabs__item.is-active .el-image{
+        filter:none
+    }
+    /deep/ .el-tabs__item:hover .el-image{
+        filter:none
+    }
+    /deep/ .el-image{
+        filter:grayscale(100%)
+    }
   
     </style>

web_src/js/components/ProAnalysis.vue

@@ -1085,6 +1085,12 @@
                         return data[0]+''+data[1]+''+data[2]
                     }
                 },
+                goBack(){
+                    if( $("#pro_detail").is(':visible') ){
+                        document.getElementById("pro_main").style.display = "block";
+                        document.getElementById("pro_detail").style.display = "none";
+                    }
+                },
 
             },
             filters:{
@@ -1125,7 +1131,7 @@
                         return " <a href=\" mailto:" + value.email + "class=\"circular ui button\">"  +value.user+ "</a>"
                     }			
                     
-                },
+                },              
             },
     
     
@@ -1140,6 +1146,10 @@
                 this.radarOpenI = this.$echarts.init(document.getElementById('radar_openi'))
                 this.echartsOITd = this.$echarts.init(document.getElementById('line_openi'))
                 this.echartsSelectData = this.$echarts.init(document.getElementById('selectData'))
+                if (window.history && window.history.pushState) {
+                    history.pushState(null, null, document.URL);
+                    window.addEventListener('popstate', this.goBack, false);
+                }
                 // window.onresize=function(){
                 //     this.radarOpenI.resize();
                 //     this.echartsOITd.resize();