ssti-CollegeManage/src/views/login.vue

<template>
    <!-- 登录页面 -->
  <div class="login">
    <!-- <div class="loginBc">
        <img src="@/assets/img/login-bg-autumn.jpg" class="loginImg" alt="">
    </div> -->
    <!-- 切换语言框 -->
    <div class="loginContentLang">
        <div style="font-size: 15px;">
            Language:
        </div>
            <div class="loginContentLangSelect">
                <select v-model="value">
                    <option value="" selected:disabled style="display:none">简体中文</option>
                    <option v-for="(i,index) in language" :label="i.label" :key="index" :value="i.values" placeholder="jianyi"></option>
                </select>
            </div>
    </div>
    <!-- 切换语言框结束 -->


        <!-- 登录框logo开始 -->
        <div class="loginLogo">
            <img src="@/assets/img/login-logo.png" alt="">
        </div>
        <!-- 登录框logo结束 -->



    <!-- 登录框-->
    <div class="loginContent">
        <div class="loginTab1">
            <div class="loginTab1way">
                <div @click="zhLog" ref="tet1" class="loginTab1way1 color1">账号登陆</div>
                <div @click="dtmLog" ref="tet2" class="loginTab1way1 color2">动态码登陆</div>
            </div>

            <!-- 账户登录 -->
            <div class="loginTab1wayContent" v-show="isShow==1">
                <div class="loginTab1wayContentInp">
                    <div class="loginTab1InpContentLeft"></div>
                    <div>
                        <input v-model="form.account" class="input1" placeholder="学号/职工号"/>
                    </div>
                </div>

                <div class="loginTab1wayContentInp">
                    <div class="loginTab1InpContentLeft2"></div>
                    <div>
                        <input v-model="form.pwd" type="password" class="input1" placeholder="密码"/>
                    </div>
                </div>
                <p class="loginTab1ContentText">
                    <a href="">忘记绑定邮箱、手机号，请点击提示</a>
                </p>
                <el-button type="success" class="btn" @click="login">登录</el-button>
                <p class="loginTab1ContentText">
                    <a href="">忘记密码?</a>
                </p>
                <el-divider style="color:#999999">社交账号登陆</el-divider>
                <div class="loginTab1ContentQqWei">
                    <p>
                        <a href=""><img src="@/assets/img/qq.png" alt=""></a>
                        <a href=""><img src="@/assets/img/weixin.png" alt=""></a>
                    </p>
                </div>
            </div>
            <!-- 账户登录结束 -->

            <!-- 动态码登录 -->
            <div class="loginTab1wayContent" v-show="isShow==2">
                <div class="loginTab1wayContentInp">
                    <div class="loginTab1InpContentLeft"></div>
                    <div>
                        <input v-model="form.account" class="input1" placeholder="学号/职工号"/>
                    </div>
                </div>

                <div style="display: flex;">
                    <div class="loginTab1wayContentInp2">
                        <div class="loginTab1InpContentLeft2"></div>
                        <div>
                            <input v-model="form.pwd" class="input2" placeholder="动态码"/>
                        </div>                    
                    </div>
                    <div class="loginTab1wayContentInp2btn">获取动态码</div>
                </div>

                <el-button type="success" class="btn" @click="login1" style="margin-bottom: 20px;">登录</el-button>
            </div>

            <!-- 动态码登录结束 -->

        </div>
    </div>
    <!-- 登录框 -->

  </div>
</template>

<script>
    export default {
        data() {
            return {
                isShow:1,
                value:'' ,//语言切换
                language:[
                    {
                        label:'简体中文',
                        values:0,
                    },
                    {
                        label:'English',
                        values:1
                    }
                ],
                form:{
                    account:'',
                    pwd:''
                }
                
            }
        },
        methods:{
            login(){
                let param = 
                        {
                            username:this.form.account,
                            password:this.form.pwd
                        };
                        console.log(param);
            // console.log(param);   
                        // this.ajax
                        //     .post("/login",param)
                        //     .then((res)=>{
                        //         // console.log(res.data);
                        //             const q=res.data.data[0]
                        //             if (res.data.status==0) {
                        //                 this.$message.success(res.data.message);
                        //                 this.$store.dispatch("UpdateUser",{name:q.name,tel:q.username,school:q.school,id:q.id})
                        //                 sessionStorage.setItem('state',JSON.stringify({user:{name:q.name,tel:q.username,school:q.school,id:q.id}}))
                                        // this.$router.push({path:"Class"}); //页面路由跳转
                                        this.$router.push('/projectApplication')
                    //                 }else{
                    //                     this.$message.error(res.data.message);
                    //                 }
                    //         },(error)=>{
                    //             console.log(error);
                    //         })   
                    // }
            },
            
            login1(){

            },
            zhLog(){
                this.$refs.tet1.classList.remove('color2')
                this.$refs.tet1.classList.add('color1')
                this.$refs.tet2.classList.remove('color1')
                this.$refs.tet2.classList.add('color2')
                this.isShow=1?1:1;
            },
            dtmLog(){
                this.$refs.tet2.classList.remove('color2')
                this.$refs.tet2.classList.add('color1')
                this.$refs.tet1.classList.remove('color1')
                this.$refs.tet1.classList.add('color2')
                this.isShow=2?2:2;

            }
        }
    }
</script>

<style lang="less">
   
.login{
        width: 100%;
        height: 98%;
        position: relative;
        background: url(@/assets/img/login-bg-autumn.jpg) no-repeat  0 0/100% 100%;
   
    .loginContent{   //登录框
        position: absolute;
        width: 960px;
        margin: 20px auto;
        top: 10%;
        right: 15%;
        font-family: 'Microsoft YaHei';
        font-size: 13px;
        color: #676A6C;
        .loginTab1{
            background:rgba(255, 255, 255, .9);
            width: 420px;
            height: auto;
            margin-top: 110px;
            float: right;
            .loginTab1way{
                display: flex;
                font-size: 19px;
                color: #676A6C;
                cursor: pointer;
                .loginTab1way1{
                    width: 50%;
                    height: 48px;
                    text-align: center;
                    line-height: 48px;
                }
                .color1{
                    background: rgba(255, 255, 255, .9);
                }
                .color2{
                    background: #8c969f;
                    color: #ffffff;
                }
            }
            .loginTab1wayContent{
                margin: 25px 35px;
                color: #676A6C;
                
                // 账号登录样式
                .loginTab1wayContentInp{
                    width: 100%;
                    height: 38px;
                    margin-bottom: 17px;
                    display: flex;
                    border: 1px #ccc solid;
                    .loginTab1InpContentLeft{
                        width: 33px;
                        height: 38px; 
                        border-right: 1px solid #ccc;
                        background: #f2f2f2 url(@/assets/img/icons.png) 6px -73px no-repeat;
                    }
                    .loginTab1InpContentLeft2{
                        width: 33px;
                        height: 38px; 
                        // background:rgba(138, 138, 137, .8) ;
                        border-right: 1px solid #ccc;
                        background: #f2f2f2 url(@/assets/img/icons.png) -128px -43px no-repeat;
                    }
                    
                    .input1{
                        width: 292px;
                        height: 18px;
                        padding: 10px 12px;
                        outline: none;
                        border: none;
                    }
                    .input2{
                        width: 112px;
                        height: 18px;
                        padding: 10px 12px;
                        outline: none;
                        border: none;
                    }
                }

                .loginTab1wayContentInp2{
                    // background: #1ab394;
                    width: 170px;
                    height: 38px;
                    margin-bottom: 57px;
                    display: flex;
                    border: 1px #ccc solid;
                    .loginTab1InpContentLeft{
                        width: 33px;
                        height: 38px; 
                        border-right: 1px solid #ccc;
                        background: #f2f2f2 url(@/assets/img/icons.png) 6px -73px no-repeat;
                    }
                    .loginTab1InpContentLeft2{
                        width: 33px;
                        height: 38px; 
                        // background:rgba(138, 138, 137, .8) ;
                        border-right: 1px solid #ccc;
                        background: #f2f2f2 url(@/assets/img/icons.png) -128px -43px no-repeat;
                    }
                    
                    .input1{
                        width: 292px;
                        height: 18px;
                        padding: 10px 12px;
                        outline: none;
                        border: none;
                    }
                    .input2{
                        width: 112px;
                        height: 18px;
                        padding: 10px 12px;
                        outline: none;
                        border: none;
                    }
                }
                .loginTab1wayContentInp2btn{
                    width: 100px;height: 38px;
                    line-height: 38px;
                    text-align: center;
                    background: #EBDC99;
                    margin-left: 80px;
                }
            }
            .loginTab1ContentText{
                margin-bottom: 10px;
                a{
                    text-decoration: none;color: #676A6C;
                }
            }
            .btn{
                width: 100%;
                background: #1ab394;
                margin-bottom: 7px;
            }
            .loginTab1ContentQqWei{
                width: 100%;
                display: flex;
                justify-content:center;
                a{
                    margin-right: 15px;
                }
            }
        }
        
    }
    .loginLogo{
            position: absolute;
            top: 5%;
            left: 25%;
            width: 30%;
            padding: 0;
            font-family: 'Microsoft YaHei';
            font-size: 13px;
            color: #676A6C;
            display: block;
            img{
                width: 100%;
                height: 100%;
            }
        }
    .loginContentLang{
            position: absolute;
            top: 40px;
            right: 40px;
            display: flex;
            font-size: 17px;
            .loginContentLangSelect{
                margin-left: 10px;
                border-radius: 5px;
            }
        }
    }
</style>