组件

.gitignore

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

README.md

+# text
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

mock/api.js

+import Mock from 'mockjs'
+Mock.mock('/api/user/login', {
+    "status": 0,
+    "data": {
+        "id|0-99": 0,
+        "username": "@cname",
+        "email": "10086@163.com",
+        "phone|1-9": 10086,
+        "role": 0,
+        "createTime": 12790348512000,
+        "ypdateTime": 12790348512000
+    }
+})
\ No newline at end of file

package.json

+{
+  "name": "text",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --mode=development",
+    "text": "vue-cli-service serve --mode=production",
+    "build": "vue-cli-service build --mode=production"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "core-js": "^3.6.5",
+    "echarts": "^4.8.0",
+    "element-ui": "^2.13.2",
+    "vue": "^2.6.11",
+    "vue-axios": "^2.1.5",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-router": "~4.4.0",
+    "@vue/cli-plugin-vuex": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "less": "^3.11.3",
+    "less-loader": "^6.1.0",
+    "mockjs": "^1.1.0",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/imgs/loading-svg/loading-balls.svg

+<svg class="icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path transform="translate(-8 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
+    <animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(2 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
+    <animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(12 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
+    <animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(24 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
+    <animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+</svg>

public/imgs/loading-svg/loading-bars.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#ee7a23">
+  <path transform="translate(2)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(8)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(14)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
+  </path>
+  <path transform="translate(20)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
+  </path>
+  <path transform="translate(26)" d="M0 12 V20 H4 V12z">
+    <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
+  </path>
+</svg>

public/imgs/loading-svg/loading-bubbles.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#ee7a23">
+  <circle transform="translate(8 0)" cx="0" cy="16" r="0">
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="translate(16 0)" cx="0" cy="16" r="0">
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="translate(24 0)" cx="0" cy="16" r="0">
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+</svg>

public/imgs/loading-svg/loading-cubes.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path transform="translate(-8 0)" d="M0 12 V20 H8 V12z"> 
+    <animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(2 0)" d="M0 12 V20 H8 V12z"> 
+    <animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(12 0)" d="M0 12 V20 H8 V12z"> 
+    <animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+  <path transform="translate(24 0)" d="M0 12 V20 H8 V12z"> 
+    <animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
+  </path>
+</svg>

public/imgs/loading-svg/loading-cylon-red.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#f20" preserveAspectRatio="none">
+  <path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.5" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.25" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.2s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+</svg>

public/imgs/loading-svg/loading-cylon.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path transform="translate(0 0)" d="M0 12 V20 H4 V12z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.5" transform="translate(0 0)" d="M0 12 V20 H4 V12z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0.1s" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.25" transform="translate(0 0)" d="M0 12 V20 H4 V12z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0.2s" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+</svg>

public/imgs/loading-svg/loading-spin.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
+  <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
+    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
+  </path>
+</svg>

public/imgs/loading-svg/loading-spinning-bubbles.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#dd7479">
+  <circle cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
+    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </circle>
+</svg>

public/imgs/loading-svg/loading-spokes.svg

+<svg id="loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(0 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(45 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.125s"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(90 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.25s"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(135 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.375s"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(180 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.5s"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(225 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.675s"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(270 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.75s"/>
+  </path>
+  <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(315 16 16)">
+    <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.875s"/>
+  </path>
+</svg>

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<template>
+  <div id="app">
+    <!-- <div id="nav">
+      <router-link to="/">Home</router-link> |
+    </div>-->
+    <router-view />
+  </div>
+</template>
+
+<script>
+import storage from "./storage";
+// import axios from 'axios'
+
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      res:{}
+    };
+  },
+  mounted() {
+    this.axios.get('/user/login').then(res=>{
+      this.res=res
+    })
+  }
+};
+</script>
+
+<style lang="scss">
+@import './assets/scss/reset.scss';
+@import './assets/scss/config.scss';
+</style>

src/assets/scss/base.scss

+.container {
+    width: 1226px;
+    margin: auto;
+}
\ No newline at end of file

src/assets/scss/config.scss

+/*
+  样式规范表
+*/
+$min-width:1226px;  //容器安全区域宽度
+
+// 常规字体大小设置
+$fontA:       80px; //产品站大标题
+$fontB:       38px; //产品站标题
+$fontC:       28px; //导航标题
+$fontD:       26px; //产品站副标题
+$fontE:       24px; 
+$fontF:       22px;
+$fontG:       20px; //用在较为重要的文字、操作按钮
+$fontH:       18px; //用于大多数文字
+$fontI:       16px; //用于辅助性文字
+$fontJ:       14px; //用于一般文字
+$fontK:       12px; //系统默认大小
+
+// 常规配色设置
+$colorA:      #FF6600 !default; //用于需要突出和强调的文字、按钮和icon
+$colorB:      #333333 !default; //用于较为重要的文字信息、内页标题等
+$colorC:      #666666 !default; //用于普通段落信息 引导词
+$colorD:      #999999 !default; //用于辅助、次要的文字信息、普通按钮的描边
+$colorE:      #cccccc !default; //用于特别弱的文字
+$colorF:      #d7d7d7 !default; //用于列表分割线、标签秒变
+$colorG:      #ffffff !default; //用于导航栏文字、按钮文字、白色背景
+$colorH:      #e5e5e5 !default; //用于上下模块分割线
+$colorI:      #000000 !default; //纯黑色背景，用于遮罩层
+$colorJ:      #F5F5F5 !default; //弹框标题背景色
+$colorK:      #FFFAF7 !default; //订单标题背景色
\ No newline at end of file

src/assets/scss/mixin.scss

+@mixin flex ($hov:space-between,$col:center){
+    display: flex;
+    justify-content: $hov;
+    align-items: $col;
+}
+@mixin bgImg($w:0,$h:0,$img:'',$size:centain) {
+    display: inline-block;
+    width: $w;
+    height: $h;
+    background: url($img) no-repeat center;
+    background-size: $size;
+}
\ No newline at end of file

src/assets/scss/reset.scss

+body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select{
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+html,body{
+  font-family:Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
+  color: #333333;
+  background-color: #ffffff;
+  min-width: 1226px;
+  font-size: 12px;
+}
+a{
+  text-decoration: none;
+}
+ul,li{
+  list-style: none;
+}
+input{
+  font: normal;
+}
+input:focus,a:focus{
+  outline: none;
+}
\ No newline at end of file

src/components/Canvas.vue

+<template>
+  <div>
+    <h3>{{title}}</h3>
+    <canvas id="canvas" width="200px" height="200px"></canvas>
+  </div>
+</template>
+
+<script>
+let canvas;
+let ctx;
+let r;
+export default {
+  data() {
+    return {
+      title:"时钟",
+      timer: null,
+      width: null,
+      height: null,
+      canvas,
+      ctx,
+      r,
+      rem: 0
+    };
+  },
+  mounted() {
+    this.initCanvas();
+    this.timer = setInterval(() => {
+      this.draw();
+    }, 1000);
+    // 当调整窗口大小时重绘canvas;
+    window.onresize = () => {
+      this.initCanvas();
+      this.timer = setInterval(() => {
+        this.draw();
+      }, 1000);
+    };
+  },
+  methods: {
+    initCanvas() {
+      console.log("初始化canvas");
+      this.canvas = document.getElementById("canvas");
+      this.ctx = this.canvas.getContext("2d");
+      this.width = this.ctx.canvas.width;
+      this.height = this.ctx.canvas.height;
+      this.r = this.canvas.width / 2;
+      this.rem = this.width / 200;
+    },
+    drawSmile() {
+      this.ctx.save();
+      this.ctx.translate(this.r, this.r);
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 6 * this.rem;
+      this.ctx.arc(0, 0, this.r - this.ctx.lineWidth / 2, 0, 2 * Math.PI, false); // 绘制
+      // this.ctx.moveTo(110, 75);
+      // this.ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
+      // this.ctx.moveTo(65, 65);
+      // this.ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
+      // this.ctx.moveTo(95, 65);
+      // this.ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
+      this.ctx.stroke();
+      var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
+      this.ctx.font = 16 * this.rem + "px Arial";
+      this.ctx.textAlign = "center";
+      this.ctx.textBaseline = "middle";
+      hourNumber.forEach((number, i) => {
+        var rad = ((2 * Math.PI) / 12) * i;
+        var x = Math.cos(rad) * (this.r - 24 * this.rem);
+        var y = Math.sin(rad) * (this.r - 24 * this.rem);
+        this.ctx.fillText(number, x, y);
+      });
+      for (let i = 0; i < 60; i++) {
+        var rad = ((2 * Math.PI) / 60) * i;
+        var x = Math.cos(rad) * (this.r - 10 * this.rem);
+        var y = Math.sin(rad) * (this.r - 10 * this.rem);
+        this.ctx.beginPath();
+        this.ctx.arc(x, y, 1.5 * this.rem, 0, 2 * Math.PI, false);
+        if (i % 5 != 0) {
+          this.ctx.fillStyle = "#aaa";
+        } else {
+          this.ctx.fillStyle = "#222";
+        }
+        this.ctx.fill();
+      }
+    },
+    drawHour(hour, minute) {
+      this.ctx.save();
+      this.ctx.beginPath();
+      let rad = ((2 * Math.PI) / 12) * hour;
+      let mrad = ((2 * Math.PI) / 12 / 60) * minute;
+      this.ctx.rotate(rad + mrad);
+      this.ctx.lineWidth = 6 * this.rem;
+      this.ctx.lineCap = "round";
+      this.ctx.moveTo(0, 10 * this.rem);
+      this.ctx.lineTo(0, -this.r / 2);
+      this.ctx.stroke();
+      this.ctx.restore();
+    },
+    drawMinute(minute, second) {
+      this.ctx.save();
+      this.ctx.beginPath();
+      let rad = ((2 * Math.PI) / 60) * minute;
+      let mrad = ((2 * Math.PI) / 60 / 60) * second;
+      this.ctx.rotate(rad + mrad);
+      this.ctx.lineWidth = 4 * this.rem;
+      this.ctx.lineCap = "round";
+      this.ctx.moveTo(0, 15 * this.rem);
+      this.ctx.lineTo(0, -this.r + 20 * this.rem);
+      this.ctx.stroke();
+      this.ctx.restore();
+    },
+    drawSecond(second) {
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.fillStyle = "#c14543";
+      let rad = ((2 * Math.PI) / 60) * second;
+      this.ctx.rotate(rad);
+      this.ctx.moveTo(-2 * this.rem, 20 * this.rem);
+      this.ctx.lineTo(2 * this.rem, 20 * this.rem);
+      this.ctx.lineTo(1, -this.r + 15 * this.rem);
+      this.ctx.lineTo(-1, -this.r + 15 * this.rem);
+      this.ctx.fill();
+      this.ctx.restore();
+    },
+    drawDot() {
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.fillStyle = "#F2F6FC";
+      this.ctx.arc(0, 0, 3 * this.rem, 0, 2 * Math.PI, false);
+      this.ctx.fill();
+      this.ctx.restore();
+    },
+    draw() {
+      this.ctx.clearRect(0, 0, this.width, this.height);
+      let now = new Date();
+      let hour = now.getHours();
+      let middle = now.getMinutes();
+      let second = now.getSeconds();
+      this.drawSmile();
+      this.drawHour(hour, middle);
+      this.drawMinute(middle, second);
+      this.drawSecond(second);
+      this.drawDot();
+      this.ctx.restore();
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/ECharts.vue

+<template>
+  <div class="echarts">
+    <h3>{{title}}</h3>
+    <div id="myChart" style="width: 450px;height:300px;"></div>
+    <div id="myChart2" style="width: 450px;height:300px;"></div>
+    <div id="myChart3" style="width: 450px;height:300px;"></div>
+    <div id="myChart4" style="width: 450px;height:300px;"></div>
+    <div id="myChart5" style="width: 450px;height:300px;"></div>
+    <!-- <div id="myChart" :style="{width: '300px', height: '300px'}"></div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: "图表"
+    };
+  },
+  mounted() {
+    this.drawLine();
+    // 当调整窗口大小时重绘canvas;
+    window.onresize = () => {
+      this.drawLine();
+      // this.timer = setInterval(() => {
+      //   this.draw();
+      // }, 1000);
+    };
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("myChart"));
+      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
+      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
+      let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
+      let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
+      // 绘制柱状图图表
+      myChart.setOption({
+        title: {
+          text: "ECharts 入门示例",
+          subtext: "就这样吧", //子标题
+          left: 10, //定位
+          borderColor: "red", //边框颜色
+          borderWidth: 0 //边框宽度
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: {
+              show: true
+            },
+            restore: {
+              show: true
+            },
+            dataZoom: {
+              show: true
+            },
+            saveAsImage: {
+              show: true
+            },
+            magicType: {
+              type: ["line", "bar"]
+            }
+          }
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["销量"]
+        },
+        xAxis: {
+          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "销量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ]
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }]
+            }
+          }
+        ]
+      });
+      // 绘制折线图图表
+      myChart2.setOption({
+        title: {
+          text: "ECharts 入门示例",
+          subtext: "就这样吧", //子标题
+          left: 10, //定位
+          borderColor: "red", //边框颜色
+          borderWidth: 0 //边框宽度
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: {
+              show: true
+            },
+            restore: {
+              show: true
+            },
+            dataZoom: {
+              show: true
+            },
+            saveAsImage: {
+              show: true
+            },
+            magicType: {
+              type: ["line", "bar"]
+            }
+          }
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["销量"]
+        },
+        xAxis: {
+          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "销量",
+            type: "line",
+            data: [5, 20, 36, 10, 10, 20],
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ]
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }]
+            }
+          }
+        ]
+      });
+      // 绘制饼图图表
+      myChart3.setOption({
+        title: {
+          text: "ECharts 饼图",
+          subtext: "就这样吧", //子标题
+          x: "center"
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: {
+              show: true
+            },
+            restore: {
+              show: true
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a}<br/>{b}:{c}({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
+        },
+        series: [
+          {
+            name: "来源",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "60%"],
+            data: [
+              { value: 335, name: "直接访问" },
+              { value: 310, name: "邮件营销" },
+              { value: 234, name: "联盟广告" },
+              { value: 153, name: "视频广告" },
+              { value: 1532, name: "搜索引擎" }
+            ]
+          }
+        ]
+      });
+      // 绘制仪表盘图表
+      myChart4.setOption({
+        title: {
+          text: "ECharts 仪表盘",
+          x: "center"
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: {
+              show: true
+            },
+            restore: {
+              show: true
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a}<br/>{b}:{c}%"
+        },
+        series: [
+          {
+            name: "来源",
+            type: "gauge",
+            detail: { formatter: "{value}%" },
+            data: [{ value: 35, name: "完成率" }]
+          }
+        ]
+      });
+      // 绘制高级多个坐标图表
+      myChart5.setOption({
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: {
+              show: true,
+              readOnly: false
+            },
+            restore: {
+              show: true
+            },
+            saveAsImage: {
+              show: true
+            },
+          }
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["蒸发量", "降水量", "平均温度"]
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月"
+            ]
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "水量",
+            min: 0,
+            max: 350,
+            interval: 50,
+            axisLabel: {
+              formatter: "{value}ml"
+            }
+          },
+          {
+            type: "value",
+            name: "温度",
+            min: 0,
+            max: 40,
+            interval: 5,
+            axisLabel: {
+              formatter: "{value}℃"
+            }
+          }
+        ],
+        series: [
+          {
+            name: "蒸发量",
+            type: "bar",
+            data: [50, 100, 136, 150, 120, 200],
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ]
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }]
+            }
+          },
+          {
+            name: "降水量",
+            type: "bar",
+            data: [50, 203, 239, 150, 183, 219],
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ]
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }]
+            }
+          },
+          {
+            name: "平均温度",
+            type: "line",
+            yAxisIndex:1,
+            data: [21, 25, 32, 30, 31, 24],
+            markPoint: {
+              data: [
+                { type: "max", name: "最大值" },
+                { type: "min", name: "最小值" }
+              ]
+            },
+            markLine: {
+              data: [{ type: "average", name: "平均值" }]
+            }
+          }
+        ]
+      });
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

src/components/NavHeader.vue

+<template>
+  <div class="header">
+    <div class="nav-toptar">
+      <div class="container">
+        <div class="topbar-menu">
+          <a href="javascript:;">小米商城</a>
+          <a href="javascript:;">MUI</a>
+          <a href="javascript:;">云服务</a>
+          <a href="javascript:;">协议规则</a>
+        </div>
+        <div class="topbar-user">
+          <a href="javascript:;">登录</a>
+          <a href="javascript:;">注册</a>
+          <a href="javascript:;" class="my-cart">
+            <span class="icon-cart"></span>购物车
+          </a>
+        </div>
+      </div>
+      <el-container></el-container>
+    </div>
+    <div class="nav-header">
+      <div class="container">
+        <div class="header-logo">
+          <a href="/"></a>
+        </div>
+        <div class="header-menu">
+          <div class="item-menu">
+            <span>小米手机</span>
+            <div class="children">
+              <ul>
+                <li class="product" v-for="(item,index) in phoneList" :key="index">
+                  <a :href="'/product'" target="_blank">
+                    <div>
+                      <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-mesia/f5l5ab05232ed14ccd78ec67e024495a.png" alt="">
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="item-menu">
+            <span>红米手机</span>
+            <div class="children"></div>
+          </div>
+          <div class="item-menu">
+            <span>电视</span>
+            <div class="children"></div>
+          </div>
+        </div>
+        <div class="header-search"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "nav-header"
+};
+</script>
+<style lang="scss" scoped>
+@import "./../assets/scss/config.scss";
+@import "./../assets/scss/base.scss";
+@import "./../assets/scss/mixin.scss";
+.header {
+  .nav-toptar {
+    height: 39px;
+    line-height: 39px;
+    background-color: $colorB;
+    color: $colorE;
+    .container {
+      @include flex();
+      a {
+        display: inline-block;
+        color: $colorE;
+        margin-right: 15px;
+      }
+      .my-cart {
+        width: 110px;
+        background-color: $colorA;
+        text-align: center;
+        color: #ffffff;
+        .icon-cart {
+          @include bgImg(16px, 12px, "/imgs/icon-cart-checked.png", contain);
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+  .nav-header {
+    .container {
+      height: 112px;
+      @include flex();
+      .header-logo {
+        display: inline-block;
+        width: 55px;
+        height: 55px;
+        background: $colorA;
+        overflow: hidden;
+        a {
+          display: inline-block;
+          width: 110px;
+          height: 55px;
+          &:before {
+            content: " ";
+            @include bgImg(55px, 55px, "/imgs/mi-logo.png", 55px);
+            transition: margin 0.2s;
+          }
+          &:after {
+            content: " ";
+            @include bgImg(55px, 55px, "/imgs/mi-home.png", 55px);
+          }
+          &:hover:before {
+            margin-left: -55px;
+            transition: margin 0.2s;
+          }
+        }
+      }
+      .header-menu {
+        display: inline-block;
+        width: 260px;
+        padding-left: 260px;
+        .item-menu {
+          display: inline-block;
+          color: $colorB;
+          font-weight: bold;
+          font-size: $fontI;
+          line-height: 112px;
+          margin-right: 30px;
+          span {
+            cursor: pointer;
+          }
+          &:hover {
+          }
+        }
+      }
+      .header-search {
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/card.vue

+<template>
+    <div class="course-card" @click="goVideoList(course)">
+        <div class="card-img">
+            <img :src="course.thumb" alt mode>
+        </div>
+        <div class="card-info">
+            <div class="card-info__name">
+                {{course.title}}
+                <div class="card-info__desc" v-html="course.description"></div>
+            </div>
+            <div class="card-info__oth" v-if="course.charge">{{course.charge}}</div>
+            <div class="card-info__oth" v-else>免费课程</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        course: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    methods: {
+        goVideoList() {
+            this.$emit("goVideoList", this.course);
+        }
+    }
+};
+</script>
+
+<style lang="less">
+.course-card {
+    display: flex;
+    width: 100%;
+    margin-bottom: 20px;
+    .card-img {
+        flex: 0 0 auto;
+        img {
+            width: 120px;
+            height: auto;
+            border-radius: 10px;
+            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+        }
+    }
+    .card-info {
+        display: flex;
+        flex: 1;
+        text-align: left;
+        padding-left: 20px;
+        margin-bottom: -5px;
+        flex-direction: column;
+        justify-content: space-between;
+        border-bottom: 1px solid #eee;
+        &__name {
+            font-size: 16px;
+        }
+        &__desc {
+            font-size: 12px;
+            color: #797979;
+        }
+        &__oth {
+            font-size: 12px;
+            color: rgb(255, 153, 0);
+            margin-bottom: 10px;
+        }
+    }
+}
+</style>

src/env.js

+let baseURL;
+switch (process.env.NODE_ENV) {
+    case 'development':
+        baseURL = '/api'
+        break;
+    case 'text':
+        baseURL = ''
+        break;
+    case 'prod':
+        baseURL = ''
+        break;
+    default:
+        baseURL = ''
+        break;
+}
+
+export default {
+    baseURL
+}
\ No newline at end of file

src/main.js

+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
+import env from './env'
+
+//mock 开关
+const mock = true;
+if (mock) { 
+  require('../mock/api')
+}
+axios.defaults.baseURL=env.baseURL
+
+// vue.prototype.$store = store
+// router.beforeEach((to, from, next) => {
+//   //to and from are Route Object,next() must be called to resolve the hook}
+//   console.log(store.state, "store.state");
+//   if (store.state.userInfo || to.path == "/login") {
+//     next()
+//   } else {
+//     next({
+//       path: "/login"
+//     })
+//   }
+// })
+
+axios.interceptors.response.use(response => { 
+  let res = response.data;
+  // console.log(res);
+  if (res.status == 0) {
+    return res.data
+  }else if (res.status == 10) {
+    alert(res.msg);
+  }
+})
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
+
+// 引入echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+Vue.use(VueAxios, axios);
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
\ No newline at end of file

src/router/index.js

+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+  const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    // 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/login.vue')
+  }, {
+    path: '/userCenter',
+    name: 'userCenter',
+    component: () => import('../views/userCenter.vue')
+  }, {
+    path: '/course',
+    name: 'course',
+    component: () => import('../views/course.vue')
+  }, {
+    path: '/modules',
+    name: '组件',
+    component: () => import('../views/modules.vue')
+  }, {
+    path: '/timer',
+    name: '大时钟',
+    component: () => import('../views/timer/index.vue')
+  }, {
+    path: '/WhiteBlock',
+    name: '别踩白块',
+    component: () => import('../views/WhiteBlock/index.vue')
+  }, {
+    path: '/Canvas',
+    name: '钟表',
+    component: () => import('../views/Canvas/index.vue')
+  }, {
+    path: '/ECharts',
+    name: '图表',
+    component: () => import('../views/ECharts/index.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router