settle_down_web/src/views/login/index.vue

<template>
  <div class="newLogin">
    <div class="logoBox">
      <img class="logo" src="./newLoginImage/LOGO.svg">
      <span style="margin-left: 0.5vw">无锡市安居投资发展有限公司</span>
    </div>
    <div class="QRcodeBody">
      <img src="./image/QRcode.svg" class="QRcode">
      <span class="qrInfo">扫一扫进微信小程序</span>
    </div>
    <div class="loginBox">
      <div class="objectName">
        保障管理系统
      </div>
      <div class="tabBody">
<!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--          <el-tab-pane label="领导小组" name="领导小组">-->
<!--            <div class="MsgBox">-->
<!--              <div style="color: #777777;font-size: 1vw">欢迎登录</div>-->
<!--              <el-form-->
<!--                ref="loginForm"-->
<!--                :model="loginForm"-->
<!--                :rules="loginRules"-->
<!--                auto-complete="on"-->
<!--                class="inputBox"-->
<!--                label-position="left"-->
<!--              >-->
<!--                <el-form-item prop="username">-->
<!--                  <el-input-->
<!--                    ref="username"-->
<!--                    v-model="loginForm.username"-->
<!--                    auto-complete="on"-->
<!--                    placeholder="请输入用户名"-->
<!--                    prefix-icon="el-icon-user"-->
<!--                    tabindex="1"-->
<!--                    type="text"-->
<!--                  />-->
<!--                </el-form-item>-->
<!--                <div class="forgetBox">-->
<!--                  <el-form-item prop="password">-->
<!--                    <el-input-->
<!--                      ref="password"-->
<!--                      v-model="loginForm.password"-->
<!--                      auto-complete="on"-->
<!--                      placeholder="请输入密码"-->
<!--                      prefix-icon="el-icon-lock"-->
<!--                      show-password-->
<!--                      tabindex="2"-->
<!--                    />-->
<!--                  </el-form-item>-->
<!--                </div>-->
<!--                <div class="yzBox">-->
<!--                  <el-form-item prop="validateCode">-->
<!--                    <el-input-->
<!--                      ref="validateCode"-->
<!--                      v-model="loginForm.validateCode"-->
<!--                      placeholder="验证码"-->
<!--                      prefix-icon="el-icon-key"-->
<!--                      tabindex="3"-->
<!--                      @keyup.enter.native="handleLogin"-->
<!--                    />-->
<!--                  </el-form-item>-->
<!--                  <img-->
<!--                    id="codeImg"-->
<!--                    :src="captchaImage"-->
<!--                    alt="点击更换"-->
<!--                    class="yzm"-->
<!--                    title="点击更换"-->
<!--                    @click="codeImageRefresh"-->
<!--                  >-->
<!--                </div>-->
<!--                &lt;!&ndash;记住密码 待接驳&ndash;&gt;-->
<!--                <div class="remeber"><el-checkbox v-model="checked">-->
<!--                  <span style="font-size: 0.633vw;"> 记住密码</span>-->
<!--                </el-checkbox>-->
<!--                </div>-->
<!--                <el-button-->
<!--                  class="eBtn"-->
<!--                  @click.native.prevent="handleLogin"-->
<!--                >登 录</el-button>-->
<!--              </el-form>-->
<!--              <div class="ljzcBox" style="margin-top: 1.5vw">-->
<!--                &lt;!&ndash; 联系管理员 待接驳 &ndash;&gt;-->
<!--                还没有账户？-->
<!--                <el-tooltip class="item" content="电话：(0510)  6661 9939" effect="dark" placement="right">-->
<!--                  <span class="ljzc">联系管理员</span>-->
<!--                </el-tooltip>-->
<!--              </div>-->
<!--              <div class="ljzcBox">-->
<!--                技术支持：城云智慧科技 | 超管解锁-->
<!--              </div>-->
<!--              &lt;!&ndash;              <div class="ljzcBox">&ndash;&gt;-->
<!--              &lt;!&ndash;                联系电话：(0510)  6661 9939&ndash;&gt;-->
<!--              &lt;!&ndash;              </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="行业监管" name="行业监管">-->
<!--            <div class="MsgBox">-->
<!--              <div style="color: #777777;font-size: 1vw">欢迎登录</div>-->
<!--              <el-form-->
<!--                ref="loginForm"-->
<!--                :model="loginForm"-->
<!--                :rules="loginRules"-->
<!--                auto-complete="on"-->
<!--                class="inputBox"-->
<!--                label-position="left"-->
<!--              >-->
<!--                <el-form-item prop="industry">-->
<!--                  <el-select v-model="selIndustry" placeholder="请选择行业">-->
<!--                    <el-option-->
<!--                      v-for="item in options"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item prop="username">-->
<!--                  <el-input-->
<!--                    ref="username"-->
<!--                    v-model="loginForm.username"-->
<!--                    auto-complete="on"-->
<!--                    placeholder="请输入用户名"-->
<!--                    prefix-icon="el-icon-user"-->
<!--                    tabindex="1"-->
<!--                    type="text"-->
<!--                  />-->
<!--                </el-form-item>-->
<!--                <div class="forgetBox">-->
<!--                  <el-form-item prop="password">-->
<!--                    <el-input-->
<!--                      ref="password"-->
<!--                      v-model="loginForm.password"-->
<!--                      auto-complete="on"-->
<!--                      placeholder="请输入密码"-->
<!--                      prefix-icon="el-icon-lock"-->
<!--                      show-password-->
<!--                      tabindex="2"-->
<!--                    />-->
<!--                  </el-form-item>-->
<!--                </div>-->
<!--                <div class="yzBox">-->
<!--                  <el-form-item prop="validateCode">-->
<!--                    <el-input-->
<!--                      ref="validateCode"-->
<!--                      v-model="loginForm.validateCode"-->
<!--                      placeholder="验证码"-->
<!--                      prefix-icon="el-icon-key"-->
<!--                      tabindex="3"-->
<!--                      @keyup.enter.native="handleLogin2"-->
<!--                    />-->
<!--                  </el-form-item>-->
<!--                  <img-->
<!--                    id="codeImg"-->
<!--                    :src="captchaImage"-->
<!--                    alt="点击更换"-->
<!--                    class="yzm"-->
<!--                    title="点击更换"-->
<!--                    @click="codeImageRefresh"-->
<!--                  >-->
<!--                </div>-->
<!--                &lt;!&ndash;记住密码 待接驳&ndash;&gt;-->
<!--                <div class="remeber"><el-checkbox v-model="checked">-->
<!--                  <span style="font-size: 0.633vw;"> 记住密码</span>-->
<!--                </el-checkbox>-->
<!--                </div>-->
<!--                <el-button-->
<!--                  class="eBtn"-->
<!--                  @click.native.prevent="handleLogin2"-->
<!--                >登 录</el-button>-->
<!--              </el-form>-->
<!--              <div class="ljzcBox" style="margin-top: 1.5vw">-->
<!--                &lt;!&ndash; 联系管理员 待接驳 &ndash;&gt;-->
<!--                还没有账户？-->
<!--                <el-tooltip class="item" content="电话：(0510)  6661 9939" effect="dark" placement="right">-->
<!--                  <span class="ljzc">联系管理员</span>-->
<!--                </el-tooltip>-->
<!--              </div>-->
<!--              <div class="ljzcBox">-->
<!--                技术支持：无锡市大数据集团有限公司-->
<!--              </div>-->
<!--              <div class="ljzcBox">-->
<!--                联系电话：(0510)  6661 9939-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="企业" name="企业">-->
<!--            <div class="MsgBox">-->
<!--              <div style="color: #777777;font-size: 1vw">欢迎登录</div>-->
<!--              <el-form-->
<!--                ref="loginForm"-->
<!--                :model="loginForm"-->
<!--                :rules="loginRules"-->
<!--                auto-complete="on"-->
<!--                class="inputBox"-->
<!--                label-position="left"-->
<!--              >-->
<!--                <el-form-item prop="industry">-->
<!--                  <el-select v-model="selIndustry" placeholder="请选择">-->
<!--                    <el-option-->
<!--                      v-for="item in options"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-button-->
<!--                  class="eBtn"-->
<!--                  @click.native.prevent="handleLogin3"-->
<!--                >去 登 录</el-button>-->
<!--              </el-form>-->
<!--              <div class="ljzcBox" style="margin-top: 1.5vw">-->
<!--                &lt;!&ndash; 联系管理员 待接驳 &ndash;&gt;-->
<!--                还没有账户？-->
<!--                <el-tooltip class="item" content="电话：(0510)  6661 9939" effect="dark" placement="right">-->
<!--                  <span class="ljzc">联系管理员</span>-->
<!--                </el-tooltip>-->
<!--              </div>-->
<!--              <div class="ljzcBox">-->
<!--                技术支持：无锡市大数据集团有限公司-->
<!--              </div>-->
<!--              <div class="ljzcBox">-->
<!--                联系电话：(0510)  6661 9939-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
          <div class="MsgBox">
              <div style="color: #777777;font-size: 1vw">欢迎登录</div>
              <el-form
                  ref="loginForm"
                  :model="loginForm"
                  :rules="loginRules"
                  auto-complete="on"
                  class="inputBox"
                  label-position="left"
              >
                  <el-form-item prop="username">
                      <el-input
                          ref="username"
                          v-model="loginForm.username"
                          auto-complete="on"
                          placeholder="请输入用户名"
                          prefix-icon="el-icon-user"
                          tabindex="1"
                          type="text"
                      />
                  </el-form-item>
                  <div class="forgetBox">
                      <el-form-item prop="password">
                          <el-input
                              ref="password"
                              v-model="loginForm.password"
                              auto-complete="on"
                              placeholder="请输入密码"
                              prefix-icon="el-icon-lock"
                              show-password
                              tabindex="2"
                          />
                      </el-form-item>
                  </div>
                  <div class="yzBox">
                      <el-form-item prop="validateCode">
                          <el-input
                              ref="validateCode"
                              v-model="loginForm.validateCode"
                              placeholder="验证码"
                              prefix-icon="el-icon-key"
                              tabindex="3"
                              @keyup.enter.native="handleLogin"
                          />
                      </el-form-item>
                      <img
                          id="codeImg"
                          :src="captchaImage"
                          alt="点击更换"
                          class="yzm"
                          title="点击更换"
                          @click="codeImageRefresh"
                      >
                  </div>
                  <!--记住密码 待接驳-->
                  <div class="remeber"><el-checkbox v-model="checked">
                      <span style="font-size: 0.633vw;"> 记住密码</span>
                  </el-checkbox>
                  </div>
                  <el-button
                      class="eBtn"
                      @click.native.prevent="handleLogin"
                  >登 录</el-button>
              </el-form>
              <div class="ljzcBox" style="margin-top: 1.5vw">
                  <!-- 联系管理员 待接驳 -->
                  还没有账户？
                  <el-tooltip class="item" content="电话：(0510)  6661 9939" effect="dark" placement="right">
                      <span class="ljzc">联系管理员</span>
                  </el-tooltip>
              </div>
              <div class="ljzcBox">
                  技术支持：城云智慧科技 | 超管解锁
              </div>
              <!--              <div class="ljzcBox">-->
              <!--                联系电话：(0510)  6661 9939-->
              <!--              </div>-->
          </div>
      </div>
    </div>
    <!--    <div class="linkBody">-->
    <!--      <span style="margin-bottom: 0.5vw;padding: 0 0.7vw;">链接： </span>-->
    <!--      <div>-->
    <!--        <span-->
    <!--          v-for="(item,index) in linkList"-->
    <!--          :key="index"-->
    <!--          :class="isSel == index?'selLink':'linkItem'"-->
    <!--          :style="{'border-right':index==linkList.length-1?'': '2px solid rgba(255, 255, 255, 0.30)'}"-->
    <!--          @click="urlToScene(item,index)"-->
    <!--        >-->
    <!--          {{ item.name }}-->
    <!--        </span>-->

    <!--        <span class="linkItem" @click="adminUnlock">超管账号解锁</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="idea">Copyright@Idea-sf.com</div>-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogPWDVisible" height="50vw" title="修改密码" top="3.125vw" width="50vw">
      <update-password :info="'您还未初始化密码，请初始化并重新登录'" @closeUpdate="dialogPWDVisible=false" />
    </el-dialog>
  </div>
</template>
<script>
import Cookie from 'js-cookie'
import CryptoJS from 'crypto-js'
import UpdatePassword from '../components/updatePassword'
import axios from 'axios'

export default {
    name: 'Login',
    components: {
        UpdatePassword
    },
    data() {
        const validateUsername = (rule, value, callback) => {
            if (value.length < 1) {
                callback(new Error('请输入用户名'))
            } else {
                callback()
            }
        }
        const validatePassword = (rule, value, callback) => {
            if (value.length < 4) {
                callback(new Error('密码不可小于4位'))
            } else {
                callback()
            }
        }
        return {
            okRes: '',
            isSel: 0,
            linkList: [
                { name: '燃气专项', code: '0' },
                { name: '内涝专项', code: '1' },
                { name: '供水专项', code: '2' },
                { name: '道路专项', code: '6' },
                { name: '桥梁专项', code: '5' },
                { name: '地下管线专项', code: '4' },
                { name: '第三方施工破坏专项', code: '3' }
            ],
            activeName: '领导小组',
            checked: true,
            dialogPWDVisible: false,
            loginForm: {
                username: '',
                password: '',
                validateCode: '',
                url: 'login'
            },
            selIndustry: '',
            options: [{
                value: '0',
                label: '燃气'
            }, {
                value: '1',
                label: '内涝'
            }, {
                value: '2',
                label: '供水'
            }, {
                value: '6',
                label: '道路'
            }, {
                value: '5',
                label: '桥梁'
            }, {
                value: '4',
                label: '地下管线'
            }, {
                value: '3',
                label: '第三方施工'
            }
            ],
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        validator: validateUsername
                    }
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        validator: validatePassword
                    }
                ],
                validateCode: [
                    { required: true, trigger: 'blur', message: '请输入验证码' }
                ]
            },
            loading: false,
            redirect: undefined,
            captchaImage: this.$constant.BASE_URI + '/captcha/captchaImage?type=math',
            urlList: []
        }
    },
    watch: {
        $route: {
            handler: function(route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    mounted() {
        // 记住密码
        this.getUserLoginFrom()
        // this.getScene()
        this.$common.setUserType('1')
        this.$store.dispatch('user/cleanCache')
    },
    methods: {
        getScene() {
            const _this = this
            // 获取专项的路由
            this.$channel.globeRequest('wx/ThirdPartyStageRouteController', 'listAll', {}, 'project').then(res => {
                console.log('res', res)
                _this.urlList = res.data
            }).catch((e) => {
                console.log('异常错误', e)
            })
        },
        urlToScene(item, index) {
            // 链接到指定专项
            this.isSel = index
            if (this.urlList) {
                for (let i = 0; i < this.urlList.length; i++) {
                    if (this.urlList[i].scene == item.code) {
                        this.pushRouter(this.urlList[i].routeUrl)
                        break
                    }
                }
            }
        },
        // 页面跳转//设置成已读
        pushRouter(urlM) {
            console.log('页面跳转地址', urlM)
            // // this.$router.push()
            // window.open(window.location.origin + '/lifeline/#' + urlM)
            window.open(urlM)
        },
        // 记住密码
        getUserLoginFrom() {
            let learnFormStr = Cookie.get('learnForm')
            if (learnFormStr != null && learnFormStr != '' && undefined != learnFormStr) {
                learnFormStr = CryptoJS.AES.decrypt(learnFormStr, 'idea').toString(CryptoJS.enc.Utf8)
                const learnForm = JSON.parse(learnFormStr)
                this.loginForm = learnForm
                this.loginForm.validateCode = ''
            } else {
                this.loginForm = {
                    username: '',
                    password: '',
                    validateCode: '',
                    url: 'login'
                }
            }
        },
        handleClick(e) {
            // console.log(e)
        },
        forgetPwd: function() {
            this.$alert('请致电客服: 181 6890 2013')
        },
        toXAYQD() {
            this.$router.push('/bizLogin')
        },
        codeImageRefresh: function() {
            this.captchaImage =
                this.$constant.BASE_URI + '/captcha/captchaImage?type=math&s=' + Math.random()
        },
        adminUnlock: function() {
            this.$confirm('此操作将解除admin账号登录限制, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$channel.baseRequest('/wx/auth', '/adminUnlock', {}, 'User').then((res) => {
                    this.$message({
                        type: 'success',
                        message: '解锁成功!'
                    })
                })
            }).catch(() => {})
        },
        handleLogin3: function() {
            this.$message.error('专项企业端登录入口暂未开通，请联系管理员咨询')
        },
        handleLogin2: function() {
            // console.log(123)
            const _this = this
            if (!_this.selIndustry) {
                _this.$message.error('请选择行业')
                return
            }
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const postForm = Object.assign({}, this.loginForm)
                    postForm.password = this.$md5(this.loginForm.password)
                    this.$store
                        .dispatch('user/login', postForm)
                        .then(res => {
                            if (res.result) {
                                // console.log(res)
                                // 记住密码
                                if (this.checked) {
                                    const learnFormStr = JSON.stringify(this.loginForm)
                                    const learnForm = CryptoJS.AES.encrypt(learnFormStr, 'idea')
                                    Cookie.set('learnForm', learnForm, { expires: 3 })
                                } else {
                                    Cookie.remove('username')
                                }
                                if (this.urlList) {
                                    for (let i = 0; i < this.urlList.length; i++) {
                                        if (this.urlList[i].scene == _this.selIndustry) {
                                            _this.handleTicket().then(() => {
                                                console.log('获取到ticket2_:' + this.okRes)
                                                if (this.urlList[i].routeUrl.indexOf('?') >= 0) {
                                                    // console.log('this.urlList[i].routeUrl+_this.okRes', this.urlList[i].routeUrl + '&ticket=' + _this.okRes)

                                                    _this.pushRouter(this.urlList[i].routeUrl + '&ticket=' + _this.okRes)
                                                } else {
                                                    // console.log('this.urlList[i].routeUrl+_this.okRes', this.urlList[i].routeUrl + '?ticket=' + _this.okRes)

                                                    _this.pushRouter(this.urlList[i].routeUrl + '?ticket=' + _this.okRes)
                                                }
                                            })

                                            break
                                        }
                                    }
                                }
                                this.$router.push({ path: '/homeLand' })
                                // window.localStorage.setItem('mask_status', true)
                                this.loading = false
                            } else {
                                this.$message(res.msg)
                                this.loading = false
                                this.codeImageRefresh()
                            }
                        })
                        .catch(err => {
                            if (err.isInit === '0') {
                                this.openUpdate()
                            }
                            this.loading = false
                            this.codeImageRefresh()
                        })
                } else {
                    // console.log('error submit!!')
                    return false
                }
            })
        },
        // 获取用户信息的ticket值 例如http://2.21.138.145:8086/map?ticket=1270707643224162304
        handleTicket() {
            const config = {
                headers: {
                    'MVVM-Key': String(new Date().getTime()),
                    'xx': 'anything',
                    'Referer': '1',
                    'Auth': '492ebbf13cc378f4d73e2ed83f4712ab',
                    'timestamp': '1111'
                }
            }
            console.log('this.$common.currUser()', this.$common.currUser())
            return axios.post(this.$constant.BASE_URI + '/wx/singleLoginThirdParty/getTicket?userId=' + this.$common.currUser().id, { userId: this.$common.currUser().id }, config)
                .then(response => {
                    // console.log("获取——：", response);
                    this.okRes = response.data.data
                    // console.log('获取到ticket_:' + this.okRes)
                    // this.isOk = true
                }).catch((err, x) => {
                // console.log("捕捉到异常！", err)
                })
        },
        handleLogin: function() {
            // console.log(123)
            const _this = this
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const postForm = Object.assign({}, this.loginForm)
                    postForm.password = this.$md5(this.loginForm.password)
                    this.$store
                        .dispatch('user/login', postForm)
                        .then(res => {
                            if (res.result) {
                                // console.log(res)
                                // 记住密码
                                if (this.checked) {
                                    const learnFormStr = JSON.stringify(this.loginForm)
                                    const learnForm = CryptoJS.AES.encrypt(learnFormStr, 'idea')
                                    Cookie.set('learnForm', learnForm, { expires: 3 })
                                } else {
                                    Cookie.remove('username')
                                }
                                this.$router.push({ path: '/homeLand' })
                                // window.localStorage.setItem('mask_status', true)
                                this.loading = false
                            } else {
                                this.$message(res.msg)
                                this.loading = false
                                this.codeImageRefresh()
                            }
                        })
                        .catch(err => {
                            if (err.isInit === '0') {
                                this.openUpdate()
                            }
                            this.loading = false
                            this.codeImageRefresh()
                        })
                } else {
                    // console.log('error submit!!')
                    return false
                }
            })
        },
        openUpdate: function() {
            this.dialogPWDVisible = true
        },
        closeUpdate: function() {
            this.dialogPWDVisible = false
        }
    }
}
</script>
<style lang="scss">
.newLogin {
    width: 100%;
    height: 56.25vw;
    background: url("../../static/images/loginBg.png") no-repeat;
    background-size: 100%;
    .QRcodeBody{
        width: 46.875vw;
        position: relative;
        top: 27.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        .QRcode{
            width: 7.81vw;
            height: 7.81vw;
        }
        .qrInfo{
            font-size: 0.8333vw;
            color: #FFFFFF;
            margin-top: 0.5vw;
        }
    }
    .logoBox {
        display: flex;
        align-items: center;
        color: white;
        font-size: 2.45vw;
        font-family: pmzd;
        white-space: nowrap;
        position: absolute;
        left: 2.6vw;
        top: 2.6vw;
        .logo{
            width: 2.8vw;
            height: 2.8vw;
        }
    }
    .loginBox {
        position: relative;
        left: 50%;
        top: 13.02vw;
        margin-left: -20.8vw;
        width: 41.6666vw;
        height: 26.04vw;
        //box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.08);
        .xaxt {
            position: absolute;
            left: -2.4vw;
            width: 23.177vw;
        }
        .objectName{
            color: #0D2F76;
            font-family: pmzd;
            white-space: nowrap;
            position: absolute;
            font-size: 2vw;
            left: 77.5%;
            top: -2.5vw;
        }
        .MsgBox {
            width: 30.7vw;
            left: 0;
            top: 1.5vw;
            position: absolute;
        }
        .MsgTit {
            span {
                cursor: pointer;
            }
            .selectBox {
                display: flex;
                align-items: center;
                flex-direction: column;
                .select {
                    color: rgba(42, 57, 128, 1);
                    padding-bottom: 4px;
                }
                .line {
                    width: 2.5vw;
                    height: 3.5px;
                    background: rgba(42, 57, 128, 1);
                    border-radius: 3px;
                }
            }
            .unselect:hover {
                color: rgba(199, 25, 31, 1);
            }
        }
        .inputBox {
            .el-input {
                margin-top: 1vw;
            }
            .el-button {
                width: 30.7vw;
                padding: 1.5vw 0 !important;
                font-size: 1.07vw;
                letter-spacing: 0.5vw;
                text-indent: 0.5vw;
                color: white;
                background: #0D2F76;
                margin-top: 0.5vw;
            }
            .forgetBox {
                position: relative;
            }
            .forget {
                position: absolute;
                z-index: 5;
                color: rgba(199, 25, 31, 1);
                right: 5px;
                top: 100%;
                margin-top: 1.5vw;
                font-size: 0.6vw;
                cursor: pointer;
                z-index: 10;
            }
            .yzBox {
                position: relative;
                .el-input {
                    width: 67% !important;
                }
            }
            .yzm {
                width: 9.5vw;
                height: 100%;
                position: absolute;
                z-index: 5;
                right: 0px;
                top: 24%;
                cursor: pointer;
                font-size: 0.6vw;
            }
        }
        .ljzcBox {
            width: 100%;
            text-align: center;
            margin-top: 1.2vw;
            font-size: 0.7vw;
            color: #999999;
            white-space: nowrap;
            .ljzc {
                color: #3F6AFF;
                cursor: pointer;
            }
        }
    }
    .idea {
        position: absolute;
        width: 500px;
        left: 50%;
        margin-left: -250px;
        text-align: center;
        color: rgba(153, 153, 153, 1);
        font-size: 0.4vw;
        bottom: 2vw;
    }
    .el-form-item {
        margin-bottom: 1.1vw !important;
        width: 30.7vw !important;
        height: 4.1vw !important;
    }
    .el-input__inner {
        height: 4vw !important;
        border: 1px solid rgba(51, 51, 51, 1);
        font-size: 1vw !important;
    }
    .remeber{
        margin: 2vw 0 0.5vw 0vw;
        font-size: 0.8333vw;
    }
    .eBtn{
        border-radius: 0.5vw;
    }
    .el-form-item__error{
        font-size: 0.65vw;
    }
    .el-input__icon{
        width: 1.5vw;
        height: 1.5vw;
        line-height: 4vw;
    }
    .el-checkbox__inner{
        width: 0.8vw;
        height: 0.8vw;
    }
    @media (max-width: 1300px) {
        .el-form-item__error {
            padding-top: 0 !important;
        }
    }
    @media (max-width: 1170px) {
        .el-form-item__error {
            display: none !important;
        }
        .inputBox {
            .yzm {
                width: 9.5vw;
                height: 100%;
                position: absolute;
                z-index: 5;
                right: 0px;
                top: 24%;
                cursor: pointer;
                font-size: 0.6vw;
            }
        }
    }
    @media (max-width: 1000px) {
        .forget {
            margin-top: 0.5vw !important;
        }
    }
    .tabBody{
        width: 30vw;
        position: absolute;
        left: 57%;
        top: 1.5vw;
        .el-tabs__item{
            font-size: 0.9vw;
            color: rgba(153, 153, 153, 1);
            height: 1.5vw;
            line-height:1vw;
            padding-left:3.5vw !important;
            padding-right: 3.5vw;
        }
        .el-tabs__nav{
            width: 100%;
        }
        .el-tabs__nav-wrap::after{
            width: 100%;
            height: 0.2vw;
            background: rgba(217, 217, 217, 1);
        }
        .el-tabs__active-bar{
            height: 0.2vw;
            background: rgba(16, 62, 160, 1);
            width: 10vw !important;
            left: -3.4vw;
        }
        .el-tabs__item.is-active{
            color: rgba(16, 62, 160, 1);
        }
        .el-tabs__content{
            overflow: visible;
        }
    }
    .el-select__caret{
        position: absolute;
        top: 1.25vw;
        right: 0.1vw;
        color: rgba(51, 51, 51, 1);
    }
    .el-icon-arrow-up:before{
        position: absolute;
        top: -1.25vw;
        left: 0.2vw;
    }
    .linkBody{
        font-size: 0.8vw;
        color: white;
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 50px;
        bottom: 60px;
        .selLink{
            color: rgba(251, 142, 5, 1);
            cursor: pointer;
            padding: 0 0.7vw;
        }
        .linkItem{
            cursor: pointer;
            padding: 0 0.7vw;
            color: rgba(255, 255, 255, 0.80);
        }
    }
    .f-normal{
        font-size: 1.2vw;
        margin: 0.7vw 0;
    }
    .el-dialog__title{
        font-size: 1.2vw;
    }
    .el-dialog__body{
        //height: 30vw;
        padding: 1.5vw 1.2vw;
    }
    .el-dialog__title{
        line-height: 1.5vw;
    }
    .el-dialog__footer{
        padding: 1vw 0.5vw;
    }
    .el-dialog__header{
        padding: 1vw 0.5vw;
    }
    .el-card__body{
        padding: 1vw;
    }
}
.el-select-dropdown__item{
    font-size: 0.75vw;
    padding: 0.5vw;
    height: 2vw;
    line-height: 1vw;
}
</style>