地图

package.json

@@ -14,6 +14,7 @@
     "babel-plugin-component": "^1.1.1",
     "babel-polyfill": "^6.26.0",
     "core-js": "^2.6.5",
+    "echarts": "^4.5.0",
     "element-ui": "^2.11.1",
     "es6-promise": "^4.2.8",
     "html2canvas": "^1.0.0-rc.3",

src/views/report/government.vue

@@ -7,9 +7,16 @@
 <script>
     export default {
         name: "government",
+        data() {
+            return {
+
+            }
+        }
     }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+    .government {
+        height: 100%;
+    }
 </style>
\ No newline at end of file

src/views/report/reportIndex.vue

 <template>
     <div class="reportWrapper">
-        <section id="home-section">
+        <section id="home-section" v-if="isShowFirst">
             <video id="video-index" ref="videoIndex" autoplay="true" muted="true" loop="true" src="https://techbook-test.oss-cn-beijing.aliyuncs.com/public/23b67ae196688598f1002a95d77f170c.mp4"
                    poster="../../assets/img/report/bg.jpg"
                    style="margin-left: 0px;object-fit: fill;"></video>
@@ -8,48 +8,52 @@
                 <div class="titleBox">
                     TechBook科创管理系统
                 </div>
-                <div class="loginBox government" @click="handleTo(1)">
-                    <p><img src="../../assets/img/report/goverment.png" alt=""></p>
+                <div class="loginBox" @click="handleTo(1)">
                     <p>以政府机构身份登录</p>
                 </div>
-                <div class="loginBox business" @click="handleTo(2)">
-                    <p><img src="../../assets/img/report/business.png" alt=""></p>
+                <div class="loginBox" @click="handleTo(2)">
                     <p>以企业身份登录</p>
                 </div>
             </div>
             <div class="main-bg"></div>
         </section>
+        <section class="box-screen secondScreen" v-show="isShowOther">
+            <div id="seconndMap" style="width:100%;height:100%;">
+                <secondMap></secondMap>
+            </div>
+
+        </section>
     </div>
 </template>
 
 <script>
+    import secondMap from './secondMap';
     export default {
         name: "reportIndex",
+        components:{
+            secondMap
+        },
         data(){
             return{
                 widthPx : document.documentElement.clientWdith || document.body.clientWidth,
                 clientHeightPx:document.documentElement.clientHeight|| document.body.clientHeight,
+                isShowFirst:true,
+                isShowOther:false,
 
             }
         },
         methods:{
 
             handleTo(type){
+                this.isShowFirst = false;
+                this.isShowOther = true;
+            },
+
 
-                if(type==1){
-                    var url =this.$router.resolve({path:"/government"});
-                    window.open(url.href,"_blank")
-                }else{
-                    var url =this.$router.resolve({path:"/business"});
-                    window.open(url.href,"_blank")
-                }
-            }
         },
         mounted(){
             this.$refs.videoIndex.style.width = this.widthPx+'px';
             this.$refs.videoIndex.style.height = this.clientHeightPx+'px';
-
-            console.log(this.$refs.videoIndex.style)
         }
     }
 </script>
@@ -62,6 +66,10 @@
         position: relative;
         background-color: white;
     }
+    .box-screen{
+        height: 100%;
+        overflow: hidden;
+    }
     #home-section{
         height: 100%;
         overflow: hidden;
@@ -70,12 +78,12 @@
             top: 50%;
             left: 50%;
             width: 1000px;
-            margin-top: -200px;
+            margin-top: -140px;
             margin-left: -500px;
             z-index: 20;
             color: white;
             text-align: center;
-            height: 400px;
+            height: 280px;
             display: -webkit-flex; /*新版本语法：chrome 21+*/
             display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
             display: -moz-box; /*老版本语法：Firefox(buggy)*/
@@ -92,29 +100,33 @@
                 color:rgba(255,255,255,1);
                 line-height:126px;
                 text-shadow:0px 4px 8px rgba(0,0,0,0.5);
-                margin-bottom: 98px;
+
             }
             .loginBox{
-                height: 225px;
-                width: 300px;
-                -webkit-border-radius: 10px;
-                -moz-border-radius: 10px;
-                border-radius: 10px;
+                height: 50px;
+                width: 240px;
+                border: 2px solid #fff;
+                -webkit-border-radius: 37px;
+                -moz-border-radius: 37px;
+                border-radius: 37px;
                 margin: 0 40px;
-                opacity:.85;
                 display: -webkit-flex; /*新版本语法：chrome 21+*/
                 display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
                 display: -moz-box; /*老版本语法：Firefox(buggy)*/
                 display: -ms-flexbox; /*混合版本语法：IE 10*/
                 display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
-                flex-wrap: wrap;
                 justify-content: center;
                 align-items: center;
                 cursor: pointer;
+                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.5);
                 p{
-                    width: 100%;
-                    font-size: 24px;
-                    font-weight: 500;
+                    height:28px;
+                    font-size:20px;
+                    font-family:PingFangSC-Medium,PingFang SC;
+                    font-weight:500;
+                    color:rgba(255,255,255,1);
+                    line-height:28px;
+                    text-shadow:0px 2px 4px rgba(0,0,0,0.5);
                 }
             }
             .government{