IDCOL/webConfig/src/views/login.vue

<template>
    <div class="login">
        <div class="login_left">
            <img src="../img/login/login_bg.png">
        </div>
        <div class="login_right">
            <div class="imgLogo_box"><img src="../img/login/logo.png"></div>
            <p class="p2">Welcome Sign In</p>
            <!-- <p class="p3">{{$t('App.login.text2')}}</p> -->
            <div class="role_box">
                <i class="iconfont icon-quanxian1"></i>
                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_dashboard_role')">
                    <span class="el-dropdown-link">
                        <span>{{roleName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_role">
                        <el-dropdown-item v-for="item in roleNav" :class="{'select':item.id==role}" :command="{'key':'role','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </div>
            <el-input
              class="input1"
              :placeholder="$t('App.login.text3')"
              v-model="username">
                <img slot="prefix" src="../img/login/user.png" />
            </el-input>
            <el-input
              class="input2"
              show-password
              :placeholder="$t('App.login.text4')"
              v-model="password">
                <img slot="prefix" src="../img/login/password.png" />
            </el-input>
            <div class="input3_box">
                <el-input
                  class="input3"
                  :placeholder="$t('App.login.text5')"
                  v-model="code">
                    <img slot="prefix" src="../img/login/code.png" />
                </el-input>
                <div class="img_box" @click="getCodeImage">
                    <img :src="codeImage" />
                </div>
             </div>
            <div class="btn_box" @click="login">
                <span>{{$t('App.login.text6')}}</span>
            </div>
            <div class="flex_box">
                <el-checkbox v-model="checkboxRememberPassword">Remember password</el-checkbox>
                <span class="btn_span" @click="openPage('retrievePassword')">{{$t('App.login.text7')}}</span>
            </div>
            <div class="login_box">
                <div class="box1">
                    <!-- <img src="../img/logo_1.png"> -->
                    <span><a href="http://www.beian.miit.gov.cn" target="view_window">京ICP备14007358号-1</a><span>/ Powered by © 2008-2019 IDSS.CN</span></span>
                </div>
                <!-- <p class="p4">Powered by <span @click="openWeb('https://www.iotena.com')">IOTENA</span> | <a href="http://www.beian.miit.gov.cn" target="view_window">粤ICP备20011150号-1</a></p> -->
                <!-- <p class="p4">A human-centric IoT eeo-system for indoor health enhancement Powered by <span @click="openWeb('https://www.iotena.com')"><img src="../img/logo_iotena.png"></span></p> -->
            </div>
            <!-- <p class="p4">粤ICP备20011150号-1 / Powered by © 2008-2019 IDSS.CN</p> -->
        </div>
    </div>
</template>

<script type="text/javascript">
    import allUel from '../api/allUel.js'
    import base from '../api/base.js'
    import jqueryK from '../api/jqueryK.js'
    import { mapGetters } from 'vuex'
    export default {
        name: 'login',
        data () {
            return {
                role:'',
                roleNav:[{id:1,name:'admin'},{id:2,name:'Manufacturer'},{id:3,name:'Supplier'},{id:4,name:'PO'},{id:5,name:'Upazilla'},{id:6,name:'Monitoring'},{id:7,name:'Controlling'}],
                username:'',
                password:'',
                code:'',
                checkboxRememberPassword:false,
                codeImage:'',
            }
        },
        computed:{
            ...mapGetters({version:'version',routerStr:'routerStr',remRatio:'remRatio'}),
            roleName(){
                let name;
                for(let d of this.roleNav){
                    if(d.id == this.role){
                        name = d.name;
                    }
                }
                return name;
            },
        },
        mounted(){
            this.role = 1;
            var storage = window.localStorage;
            storage.setItem('userData','');
            if(storage.getItem("rememberPassword")){
              this.checkboxRememberPassword = true;
              this.username = storage.getItem('udfn');
              this.password = storage.getItem('udfp');
              storage.getItem('udfp',jqueryK.base64Decode(this.password));
            }
            this.$store.commit('SIDEBARSHOW',{
                sideBarShow:false,
            })
            this.getCodeImage();
        },
        methods:{
            commandHide(val){
                this.$nextTick(function(){
                    if($('.'+val)&&$('.'+val+' >.select').offset()){
                        $('.'+val).animate({scrollTop: $('.'+val).scrollTop() + $('.'+val+' >.select').offset().top - $('.'+val).offset().top - 100})
                    }
                })
            },
            commandDropdown(obj){
                this.$set(this,obj.key,obj.id)
            },
            login(){
                var storage = window.localStorage;
                let client_key = jqueryK.md5(navigator.userAgent);
                base.ajax_post(
                    allUel.login.login,
                    {
                        username:this.username,
                        password:this.password,
                        code:this.code,
                        role:this.role,
                        client_key:client_key,
                    },
                    {},
                    data => {
                        this.$message({
                          showClose: true,
                          message: 'Login successfully',
                          type: 'success'
                        });
                        data.data.client_key = client_key;
                        data.data.version = this.version;
                        this.$store.commit('USERDATAFUN',{
                            username:data.data.username,
                            id:data.data.id,
                            role:data.data.role,
                            lastLoginTime:data.data.lastLoginTime,
                            client_key:data.data.client_key,
                            token:data.data.token,
                            number:data.data.number,
                            avatar:data.data.avatar,
                            version:data.data.version,
                            privilege:data.data.privilege,
                        })
                        this.$router.push({path:'/dashboard'})
                        this.$store.commit('ROUTERSTRFUN',{
                          routerStr:'/dashboard',
                        })
                        storage.setItem('userData',JSON.stringify(data.data))
                        if(this.checkboxRememberPassword){
                          storage.setItem('rememberPassword','true');
                          storage.setItem('udfn',this.username);
                          storage.setItem('udfp',jqueryK.base64Encode(this.password));
                        }
                        
                        this.$store.commit('HEADERIDFUN',{
                            headerUpdate: this.headerUpdate+1,
                        })
                    },
                    this
                )
            },
            getCodeImage(){
                base.ajax_post(
                    allUel.login.get_code_image,
                    {
                        type:'0'
                    },
                    {},
                    data=>{
                        this.codeImage = data.data.path;
                    },
                    this
                )
            },
            openPage(val){
                window.open('#/'+val);
            },
            openWeb(val){
                window.open(val);
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
    .login{
        width: 100%;
        height: 100%;
        min-height: 60rem;
        // min-width: 120rem;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        display: flex;
        // background-image: url('../img/login_bg_1.jpg');
        background-size: 100% 100%;
        background-position: center;
        .login_left{
          position: relative;
          width: calc(100% - 41.2rem);
          .logo_box{
            position: absolute;
            left: 2.5rem;bottom: 2rem;
            width: 13.3rem;height: 3.2rem;
          }
          img{
            width: 100%;height: 100%;
          }
        }
        .login_right{

            position: relative;
            // right: 0;
            // top:0;bottom: 0;
            padding-left: 3.75rem;
            width: 41.17rem;
            // background: rgba(255,255,255,0.6);
            // background: rgba(184, 170, 144, 0.9);
            .imgLogo_box{
                height: 2.7rem;line-height: 2.7rem;
                margin-top: 7rem;
                img{
                    height: 100%;
                    // height: 100%;
                }
            }
            .p2{
                margin-top: 0.5rem;
                font-family: AlibabaPuHuiTiM;
                font-size: 3.6rem;
                color: #333333;
                letter-spacing: 0;
            }
            .role_box{
                display: flex;
                align-items: center;
                margin-top: 9rem;
                height: 3.33rem;line-height: 3.33rem;
                width: 16rem;
                background-color: #F6F8FA;
                border-radius: 3.33rem;
                .icon-quanxian1{
                    width: 2.83rem;height: 2.83rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    background-color:#fc8940;
                }
                .el-dropdown{
                    width: calc(100% - 4.7rem);
                    .el-dropdown-link{
                        cursor: pointer;
                        display: inline-block;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        padding: 0 1rem 0 0.8rem;
                    }
                    .el-icon--right{
                        line-height: 3.33rem;
                    }
                }
            }
            .p3{
                font-family: AlibabaPuHuiTiM;
                font-size: 1.83rem;
                color: #657085;
                letter-spacing: 0;
            }
            .el-input{
                width: 31.67rem;
                .el-input__inner{
                    height: 3.33rem;line-height: 3.33rem;
                    background: #F6F8FA;
                    border-radius: 2px;
                    border-radius: 2px;
                    padding-left: 3.2rem;
                }
                .el-input__prefix{
                    left: 0;
                    width: 3.2rem;
                }
                img{
                    margin: 1.1rem 0 0 0.3rem;
                    height: 1rem;
                }
            }
            .input1{
                margin: 1.67rem 0 0 0rem;
            }
            .input2,{
                margin: 1.67rem 0 0 0rem;
                .el-input__icon{
                    line-height: 3.33rem;
                }
            }
            .input3_box{
                margin: 1.67rem 0 0 0rem;
                display: flex;
                .input3{
                  width: 20.5rem;
                }
                .img_box{
                    background: #F2F2F2;
                    // border: 1px solid #DDDDDD;
                    border-radius: 2px;
                    overflow: hidden;
                    margin-left: 0.83rem;
                    width: 10.33rem;
                    cursor: pointer;
                    img{
                        width: 100%;height: 100%;
                    }
                }
            }
            .btn_box{
                margin: 2.5rem 0 0.83rem 1rem;
                width: 31.67rem;
                height: 3.33rem;line-height: 3.33rem;
                text-align: center;
                background: #fc8940;;
                border: 1px solid #fc8940;;
                border-radius: 2px;
                cursor: pointer;
                span{
                  font-family: PingFang-SC-Medium;
                  font-size: 1.17rem;
                  color: #FFFFFF;
                  letter-spacing: 0;
                  text-align: center;
                }
            }
            .flex_box{
                margin-left: 1rem;
                width: 31.67rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .el-checkbox{
                    color: #666666;;
                }
                .el-checkbox__input.is-checked+.el-checkbox__label{
                    color: #666666;
                }
                .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
                    background-color: #fc8940;
                    border-color: #fc8940;
                }
                .btn_span{
                    font-family: PingFang-SC-Medium;
                    font-size: 1rem;
                    color: #FC8940;
                    letter-spacing: 0;
                    text-align: right;
                    line-height: 1.42rem;
                    cursor: pointer;
                }
            }
            .login_box{
                position: absolute;
                left: 3.75rem;
                bottom: 1.08rem;
                width: 100%;
                // text-align: center;
                // img{
                //   width: 10rem;height: 2.42rem;
                // }
                .box1{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 0 4.75rem;
                    padding-bottom: 0.2rem;
                    text-align: center;
                    // border-bottom: 0.1rem solid #999999;
                    img{
                        width: 11rem;
                    }
                    a{
                        font-family: AlibabaPuHuiTiR;
                        font-size: 1rem;
                        color: #999999;
                        font-weight:500;
                    }
                    span{
                        font-size: 1rem;
                        color: #999999;
                        font-weight:500;
                    }
                }
                .p4{
                    font-family: AlibabaPuHuiTiR;
                    font-size: 1rem;
                    color: #999999;
                    margin: 0 4.75rem;
                    // letter-spacing: 0;
                    span{
                        display: inline-block;
                        height: 2rem;
                        position: relative;
                        top: 0.8rem;
                        left: -0.5rem;
                        cursor: pointer;
                        // color: #17598a;
                        // font-size: 1.2rem;
                        // font-weight:500;
                        img{
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
</style>