3-25

.env

+VUE_APP_PROJECT_NAME = "兰州交通展示平台"
\ No newline at end of file

.env.development

+#开发环境配置
+NODE_ENV = "development"
+
+#默认接口地址
+VUE_APP_API_BASE_URL = http://192.168.1.111:8082
+
+#新需要的接口地址
+VUE_APP_API_Test = http://192.168.1.222:8081
\ No newline at end of file

.env.production

+#生产环境配置
+NODE_ENV = "production"
+
+#默认接口地址
+VUE_APP_API_BASE_URL = http://192.168.1.111:8082
+
+#新需要的接口地址
+VUE_APP_API_Test = http://192.168.1.222:8081
\ No newline at end of file

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

+                     木兰宽松许可证, 第1版
+
+   木兰宽松许可证， 第1版
+   2019年8月 http://license.coscl.org.cn/MulanPSL
+
+   您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第1版（“本许可证”）的如下条款的约束：
+
+   0. 定义
+
+      “软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。
+
+      “贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。
+
+      “法人实体”是指提交贡献的机构及其“关联实体”。
+
+      “关联实体”是指，对“本许可证”下的一方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。
+
+      “贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。
+
+   1. 授予版权许可
+
+      每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、分发其“贡献”，不论修改与否。
+
+   2. 授予专利许可
+
+      每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求，不包括仅因您或他人修改“贡献”或其他结合而将必然会侵犯到的专利权利要求。如您或您的“关联实体”直接或间接地（包括通过代理、专利被许可人或受让人），就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。
+
+   3. 无商标许可
+
+      “本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。
+
+   4. 分发限制
+
+      您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。
+
+   5. 免责声明与责任限制
+
+      “软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。
+
+   条款结束。
+
+   如何将木兰宽松许可证，第1版，应用到您的软件
+
+   如果您希望将木兰宽松许可证，第1版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：
+
+      1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；
+
+      2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；
+
+      3， 请将如下声明文本放入每个源文件的头部注释中。
+
+   Copyright (c) [2019] [name of copyright holder]
+   [Software Name] is licensed under the Mulan PSL v1.
+   You can use this software according to the terms and conditions of the Mulan PSL v1.
+   You may obtain a copy of Mulan PSL v1 at:
+      http://license.coscl.org.cn/MulanPSL
+   THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
+   PURPOSE.
+   See the Mulan PSL v1 for more details.
+
+
+                     Mulan Permissive Software License，Version 1
+
+   Mulan Permissive Software License，Version 1 (Mulan PSL v1)
+   August 2019 http://license.coscl.org.cn/MulanPSL
+
+   Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v1 (this License) with following terms and conditions:
+
+   0. Definition
+
+      Software means the program and related documents which are comprised of those Contribution and licensed under this License.
+
+      Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License.
+
+      Legal Entity means the entity making a Contribution and all its Affiliates.
+
+      Affiliates means entities that control, or are controlled by, or are under common control with a party to this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity.
+
+   Contribution means the copyrightable work licensed by a particular Contributor under this License.
+
+   1. Grant of Copyright License
+
+      Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not.
+
+   2. Grant of Patent License
+
+      Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed, excluding of any patent claims solely be infringed by your or others’ modification or other combinations. If you or your Affiliates directly or indirectly (including through an agent, patent licensee or assignee）, institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken.
+
+   3. No Trademark License
+
+      No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in section 4.
+
+   4. Distribution Restriction
+
+      You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software.
+
+   5. Disclaimer of Warranty and Limitation of Liability
+
+      The Software and Contribution in it are provided without warranties of any kind, either express or implied. In no event shall any Contributor or copyright holder be liable to you for any damages, including, but not limited to any direct, or indirect, special or consequential damages arising from your use or inability to use the Software or the Contribution in it, no matter how it’s caused or based on which legal theory, even if advised of the possibility of such damages.
+
+   End of the Terms and Conditions
+
+   How to apply the Mulan Permissive Software License，Version 1 (Mulan PSL v1) to your software
+
+      To apply the Mulan PSL v1 to your work, for easy identification by recipients, you are suggested to complete following three steps:
+
+      i. Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner;
+      ii. Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package;
+      iii. Attach the statement to the appropriate annotated syntax at the beginning of each source file.
+   
+   Copyright (c) [2019] [name of copyright holder]
+   [Software Name] is licensed under the Mulan PSL v1.
+   You can use this software according to the terms and conditions of the Mulan PSL v1.
+   You may obtain a copy of Mulan PSL v1 at:
+      http://license.coscl.org.cn/MulanPSL
+   THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
+   PURPOSE.
+   
+   See the Mulan PSL v1 for more details.

README.md

+# 说明
+```
+// 启动
+npm run serve 
+// 打包构建
+npm run build 
+
+```
+配置内容
+
+vue + vue-router + vuex + axios + elementUI + echarts + 高德地图(异步加载)
+
+## public文件夹(主要用于存放静态文件以及引入的插件)
+browse.html 浏览器升级页面，针对IE低版本浏览器进行提示升级
+favicon.ico 页面标题小图标
+index.html 主html文件入口
+
+## src文件夹
+###api文件夹：主要用于本项目所有接口内容的编写与管理，可根据模块分割成不同的Js文件
+
+###assets文件夹：主要用于存放项目的一些常用文件
+common.scss全局自定义样式表,样式全局生效
+localElementUI.scss饿了么UI自定义样式表，可以直接覆写elmentUi样式，直接引入覆盖使用即可
+reset.css重置样式表
+tools.scss 工具样式类，如：浮动，清除浮动，轮廓，字体大小，颜色，盒子模型，宽高，内外边距等。
+font：字体图标库
+images: 图片存放文件
+
+###components：存放全局组件（建议：按照功能模块命名文件夹存放）注意：需要在当前文件夹的components.js中进行全局注册
+
+###config文件夹：配置文件夹
+axios配置文件
+include插件引入配置文件
+其中echarts通过 this.$echarts方式即可拿到echarts的类
+
+###router文件夹：路由管理文件夹
+router.js 路由配置文件
+router.interceptor.js 路由拦截配置文件
+
+###store文件夹：vuex状态管理文件夹
+-store.js 状态管理配置文件，可按照需求进行多模块配置
+
+###utils文件夹：各种功能文件配置文件夹
+directives.js 全局自定义指令配置文件
+filter.js  全局过滤器配置文件
+format.js  全局数据格式转换配置文件：用于将后台返回非文字内容转换成对应前端需要文字内容（统一集中起来方便管理使用），通过 this.$format.方法名调用
+methods.js 全局方法配置文件(可通过this.$method.方法名的方式调用)
+utils.js  工具方法配置文件（与methods.js区别在于本文件内容按需引用）
+validator.js  全局正则配置文件，通过 this.$validator.方法名调用
+
+###views文件夹：主应用文件夹
+project-entrance 项目主功能模块入口，每个模块根据自己的内容划分为多个子模块，建议：命名按照模块名称+功能名称的形式来
+
+###App.vue: （vue主入口文件
+
+###main.js: （vue主配置文件，其中 this.$bus为中央事件总线，可以做各种跨区域调用的事件数据传递
+
+###.env: （通用环境配置文件：在此处配置的内容将同时在开发和生产环境生效  
+
+###.env.development: （开发配置文件  
+
+###.env.production: （生产配置文件  
+
+###.eslintrc.js: （eslint配置文件  
+
+###.gitignore （git忽略的文件配置内容  
+
+###babel.config.js: （babel配置文件  
+
+###postcss.config.js: （postcss配置文件
+
+###package.json: （包管理与引入配置，参考网上
+
+###vue.config.js: （vue核心项目配置文件，参考vue-cli3官网
\ No newline at end of file

babel.config.js

+// babel配置文件、使用babel扩大兼容性
+module.exports = {
+  presets: [["@vue/app", { useBuiltIns: "entry" }]],
+  plugins: []
+};

package.json

+{
+  "name": "framework-vuecli3.1.0",
+  "version": "0.1.0",
+  "author": "WangTang",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.4.4",
+    "axios": "^0.18.1",
+    "element-ui": "^2.9.1",
+    "echarts": "^4.4.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.6",
+    "vuex": "^3.1.1"
+  },
+  "devDependencies": {
+    "@gfx/zopfli": "^1.0.13",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
+    "autoprefixer": "^9.6.0",
+    "babel-eslint": "^10.0.1",
+    "brotli-webpack-plugin": "^1.1.0",
+    "compression-webpack-plugin": "^3.0.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.1.0",
+    "terser-webpack-plugin": "^4.1.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 1 version",
+    "not ie < 10",
+    "maintained node versions",
+    "not dead"
+  ]
+}

postcss.config.js

+// postcss配置文件
+module.exports = {
+  plugins: [
+    // css浏览器前缀插件
+    require('autoprefixer')
+  ]
+};

public/browse.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>浏览器升级</title>
+    <meta content="浏览器升级" name="keywords">
+    <meta content="浏览器升级" name="description">
+    <style>
+      body{
+        background-color: rgba(199,237,233,.5);
+      }
+      .container{
+        padding-top: 50px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      您所使用的浏览器版本过低，为了有一个较好的浏览体验，请<a style="color: #12a2e8;" href="https://browsehappy.com/">点击这里</a>升级浏览器！
+    </div>
+  </body>
+</html>

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <!--默认使用极速模式， 作用于360浏览器、QQ浏览器等国产双核浏览器 -->
+  <meta name="renderer" content="webkit"/>  
+  <!-- 默认使用极速模式，作用于其他双核浏览器 -->
+  <meta name="force-rendering" content="webkit"/>
+  <!-- 如果有安装 Google Chrome Frame 插件则默认使用Chromium内核（也就是极速模式内核），否则强制本机支持的最高版本IE内核，作用于IE浏览器： -->
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+  <!-- 手机移动端配置 -->
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <!-- 标题 -->
+  <title><%= VUE_APP_PROJECT_NAME %></title>
+  <!-- 项目小图标 -->
+  <link rel="icon" href="./favicon.ico">
+  <script>
+    // 验证是否为IE浏览器并且获得其版本信息
+    /**
+     * @return {number}
+     */
+    function IEVersion () {
+      var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
+      var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; // 判断是否IE<11浏览器
+      if (isIE) {
+        var reIE = new RegExp('MSIE (\\d+\\.\\d+);');
+        reIE.test(userAgent);
+        var fIEVersion = parseFloat(RegExp['$1']);
+        if (fIEVersion === 7) {
+          return 7;
+        } else if (fIEVersion === 8) {
+          return 8;
+        } else if (fIEVersion === 9) {
+          return 9;
+        } else if (fIEVersion === 10) {
+          return 10;
+        } else {
+          return 6; // IE版本<=7
+        }
+      }
+      return 100;
+    }
+    // 如果是IE10以下的浏览器将直接跳转到浏览器升级页面,否则进入主页
+    (function (windows) {
+      try {
+        if (IEVersion() < 10) {
+          window.location.href='./browse.html';
+        }
+      } catch (f) {
+        console.log(f);
+      }
+    }(window));
+  </script>
+</head>
+<body>
+<noscript>
+  <strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+</body>
+</html>

src/App.vue

+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/api/api.js

+/* 
+    建议:
+      1、函数命名尽可能以模块名+函数名的形式来命名,以避免名称冲突。
+      2、在各个模块开头的部分做一个模块说明。如:平台管理模块
+      3、每个函数做好一个简单的注释,建议和api文档名字一样,以方便查找
+*/
+/*  编写格式如下：
+    export function testApiService(data) {  // 接口名（参数）
+      return service({
+        url: '/user/login', // 接口地址(会与axios.js文件中配置的baseURL拼接)
+        method: 'post', // 接口请求方式(默认为get)
+				data:data, // 接口参数 使用data:data 数据将放在请求体中(参数请求方式根据接口需求确定)
+				params:data,  // 接口参数 使用params: data 数据将放在url的链接上(参数请求方式根据接口需求确定)
+				mode: VUE_APP_API_Test //（默认可以不写）
+					// mode可以配置不同的请求服务器地址
+					// baseURL配置默认请求地址。如：http://192.168.1.111:8082
+					// mode中配置修改默认请求地址。配置好本地变量(.env.development)将替换默认请求地址。
+      })
+    }
+    使用如下：
+    import { testApiService } from "src/api/api" 
+    testApiService().then(res=>{})
+*/
+import Vue from "vue";
+import service from "src/config/axios";
+/* =====================挂载====================== */
+// 将axios实例对象挂载在Vue上，通过this.$axios.get/post/...等调用axios本身的方法
+// 如果需要使用那种需要改变请求头的接口，可以使用这个进行请求
+Vue.prototype.$axios = service;
+
+/* =====================测试模块====================== */
+export function testApiService(data) {
+  return service({
+    url: "/testApiService",
+    method: "post",
+    params: data,
+  });
+}

src/assets/css/common.scss

+/*
+ * style css
+ * 全局样式文件：用于编写自定义的全局公用模块样式
+ */
+/* 引入重置样式 */
+@import "./reset.css";
+
+/* 引入elementUI自定义的样式 */
+@import "./localElementUI";
+
+/* 工具样式 */
+@import "./tools.scss";
+
+/* 引入字体图标样式 */
+@import "../font/iconfont.css";
+
+
+/* ================项目公共样式区域==================== */
+//加上该类则滚动条样式将改变
+.m-scroll::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+}
+.m-scroll::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.3);
+}
+.m-scroll::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file

src/assets/css/localElementUI.scss

+/*
+  ElementUI 本地自定义样式文件，
+  在本文件中定义个性化的ElementUI的样式内容，此内容将会在全局生效
+  自定义类名以.m-开头
+*/
+
+/* === el-pagination分页统一样式=== */
+.m-el-pagination{
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  .el-pagination{
+    .el-pagination__jump{
+      margin-left: 0
+    }
+  }
+}
+/* === el-dialog弹出框统一样式=== */
+.m-el-dialog{
+  text-align: center;
+  .el-dialog__header{}
+  .el-dialog__body{}
+  .el-dialog__footer{
+  }
+}
+/* === el-table表格统一样式=== */
+.m-el-table{
+  
+}
\ No newline at end of file

src/assets/css/reset.css

+/*
+ * css reset 重置文件
+ */
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent
+}
+
+:after,
+:before {
+  box-sizing: border-box
+}
+
+html,
+body {
+  font-size: 14px;
+  color: #333333;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+}
+
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+}
+
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+sup {
+  vertical-align: text-top;
+}
+
+sub {
+  vertical-align: text-bottom;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:focus,
+a:hover {
+  text-decoration: underline;
+}
+
+button[disabled] {
+  cursor: not-allowed !important;
+}
+
+input {
+  outline: none !important;
+}
+
+:focus {
+  outline: none;
+}
+
+/* 取消chrome默认背景色等 */
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px white inset;
+}
\ No newline at end of file

src/assets/css/tools.scss

+/*
+ * 工具样式
+ * 浮动、清除浮动、宽高、字体大小、颜色、背景颜色、内容轮廓
+ */
+
+/* ==========内容轮廓========== */
+// PC内容外部轮廓
+.container-outer {
+  max-width: 1920px;
+  min-width: 1280px;
+  width: 100%;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+// PC内容内部轮廓
+.container-inner {
+  width: 1280px;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* ======== 左右浮动与清除浮动 ======== */
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix:after {
+  clear: both;
+  overflow: hidden;
+  content: "";
+  display: block;
+  height: 0;
+}
+
+/* ==============宽度、高度=============== */
+.width100 {
+  width: 100% !important;
+}
+
+.width90 {
+  width: 90% !important;
+}
+
+.width80 {
+  width: 80% !important;
+}
+
+.width70 {
+  width: 70% !important;
+}
+
+.width60 {
+  width: 60% !important;
+}
+
+.width50 {
+  width: 50% !important;
+}
+
+.width40 {
+  width: 40% !important;
+}
+
+.width30 {
+  width: 30% !important;
+}
+
+.width20 {
+  width: 20% !important;
+}
+
+.width10 {
+  width: 10% !important;
+}
+
+.wid560 {
+  width: 560px !important;
+}
+
+.wid480 {
+  width: 480px !important;
+}
+
+.wid360 {
+  width: 360px !important;
+}
+
+.wid240 {
+  width: 240px !important;
+}
+
+.wid180 {
+  width: 180px !important;
+}
+
+.wid150 {
+  width: 150px !important;
+}
+
+.wid120 {
+  width: 120px !important;
+}
+
+.wid90 {
+  width: 90px !important;
+}
+
+.wid60 {
+  width: 60px !important;
+}
+
+.wid30 {
+  width: 30px !important;
+}
+
+.height100 {
+  height: 100% !important;
+}
+
+.height90 {
+  height: 90% !important;
+}
+
+.height80 {
+  height: 80% !important;
+}
+
+.height70 {
+  height: 70% !important;
+}
+
+.height60 {
+  height: 60% !important;
+}
+
+.height50 {
+  height: 50% !important;
+}
+
+.height40 {
+  height: 40% !important;
+}
+
+.height30 {
+  height: 30% !important;
+}
+
+.height20 {
+  height: 20% !important;
+}
+
+.height10 {
+  height: 10% !important;
+}
+
+.hei560 {
+  height: 480px !important;
+}
+
+.hei480 {
+  height: 480px !important;
+}
+
+.hei360 {
+  height: 360px !important;
+}
+
+.hei240 {
+  height: 240px !important;
+}
+
+.hei180 {
+  height: 180px !important;
+}
+
+.hei150 {
+  height: 150px !important;
+}
+
+.hei120 {
+  height: 120px !important;
+}
+
+.hei90 {
+  height: 90px !important;
+}
+
+.hei60 {
+  height: 60px !important;
+}
+
+.hei30 {
+  height: 30px !important;
+}
+
+/* ==============内外边距=============== */
+.ml8 {
+  margin-left: 8px !important;
+}
+
+.ml16 {
+  margin-left: 16px !important;
+}
+
+.mr8 {
+  margin-right: 8px !important;
+}
+
+.mr16 {
+  margin-right: 16px !important;
+}
+
+.mt8 {
+  margin-top: 8px !important;
+}
+
+.mt16 {
+  margin-top: 16px !important;
+}
+
+.mb8 {
+  margin-bottom: 8px !important;
+}
+
+.mb16 {
+  margin-bottom: 16px !important;
+}
+
+/* ==============盒子模型================ */
+.flex {
+  display: flex;
+}
+
+.inline {
+  display: inline;
+}
+
+.block {
+  display: block;
+}
+
+.inl-blo {
+  display: inline-block;
+}
+
+.ovh {
+  overflow: hidden;
+}
+
+/* ==============颜色类================ */
+.color1 {
+  color: #125412;
+}
+
+.bgc1 {
+  background-color: #125412;
+}
+
+/* ==============字体类================ */
+.font10 {
+  font-size: 10px !important;
+}
+
+.font12 {
+  font-size: 12px !important;
+}
+
+.font16 {
+  font-size: 16px !important;
+}
+
+.font18 {
+  font-size: 18px !important;
+}
+
+.font20 {
+  font-size: 20px !important;
+}
+
+.font24 {
+  font-size: 24px !important;
+}
\ No newline at end of file

src/components/components.js

+/* 
+    全局组件注册文件，只需要在这里导入一个组件并且注册就可以在全局所有地方使用。
+    如：<mfooter></mfooter>
+*/
+
+import TianQi from "./../views/tianqi.vue";
+export default (Vue) => {
+  Vue.component('TianQi',TianQi);
+};

src/components/layout/404.vue

+<template>
+  <div class="no-page">
+    <div class="pic-box">
+      <img class="pic" src="../../assets/images/404.png" />
+      <span class="num">{{ currentTime }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "no-page",
+  data() {
+    return {
+      currentTime: 5,
+      timer: null
+    };
+  },
+  created() {
+    this.timer = setInterval(() => {
+      this.currentTime--;
+      if (this.currentTime <= 0) {
+        clearInterval(this.timer);
+        this.$router.go(-1);
+      }
+    }, 1000);
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.no-page {
+  .pic-box {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -255px;
+    margin-top: -211px;
+    width: 510px;
+    height: 422px;
+    img {
+      width: 510px;
+      height: 422px;
+    }
+    .num {
+      font-size: 18px;
+      position: absolute;
+      left: 338px;
+      top: 175px;
+      color: red;
+    }
+  }
+}
+</style>

src/config/axios.js

+/*
+ * axios拦截器与初始化配置
+ */
+import axios from "axios";
+import ElementUI from "element-ui";
+
+// 创建单独的axios实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_API_BASE_URL // api的base_url
+});
+// axios添加一个请求拦截器
+service.interceptors.request.use(
+  // 这里需要根据项目目录结构来配置
+  (config) => {
+    // 如果设置了路径mode则替换基础请求路径baseURL
+    if (config.mode) {
+      config.baseURL = process.env[config.mode];
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+// axios添加一个响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    // 这里需要根据接口返回结构配置
+    if (response.data) {
+      return response.data;
+    } else {
+      return Promise.reject(response.data);
+    }
+  },
+  (error) => {
+    // 提示
+    ElementUI.Message({
+      message: '接口超时,请检查网络设置',
+      dangerouslyUseHTMLString: true,
+      type: "error"
+    });
+    return Promise.reject(error);
+  }
+);
+export default service;
\ No newline at end of file

src/config/include.js

+/*
+ * 通用引入文件，一般用于引入一些新的插件或者其他的vue插件内容
+    建议：所有新引入的插件在此处填写名称
+        当前引入插件有：
+        elementUl
+        vuex
+        vue-router
+        babel/polyfill
+ */
+import Vue from "vue";
+
+// import 项目公用样式
+import "src/assets/css/common.scss";
+
+// import 全局过滤器
+import "src/utils/filter.js";
+
+// import 全局自定义指令
+import "src/utils/directives.js";
+
+// import 全局正规规则
+import "src/utils/validator.js";
+
+// import 全局方法并且注册全局方法
+import methods from 'src/utils/methods';
+Vue.use(methods);
+
+// import 全局组件并且进行注册
+import components from 'src/components/components';
+Vue.use(components);
+
+// import element-ui并且注册
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+Vue.use(ElementUI);
+
+// 导入echarts对象并且将其注册在Vue组件上
+import echarts from 'echarts';
+Vue.prototype.$echarts = echarts;
+
+// 挂载高德地图-异步加载方式
+import MapLoader from "src/utils/AMap.js";
+Vue.prototype.$map = MapLoader;

src/main.js

+import Vue from "vue";
+import App from "./App.vue";
+
+// 兼容ES6的语法（适配一些不支持ES6语法的浏览器）
+import "@babel/polyfill";
+
+// 引入路由
+import router from "src/router/router.js";
+// 引入路由守卫
+import "src/router/router-interceptor.js";
+// 引入vuex
+import store from "src/store/store.js";
+// 引入include插件文件
+import "src/config/include.js";
+
+// 中央事件总线,一般用于组件间进行事件通知
+/*  
+ 通过函数形势传递内容,如this.$bus.$on监听，this.$bus.emit触发，
+*/
+Vue.prototype.$bus = new Vue();
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app");

src/router/router-interceptor.js

+/*
+*  路由拦截配置文件
+* */
+import router from 'src/router/router';
+// import ElementUI from "element-ui";
+router.beforeEach((to, from, next) => {
+  if (to.meta.requireAuth) { // 该路径需要登录
+    next();
+    // if (sessionStorage.getItem('Authorization')) { // 是否已经登录
+    //   next();
+    // } else {
+    //   ElementUI.Message({
+    //     message: '请先登录',
+    //     dangerouslyUseHTMLString: true,
+    //     type: "error"
+    //   });
+    //   next('/account/login');
+    // }
+  } else {
+    next();
+  }
+});
\ No newline at end of file

src/router/router.js

+import Vue from "vue";
+import Router from "vue-router";
+Vue.use(Router);
+
+/* 路由不需要异步加载区域 */
+import Home from "../views/Home.vue";
+import NotFound from "src/components/layout/404.vue";
+
+/* 路由异步加载区域 */
+
+// 路由配置项
+const routerConfig = {
+  routes: [
+    // 404
+    {
+      path: "*",
+      name: "404",
+      component: NotFound,
+      meta: {
+        requireAuth: false,
+        title: "404",
+      },
+    },
+    // 路由进入重定向
+    {
+      path: "/",
+      redirect: "/home",
+    },
+    // 主路由模块
+    {
+      path: "/home",
+      name: "home",
+      component: Home,
+      meta: {
+        requireAuth: true,
+      },
+      children: [],
+    },
+  ],
+};
+
+// 测试模块（生产模式下将不会引入）
+// 在开发模式下才会引入的组件内容（测试组件一般放置在views/test文件夹中）
+// 用于测试某些插件或自定义组件是否可以使用或者符合需求
+if (process.env.NODE_ENV === "development") {
+  routerConfig.routes = routerConfig.routes.concat([
+    {
+      // test
+      path: "/test",
+      name: "test",
+      component: () => import("src/components/layout/404.vue"),
+    },
+  ]);
+}
+
+export default new Router(routerConfig);

src/store/store.js

+import Vue from "vue";
+import Vuex from "vuex";
+Vue.use(Vuex);
+/*
+ * vuex管理文件
+ */
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  getters: {},
+  modules:{}
+});

src/utils/AMap.js

+// 高德地图懒加载
+export default function MapLoader() {
+  return new Promise((resolve, reject) => {
+    if (window.AMap) {
+      resolve(window.AMap);
+    } else {
+      let script = document.createElement("script");
+      script.type = "text/javascript";
+      script.async = true;
+      script.src = "http://webapi.amap.com/maps?v=1.4.15&callback=onAMapLoaded&key=f71aa620a3d4a93b69de8e090954085b&plugin=AMap.ControlBar";
+      script.onerror = reject;
+      document.head.appendChild(script);
+    }
+    window.onAMapLoaded = () => {
+      resolve(window.AMap);
+    };
+  });
+}
+// 高德地图ui懒加载
+
+// 高德地图相关视图插件懒加载
\ No newline at end of file

src/utils/directives.js

+/*
+ * 这里是一个全局自定义指令的文件，在编写区域编写指令方法，然后注册区域注册即可全局使用
+ */
+import Vue from "vue";
+
+/* =====================编写区域=========================== */
+const vFocus = {
+  bind: (el, binding, vnode) => {
+    console.log("自定义指令1");
+  },
+  inserted: (el, binding, vnode) => {},
+  update: (el, binding, vnode,oldVnode) => {},
+  componentUpdated: (el, binding, vnode,oldVnode) => {},
+  unbind: (el, binding, vnode) => {},
+};
+
+/* ========================注册区域=========================== */
+// 注册一个全局自定义指令 `v-focus`
+Vue.directive("focus", vFocus);

src/utils/filter.js

+/*
+ * 这里是一个全局过滤器的文件,方法编写完毕后，在注册区域注册即可全局使用
+ */
+import Vue from "vue";
+import { formatDate } from "./util.js";
+/* =====================方法编写区域=========================== */
+/*
+   时间戳处理
+   @example value | dateFormat("YYYY-MM-dd") => YYYY-MM-dd
+ */
+function dateFormat(timestamp, fmTimestamp) {
+  return formatDate(timestamp, fmTimestamp); 
+}
+
+/* 
+   金钱三位一逗号，小数点保留两位
+   @example value | moneyFormat => 132,156,132.00
+*/
+function moneyFormat(val) {
+  val = val.toString().replace(/\$|\,/g,'');
+  if(isNaN(val)) {
+    val = "0";
+  }
+  let sign = val == (val = Math.abs(val));
+  val = Math.floor(val * 100 + 0.50000000001);
+  let cents = val % 100;
+  val = Math.floor(val / 100).toString();
+  if(cents < 10) {
+    cents = "0" + cents;
+  }
+  for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
+    val = val.substring(0,val.length - (4 * i + 3)) + ',' + val.substring(val.length - (4 * i + 3));
+  }
+  let res = (sign ? '' : '-') + val + '.' + cents;
+  return res;
+}
+
+/* 
+  电话号码隐藏过滤
+  @example value | telFormat => 188****7983
+*/
+function telFormat(val){
+  if(val){
+    return val.replace(/^(.{3})(?:\d+)(.{4})$/,"$1****$2");
+  }
+}
+
+/* 
+  身份证号码隐藏过滤
+  @example value | telFormat => 188****7983
+*/
+function idcardFormat(val){
+  if(val){
+    return val.replace(/^(.{6})(?:\d+)(.{4})$/,"$1*******$2");
+  }
+}
+
+/* 
+  去除空格
+  @example value | noSpace => 'xxx'
+*/
+function noSpace(value) {
+  var str = trim(value);
+  return str;
+}
+
+/* ========================注册区域=========================== */
+//时间戳处理
+Vue.filter("dateFormat", dateFormat);
+//去除空格
+Vue.filter('noSpace',noSpace);

src/utils/format.js

+
+import Vue from "vue";
+/*
+ *  格式转换文件：用于将后台序号转换成对应枚举内容（统一集中起来方便管理使用）
+ *  建议：命名按照 format + 对应的内容的形式命名
+ *  通过this.$format.sex 就可以调用到对应的转换对象
+ */
+const format = {
+  sex:{
+    1: '男',
+    2: '女'
+  },
+  isChange:{
+    1: '是',
+    2: '否'
+  }
+};
+Vue.prototype.$format = format;
\ No newline at end of file

src/utils/methods.js

+/*
+ *  全局方法定义文件通过原型方式直接绑定到vue上可以通过this来调用（统一集中起来方便管理使用）
+ *  与 util.js区别，这里编写的方法不管调不调用都会打包进代码中，而util.js中的方法只有在导入使用的时候才会打包
+ *  使用方式：this.$test();
+ */
+/* ============================函数编写区域================================ */
+// 测试方法
+function test() {
+   console.log('全局方法测试');
+}
+/* =============================方法注册区域========================= */
+export default {
+    // eslint-disable-next-line no-unused-vars
+    install(Vue, options) {
+        Vue.prototype.$test = test;
+    }
+};
\ No newline at end of file

src/utils/util.js

+/*
+  全局工具方法
+  每个编写的工具方法必须要写好说明，最好有例子
+  通过import {} from 'util.js'有选择导入
+  当前拥有的方法有：
+  1.根据时间及格式获取时间的字符串（formatDate）
+  2.转化时间（transDate）=> x天前
+*/
+/* 1.根据时间及格式获取时间的字符串
+ * @param {int} iDate 时间
+ * @param {string} sFormat 格式，默认：yyyy-MM-dd HH:mm:ss
+ * @return {string} 格式化后的日期字符串
+ * @example formatDate(new Date(),'yyyy-MM-dd HH:mm:ss SSS');// 2017-6-6 11:11:11
+ */
+export const formatDate = (iDate, sFormat = "yyyy-MM-dd HH:mm:ss") => {
+  if (!iDate) {
+    return;
+  }
+  let dDate = new Date(iDate);
+  let year = dDate.getFullYear(); // 年
+  let month = dDate.getMonth() + 1; // 月
+  if (month < 10) {
+    month = "0" + month;
+  }
+  let date = dDate.getDate(); // 日
+  if (date < 10) {
+    date = "0" + date;
+  }
+  let hour = dDate.getHours(); // 时
+  if (hour < 10) {
+    hour = "0" + hour;
+  }
+  let minute = dDate.getMinutes(); // 分
+  if (minute < 10) {
+    minute = "0" + minute;
+  }
+  let second = dDate.getSeconds(); // 秒
+  if (second < 10) {
+    second = "0" + second;
+  }
+  let millisecond = dDate.getMilliseconds(); // 毫秒
+  if (sFormat.indexOf("yyyy") >= 0) {
+    sFormat = sFormat.replace("yyyy", year + "");
+  }
+  if (sFormat.indexOf("MM") >= 0) {
+    sFormat = sFormat.replace("MM", month + "");
+  }
+  if (sFormat.indexOf("dd") >= 0) {
+    sFormat = sFormat.replace("dd", date + "");
+  }
+  if (sFormat.indexOf("HH") >= 0) {
+    sFormat = sFormat.replace("HH", hour + "");
+  }
+  if (sFormat.indexOf("mm") >= 0) {
+    sFormat = sFormat.replace("mm", minute + "");
+  }
+  if (sFormat.indexOf("ss") >= 0) {
+    sFormat = sFormat.replace("ss", second + "");
+  }
+  if (sFormat.indexOf("SSS") >= 0) {
+    sFormat = sFormat.replace("SSS", millisecond + "");
+  }
+  return sFormat;
+};
+
+/* 2.转化时间
+ * @param {String} str (yyyy-MM-dd HH:mm:ss SSS)
+ * @return {String} 转化后的时间
+ * @example transDate("2019-1-10");// 2天前
+ */
+export const transDate = str => {
+  if (!str) return "";
+  let date = new Date(str);
+  // 现在的时间-传入的时间 = 相差的时间（单位 = 毫秒）
+  let time = new Date().getTime() - date.getTime();
+  if (time < 0) {
+    return "";
+  } else if (time / 1000 < 30) {
+    return "刚刚";
+  } else if (time / 1000 < 60) {
+    return parseInt(time / 1000) + "秒前";
+  } else if (time / 60000 < 60) {
+    return parseInt(time / 60000) + "分钟前";
+  } else if (time / 3600000 < 24) {
+    return parseInt(time / 3600000) + "小时前";
+  } else if (time / 86400000 < 31) {
+    return parseInt(time / 86400000) + "天前";
+  } else if (time / 2592000000 < 12) {
+    return parseInt(time / 2592000000) + "月前";
+  } else {
+    return parseInt(time / 31536000000) + "年前";
+  }
+};
\ No newline at end of file

src/utils/validator.js

+/*
+  正则表达式与各种校验方法定义文件
+  正则建议：命名按照 reg + 对应的内容的形式命名
+  通过this.$validate.regMobile 就可以调用到对应的转换对象
+*/
+import Vue from "vue";
+
+// 正则表达式定义
+const validate = {
+  // 手机号
+  regMobile: /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/,
+  // 邮箱
+  regEmail: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
+};
+
+Vue.prototype.$validate = validate;
\ No newline at end of file

src/views/Home.vue

+<template>
+  <div class="home-box">
+    <div class="home-content">
+      <iframe
+        class="bg-box"
+        src="http://www.thingjs.com/s/3074b56ba74709e5a0996038?params=105b0f77fd24654d4eebc434e9"
+      ></iframe>
+      <BottomComponent
+        @botNum="botNumT"
+        class="home-content-bot"
+      ></BottomComponent>
+      <transition-group name="el-fade-in-linear">
+        <!-- 头部 -->
+        <TopComponent1
+          key="TopComponent1"
+          v-if="activeType == 0"
+          class="home-content-top"
+        ></TopComponent1>
+        <TopComponent2
+          key="TopComponent2"
+          v-if="activeType == 1"
+          class="home-content-top2"
+        ></TopComponent2>
+        <TopComponent3
+          key="TopComponent3"
+          v-if="activeType == 2"
+          class="home-content-top2"
+        ></TopComponent3>
+        <TopComponent4
+          key="TopComponent4"
+          v-if="activeType == 4"
+          class="home-content-top2"
+        ></TopComponent4>
+        <TopComponent5
+          key="TopComponent5"
+          v-if="activeType == 3"
+          class="home-content-top2"
+        ></TopComponent5>
+        <!-- 左边 -->
+        <LeftComponent1
+          key="LeftComponent1"
+          v-if="activeType == 0"
+          class="home-content-left1"
+        ></LeftComponent1>
+        <LeftComponent2
+          key="LeftComponent2"
+          v-if="activeType == 1"
+          class="home-content-left1"
+        ></LeftComponent2>
+        <LeftComponent3
+          key="LeftComponent3"
+          v-if="activeType == 2"
+          class="home-content-left1"
+        ></LeftComponent3>
+        <LeftComponent4
+          key="LeftComponent4"
+          v-if="activeType == 4"
+          class="home-content-left1"
+        ></LeftComponent4>
+        <LeftComponent5
+          key="LeftComponent5"
+          v-if="activeType == 3"
+          class="home-content-left1"
+        ></LeftComponent5>
+        <!-- 右边 -->
+        <RightComponent1
+          key="RightComponent1"
+          v-if="activeType == 0"
+          class="home-content-right1"
+        ></RightComponent1>
+        <RightComponent2
+          key="RightComponent2"
+          v-if="activeType == 1"
+          class="home-content-right1"
+        ></RightComponent2>
+        <RightComponent3
+          key="RightComponent3"
+          v-if="activeType == 2"
+          class="home-content-right1"
+        ></RightComponent3>
+        <RightComponent4
+          key="RightComponent4"
+          v-if="activeType == 4"
+          class="home-content-right1"
+        ></RightComponent4>
+        <RightComponent5
+          key="RightComponent5"
+          v-if="activeType == 3"
+          class="home-content-right1"
+        ></RightComponent5>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomComponent from "./bottom-component";
+import TopComponent1 from "./top/top-component1";
+import TopComponent2 from "./top/top-component2";
+import TopComponent3 from "./top/top-component3";
+import TopComponent4 from "./top/top-component4";
+import TopComponent5 from "./top/top-component5";
+
+import LeftComponent1 from "./left1/left-component1";
+import LeftComponent2 from "./left2/left-component2";
+import LeftComponent3 from "./left3/left-component3";
+import LeftComponent4 from "./left4/left-component4";
+import LeftComponent5 from "./left5/left-component5";
+
+import RightComponent1 from "./right1/right-component1";
+import RightComponent2 from "./right2/right-component2";
+import RightComponent3 from "./right3/right-component3";
+import RightComponent4 from "./right4/right-component4";
+import RightComponent5 from "./right5/right-component5";
+
+export default {
+  components: {
+    BottomComponent,
+    TopComponent1,
+    TopComponent2,
+    TopComponent3,
+    TopComponent4,
+    TopComponent5,
+
+    LeftComponent1,
+    LeftComponent2,
+    LeftComponent3,
+    LeftComponent4,
+    LeftComponent5,
+
+    RightComponent1,
+    RightComponent2,
+    RightComponent3,
+    RightComponent4,
+    RightComponent5,
+  },
+  name: "home",
+  data() {
+    return {
+      activeType: 0,
+    };
+  },
+  methods: {
+    botNumT(type) {
+      this.activeType = type;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.home-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .bg-box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .home-content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    .home-content-top {
+      position: absolute;
+      max-width: 1600px;
+      min-width: 1360px;
+      width: 50%;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .home-content-top2 {
+      position: absolute;
+      max-width: 800px;
+      min-width: 660px;
+      width: 50%;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .home-content-bot {
+      position: absolute;
+      max-width: 1400px;
+      min-width: 1160px;
+      width: 50%;
+      bottom: 10%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .home-content-left1 {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .home-content-right1 {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
+</style>

src/views/bottom-component.vue

+<template>
+  <div class="bottom-components">
+    <div class="bottom-item" @click="changeType(0)">
+      <div class="bottom-bg8" :class="activeNum == 0 ? 'active-bg8' : ''"></div>
+      <p :class="activeNum == 0 ? 'p1' : ''">总览</p>
+    </div>
+    <div class="bottom-item" @click="changeType(1)">
+      <div class="bottom-bg1" :class="activeNum == 1 ? 'active-bg1' : ''"></div>
+      <p :class="activeNum == 1 ? 'p1' : ''">出租车</p>
+    </div>
+    <div class="bottom-item" @click="changeType(2)">
+      <div class="bottom-bg2" :class="activeNum == 2 ? 'active-bg2' : ''"></div>
+      <p :class="activeNum == 2 ? 'p1' : ''">公交车</p>
+    </div>
+    <div class="bottom-item" @click="changeType(3)">
+      <div class="bottom-bg3" :class="activeNum == 3 ? 'active-bg3' : ''"></div>
+      <p :class="activeNum == 3 ? 'p1' : ''">BRT巴士</p>
+    </div>
+    <div class="bottom-item" @click="changeType(4)">
+      <div class="bottom-bg5" :class="activeNum == 4 ? 'active-bg5' : ''"></div>
+      <p :class="activeNum == 4 ? 'p1' : ''">自行车</p>
+    </div>
+    <!-- <div class="bottom-item" @click="changeType(5)">
+      <div class="bottom-bg5" :class="activeNum == 5 ? 'active-bg5' : ''"></div>
+      <p :class="activeNum == 5 ? 'p1' : ''">应急管理</p>
+    </div>
+    <div class="bottom-item" @click="changeType(6)">
+      <div class="bottom-bg6" :class="activeNum == 6 ? 'active-bg6' : ''"></div>
+      <p :class="activeNum == 6 ? 'p1' : ''">统计决策分析</p>
+    </div>
+    <div class="bottom-item" @click="changeType(7)">
+      <div class="bottom-bg7" :class="activeNum == 7 ? 'active-bg7' : ''"></div>
+      <p :class="activeNum == 7 ? 'p1' : ''">服务质量考核与发展</p>
+    </div>
+    <div class="bottom-item" @click="changeType(8)">
+      <div class="bottom-bg8" :class="activeNum == 8 ? 'active-bg8' : ''"></div>
+      <p :class="activeNum == 8 ? 'p1' : ''">交通运行监测</p>
+    </div> -->
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeNum: 0,
+    };
+  },
+  methods: {
+    changeType(num) {
+      this.activeNum = num;
+      this.$emit("botNum", this.activeNum);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.bottom-components {
+  display: flex;
+  justify-content: space-between;
+  .bottom-item {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 180px;
+    height: 80px;
+    cursor: pointer;
+    .active-bg1 {
+      background-image: url("./../assets/images/jt_41.png") !important;
+    }
+    .active-bg2 {
+      background-image: url("./../assets/images/jt_38.png") !important;
+    }
+    .active-bg3 {
+      background-image: url("./../assets/images/jt_36.png") !important;
+    }
+    .active-bg4 {
+      background-image: url("./../assets/images/3_56.png") !important;
+    }
+    .active-bg5 {
+      background-image: url("./../assets/images/jt_44.png") !important;
+    }
+    .active-bg6 {
+      background-image: url("./../assets/images/3_50.png") !important;
+    }
+    .active-bg7 {
+      background-image: url("./../assets/images/3_52.png") !important;
+    }
+    .active-bg8 {
+      background-image: url("./../assets/images/3_54.png") !important;
+    }
+    .bottom-bg1 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_22.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg2 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_10.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg3 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_12.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg4 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_25.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg5 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_07.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg6 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_15.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg7 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_17.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .bottom-bg8 {
+      width: 80px;
+      height: 80px;
+      background-image: url("./../assets/images/jt_19.png");
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    p {
+      color: #37dbfe;
+      font-size: 16px;
+      width: 100%;
+      text-align: center;
+    }
+    .p1 {
+      color: rgba(220, 176, 39, 1) !important;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/left1/left-component1.vue

+<template>
+  <div class="left-component1">
+    <TianQi></TianQi>
+    <h3 class="list-title">全市交通运行情况</h3>
+    <div class="total-list">
+      <div class="list-item">
+        <div>
+          <p class="item-p"><i class="item-bg1"></i>公交车</p>
+          <div class="list-item-box">
+            <div class="box-num">3</div>
+            <div class="box-num">0</div>
+            <div class="box-num">.</div>
+            <div class="box-num">2</div>
+            <div class="box-num">0</div>
+            <div class="box-final">KM/L</div>
+          </div>
+        </div>
+        <div class="echart-box">
+          <Left1Echart1></Left1Echart1>
+        </div>
+        <div class="total-static-box">
+          <span>总数 <em>348</em></span>
+          <span>在线 <em>266</em></span>
+          <span>离线 <em>10</em></span>
+        </div>
+      </div>
+      <div class="list-item">
+        <div>
+          <p class="item-p"><i class="item-bg2"></i>出租车</p>
+          <div class="list-item-box">
+            <div class="box-num">4</div>
+            <div class="box-num">1</div>
+            <div class="box-num">.</div>
+            <div class="box-num">1</div>
+            <div class="box-num">6</div>
+            <div class="box-final">KM/L</div>
+          </div>
+        </div>
+        <div class="echart-box">
+          <Left1Echart2></Left1Echart2>
+        </div>
+        <div class="total-static-box">
+          <span>总数 <em>348</em></span>
+          <span>在线 <em>266</em></span>
+          <span>离线 <em>10</em></span>
+        </div>
+      </div>
+    </div>
+    <h3 class="list-title" style="margin-top: 32px">交通拥堵情况</h3>
+    <div class="total-list">
+      <div class="list-item">
+        <div>
+          <p class="item-p">当前交通拥堵指数</p>
+          <div class="list-item-box">
+            <div class="box-num">2</div>
+            <div class="box-num">0</div>
+            <div class="box-num">.</div>
+            <div class="box-num">5</div>
+            <div class="box-num">1</div>
+            <div class="box-final">KM/L</div>
+          </div>
+        </div>
+        <div class="echart-box">
+          <Left1Echart3></Left1Echart3>
+        </div>
+        <div class="total-static-box">
+          <span>总数 <em>348</em></span>
+          <span>在线 <em>266</em></span>
+          <span>离线 <em>10</em></span>
+        </div>
+      </div>
+      <div class="list-item">
+        <div>
+          <p class="item-p">上周交通拥堵指数</p>
+          <div class="list-item-box">
+            <div class="box-num">1</div>
+            <div class="box-num">0</div>
+            <div class="box-num">.</div>
+            <div class="box-num">2</div>
+            <div class="box-num">1</div>
+            <div class="box-final">KM/L</div>
+          </div>
+        </div>
+        <div class="echart-box">
+          <Left1Echart4></Left1Echart4>
+        </div>
+        <div class="total-static-box">
+          <span>总数 <em>348</em></span>
+          <span>在线 <em>266</em></span>
+          <span>离线 <em>10</em></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Left1Echart1 from "./left1-echarts1";
+import Left1Echart2 from "./left1-echarts2";
+import Left1Echart3 from "./left1-echarts3";
+import Left1Echart4 from "./left1-echarts4";
+export default {
+  components: {
+    Left1Echart1,
+    Left1Echart2,
+    Left1Echart3,
+    Left1Echart4,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+.left-component1 {
+  width: 600px;
+  height: 960px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
+  color: #fff;
+  padding: 16px;
+  .list-title {
+    font-size: 18px;
+    color: #47f1f0;
+  }
+  .total-list {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    .list-item {
+      .item-p {
+        color: #47f1f0;
+        margin: 16px 0;
+        .item-bg1 {
+          width: 16px;
+          height: 16px;
+          display: inline-block;
+          background-image: url("./../../assets/images/兰州_13.png");
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin-right: 8px;
+        }
+        .item-bg2 {
+          width: 16px;
+          height: 16px;
+          display: inline-block;
+          background-image: url("./../../assets/images/兰州_10.png");
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin-right: 8px;
+        }
+      }
+
+      .list-item-box {
+        display: flex;
+        margin: 16px 0;
+        .box-num {
+          font-size: 18px;
+          color: #47f1f0;
+          width: 32px;
+          height: 32px;
+          line-height: 32px;
+          text-align: center;
+          display: inline-block;
+          background-image: url("./../../assets/images/兰州_24.png");
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin: 0 4px;
+        }
+        .box-final {
+          height: 32px;
+          line-height: 40px;
+          overflow: hidden;
+        }
+      }
+
+      .echart-box {
+        height: 250px;
+        width: 250px;
+        margin: auto;
+      }
+      .total-static-box {
+        display: flex;
+        justify-content: space-around;
+        em {
+          font-size: 18px;
+        }
+        span:nth-child(1) {
+          color: #0fdb0f;
+        }
+        span:nth-child(2) {
+          color: #37dbfe;
+        }
+        span:nth-child(3) {
+          color: #f4bd39;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/left1/left1-echarts1.vue

+<template>
+  <!-- 公交车 -->
+  <div class="left1-echarts1" id="left1-echarts1"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        grid: {
+          top: "0%",
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
+        tooltip: {},
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [30, 70],
+            center: ["50%", "50%"],
+            // roseType: "area",
+            label: {
+            },
+            itemStyle: {
+              borderRadius: 8,
+            },
+            data: [
+              { value: 9120, name: "在线" },
+              { value: 1140, name: "离线" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("left1-echarts1"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left1-echarts1 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left1/left1-echarts2.vue

+<template>
+  <!-- 公交车 -->
+  <div class="left1-echarts2" id="left1-echarts2"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        grid: {
+          top: "0%",
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
+        tooltip: {},
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [30, 70],
+            center: ["50%", "50%"],
+            // roseType: "area",
+            label: {
+            },
+            itemStyle: {
+              borderRadius: 8,
+            },
+            data: [
+              { value: 9250, name: "在线" },
+              { value: 4560, name: "离线" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("left1-echarts2"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left1-echarts2 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left1/left1-echarts3.vue

+<template>
+  <!-- 公交车 -->
+  <div class="left1-echarts3" id="left1-echarts3"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        grid: {
+          top: "0%",
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
+        tooltip: {},
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [30, 70],
+            center: ["50%", "50%"],
+            // roseType: "area",
+            label: {
+            },
+            itemStyle: {
+              borderRadius: 8,
+            },
+            data: [
+              { value: 9120, name: "在线" },
+              { value: 1540, name: "离线" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("left1-echarts3"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left1-echarts3 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left1/left1-echarts4.vue

+<template>
+  <!-- 公交车 -->
+  <div class="left1-echarts4" id="left1-echarts4"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        grid: {
+          top: "0%",
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        color:['#37dbfe',"#f4bd39","#f39800","#e5004f"],
+        tooltip: {},
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [30, 70],
+            center: ["50%", "50%"],
+            // roseType: "area",
+            label: {
+            },
+            itemStyle: {
+              borderRadius: 8,
+            },
+            data: [
+              { value: 1190, name: "在线" },
+              { value: 1120, name: "离线" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("left1-echarts4"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left1-echarts4 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left2/left-component2.vue

+<template>
+  <div class="left-component2">
+    <TianQi></TianQi>
+    <h3 class="list-title">出租车在线情况</h3>
+    <div class="box-list">
+      <div class="box-item" v-for="(item, index) in 6" :key="index">
+        <img src="./../../assets/images/兰州_21.png" class="img" alt="" />
+        <div class="compony">兰州交通出租汽车有限公司</div>
+        <div class="bl">
+          <p>94.5%</p>
+          <p>在线占比</p>
+        </div>
+        <div class="total">
+          <img src="./../../assets/images/left2-icon2.png" alt="" />
+          <div>
+            <p>873</p>
+            <p>总车数</p>
+          </div>
+        </div>
+        <div class="total">
+          <img src="./../../assets/images/left2-icon1.png" alt="" />
+          <div>
+            <p>873</p>
+            <p>离线数</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="left2-box">
+      <div class="left2-box-l">
+        <h3 class="list-title" style="margin-top: 32px">运营里程数</h3>
+        <div class="echart-box">
+          <Left2Echart></Left2Echart>
+        </div>
+      </div>
+      <div class="left2-box-r">
+        <h3 class="list-title" style="margin-top: 32px">数据分析</h3>
+        <div class="tree-box">
+          <h4 style="width: 100%; margin: 16px 0">早晚高峰平级等待时间</h4>
+          <div class="tree-list">
+            <div class="tree-item">
+              <div class="name">城关区</div>
+              <img src="./../../assets/images/left2-1.png" alt="" />
+              <div class="info">
+                <p>全天&nbsp;<strong>98.30</strong>&nbsp;分钟</p>
+                <p>早高峰&nbsp;<strong>18.60</strong>&nbsp;分钟</p>
+                <p>晚高峰&nbsp;<strong>57.97</strong>&nbsp;分钟</p>
+              </div>
+            </div>
+            <div class="tree-item">
+              <div class="name">七里河区</div>
+              <img src="./../../assets/images/left2-1.png" alt="" />
+              <div class="info">
+                <p>全天&nbsp;<strong>98.30</strong>&nbsp;分钟</p>
+                <p>早高峰&nbsp;<strong>18.60</strong>&nbsp;分钟</p>
+                <p>晚高峰&nbsp;<strong>57.97</strong>&nbsp;分钟</p>
+              </div>
+            </div>
+            <div class="tree-item">
+              <div class="name">安宁区</div>
+              <img src="./../../assets/images/left2-1.png" alt="" />
+              <div class="info">
+                <p>全天&nbsp;<strong>98.30</strong>&nbsp;分钟</p>
+                <p>早高峰&nbsp;<strong>18.60</strong>&nbsp;分钟</p>
+                <p>晚高峰&nbsp;<strong>57.97</strong>&nbsp;分钟</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Left2Echart from "./left2-echarts1";
+export default {
+  components: {
+    Left2Echart,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+.left-component2 {
+  width: 600px;
+  height: 960px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
+  color: #fff;
+  padding: 16px;
+  .list-title {
+    font-size: 18px;
+    color: #47f1f0;
+  }
+  .box-list {
+    .box-item {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      .img {
+        width: 50px;
+      }
+      .compony {
+        border: 1px solid #47f1f0;
+        padding: 2px;
+        color: #47f1f0;
+        margin: 0 16px;
+      }
+      .bl {
+        p {
+          text-align: center;
+        }
+        p:nth-child(1) {
+          color: #47f1f0;
+          font-size: 18px;
+        }
+      }
+      .total {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+        > img {
+          width: 30px;
+          height: 30px;
+          margin-right: 8px;
+        }
+        > div {
+          p {
+            text-align: left;
+          }
+          p:nth-child(1) {
+            color: #47f1f0;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+  .left2-box {
+    display: flex;
+    .left2-box-l {
+      width: 50%;
+      .echart-box {
+        height: 300px;
+        margin-top: 16px;
+      }
+    }
+    .left2-box-r {
+      width: 50%;
+      .tree-box {
+        .tree-list {
+          .tree-item {
+            display: flex;
+            align-items: center;
+            .name {
+              color: #47f1f0;
+              font-size: 18px;
+            }
+            .info {
+              > p {
+                line-height: 26px;
+              }
+              strong {
+                color: #47f1f0;
+              }
+            }
+            > img {
+              margin: 0 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/left2/left2-echarts1.vue

+<template>
+  <!-- 公交车 -->
+  <div class="left2-echarts1" id="left2-echarts1"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        legend: {
+          left: "center",
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        color: ["#37dbfe", "#f4bd39", "#f39800", "#e5004f"],
+        tooltip: {},
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+            name: "总里程数",
+          },
+          {
+            data: [100, 150, 100, 60, 20, 11, 60],
+            type: "bar",
+            name: "运营里程数",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("left2-echarts1"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left2-echarts1 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left3/left-component3.vue

+<template>
+  <div class="left-component3">
+    <TianQi></TianQi>
+    <h3 class="list-title">公交站点覆盖情况</h3>
+    <div class="content-list">
+      <div class="box-list">
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+        <div class="box-item">
+          <img src="./../../assets/images/兰州_19.png" class="img" alt="" />
+          <div class="compony">公交站点500米覆盖</div>
+        </div>
+      </div>
+      <div class="right-list">
+        <div class="total">
+          <div>
+            <p>发布时间：2021-01-07</p>
+            <p>公交站点500米覆盖率</p>
+          </div>
+          <div class="picbox">94.5%</div>
+        </div>
+        <div class="echarts-box">
+          <h3 class="list-title">历史走势图</h3>
+          <div class="echarts"><Right3Echarts1></Right3Echarts1></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Right3Echarts1 from "./right3-echarts1";
+export default {
+  components: { Right3Echarts1 },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+.left-component3 {
+  width: 600px;
+  height: 960px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
+  color: #fff;
+  padding: 16px;
+  .list-title {
+    font-size: 18px;
+    color: #47f1f0;
+  }
+  .box-list {
+    .box-item {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      .img {
+        width: 50px;
+      }
+      .compony {
+        padding: 2px;
+        margin: 0 16px;
+        font-size: 16px;
+      }
+    }
+  }
+  .content-list {
+    display: flex;
+    .right-list {
+      margin-left: 32px;
+      .total {
+        display: flex;
+        align-items: center;
+        .picbox {
+          width: 100px;
+          height: 100px;
+          text-align: center;
+          line-height: 100px;
+          font-size: 22px;
+          color: #47f1f0;
+          background: url("./../../assets/images/gjc_54.png") no-repeat;
+          background-size: 100% 100%;
+          border-radius: 50%;
+          margin-left: 16px;
+        }
+      }
+      .echarts-box {
+        margin-top: 32px;
+        .echarts {
+          height: 200px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/left3/right3-echarts1.vue

+<template>
+  <div class="right3-echarts1" id="right3-echarts1"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip: {},
+        color: ["#37dbfe", "#fef737", "#0ce094"],
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["08", "09", "10", "11", "12"],
+          axisLabel: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisLabel: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+        },
+        series: [
+          {
+            data: [82, 92, 62, 94, 29],
+            type: "line",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("right3-echarts1"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right3-echarts1 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left4/left-component4.vue

+<template>
+  <div class="left-component4">
+    <TianQi></TianQi>
+    <h3 class="list-title">
+      <span>停车最多站点</span>
+
+      <span class="title-change">
+        <span class="span-active">当日</span>
+        <span>昨日</span>
+      </span>
+
+      <span class="title-tips">已借/<em>已还</em></span>
+    </h3>
+    <div class="content-list">
+      <div class="list-table">
+        <div class="table-content">
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+          <div class="table-line">
+            <span><em>44</em>辆</span>
+            <span>当日</span>
+            <span><em>10/</em><em style="color: #f2c232">134</em>辆</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <h3 class="list-title" style="margin: 32px 0">
+        <span>用户骑车分析</span>
+      </h3>
+      <img src="./../../assets/images/zxc_125.png" style="width: 100%" alt="" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+.left-component4 {
+  width: 600px;
+  height: 960px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
+  color: #fff;
+  padding: 16px;
+  .list-title {
+    font-size: 18px;
+    color: #47f1f0;
+    display: flex;
+    justify-content: space-between;
+    .title-change {
+      span {
+        cursor: pointer;
+        color: #fff;
+      }
+      .span-active {
+        padding: 2px 16px;
+        border: 1px solid #47f1f0;
+        color: #47f1f0;
+        border-radius: 4px;
+        margin-right: 8px;
+      }
+    }
+    .title-tips {
+      em {
+        color: #f2c232;
+      }
+    }
+  }
+  .content-list {
+    margin-top: 32px;
+    .list-table {
+      .table-title {
+        span {
+          display: inline-block;
+          width: 25%;
+          text-align: center;
+          color: #2fa7eb;
+        }
+      }
+      .table-conetent {
+      }
+      .table-line {
+        background: linear-gradient(
+          to bottom,
+          rgba(16, 55, 98, 0.8),
+          rgba(69, 97, 128, 0.8)
+        );
+        padding: 8px 0;
+        margin: 8px 0;
+        span {
+          display: inline-block;
+          width: 33%;
+          padding-left: 32px;
+          em {
+            color: #47f1f0;
+          }
+        }
+        span:nth-child(1) {
+          color: #f9c741;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/left5/left-component5.vue

+<template>
+  <div class="left-component5">
+    <TianQi></TianQi>
+    <div class="right-box">
+      <h3 class="list-title">日里程统计</h3>
+      <div class="echarts1">
+        <Left5Echart1></Left5Echart1>
+      </div>
+    </div>
+    <div class="right-box">
+      <h3 class="list-title">月里程数</h3>
+      <div class="echarts2">
+        <Left5Echart2></Left5Echart2>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Left5Echart1 from "./left5-echarts1";
+import Left5Echart2 from "./left5-echarts2";
+export default {
+  components: { Left5Echart1, Left5Echart2 },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss">
+.left-component5 {
+  width: 600px;
+  height: 960px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
+  color: #fff;
+  padding: 16px;
+  .list-title {
+    font-size: 18px;
+    color: #47f1f0;
+    margin-bottom: 16px;
+    .short-title {
+      font-size: 10px;
+      color: #ffffff;
+      float: right;
+    }
+  }
+  .echarts1 {
+    height: 300px;
+  }
+  .echarts2 {
+    height: 300px;
+  }
+}
+</style>
\ No newline at end of file

src/views/left5/left5-echarts1.vue

+<template>
+  <div class="right5-echarts1" id="right5-echarts1"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip: {},
+        color: ["#37dbfe", "#fef737", "#0ce094"],
+        grid: {
+          top: "10%",
+          left: "10%",
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "08:00",
+            "09:00",
+            "10:00",
+            "11:00",
+            "12:00",
+            "13:00",
+            "14:00",
+            "15:00",
+            "16:00",
+            "17:00",
+            "18:00",
+            "19:00",
+          ],
+          axisLabel: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisLabel: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+        },
+        series: [
+          {
+            data: [82, 92, 62, 94, 29, 62, 94, 29, 29, 62, 94, 29],
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+              color: "#ffffff",
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#01e5eb" },
+                { offset: 0.5, color: "#0eb3e1" },
+                { offset: 1, color: "#1a86d8" },
+              ]),
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("right5-echarts1"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right5-echarts1 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/left5/left5-echarts2.vue

+<template>
+  <div class="right5-echarts2" id="right5-echarts2"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip: {},
+        color: ["#37dbfe", "#fef737", "#0ce094"],
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["08", "09", "10", "11", "12"],
+          axisLabel: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+          axisLabel: {
+            lineStyle: {
+              color: "#ffffff",
+            },
+          },
+        },
+        series: [
+          {
+            data: [82, 92, 62, 94, 29],
+            type: "line",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("right5-echarts2"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right5-echarts2 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/right1/right1-echarts1.vue

+<template>
+  <div class="right1-echarts1" id="right1-echarts1"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip:{},
+        legend: {
+          left: "center",
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        color: ["#37dbfe", "#fef737", "#0ce094"],
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["08", "09", "10", "11", "12"],
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisLine: {
+            // show: false,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [82, 92, 1, 94, 29],
+            type: "line",
+            name: "今日",
+          },
+          {
+            data: [82, 32, 11, 4, 12],
+            type: "line",
+            name: "昨日",
+          },
+          {
+            data: [12, 52, 31, 24, 32],
+            type: "line",
+            name: "上周",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("right1-echarts1"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right1-echarts1 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file

src/views/right1/right1-echarts2.vue

+<template>
+  <div class="right1-echarts2" id="right1-echarts2"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  data() {
+    return {
+      chart: null,
+      option: {
+        tooltip: {},
+        legend: {
+          left: "center",
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        color: ["#37dbfe", "#fef737", "#0ce094"],
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "10%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["08", "09", "10", "11", "12"],
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisLine: {
+            // show: false,
+            lineStyle: {
+              color: "#226b84",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [82, 92, 1, 94, 29],
+            type: "line",
+            name: "今日",
+          },
+          {
+            data: [82, 32, 11, 4, 12],
+            type: "line",
+            name: "昨日",
+          },
+          {
+            data: [12, 52, 31, 24, 32],
+            type: "line",
+            name: "上周",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById("right1-echarts2"));
+      this.chart.setOption(this.option);
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right1-echarts2 {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+</style>
\ No newline at end of file