登录页面

echarts-screen/src/components/index.js

@@ -4,7 +4,7 @@ import TrendCon from "./TrendCon";
 import PieCon from './PieCon'
 import CityRank from "./CityRank";
 import wordCloud from "./wordCloud";
-import test from "./test";
+import bgAnimation from './bgAnimation' // 登录界面背景图动画
 
 const components = {
     RoseCon,
@@ -13,7 +13,7 @@ const components = {
     Newly,
     CityRank,
     wordCloud,
-    test,
+    bgAnimation,
 };
 
 const install = (Vue = {}) => {

echarts-screen/src/components/toast/index.js

@@ -0,0 +1,36 @@
+/*
+ * 描述: 注册全局消息提示框组件
+ * 作者: Jack Chen
+ * 日期: 2020-04-18
+ */
+
+import Vue from 'vue'
+import Toast from './index.vue'
+
+const ToastMsg = Vue.extend(Toast)
+
+Toast.install = (options, type) => {
+    if (options === undefined || options === null) {
+        options = {
+            content: ''
+        }
+    } else if (typeof options === 'string' || typeof options === 'number') {
+        options = {
+            content: options
+        }
+        if (type !== undefined && options !== null) {
+            options.type = type
+        }
+    }
+    let instance = new ToastMsg({
+        data: options
+    }).$mount()
+
+    document.body.appendChild(instance.$el)
+
+    Vue.nextTick(() => {
+        instance.visible = true
+    })
+}
+
+export default Toast.install

echarts-screen/src/components/toast/index.vue

@@ -0,0 +1,105 @@
+<!--
+ 描述: 消息提示框模板
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
+<template>
+  <transition name="fade">
+    <div class="toast-container" v-if="visible">  
+      <div class="toast" :class="type">
+        <div class="content">
+          <i class="iconfont" :class="'icon-' + type"></i>
+          <span>{{ content }}</span>
+        </div>
+        <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>
+      </div>
+    </div>
+  </transition>
+</template>
+ 
+<script>
+
+export default {
+  name: 'Toast',
+  data() {
+    return {  
+      content: '',
+      time: 3000,
+      visible: false,
+      type: 'error',  //四种类型：info, success, warning, error
+      hasClose: false,     
+    }
+  },
+  mounted() {
+    this.close();
+  },
+  methods: {    
+    close () {
+      setTimeout(() =>{
+        this.visible = false;
+      }, this.time);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 动画效果 淡入淡出 */
+.fade-enter-active, .fade-leave-active{
+   transition: all 0.5s ease;
+ }
+ .fade-enter, .fade-leave-active{
+   opacity: 0;
+ }
+
+.toast-container {
+  position: fixed; 
+  top: 0; 
+  right: 0; 
+  bottom: 0; 
+  left: 0;  
+  display: flex; 
+  justify-content: center; 
+  align-items: center;
+  z-index: 99999;
+  .toast {
+    width: 340px;
+    padding: 20px;
+    border-radius: 6px;
+    font-size: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center; 
+    .content {
+      span {
+        padding-left: 10px;
+      }
+    }
+    &.info {
+      background: #edf2fc;
+      border: 1px solid #e0eafc;
+      color: #909399;
+    }
+    &.success {
+      background: #f0f9eb;
+      border: 1px solid #e7f9de;
+      color: #67c23a;
+    }
+    &.warning {
+      background: #fdf6ec;
+      border: 1px solid #f9ecda;
+      color: #e6a23c;
+    }
+    &.error {
+      background: #fef0f0;
+      border: 1px solid #fbdfdf;
+      color: #f56c6c;
+    }
+    .close {
+      cursor: pointer;
+      color: #909399
+    }
+  }
+}
+</style>

echarts-screen/src/main.js

@@ -5,6 +5,8 @@ import store from './store'
 import Vcomp from './components/index'
 import fullscreen from 'vue-fullscreen'
 import screenfull from "screenfull";
+import Toast from './components/toast'
+
 
 import '@/assets/styles/base.scss'
 import '@/assets/styles/common.scss'
@@ -15,6 +17,8 @@ Vue.use(screenfull)
 
 Vue.config.productionTip = false
 
+Vue.prototype.$Toast = Toast
+
 
 router.beforeEach((to, from, next) => {
 	if (to.meta.title) {

echarts-screen/src/router/index.js

@@ -7,16 +7,17 @@ Vue.use(VueRouter)
 const routes = [
     {
         path: '/',
-        name: 'Brand',
-        component: () => import('@/views/Brand'),
+        name: 'Login',
+        component: () => import('@/views/Login'),
         meta: {
-            title: '疫情数据分析'
+            title: '登录页面'
         }
     },
     {
-        path: '/home',
-        name: 'Home',
-        component: () => import('@/views/Home')
+        //用户密码正确后跳转的页面
+        path: '/Brand',
+        name: 'Brand',
+        component: () => import('@/views/Brand')
     },
     {
         path: '/about',

echarts-screen/src/views/Brand.vue

@@ -9738,15 +9738,19 @@
 
                 ];
                 let option = {
+                  //时间轴配置
                     timeline: {
+                      //标点 小圆圈样式
                         checkpointStyle: {
                             color: '#11715a',
                             borderColor: '#8df4f4',
                             borderWidth: 2,
                         },
+                      //线的样式
                         lineStyle: {
                             color: '#8df4f4'
                         },
+                      //控件样式
                         controlStyle: {
                             showNextBtn: true,
                             showPrevBtn: true,
@@ -9771,41 +9775,19 @@
                                     color: 'rgb(179, 239, 255)'
                                 }
                             },
-                            emphasis: {
+                          //日期悬浮
+                                emphasis: {
                                 textStyle: {
                                     color: '#f4c2ff'
                                 }
                             }
                         },
                     },
+                  //定义地图配置以及样式
                     baseOption: {
-                        //定义地图配置以及样式
+                        //提示工具
                         tooltip: {},
-                        // geo: {
-                        //     type:'map',
-                        //     map: "china",
-                        //     name: '确诊人数',
-                        //     label: {
-                        //         emphasis: {
-                        //             show: true,
-                        //             color: "#fff"
-                        //         }
-                        //     },
-                        //     roam: true,
-                        //     // 放大我们的地图
-                        //     zoom: 1,
-                        //     itemStyle: {
-                        //         normal: {
-                        //             areaColor: "rgba(43, 196, 243, 0.42)",
-                        //             borderColor: "rgba(43, 196, 243, 1)",
-                        //             borderWidth: 1
-                        //         },
-                        //         emphasis: {
-                        //             areaColor: "#2B91B7"
-                        //         }
-                        //     }
-                        // },
-                        //侧边数量图
+                      //视觉映射图配置
                         visualMap: {
                             show: true,
                             max: 1200,
@@ -9818,7 +9800,7 @@
                             }
                         },
 
-                        series: [{
+                         series: [{
                             type: 'map',
                             name: '确诊人数',
                             map: 'china',
@@ -9832,6 +9814,7 @@
                                     fontSize: 18
                                 }
                             },
+                           //整个地图样式
                             itemStyle: {
                                 normal: {
                                     areaColor: "rgba(43, 196, 243, 0.42)",