login

src/login/Index.vue

@@ -1,4 +0,0 @@
-<template src="./index/index.html"></template>
-<script src="./index/index.js"></script>
-<style src="@/sass/global.scss" lang="scss"></style>
-<style src="./index/index.scss" lang="scss" scoped></style>

src/login/Login.vue

@@ -0,0 +1,130 @@
+<style src="@/sass/global.scss" lang="scss"></style>
+<style lang="scss" scoped>
+.notfound {
+    margin: 0;
+    height: 100%;
+    overflow: hidden;
+    font-family: "Libre Franklin", sans-serif;
+    font-size: 62.5%;
+    background-image: linear-gradient(0deg, #e8f4f8, lightblue);
+    .sun {
+        position: absolute;
+        top: 4em;
+        left: 4em;
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        background-image: radial-gradient(circle at 50%, #ffffff 50%, #f5de19);
+        box-shadow: 0px 0px 40px #f5de19, inset 0px 0px 100px #f5de19;
+        animation: sun 5s linear infinite;
+    }
+    form{
+      width: 500px;
+      height: 450px;
+      background: white;
+      box-shadow: 0px 5px 10px 1px #E0E0E0;
+      border-radius: 5px;
+      position: relative;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      text-align: center;
+      padding: 50px 20px;
+      &>div:first-child{
+        height: 74px;
+        background: url(../images/login/loginTitle.png) no-repeat center;
+        border-bottom: solid 1px #e8e7ef;
+        margin-bottom: 15px;
+      }
+      &>div:nth-child(2),&>div:nth-child(3),&>div:nth-child(4){
+        margin: 35px 70px;
+      }
+      button{
+        width: 100%;
+        margin-top: 20px; 
+      }
+    }
+    .error{
+      color: red;
+    }
+}
+</style>
+<template>
+<div class="notfound">
+	<div class="sun"></div>
+  <form role="form">
+      <div></div>
+      <div>
+        <el-input name="username" v-model="username" placeholder="请输入用户名" required="required"></el-input>
+      </div>
+      <div>
+        <el-input placeholder="请输入密码" v-model="password" show-password required="required"></el-input>
+      </div>
+      <div>
+          <el-button type="primary" :loading="loading" @click.prevent="submit">{{loading?'请稍等':'登录'}}</el-button>
+          <p class="error" v-if="error">登录账号或密码错误</p>
+      </div>
+  </form>
+</div>
+</template>
+
+<script>
+    import { login } from '@/api/login';
+    export default {
+        name: "ControlLogin",
+        data() {
+            return {
+                error: false,
+                loading:false,
+                username:"",
+                password:""
+            }
+        },
+        watch: {
+        },
+        created() {
+            let vm = this;
+            document.onkeypress = function(e) {
+                let code;
+                if (!e) {
+                    let e = window.event;
+                }
+                if (e.keyCode) {
+                    code = e.keyCode;
+                } else if (e.which) {
+                    code = e.which;
+                }
+                if (code == 13) {
+                    vm.submit();
+                }
+            }
+        },
+        mounted () {
+        },
+        methods: {
+            submit () {
+                if (!this.username || !this.password) {
+                    this.error = true;
+                    return;
+                }
+                this.loading = true;
+                login({
+                    username:this.username,
+                    password:this.password,
+                    loginFrom: 'admin'
+                })
+                .then(res => {
+                    if (res && res.ok == '1')  {
+                        this.$router.replace({name: 'ControlApp'});
+                    } else {
+                        this.error = true;
+                    }
+                    this.loading = false;
+                }, () => {
+                    this.error = true;
+                    this.loading = false;
+                });
+            }
+        }
+    };
+</script>

src/login/index/index.html

@@ -1,184 +0,0 @@
-<div class="start-index">
-    <div class="home-page" v-if="pageIndex == 1">
-        <div class="middle-part">
-            <img src="@/images/login/elephant.png">
-            <img src="@/images/login/words.png">
-            <div class="input-form">
-                <div>{{state.indexType == 2?'注&nbsp;&nbsp;&nbsp;&nbsp;册':'登&nbsp;&nbsp;&nbsp;&nbsp;录'}}</div>
-                <div class="login-form" v-if="state.indexType == 1">
-                    <div class="input-log">
-                        <img src="@/images/login/iconUser.png"/>
-                        <input type="text" name="username" ref="loginUsername" placeholder="请输入手机号" required/>
-                    </div>
-                    <div class="input-log">
-                        <img src="@/images/login/iconPass.png"/>
-                        <input type="password" name="password" ref="loginPassword" placeholder="请输入密码" required/>
-                    </div>
-                    <div class="input-log check-code">
-                        <img src="@/images/login/iconPass.png"/>
-                        <input type="text" name="checkCode" placeholder="请输入验证码" v-model="check.inputCode" required/>
-                        <RandomCode :randomType="3" @getCode="getCode($event)" class="random-code"></RandomCode>
-                        <i v-if="check.codeError" class="error">验证码错误</i>
-                    </div>
-                    <div class="login-submit">
-                        <el-button type="primary" :loading="loading" id="loginBt1" @click.prevent="submit" :disabled="check.inputCode.toLowerCase() !== check.generateCode" :class="{'noAllow':check.inputCode.toLowerCase() !== check.generateCode}">{{loading?'请稍等':'登录'}}</el-button>
-                    </div>
-                    <i v-if="error" class="error">登录账号或密码错误</i>
-                    <p><a>忘记密码?</a></p>
-                </div>
-                <div class="login-form register" name="registerForm" v-if="state.indexType == 2">
-                    <div class="input-log">
-                        <img src="@/images/login/iconUser.png"/>
-                        <input type="text" v-model="reg.region" name="region" placeholder="请输入校区" required/>
-                        <i v-if="check.schoolError && reg.region==''" class="error">校区不能为空</i>
-                    </div>
-                    <div class="input-log">
-                        <img src="@/images/login/iconUser.png"/>
-                        <input type="text" v-model="reg.name" name="name" placeholder="请输入考生姓名" required/>
-                        <i v-if="check.nameError && reg.name==''" class="error">考生姓名不能为空</i>
-                    </div>
-                    <div class="input-log">
-                        <img src="@/images/login/iconUser.png"/>
-                        <input type="text" v-model="reg.username" name="regName" placeholder="请输入手机号" required/>
-                        <i v-if="check.userAlready" class="error">该号码已使用</i>
-                        <i v-if="check.phoneError && reg.username==''" class="error">手机号不能为空</i>
-                    </div>
-                    <div class="input-log">
-                        <img src="@/images/login/iconPass.png"/>
-                        <input type="password" v-model="reg.password" name="regPass" placeholder="请设置密码(6-16位)" required/>
-                        <i v-if="check.passwordError && reg.password==''" class="error">密码不能为空</i>
-                    </div>
-                    <div class="input-log">
-                        <img src="@/images/login/iconPass.png"/>
-                        <input type="password" v-model="reg.passwordConfirm" name="regPassConfirm" placeholder="确认密码" required/>
-                        <i v-if="check.checkPassWrong" class="error">确认密码不相同</i>
-                    </div>
-                    <div class="login-submit">
-                        <el-button type="primary" :loading="loading" id="regButton" :disabled="(reg.password !== reg.passwordConfirm) || check.userAlready" @click.prevent="registerNew">
-                            {{loading?'请稍等':'注册'}}
-                        </el-button>
-                    </div>
-                    <!--<div class="agree-doc"><input type="checkbox" v-model="reg.agreeReg"/>已阅读并同意<a>《网站注册及用户协议》</a></div>-->
-                </div>
-                <!-- <p>Copyright ©爻象教育 版权所有2019</p> -->
-            </div>
-            <p>@2019-2020 yaoxiangedu.com <a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备19011669号</a></p>
-        </div>
-    </div>
-    <div class="second-page" v-if="pageIndex == 2">
-        <el-carousel height="100%" direction="vertical" :interval="5000" @change="changeCarousel" ref="carousel">
-            <el-carousel-item>
-                <p>找&nbsp;&nbsp;到&nbsp;&nbsp;真&nbsp;&nbsp;正&nbsp;&nbsp;的&nbsp;&nbsp;方&nbsp;&nbsp;向</p>
-                <p>DETERMINE AND REVIEW</p>
-                <p>爻象能力诊断</p>
-                <button @click="pageIndex = 1;state.indexType = 1">
-                    <p>登录体验</p>
-                    <i></i>
-                    <i></i>
-                </button>
-                <img src="@/images/index/page1Ele1.png">
-                <img src="@/images/index/page1Ele1.png">
-                <img src="@/images/index/page1Ele2.png">
-                <img src="@/images/index/page1Ele2.png">
-                <img src="@/images/index/page1Ele2.png">
-                <img src="@/images/index/page1Ele2.png">
-            </el-carousel-item>
-            <el-carousel-item>
-                    <img src="@/images/index/page2Back1.jpg">
-                    <img src="@/images/index/page2Back2.jpg">
-                    <p>爻&nbsp;象&nbsp;诊&nbsp;断</p>
-                    <ul>
-                        <li>
-                            <img src="@/images/index/page2Ele1.png">
-                            <p>理念</p>
-                            <p>为中国学生提供最全面、最权威的学习问题诊断和学习能力测评服务！</p>
-                        </li>
-                        <li>
-                            <img src="@/images/index/page2Ele2.png">
-                            <p>团队</p>
-                            <p>一支掌握先进诊断测评技术和丰富教学经验的团队！</p>
-                        </li>
-                        <li>
-                            <img src="@/images/index/page2Ele3.png">
-                            <p>价值</p>
-                            <p>将最前沿的诊断测评技术和中国学生的学习情况相结合，精准诊断学生的学科问题，测评学生学习能力等级。</p>
-                        </li>
-                    </ul>
-            </el-carousel-item>
-            <el-carousel-item>
-                <p><img src="@/images/index/page3Ele7.png">大&nbsp;能&nbsp;力&nbsp;全&nbsp;面&nbsp;评&nbsp;价</p>
-                <ul>
-                    <li>
-                        <img src="@/images/index/page3Ele1.png">
-                        <p>计&nbsp;算&nbsp;与&nbsp;操&nbsp;作</p>
-                    </li>
-                    <li>
-                        <img src="@/images/index/page3Ele2.png">
-                        <p>语&nbsp;言&nbsp;理&nbsp;解</p>
-                    </li>
-                    <li>
-                        <img src="@/images/index/page3Ele3.png">
-                        <p>归&nbsp;纳&nbsp;类&nbsp;比</p>
-                    </li>
-                </ul>
-                <ul>
-                    <li>
-                        <img src="@/images/index/page3Ele4.png">
-                        <p>转&nbsp;化&nbsp;迁&nbsp;移</p>
-                    </li>
-                    <li>
-                        <img src="@/images/index/page3Ele5.png">
-                        <p>空&nbsp;间&nbsp;想&nbsp;象</p>
-                    </li>
-                    <li>
-                        <img src="@/images/index/page3Ele6.png">
-                        <p>逻&nbsp;辑&nbsp;推&nbsp;理</p>
-                    </li>
-                </ul>
-            </el-carousel-item>
-            <el-carousel-item>
-                <p>诊&nbsp;断&nbsp;案&nbsp;例</p>
-                <ul>
-                    <li>
-                        <img src="@/images/index/page4Ele1.png">
-                    </li>
-                    <li>
-                        <img src="@/images/index/page4Ele2.png">
-                    </li>
-                    <li>
-                        <img src="@/images/index/page4Ele3.png">
-                    </li>
-                </ul>
-                <ul>
-                    <li>
-                        <img src="@/images/index/page4Ele4.png">
-                    </li>
-                    <li>
-                        <img src="@/images/index/page4Ele5.png">
-                    </li>
-                    <li>
-                        <img src="@/images/index/page4Ele6.png">
-                    </li>
-                </ul>
-                <div>
-                    <p>©2019 爻象诊断 版权所有</p>
-                </div>
-            </el-carousel-item>
-        </el-carousel>
-    </div>
-    <div class="top-part">
-        <p>
-            <!-- <label>爻象诊断</label> -->
-            <br/>
-            <!-- <label>DETERMINE AND REVIEW</label> -->
-        </p -->
-        <ul :class="{'black':(pageIndex == 2 && state.carouselIndex != 0) || pageIndex > 2}">
-            <!-- <li @click="pageIndex = 1" :class="{'choose1':pageIndex == 1}">首页</li> -->
-            <!-- <li @click="pageIndex = 2" :class="{'choose':pageIndex == 2}">爻象介绍</li> -->
-            <!-- <li @click="pageIndex = 3" :class="{'choose':pageIndex == 3}">诊断体验</li> -->
-            <!-- <li @click="pageIndex = 4" :class="{'choose':pageIndex == 4}">合作联系</li> -->
-        </ul>
-        <!-- <button :class="{'choose':state.indexType == 2}" @click="state.indexType = 2" v-if="pageIndex == 1">注册</button> -->
-        <!-- <button :class="{'choose':state.indexType == 1}" @click="state.indexType = 1" v-if="pageIndex == 1">登录</button> -->
-    </div>
-</div>

src/login/index/index.js

@@ -1,182 +0,0 @@
-import RandomCode from '@/tools/RandomCode';
-import { login , checkOnly ,register} from '@/api/login';
-
-export default {
-    components:{
-        RandomCode
-    },
-    data () {
-        return {
-            pageIndex:1,
-            state: {
-                indexType: 1,
-                carouselIndex: 0
-            },
-            check: {
-                inputCode:'',
-                generateCode:'',
-                codeError:false,
-                schoolError:false,
-                nameError:false,
-                phoneError:false,
-                passwordError:false,
-                checkPassWrong:false,
-                userAlready:false,
-            },
-            reg:{
-                region:'',
-                name:'',
-                username:'',
-                password:'',
-            },
-            error: false,
-            loading: false,
-        }
-    },
-    created() {
-        this.state.indexType = this.$route.query.reg == 'register' ? 2:1;
-        let vm = this;
-        document.onkeypress = function(e) {
-            let code;
-            if (!e) {
-                let e = window.event;
-            }
-            if (e.keyCode) {
-                code = e.keyCode;
-            } else if (e.which) {
-                code = e.which;
-            }
-            if (code == 13) {
-                if(vm.state.indexType == 2 && vm.reg.password == vm.reg.passwordConfirm && !vm.check.userAlready){
-                    vm.registerNew();
-                }
-                else if(vm.check.inputCode.toLowerCase() == vm.check.generateCode){
-                    vm.submit();
-                }
-            }
-        }
-    },
-    watch: {
-        'check.inputCode'(val){
-        this.checkCodeValue();
-        },
-        'reg.username'(){
-        this.checkUser();
-        },
-        'reg.passwordConfirm'(){
-        this.checkConfirm()
-        }
-    },
-    mounted () {
-        // chrome and ie
-        // document.documentElement.addEventListener('mousewheel',this.handleScroll,false)
-        //// firefox
-        // document.documentElement.addEventListener('DOMMouseScroll',this.handleScroll,false)
-    },
-    methods: {
-        checkCodeValue() {
-            if (this.check.inputCode && this.check.inputCode.length >= this.check.generateCode.length) {
-                this.check.codeError = (this.check.inputCode.toLowerCase() !== this.check.generateCode);
-                return;
-            }
-            this.check.codeError = false;
-        },            
-        getCode(code){
-            if (code) {
-                this.check.generateCode = code;
-            }
-        },
-        checkConfirm() {
-            if(this.reg.password && this.reg.passwordConfirm && this.reg.passwordConfirm.length >= this.reg.password.length){
-                this.check.checkPassWrong = (this.reg.passwordConfirm !== this.reg.password);
-                return;
-            }
-            this.check.checkPassWrong = false;
-        },
-        checkUser () {
-            checkOnly(this.reg.username).then(
-                result => {
-                    this.check.userAlready = result?false:true;
-                }
-            )
-        },
-        submit () {
-            if (!this.$refs.loginUsername.value || !this.$refs.loginPassword.value) {
-                this.error = true;
-                return;
-            }
-            this.loading = true;
-            login({
-                username:this.$refs.loginUsername.value.trim(),
-                password:this.$refs.loginPassword.value,
-                loginFrom: 'student'
-            })
-            .then(res => {
-                if (res && res.ok == '1')  {
-                    this.$router.replace({name: 'App'});
-                } else {
-                    this.error = true;
-                }
-                this.loading = false;
-            }, () => {
-                this.error = true;
-                this.loading = false;
-            });
-        },
-        registerNew() {
-            if (!this.reg.region) {
-                this.check.schoolError = true;
-                return;
-            }
-            if (!this.reg.name) {
-                this.check.nameError = true;
-                return;
-            }
-            if (!this.reg.username) {
-                this.check.phoneError = true;
-                return;
-            }
-            if (!this.reg.password) {
-                this.check.passwordError = true;
-                return;
-            }
-            this.loading = true;
-            register(this.reg).then(result => {
-                if(result){
-                    this.$alert('注册成功', '提示', {confirmButtonText: '确定'})
-                    this.state.indexType = 1;
-                    this.loading = false;
-                }
-            }, () => {
-                this.$alert('注册失败', '提示', {confirmButtonText: '确定'})
-                this.loading = false;
-            });
-        },
-        changeCarousel(val){
-            this.state.carouselIndex = val;
-        },
-        handleScroll(e){
-            if(this.pageIndex != 2) return;
-            if(e.wheelDelta != undefined){
-                if(e.wheelDelta > 0){
-                    this.$refs.carousel.prev();
-                }
-                else{
-                    this.$refs.carousel.next();
-                }
-            }
-            else{
-                if(e.detail > 0){
-                    this.$refs.carousel.next();
-                }
-                else{
-                    this.$refs.carousel.prev();
-                }
-            }
-        }
-    },
-    beforeDestroy() {
-        // document.documentElement.removeEventListener('mousewheel',() => {});
-        // document.documentElement.removeEventListener('DOMMouseScroll',() => {});
-    }
-}

src/login/index/index.scss

@@ -1,512 +0,0 @@
-.start-index{
-  height: 100%;
-  position: relative;
-  .top-part{
-    width: 100%;
-    height: 100px;
-    position: absolute;
-    top:0;
-    z-index: 2;
-    p{
-      display: inline-block;
-      text-align: center;
-      padding-top: 20px;
-      padding-left: 70px; 
-      &>label{
-        font-size: 35px;
-        color: #4AA9B8;
-        letter-spacing: 1px;
-        &:nth-child(3){
-          font-size: 13px;
-          letter-spacing: -1px;
-        }
-      }
-    }
-    ul{
-      display: inline-block;
-      position: absolute;
-      top:50%;
-      left: 50%;
-      transform:translate(-50%, -50%);
-      li{
-        display: inline-block;
-        height: 30px;
-        color: white;
-        font-size: 18px;
-        cursor: pointer;
-        margin: 0 20px;
-        &.choose{
-          color: #49a9b9;
-          font-weight: bold;
-          border-bottom: solid 3px #49a9b9;
-        }
-        &.choose1{
-          font-weight: bolder;
-        }
-      }
-      &.black{
-        li{
-          color: black;
-          &.choose{
-            color: #49a9b9;
-          }
-        }
-      }
-    }
-    &>button{
-      float: right;
-      margin: 30px 10px;
-      width: 70px;
-      height: 35px;
-      color: #49a9b9;
-      border: solid 2px #49a9b9;
-      border-radius: 10px; 
-      background: none;
-      font-size: 17px;
-      cursor: pointer;
-      &.choose,&:hover{
-        color: white;
-        background: -webkit-linear-gradient(left, #4ba8b7, #95d7e3); /* Safari 5.1 - 6.0 */
-        background: -o-linear-gradient(right,#4ba8b7, #95d7e3); /* Opera 11.1 - 12.0 */
-        background: -moz-linear-gradient(right,#4ba8b7, #95d7e3); /* Firefox 3.6 - 15 */
-        background: linear-gradient(to right,#4ba8b7, #95d7e3); /* 标准的语法 */
-      }
-      &:nth-child(3){
-        margin-right: 150px; 
-      }
-    }
-  }
-}
-div.input-log{
-  height: 42px;
-  border: solid 1px #898989;
-  margin-bottom: 35px;
-  position: relative;
-  img{
-    position: absolute;
-    top: 4px;
-    left: 6px;
-  }
-  input{
-    position: absolute;
-    left: 40px;
-    right: 0;
-    width: calc(100% - 40px);
-    height: 100%;
-    padding: 5px;
-    border: none;
-    color: #736A6B;
-  }
-  i{
-    position: absolute;
-    left: 40px;
-    bottom: -20px;
-  }
-  &.check-code{
-    width: 175px;
-    input{
-      width: 130px;
-    }
-    .random-code{
-      position: absolute;
-      right: -129px;
-      top: -1px;
-      border: solid 1px #898989;
-    }
-  }
-}
-div.login-submit{
-  height: 64px;
-  text-align: center;
-  input,button{
-    width: 100%;
-    height: 100%;
-    background: #0C78C3;
-    font-size: 35px;
-    color: white;
-    border: none;
-    &:hover{
-      opacity: 0.8;
-    }
-    &.noAllow{
-      cursor: not-allowed;
-      &:hover{
-        opacity: 0.9;
-      }
-    }
-  }
-}
-input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
-  -webkit-text-fill-color: #736A6B !important;
-  transition: background-color 5000s ease-in-out 5000s;
-}
-.error{
-  color: red;
-}
-
-.home-page{
-  height: 100%;
-  background: url(../../images/login/loginBack.jpg)no-repeat center;
-  background-size: cover;
-  .middle-part{
-    width: 100%;
-    height: calc(100% - 120px);
-    top: 120px;
-    position: relative;
-    &>img:nth-child(1),img:nth-child(2){
-      position: relative;
-      top:50%;
-      left: calc(20% - 150px);
-      transform:translateY(-50%);
-    }
-    &>img:nth-child(2){
-      margin-left: -260px;
-      margin-top: -180px;
-    }
-    .input-form{
-      width: 463px;
-      height: 540px;
-      background: url(../../images/login/3.png)no-repeat center;
-      position: absolute;
-      top: calc(50% - 270px);
-      left: calc(75% - 280px);
-      padding: 18px 40px 25px;
-      &>div:nth-child(1){
-        height: 55px;
-        text-align: center;
-        font-size: 33px;
-        font-weight: bold;  
-        color: white;
-      }
-      .login-form{
-        width: 100%;
-        height: calc(100% - 80px);
-        background: white;
-        padding: 40px;
-        &>p{
-          margin-top: 10px;
-          a{
-            cursor: pointer;
-            color: #6A6A6A;
-          }
-        }
-        &.register{
-          .input-log{
-            margin-bottom: 15px;
-          }
-          .agree-doc{
-            margin-top: 10px;
-            input{
-              width: 20px;
-              height: 15px;
-              position: relative;
-              top: 3px;
-              cursor: pointer;
-            }
-            a{
-              cursor: pointer;
-            }
-          }
-        }
-      }
-      &>p{
-        padding: 8px;
-        text-align: center;
-        font-size: 15px;
-        color: white;
-      }
-    }
-    &>p{
-      position: absolute;
-      bottom: 10px;
-      left: calc(50% - 160px);
-      color: white;
-      a{
-        color: white;
-        &:hover{
-          color: rgb(98, 100, 223);
-        }
-      }
-    }
-  }
-}
-.second-page{
-  height: 100%;
-  .el-carousel--vertical{
-    height: 100%;
-    .el-carousel__item{
-      &:nth-child(1){
-        background: #1d1c24;
-        position: relative;
-        &>p{
-          width: 100%;
-          text-align: center;
-          position: absolute;
-          &:nth-child(1){
-            color: #444351;
-            font-size: 30px;
-            top: 28%;
-          }
-          &:nth-child(2){
-            color: #444351;
-            font-size: 63px;
-            font-weight: bolder;
-            top: calc(28% + 50px);
-            letter-spacing: 4px;
-          }
-          &:nth-child(3){
-            color: #FCC546;
-            font-size: 150px;
-            top: calc(28% + 100px);
-          }
-        }
-        &>button{
-          width: 300px;
-          height: 80px;
-          position: absolute;
-          top: calc(50% + 180px);
-          left: calc(50% - 150px);
-          border: none;
-          color: #67BAC2;
-          font-size: 40px;
-          letter-spacing: 5px;
-          cursor: pointer;
-          background: -webkit-linear-gradient(left, #24222D, #38373F,#24222D); /* Safari 5.1 - 6.0 */
-          background: -o-linear-gradient(right,#24222D, #38373F,#24222D); /* Opera 11.1 - 12.0 */
-          background: -moz-linear-gradient(right,#24222D, #38373F,#24222D); /* Firefox 3.6 - 15 */
-          background: linear-gradient(to right,#24222D, #38373F,#24222D); /* 标准的语法 */
-          &:hover{
-            background: -webkit-linear-gradient(left, #38373F, #24222D, #38373F); /* Safari 5.1 - 6.0 */
-            background: -o-linear-gradient(right, #38373F, #24222D, #38373F); /* Opera 11.1 - 12.0 */
-            background: -moz-linear-gradient(right, #38373F, #24222D, #38373F); /* Firefox 3.6 - 15 */
-            background: linear-gradient(to right, #38373F, #24222D, #38373F); /* 标准的语法 */
-          }
-          i{
-            display: inline-block;
-            width: 60px;
-            height: 30px;
-            border: solid 3px #67BAC2;
-            position: absolute;
-            &:nth-child(2){
-              top:0;
-              left: 0;
-              border-bottom: none;
-              border-right: none;
-            }
-            &:nth-child(3){
-              bottom: 0;
-              right: 0;
-              border-left: none;
-              border-top: none;
-            }
-          }
-        }
-        &>img{
-          position: absolute;
-          &:nth-child(5){
-            top: 29%;
-            left: calc(50% - 600px);
-          }
-          &:nth-child(6){
-            width: 90px;
-            transform:rotate(130deg);
-            -ms-transform:rotate(130deg); /* Internet Explorer */
-            -moz-transform:rotate(130deg); /* Firefox */
-            -webkit-transform:rotate(130deg); /* Safari 和 Chrome */
-            -o-transform:rotate(130deg);
-            top: calc(50% + 200px);
-            left: calc(50% + 500px);
-          }
-          &:nth-child(7){
-            top: calc(50% + 180px);
-            left: calc(50% - 550px);
-          }
-          &:nth-child(8){
-            width: 120px;
-            transform:rotate(-60deg);
-            -ms-transform:rotate(-60deg); /* Internet Explorer */
-            -moz-transform:rotate(-60deg); /* Firefox */
-            -webkit-transform:rotate(-60deg); /* Safari 和 Chrome */
-            -o-transform:rotate(-60deg);
-            top: 180px;
-            right: 100px;
-          }
-          &:nth-child(9){
-            width: 200px;
-            transform:rotate(-10deg);
-            -ms-transform:rotate(-10deg); /* Internet Explorer */
-            -moz-transform:rotate(-10deg); /* Firefox */
-            -webkit-transform:rotate(-10deg); /* Safari 和 Chrome */
-            -o-transform:rotate(-10deg);
-            top: calc(50% - 60px);
-            right: -75px;
-          }
-          &:nth-child(10){
-            width: 200px;
-            transform:rotate(-140deg);
-            -ms-transform:rotate(-140deg); /* Internet Explorer */
-            -moz-transform:rotate(-140deg); /* Firefox */
-            -webkit-transform:rotate(-140deg); /* Safari 和 Chrome */
-            -o-transform:rotate(-140deg);
-            top: calc(50% + 230px);
-            left: -40px;
-          }
-        }
-      }
-      &:nth-child(2){
-        background: #ffffff;
-        &>img{
-          position: absolute;
-          &:nth-child(1){
-            width: calc(100% + 100px);
-            top: 0;
-            left: -50px;
-          }
-          &:nth-child(2){
-            width: calc(100% + 40px);
-            bottom: 0;
-            left: -20px;
-          }
-        }
-        &>p{
-          font-size: 45px;
-          color: #4AA9B8;
-          padding: 20px 30px;
-          font-weight: bolder;
-          border-bottom: solid 5px #4AA9B8;
-          position: absolute;
-          top: 15%;
-          left: calc(50% - 140px);
-        }
-        &>ul{
-          width: 100%;
-          text-align: center;
-          position: absolute;
-          top: calc(20% + 100px);
-          li{
-            width: 330px;
-            display: inline-block;
-            vertical-align: top;
-            margin: 0 33px;
-            img{
-              width: 110px;
-            }
-            p:nth-child(2){
-              font-size: 30px;
-              font-weight: bold;
-              color: #4AA9B8;
-              margin: 15px;
-            }
-            p:nth-child(3){
-              margin: 0 auto;
-              text-align: left;
-              font-size: 25px;
-            }
-            &:nth-child(1),&:nth-child(2){
-              p:nth-child(3){
-                width: 230px;
-              }
-            }
-          }
-        }
-      }
-      &:nth-child(3){
-        background: url(../../images/index/page3Back.jpg)no-repeat center #EFEFEF;
-        background-size: cover;
-        &>p{
-          img{
-            margin-right: 20px;
-          }
-          position: absolute;
-          top:16%;
-          width: 100%;
-          text-align: center;
-          font-size: 45px;
-          font-weight: bolder; 
-          color: #4AA9B8;
-        }
-        &>ul{
-          width: 100%;
-          text-align: center;
-          position: absolute;
-          li{
-            width: 200px;
-            display: inline-block;
-            margin: 0 80px;
-            img{
-              width: 120px;
-            }
-            p{
-              font-size: 30px;
-              font-weight: bold; 
-              color: #4AA9B8;
-              margin-top: 5px; 
-            }
-          }
-          &:nth-child(2){
-            top: calc(25% + 80px);
-          }
-          &:nth-child(3){
-            top: calc(50% + 80px);
-          }
-        }
-      }
-      &:nth-child(4){
-        background: url(../../images/index/page4Back.jpg)no-repeat bottom #FFFFFF;
-        background-size: 100% 50%;
-        &>p{
-          font-size: 45px;
-          color: #4AA9B8;
-          padding: 20px 30px;
-          font-weight: bolder;
-          border-bottom: solid 5px #4AA9B8;
-          position: absolute;
-          top: 10%;
-          left: calc(50% - 140px);
-        }
-        &>ul{
-          width: 100%;
-          text-align: center;
-          position: absolute;
-          li{
-            width: 300px;
-            display: inline-block;
-            margin: 0 30px;
-            img{
-              width: 100%;
-            }
-          }
-          &:nth-child(2){
-            top: calc(16% + 90px);
-          }
-          &:nth-child(3){
-            top: calc(46% + 80px);
-          }
-        }
-        &>div{
-          background: rgba(0,0,0,0.8);
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          height: 80px;
-          text-align: center;
-          color: white;
-          font-size: 20px;
-          letter-spacing: 2px;
-          padding-top: 30px;
-        }
-      }
-    }
-    /deep/ .el-carousel__indicators--vertical{
-      right: 50px;
-      .el-carousel__button{
-        width: 20px;
-        height: 20px;
-        background: #616161;
-        border-radius: 10px; 
-        border: solid 2px black;
-        margin: 20px 0;
-      }
-    }
-  }
-}

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router';
 
 //懒加载
 const App = () => import(/* webpackChunkName: "group-app"*/'@/App');
-// const Index = () => import(/* webpackChunkName: "group-app"*/'@/login/Index');
+const Login = () => import(/* webpackChunkName: "group-controlApp"*/'@/login/Login');
 const NotFound = () => import(/* webpackChunkName: "group-app"*/'@/NotFound');
 
 const MainPage = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage');
@@ -54,11 +54,11 @@ export default new Router({
             }],
         }]
     },
-    // {
-    //     path: '/index',
-    //     name: 'Index',
-    //     component: Index
-    // },
+    {
+        path: '/login',
+        name: 'Login',
+        component: Login
+    },
     {
 		path: '*',
         name: 'NotFound',