更新首页

code/package.json

@@ -8,24 +8,26 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.19.0",
-    "core-js": "^3.3.2",
-    "dingtalk-jsapi": "^2.8.11",
-    "element-ui": "^2.12.0",
-    "vue": "^2.6.10",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.0.1"
+    "@types/echarts": "^4.4.3",
+    "axios": "^0.19.2",
+    "core-js": "^3.6.4",
+    "dingtalk-jsapi": "^2.13.53",
+    "echarts": "^4.6.0",
+    "element-ui": "^2.15.6",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-plugin-router": "^4.0.5",
-    "@vue/cli-plugin-vuex": "^4.0.5",
-    "@vue/cli-service": "^4.0.0",
-    "babel-eslint": "^10.0.3",
+    "@vue/cli-plugin-babel": "^4.5.14",
+    "@vue/cli-plugin-eslint": "^4.5.14",
+    "@vue/cli-plugin-router": "^4.5.14",
+    "@vue/cli-plugin-vuex": "^4.5.14",
+    "@vue/cli-service": "^4.5.14",
+    "babel-eslint": "^10.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,

code/public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

code/src/App.vue

@@ -1,11 +1,8 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <!-- <router-link to="/about">About</router-link> -->
-      
-      <router-link to="/ding">Ding</router-link>
-    </div>
+  <div id="app" style="height: 100%">
+    <!--<div id="nav">-->
+      <!--<router-link to="/ding">Ding</router-link>-->
+    <!--</div>-->
     <router-view/>
   </div>
 </template>
@@ -18,7 +15,10 @@
   text-align: center;
   color: #2c3e50;
 }
-
+ body {
+  height: 100%;
+   margin: 0;
+}
 #nav {
   padding: 30px;
 }

code/src/main.js

@@ -9,6 +9,10 @@ Vue.use(ElementUI);
 Vue.config.productionTip = false
 Vue.prototype.dd = dd
 
+//引入echart
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 new Vue({
   router,
   store,

code/src/router/index.js

@@ -11,19 +11,26 @@ const routes = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'about',
+    path: '/company',
+    name: 'company',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/company/company.vue')
+  },
+  {
+    path: '/consult',
+    name: 'consult',
+    component: () => import(/* webpackChunkName: "about" */ '../views/consult/consult.vue')
+  },
+  {
+    path: '/park',
+    name: 'park',
+    component: () => import(/* webpackChunkName: "about" */ '../views/park/park.vue')
   },
   {
     path: '/ding',
     name: 'ding',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "ding" */ '../views/dingding/Access.vue')
   }
 ]

code/src/views/Home.vue

@@ -1,18 +1,103 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <!--<img alt="Vue logo" src="../assets/logo.png">-->
+    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
+    <div class="home-box" v-for="(item,index) in pageModelList" :key="index" @click="goDetail(item.path)">
+            <div class="home-left">
+                <div class="home-title-font">{{item.title}}</div>
+                <div class="home-bottom-font">点击进入</div>
+            </div>
+            <div class="img-box">
+              <img :src="item.img" alt="">
+            </div>
+    </div>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+// import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    // HelloWorld
+  },
+  data(){
+    return {
+      pageModelList:[
+        {
+          title:'企业信息统计',
+          path:'/company',
+          img:require('../assets/logo.png')
+        },
+        {
+          title:'咨询诉求统计',
+          path:'/consult',
+          img:require('../assets/logo.png')
+        },
+        {
+          title:'园区信息统计',
+          path:'/park',
+          img:require('../assets/logo.png')
+        }
+      ]
+    }
+  },
+  methods:{
+     goDetail(path){
+        this.$router.push(path)
+     }
   }
 }
 </script>
+
+<style>
+  .home {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background-color: #F1F4F9;
+  }
+
+  .home-box {
+    width: 80%;
+    border-radius: 15px;
+    background-color: #3E93FC;
+    display: flex;
+    justify-content: space-around;
+    height: 21%;
+    margin: 20px 0 20px 0;
+    padding: 18px;
+    color: #fff;
+  }
+  .home-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+   .home-title-font {
+     font-size: 22px;
+     font-weight: bold;
+   }
+   .home-bottom-font {
+     background-color: #fff;
+     color: #999DAB;
+     font-size: 14px;
+     width: 49%;
+     border-radius: 5px;
+     padding: 2px;
+   }
+  .img-box {
+    width: 50%;
+    height: 100%;
+  }
+  .img-box img {
+    width: 100%;
+    height: 100%;
+    margin-top: 10px;
+  }
+
+</style>

code/src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>This is company page</h1>
   </div>
 </template>

code/src/views/consult/consult.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is consult page</h1>
+  </div>
+</template>

code/src/views/park/park.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is  park page</h1>
+  </div>
+</template>