新增自定义提示框组件

package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
-    "vue-particles": "^1.0.9",
     "vue-router": "^3.1.6",
     "vuex": "^3.2.0"
   },
@@ -23,6 +22,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
+    "vue-particles": "^1.0.9",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/assets/iconfont/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1587540653939'); /* IE9 */
-  src: url('iconfont.eot?t=1587540653939#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOQAAsAAAAAB5AAAANCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCeIJJATYCJAMMCwgABCAFhG0HNxuQBsgekqQb4pzDOQAOiKCAIvgaY7/v7hDRJJoYOt5JopFEEw1JrDGdIUQyJVqXLyUwtL/33gcxmGmJUoKU6CSlrYFN2ljTFND2qjAli7KKULVD+ZAnyKcDOWEm1OyEZZ/ncnrXEJ/fslzmWH7UCzAOKNA9aEwKAy2QgLxh7IKWuJ9ArUFqoCWH0w0UFeawQOxHmgoUMxaloT5UC5UVc4t4AEjV6RK2C7gPvh//wXRgSCoyc+zK3lqH2ZfWDQ1e8F/AxyOAdDoX2CIypgCF2K30rMtEmSlwtaom21xeqQhpqvj/P4FE01Vu9I+XiEpmbT0Yg9nEl5bDJ/imnSGBDCpRcAbcQWb7HbJopVHs08vQ07nb6akQ4OLtwv3szNXjbaVqCRSMMOErq8cg6HEsGNZ+qEeYORbBu04MidNH0WOLi4pDePy1/MD8vPKEtEPQLmjmNCvVNzNdXT+VG1q4BQDkNtMLCvjitfKgQqitjT2maOre1MoaBWt1ijrFfbdoTb6iE+eccUNopar2U0WQc/EeBVlC73iQ86wndDW6FVZEd05kGYEM2elOhG11wWd2H3Zn4l1wwfuCxxdme6KtXk0zQ2zjD+bRTLmZ8kvR56aCLHUozGKn5rn+/9BwpD7iybWWI9gafZ0QayRc68+ia0y2zm2IKquw+Vn0omxWPgMCAH638wluCnI/uRqO+Du/cbyV1fcnm71i8AV87tAnYPh3u0B3m+pz9wb/QtqxqWh6WFsUiSMxfNnyfbkSMFqLP9AIra6G6zo61xKqdSRIqgwgqzZEFuYUKtSZQaVqs6g1yXFxnTZJMqLUYEIpQGg2haTRK7Jme2RhXqJCp2dUag44aq0Gfc06IxGJs00iRUhHNRPt4DAwbLuUw/ozmVdP4bQ8YN0RJ3Ycxxpa+fyWAuIpJiRp5kRSDDSSQh834DDyvBCjpNAhTQZWikTToWZY1ZMGWrwPZYsYUQiiQ0FeoUiaUMDw2oty4fNnxHTlUXADpSp4h7CE3T3SpkGrA7nVBJ0ot3JOsiemiRTCgMKwkA85ABfxrEwIJVT3chCNGIgYkIpMaaJWYV01g+V1/vvtgFrmljlS5CgqD0I1JsmmJhMDAAAA') format('woff2'),
-  url('iconfont.woff?t=1587540653939') format('woff'),
-  url('iconfont.ttf?t=1587540653939') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1587540653939#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1587564247382'); /* IE9 */
+  src: url('iconfont.eot?t=1587564247382#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASYAAsAAAAACbAAAARLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqFaIUaATYCJAMgCxIABCAFhG0HZBuICBEVnM3JfhbYzRfR06xnIqVricL+W7/GTzkHwfP03ue5mVkJ7S/gl62AFBRjwDXvvsv+6a1ikWLjFGvCkY0233dqXYO1gAgVZsHS3uCTu853suUn6cZOgIC6vz9UzQaLz2fJdvk/a29cg8LhUDBgo3tbr2QtSAGnoNUidt0kHyK2nrwbAnAnIxMpWbpiTVyRSA4SgLRr3bIxri0b0kyzoEGUkTM1nIgTmjHKOMuECfnHyxsKcQUGsiK5V9UWpZpR9Ll+PlxZtoV66o21Pw9gnQcUIBPQQEaO+gajylwmCiPYrDkA3mgIKPtCcr+Wz9s97/F8uG2jTWvbyemCQ/T+xQOFhIAKkVGAOJPoPDVqs7wLeK4lFwo8d9bS17eEBQP6tpBR9e1gQaDvAQtO0A+HnjtMdt3fF/AHLjOR0oxasKAgIt8uePmIp6fW/v6+nmHFdTx921675rhxI+/6dfPq1ZqNz46unGWsML850jtGbjUdVc2a1fPMGo68voNK2tZ67qKHuItHX3cuWRWJw100PPUVa83fP3pvpLUuCWvVmDUiKzY0NT5XS3r/r8erJTfK+Pyutd3H82rOmLFiWdC0WYGhNa3QqYnLg6fPFjN8usyuPXVrcLZizZhVobMOSiRB4Q7WEdQmnlXfnD56pRXkmDYmpOWM+dsDw+sZx4FWYznK21Lqo3nlRsbJeFlGo3ZPt8/aPihz0S2Z5EtdfE1UoWYF5F/c4V0yY48ShlTGVv3xo1ZvNTFUdcWoLxPTwY8m93JU14yMAgMbOV2d5yPiM/wymTB+WV8BSp8oEw40Y03xNYQUD6vj54h1+NUJK55/y2gpWpxwlEnKNmx7iXjjhoJ6iY6hqv/uJye1+DmxLWeWcWu8VkVMaViUhhVKe+rLgw0P57zDd61/dqj0IP2Bdj1PmYXQHquK7tN//+p9HKVYqerXH3Zo0mR3TIvoNQMGrI5d7ez8fvXq9/wDYO8XN6jiACrdWA32NbVGZeQWS+QRAEwyZj6oNEPRP97nYMC6Lpsb+my+aR4aALePd7yhx2xLYnveFQGQ5X8zOXFCh8rE7qr9weSeCMCVEQW+JwvufA78vUL+3N+nIYicAUFryS0wUElBoZETNbUEJ0xGcEZjD+4UlDnfg5AuKKjdAOkMY0A8NoCAwxdEPM4RJeo9kEl4BwqeKBDuvHS84t6pZncROENJ109qPI9BOG1XND+geu2dNJU54wWiTZLyJOsW7zFC9nGMvlWFWaAgPNAdux/6nikKt/CW1GbxnKZh7I0Sz8Nk50KAY6BErj6RhsdGIV1sdr33fwCVVz1HZnoGki9AqGZ9kktkBOK9biT1PJfN6k2lYEzQ9wsEG5A7eKDnOUbi+K4WeCZRb8hEZ6k2K1B1yfENwyu9xGSykzxlk0CREmUqVKlRx2KFLH3PmWXRPIiXb6JTfWcp1+9OxmaslhBhWeur91CdTAAA') format('woff2'),
+  url('iconfont.woff?t=1587564247382') format('woff'),
+  url('iconfont.ttf?t=1587564247382') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1587564247382#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -15,11 +15,31 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-secret:before {
-  content: "\e530";
+.icon-user:before {
+  content: "\e66c";
 }
 
-.icon-user:before {
-  content: "\e612";
+.icon-close:before {
+  content: "\e667";
+}
+
+.icon-info:before {
+  content: "\e604";
+}
+
+.icon-password:before {
+  content: "\e606";
+}
+
+.icon-warning:before {
+  content: "\e676";
+}
+
+.icon-error:before {
+  content: "\e686";
+}
+
+.icon-success:before {
+  content: "\e66b";
 }
 

src/assets/iconfont/iconfont.svg

@@ -20,10 +20,25 @@ Created by iconfont
   />
     <missing-glyph />
     
-    <glyph glyph-name="secret" unicode="&#58672;" d="M744.398 520.103h-99.6v37.081c0 62.518-17.161 167.123-132.798 167.123-120.065 0-132.8-116.762-132.8-167.123v-37.081h-99.599v37.081c0 163.786 91.291 269.48 232.398 269.48s232.398-105.694 232.398-269.48v-37.081zM578.399 247.898c0 37.627-29.897 68-66.399 68s-66.4-30.374-66.4-68c0-25.47 13.315-47.092 33.235-58.635v-77.5c0-18.796 14.914-34.324 33.2-34.324 18.285 0 33.2 15.528 33.2 34.324v77.5c19.885 11.543 33.164 33.165 33.164 58.635zM843.997 384v-340.307c0-56.423-44.845-102.357-99.599-102.357H279.601c-54.72 0-99.6 45.935-99.6 102.357V384c0 56.388 44.846 102.357 99.6 102.357h464.797c54.754 0.001 99.6-45.968 99.6-102.357z"  horiz-adv-x="1024" />
+    <glyph glyph-name="user" unicode="&#58988;" d="M283.083845 605.200938c0-126.207423 102.313224-228.5186 228.511437-228.5186 126.2064 0 228.514507 102.311177 228.514507 228.5186 0 126.202307-102.308107 228.51553-228.514507 228.51553C385.390929 833.716468 283.083845 731.403245 283.083845 605.200938L283.083845 605.200938zM647.796314 376.145102c-39.302121-25.200962-86.044702-39.814798-136.202055-39.814798-50.154283 0-96.894817 14.613836-136.197962 39.814798-171.106006-56.998155-294.485011-218.435964-294.485011-408.697239 0-11.157107 0.422625-22.218024 1.254573-33.164331l858.852706 0c0.831948 10.946306 1.255597 22.007223 1.255597 33.164331 0 190.261275-123.372865 351.698061-294.483988 408.697239L647.796314 376.145102zM647.796314 376.145102"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="user" unicode="&#58898;" d="M345.763 694.345c23.813 29.027 53.189 47.912 80.492 60.17 13.139 5.898 26.896 10.092 40.59 12.89 15.122 3.09 30.256 4.467 44.417 4.553h1.475c14.16-0.086 29.293-1.463 44.417-4.553 13.694-2.798 27.451-6.992 40.59-12.89 27.304-12.258 56.68-31.143 80.49-60.17 18.92-23.064 34.2-52.305 41.966-89.354 5.514-26.3 7.274-55.944 4.764-84.953-2.38-27.533-8.61-54.831-19.124-78.637-5.731-12.974-13.662-28.107-24.632-45.047-8.782-13.558-19.43-28.127-32.337-43.444-2.282-4.034-10.18-20.395 5.69-29.87 18.242-10.895 62.59-37.639 103.817-62.848 27.008-16.514 53.83-33.085 73.069-45.34 14.011-8.926 30.844-20.164 44.925-34.572 15.694-16.056 27.712-35.671 29.183-59.825 0.433-7.097 0.631-15.473 0.665-24.23a667.064 667.064 0 0 0-0.478-27.581c-0.74-19.305-4.74-36.207-14.569-49.252-10.765-14.29-27.005-22.82-51.153-23.353h-0.405c-94.846 0.344-203.744 0.516-327.617 0.516s-232.77-0.172-327.616-0.516h-0.404c-24.148 0.533-40.388 9.063-51.152 23.353-9.828 13.045-13.83 29.947-14.57 49.252a667.115 667.115 0 0 0-0.477 27.583c0.032 8.755 0.233 17.13 0.664 24.228 1.472 24.154 13.49 43.767 29.184 59.825 14.082 14.408 30.913 25.647 44.925 34.573 19.237 12.253 46.057 28.822 73.062 45.336 41.229 25.21 85.58 51.955 103.824 62.85 15.869 9.477 7.971 25.837 5.69 29.87-12.906 15.318-23.555 29.887-32.337 43.445-10.971 16.94-18.903 32.073-24.632 45.047-10.515 23.806-16.744 51.104-19.125 78.637-2.51 29.009-0.748 58.653 4.764 84.953 7.768 37.049 23.045 66.291 41.965 89.354"  horiz-adv-x="1024" />
+    <glyph glyph-name="close" unicode="&#58983;" d="M810 622l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="info" unicode="&#58884;" d="M512 810.56A426.56 426.56 0 1 1 938.56 384 426.88 426.88 0 0 1 512 810.56z m42.56-640h-85.12v256h85.44v-256z m0 341.44h-85.12V597.44h85.44V512z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="password" unicode="&#58886;" d="M780.8 541.42H665.6v42.89c0 72.31-19.85 193.3-153.6 193.3-138.87 0-153.6-135.05-153.6-193.3v-42.89H243.2v42.89C243.2 773.75 348.79 896 512 896s268.8-122.25 268.8-311.69v-42.89z m-192-314.84c0 43.52-34.58 78.65-76.8 78.65s-76.8-35.13-76.8-78.65c0-29.46 15.4-54.47 38.44-67.82v-89.64c0-21.74 17.25-39.7 38.4-39.7s38.4 17.96 38.4 39.7v89.64c23 13.35 38.36 38.36 38.36 67.82zM896 384v-393.61c0-65.26-51.87-118.39-115.2-118.39H243.2c-63.291 0-115.2 53.13-115.2 118.39V384c0 65.22 51.87 118.39 115.2 118.39h537.6c63.33 0 115.2-53.17 115.2-118.39z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="warning" unicode="&#58998;" d="M512 768c-213.589333 0-384-170.410667-384-384s170.410667-384 384-384 384 170.410667 384 384-170.410667 384-384 384z m-36.949333-150.229333c10.069333 10.069333 18.688 16.768 35.029333 16.768 18.261333 1.450667 35.029333-7.168 41.770667-20.138667 7.68-9.130667 11.989333-29.269333 10.069333-41.301333 0-3.328-2.389333-25.898667-3.370667-32.128l-13.44-170.410667c0-16.810667-3.370667-33.578667-10.069333-46.549333-3.370667-10.069333-13.44-16.810667-26.88-16.810667a25.258667 25.258667 0 0 0-23.509333 16.810667c-6.741333 16.810667-10.069333 30.250667-10.069334 46.549333L465.450667 537.6c-3.370667 30.250667-3.370667 20.181333-3.370667 36.949333 0 16.341333 3.370667 29.781333 12.970667 43.221334z m73.898666-470.912a48.128 48.128 0 0 0-33.578666-13.397334c-13.44 0-26.88 3.328-36.992 13.397334a55.338667 55.338667 0 0 0-16.768 39.850666c0 13.44 3.370667 26.88 13.44 36.949334 10.069333 10.112 23.509333 16.810667 36.949333 16.810666 13.44 0 26.88-6.698667 36.949333-16.768 10.069333-10.112 13.44-23.552 13.44-36.992-0.469333-16.298667-3.84-29.738667-13.44-39.850666z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="error" unicode="&#59014;" d="M512 810.666667C276.48 810.666667 85.333333 619.733333 85.333333 384s191.146667-426.666667 426.666667-426.666667 426.666667 190.933333 426.666667 426.666667S747.52 810.666667 512 810.666667z m42.666667-640h-85.333334v85.333333h85.333334v-85.333333z m0 170.666666h-85.333334V597.333333h85.333334v-256z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="success" unicode="&#58987;" d="M512 832q190.016-4.992 316.512-131.488T960 384q-4.992-190.016-131.488-316.512T512-64q-190.016 4.992-316.512 131.488T64 384q4.992 190.016 131.488 316.512T512 832z m-56-536l-99.008 99.008q-12 11.008-27.488 11.008t-27.008-11.488-11.488-26.496 11.008-27.008l127.008-127.008q11.008-11.008 27.008-11.008t27.008 11.008l263.008 263.008q15.008 15.008 9.504 36.512t-27.008 27.008-36.512-9.504z"  horiz-adv-x="1024" />
 
     
 

src/components/index.js

@@ -1,8 +1,8 @@
 import bgAnimation from './bgAnimation'
 
 const components = {
-  bgAnimation,
-  // particles
+  bgAnimation
+  
 };
 
 const install = (Vue = {}) => {
@@ -11,11 +11,11 @@ const install = (Vue = {}) => {
     Vue.component(components[component].name, components[component]);
   });
 
-  Vue.prototype.$notice = Notification;
   install.installed = true;
 };
 
 install.installed = false;
+
 if (typeof window !== "undefined" && window.Vue) {
   install(window.Vue);
   install.installed = true;

src/components/toast/index.js

@@ -0,0 +1,31 @@
+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

src/components/toast/index.vue

@@ -0,0 +1,99 @@
+<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: true,     
+    }
+  },
+  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: 14px;
+    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>

src/main.js

@@ -5,6 +5,7 @@ import store from './store'
 import Axios from "axios";
 import vueParticles from 'vue-particles'
 import Vcomp from './components/index'
+import Toast from './components/toast'
 import $ from 'jquery'
 
 import '@/assets/styles/base.scss'
@@ -16,6 +17,7 @@ Vue.use(Vcomp)
 Vue.config.productionTip = false
 
 Vue.prototype.$Axios = Axios
+Vue.prototype.$Toast = Toast
 
 new Vue({
   router,

src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Login from '@/views/Login.vue'
 
 Vue.use(VueRouter)
 
@@ -8,13 +7,17 @@ const routes = [
   {
     path: '/',
     name: 'Login',
-    component: Login
+    component: () => import('@/views/Login.vue')
   },
-  // {
-  //   path: '/Home',
-  //   name: 'Home',
-  //   component: () => import('../views/Home.vue')
-  // }
+  {
+    path: '/login',
+    redirect: '/'
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: () => import('@/views/Home.vue')
+  }
 ]
 
 const router = new VueRouter({

src/views/Home.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="home-container">
+  	欢迎进入主页
+    
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Home',
+  components: {},
+  data() {
+  	return {
+  		
+  	}
+  },
+  computed: {
+  	
+  },
+  created() {},
+  mounted() {
+
+  },
+  methods: {
+  	
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+	
+}	
+</style>

src/views/Login.vue

@@ -15,7 +15,7 @@
 	            />
             </div>
             <div class="item">
-            	<i class="iconfont icon-secret"></i>
+            	<i class="iconfont icon-password"></i>
 	            <input
 	              autocomplete="off"
 	              type="password"
@@ -73,7 +73,8 @@ export default {
   data() {
   	return {
   		userName: 'admin',
-  		userPwd: '123456'
+  		userPwd: '123456',
+      showModal: false
   	}
   },
   computed: {
@@ -86,14 +87,23 @@ export default {
 
   },
   methods: {
-  	login() {
-  		console.log('login')
+  	login () {
+  		if (this.userName == 'admin' && this.userPwd == '123456') {
+         this.$router.push({
+          path: '/home'
+         })
+      } else {
+        this.$Toast({
+          content: '请输入正确的用户名和密码',
+          type: 'error'
+        })
+      }
   	}
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .login-container {
 	.layer {
 	  position: absolute;