登录及锁定添加二次验证

src/api/user.js

@@ -167,3 +167,21 @@ export function getTrialUserList(params) {
     params
   })
 }
+
+// 验证MFA邮件
+export function verifyMFACode(params) {
+  return request({
+    url: `/User/verifyMFACode`,
+    method: 'post',
+    params
+  })
+}
+
+// 发送MFA邮件
+export function sendMFAEmail(params) {
+  return request({
+    url: `/User/sendMFAEmail`,
+    method: 'post',
+    params
+  })
+}

src/components/MFA/fun.js

@@ -0,0 +1,26 @@
+import Vue from "vue";
+import MFACOMP from "./index.vue";
+
+const MFAConstructor = Vue.extend(MFACOMP);
+
+const MFA = options => {
+    const { UserId, username, EMail, callBack, cancelBack, status = 'login' } = options;
+    if (!UserId) throw `UserId is requred.but ${UserId}`
+    const id = `MFA${new Date().getTime()}`;
+    const instance = new MFAConstructor();
+    instance.id = id;
+    instance.vm = instance.$mount();
+    if (instance.vm.visible) return;
+    document.body.appendChild(instance.vm.$el);
+    instance.vm.open({ UserId, username, EMail, status });
+    instance.vm.$on("success", (Id) => {
+        if (callBack) callBack(Id)
+    });
+    instance.vm.$on("closed", () => {
+        if (cancelBack) cancelBack();
+        document.body.removeChild(instance.vm.$el);
+        instance.vm.$destroy();
+    });
+    return instance.vm;
+}
+export default MFA;

src/components/MFA/index.js

@@ -0,0 +1,7 @@
+import MFACOMP from "./index.vue";
+import MFA from "./fun";
+
+export default Vue => {
+    Vue.component(MFACOMP.name, MFACOMP);
+    Vue.prototype.$MFA = MFA;
+};

src/components/MFA/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <!--MFA-->
+  <el-dialog
+    v-if="visible"
+    :visible.sync="visible"
+    width="540px"
+    :close-on-click-modal="false"
+    append-to-body
+    :show-close="status === 'login'"
+    @close="cancel"
+  >
+    <div slot="title">
+      {{ status === "login" ? $t("mfa:title") : $t("mfa:lock:title") }}
+    </div>
+    <el-form
+      ref="mfaForm"
+      label-position="right"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+    >
+      <!-- 用户名 -->
+      <el-form-item :label="$t('mfa:form:username')" prop="username">
+        <el-input v-model="form.username" disabled />
+      </el-form-item>
+      <!-- 邮箱 -->
+      <el-form-item :label="$t('mfa:form:email')" prop="EMail">
+        <el-input v-model="form.EMail" disabled />
+      </el-form-item>
+      <!-- 验证码 -->
+      <el-form-item :label="$t('mfa:form:MFACode')" prop="Code">
+        <el-input
+          v-model="form.Code"
+          style="width: 180px; margin-right: 10px"
+        />
+        <el-button
+          type="primary"
+          size="small"
+          @click.stop="sendMFACode"
+          :disabled="flag || sendFlag"
+          >{{ flag ? `${second}s` : $t("mfa:form:sendMFACode") }}</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <!-- 取消 -->
+      <el-button size="small" @click="cancel" v-if="status === 'login'">
+        {{ $t("mfa:button:cancel") }}
+      </el-button>
+      <!-- 保存 -->
+      <el-button type="primary" size="small" @click="save" :loading="loading">
+        {{
+          status === "login"
+            ? $t("mfa:button:save")
+            : $t("mfa:lock:button:save")
+        }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { sendMFAEmail, verifyMFACode } from "@/api/user.js";
+export default {
+  name: "MFA",
+  data() {
+    return {
+      status: "login", // lock
+      visible: false,
+      loading: false,
+      timer: null,
+      flag: false,
+      sendFlag: false,
+      second: 60,
+      form: {
+        Code: null,
+        UserId: null,
+        EMail: null,
+        username: null,
+      },
+      rules: {
+        Code: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+        ],
+        EMail: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+        ],
+        username: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    open(data) {
+      let { UserId, status, username, EMail } = data;
+      this.form.UserId = UserId;
+      this.status = status ? status : "login";
+      this.form.username = username;
+      this.form.EMail = EMail;
+      this.visible = true;
+    },
+    cancel() {
+      this.visible = false;
+      this.$emit("closed");
+    },
+    async save() {
+      try {
+        let validate = await this.$refs.mfaForm.validate();
+        if (!validate) return;
+        this.loading = true;
+        let res = await verifyMFACode(this.form);
+        this.loading = false;
+        if (res.IsSuccess) {
+          if (this.status === "login") {
+            this.$message.success("mfa:message:verifySuccess");
+          }
+          this.$emit("success", this.form.UserId);
+          this.cancel();
+        }
+      } catch (err) {
+        console.log(err);
+        this.loading = false;
+      }
+    },
+    async sendMFACode() {
+      try {
+        if (this.flag || this.sendFlag) return;
+        this.sendFlag = true;
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+        let res = await sendMFAEmail(this.form);
+        this.sendFlag = false;
+        if (res.IsSuccess) {
+          this.flag = true;
+          this.second = 60;
+          this.timer = setInterval(() => {
+            this.second--;
+            if (this.second <= 0) {
+              clearInterval(this.timer);
+              this.timer = null;
+            }
+          }, 1000);
+        }
+      } catch (err) {
+        console.log(err);
+        this.flag = false;
+        this.sendFlag = false;
+      }
+    },
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  },
+};
+</script>

src/main.js

@@ -4,6 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI, { MessageBox } from 'element-ui'
 import { getBasicDataAllSelect, getFrontInternationalizationList } from '@/api/dictionary/dictionary'
+import { sendMFAEmail } from "@/api/user.js";
 import { resetReadingRestTime } from '@/api/trials/reading'
 // import 'element-ui/lib/theme-chalk/index.css'
 import './assets/css/theme-blue/index.css' // 浅绿色主题
@@ -58,6 +59,8 @@ import upload from '@/components/element-ui/upload'
 Vue.use(upload)
 import Preview from '@/components/Preview/index'
 Vue.use(Preview)
+import MFA from '@/components/MFA/index'
+Vue.use(MFA)
 import adaptive from '@/directive/adaptive/index'
 // 表格自适应指令
 Vue.use(adaptive)
@@ -406,9 +409,19 @@ async function VueInit() {
             }
             var my_username = zzSessionStorage.getItem('my_username')
             var my_password = zzSessionStorage.getItem('my_password')
+            let my_userid = zzSessionStorage.getItem('userId')
+            let my_EMail = zzSessionStorage.getItem('my_EMail')
             if (md5(_vm.unlock.my_password) === my_password && my_username === _vm.unlock.my_username) {
               resetReadingRestTime().then(() => {
               })
+              sendMFAEmail({ UserId: my_userid }).then((res) => {
+                done();
+                Vue.prototype.$MFA({
+                  status: "lock",
+                  UserId: my_userid,
+                  EMail: my_EMail,
+                  username: my_username,
+                  callBack: () => {
                     _vm.$message.success(lang === 'zh' ? '解锁成功，请继续操作' : 'Unlocked successfully. Please continue operation.')
                     _vm.unlock = {
                       my_username: null,
@@ -424,6 +437,9 @@ async function VueInit() {
                     setTimeout(() => {
                       done()
                     }, 500)
+                  },
+                })
+              })
             } else {
               // console.log(111)
               _vm.$message.error(lang === 'zh' ? '请输入正确用户名密码' : 'Please enter the correct password.')

src/store/modules/user.js

@@ -83,13 +83,20 @@ const actions = {
   },
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password, UserId } = userInfo
     return new Promise((resolve, reject) => {
-      login({ UserName: username.trim(), Password: md5(password) }).then(async response => {
+      let data = {
+        UserName: username.trim(), Password: md5(password)
+      }
+      if (UserId) {
+        data.UserId = UserId;
+      }
+      login(data).then(async response => {
         if (response.IsSuccess) {
           zzSessionStorage.removeItem('lastWorkbench')
           zzSessionStorage.setItem('my_username', username.trim())
           zzSessionStorage.setItem('my_password', md5(password))
+          zzSessionStorage.setItem('my_EMail', response.Result.BasicInfo.EMail)
           const data = response.Result
           if (data.BasicInfo.IsFirstAdd || data.BasicInfo.LoginState === 1) {
             try {

src/views/login/index.vue

@@ -6,17 +6,17 @@
     <div class="login-body">
       <div class="login-l">
         <div class="login-logo">
-          <img v-if="language === 'zh'" src="@/assets/zzlogo2.png" alt="">
+          <img v-if="language === 'zh'" src="@/assets/zzlogo2.png" alt="" />
-          <img v-else src="@/assets/zzlogo4.png" alt="">
+          <img v-else src="@/assets/zzlogo4.png" alt="" />
         </div>
         <div class="login-image">
-          <img src="@/assets/login-bg.png">
+          <img src="@/assets/login-bg.png" />
         </div>
       </div>
       <div class="login-r">
         <div class="title-container">
           <!-- IRC Management System -->
-          <div class="title">{{ $t('login:title:system') }}</div>
+          <div class="title">{{ $t("login:title:system") }}</div>
         </div>
         <el-form
           ref="loginForm"
@@ -29,7 +29,11 @@
           <el-form-item
             prop="username"
             :rules="[
-              { required: true, message: this.$t('login:formRule:userName'), trigger: 'blur' }
+              {
+                required: true,
+                message: this.$t('login:formRule:userName'),
+                trigger: 'blur',
+              },
             ]"
           >
             <span class="svg-container">
@@ -50,7 +54,11 @@
           <el-form-item
             prop="password"
             :rules="[
-              { required: true, message: this.$t('login:formRule:password'), trigger: 'blur' }
+              {
+                required: true,
+                message: this.$t('login:formRule:password'),
+                trigger: 'blur',
+              },
             ]"
           >
             <span class="svg-container">
@@ -69,101 +77,130 @@
               @keyup.enter.native="handleLogin"
             />
             <span class="show-pwd" @click="showPwd">
-              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+              <svg-icon
+                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+              />
             </span>
           </el-form-item>
           <!-- Login -->
           <el-button
             :loading="loading"
             type="primary"
-            style="width:100%;margin-bottom:10px;"
+            style="width: 100%; margin-bottom: 10px"
             size="medium"
             @click.native.prevent="handleLogin"
           >
-            {{ $t('login:button:login') }}
+            {{ $t("login:button:login") }}
           </el-button>
-          <div style="text-align: right;">
+          <div style="text-align: right">
             <TopLang v-if="VUE_APP_OSS_CONFIG_REGION !== 'oss-us-west-1'" />
             <!-- Forget password? -->
-            <el-button type="text" size="medium" @click.native.prevent="handleResetPwd">
+            <el-button
-              {{ $t('login:button:forgetPassword') }}
+              type="text"
+              size="medium"
+              @click.native.prevent="handleResetPwd"
+            >
+              {{ $t("login:button:forgetPassword") }}
             </el-button>
           </div>
         </el-form>
       </div>
     </div>
     <div v-if="language === 'zh'" class="login-footer">
-      <span>Copyright © {{ new Date().getFullYear() }} 上海展影医疗科技有限公司 版权所有</span>
+      <span
+        >Copyright © {{ new Date().getFullYear() }} 上海展影医疗科技有限公司
+        版权所有</span
+      >
       <span> | </span>
       <a target="_blank" href="https://beian.miit.gov.cn/">
-        <span>
+        <span> 沪ICP备2021037850-2 </span>
-          沪ICP备2021037850-2
-        </span>
       </a>
       <span> | </span>
-      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002005859">
+      <a
-        <img src="@/assets/filing.png">
+        target="_blank"
+        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002005859"
+      >
+        <img src="@/assets/filing.png" />
         <span>沪公网安备 31011002005859号</span>
       </a>
       <a @click="openAbout">
-        <span style="color:#428bca">关于</span>
+        <span style="color: #428bca">关于</span>
       </a>
     </div>
-    <Vcode :show="isShow" :fail-text="$t('login:button:failText')" :success-text="$t('login:button:successText')" :slider-text="$t('login:button:sliderText')" :imgs="[Img1]" @success="onSuccess" />
+    <Vcode
+      :show="isShow"
+      :fail-text="$t('login:button:failText')"
+      :success-text="$t('login:button:successText')"
+      :slider-text="$t('login:button:sliderText')"
+      :imgs="[Img1]"
+      @success="onSuccess"
+    />
     <el-dialog
       v-if="aboutVisible"
       :visible.sync="aboutVisible"
       width="680px"
-      style="margin-top: 0;"
+      style="margin-top: 0"
       :close-on-click-modal="false"
       size="small"
     >
-      <div style="margin: 0 auto;width: 600px;line-height: 28px;text-align: center" >
+      <div
-        <h1 style="text-align: center;margin-bottom: 20px">关于</h1>
+        style="
-        <p style="margin-bottom: 20px">
+          margin: 0 auto;
-          IRC Imaging System
+          width: 600px;
-        </p>
+          line-height: 28px;
-        <p style="margin-bottom: 20px">
+          text-align: center;
-          V1.5.0.001
+        "
-        </p>
+      >
+        <h1 style="text-align: center; margin-bottom: 20px">关于</h1>
+        <p style="margin-bottom: 20px">IRC Imaging System</p>
+        <p style="margin-bottom: 20px">V1.5.0.001</p>
         <p style="margin-bottom: 20px" v-if="language === 'zh'">
-          Copyright © {{ new Date().getFullYear() }} 上海展影医疗科技有限公司 版权所有
+          Copyright © {{ new Date().getFullYear() }} 上海展影医疗科技有限公司
+          版权所有
         </p>
         <p style="margin-bottom: 20px" v-else>
-          Copyright © {{ new Date().getFullYear() }} Shanghai Extensive Imaging Inc.
+          Copyright © {{ new Date().getFullYear() }} Shanghai Extensive Imaging
+          Inc.
         </p>
         <div style="margin-bottom: 20px">
-          <img style="width: 180px" src="@/assets/zzlogo2.png" alt="">
+          <img style="width: 180px" src="@/assets/zzlogo2.png" alt="" />
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" size="mini" @click="aboutVisible = false">关闭</el-button>
+        <el-button type="primary" size="mini" @click="aboutVisible = false"
+          >关闭</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from "vuex";
-import TopLang from './topLang'
+import TopLang from "./topLang";
 // import NoticeMarquee from '../trials/trials-layout/components/noticeMarquee'
-import Vcode from 'vue-puzzle-vcode'
+import Vcode from "vue-puzzle-vcode";
-import Img1 from '@/assets/pic-2.png'
+import Img1 from "@/assets/pic-2.png";
 export default {
-  name: 'Login',
+  name: "Login",
   components: { TopLang, Vcode },
   data() {
     return {
       VUE_APP_OSS_CONFIG_REGION: process.env.VUE_APP_OSS_CONFIG_REGION,
       aboutVisible: false,
       loginForm: {
-        username: '',
+        username: "",
-        password: ''
+        password: "",
+        UserId: null,
       },
       loginRules: {
         username: [
-          { required: true, message: this.$t('login:formRule:userName'), trigger: 'blur' },
+          {
-          { max: 20, message: `${this.$t('common:ruleMessage:maxLength')} 20` }
+            required: true,
+            message: this.$t("login:formRule:userName"),
+            trigger: "blur",
+          },
+          { max: 20, message: `${this.$t("common:ruleMessage:maxLength")} 20` },
         ],
         password: [
           // {
@@ -171,40 +208,40 @@ export default {
           //   trigger: "blur",
           //   validator: this.$validatePassword
           // },
-          { required: true, message: this.$t('login:formRule:password'), trigger: 'blur' },
+          {
-          { max: 20, message: `${this.$t('common:ruleMessage:maxLength')} 20` }
+            required: true,
-        ]
+            message: this.$t("login:formRule:password"),
+            trigger: "blur",
+          },
+          { max: 20, message: `${this.$t("common:ruleMessage:maxLength")} 20` },
+        ],
       },
       loading: false,
-      passwordType: 'password',
+      passwordType: "password",
       loginType: null,
       location: null,
       isShow: false,
       showCode: false,
-      Img1
+      Img1,
-    }
+    };
   },
   computed: {
-    ...mapGetters([
+    ...mapGetters(["asyncRoutes", "routes", "language"]),
-      'asyncRoutes',
-      'routes',
-      'language'
-    ])
   },
   mounted() {
-    this.loginType = this.$route.query.loginType
+    this.loginType = this.$route.query.loginType;
-    this.location = this.$route.query.location
+    this.location = this.$route.query.location;
-    zzSessionStorage.setItem('loginType', this.loginType)
+    zzSessionStorage.setItem("loginType", this.loginType);
-    localStorage.setItem('location', this.location)
+    localStorage.setItem("location", this.location);
-    if (process.env.VUE_APP_OSS_CONFIG_REGION === 'oss-us-west-1') {
+    if (process.env.VUE_APP_OSS_CONFIG_REGION === "oss-us-west-1") {
-      this.$i18n.locale = 'en'
+      this.$i18n.locale = "en";
-      this.setLanguage('en')
+      this.setLanguage("en");
-      this.$updateDictionary()
+      this.$updateDictionary();
     } else {
-      if (this.location === 'USA') {
+      if (this.location === "USA") {
-        this.$i18n.locale = 'en'
+        this.$i18n.locale = "en";
-        this.setLanguage('en')
+        this.setLanguage("en");
-        this.$updateDictionary()
+        this.$updateDictionary();
       } else {
         // this.$i18n.locale = 'zh'
         // this.setLanguage('zh')
@@ -213,98 +250,122 @@ export default {
     }
   },
   methods: {
-    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
+    ...mapMutations({ setLanguage: "lang/setLanguage" }),
     openAbout() {
-      this.aboutVisible = true
+      this.aboutVisible = true;
     },
     showPwd() {
-      if (this.passwordType === 'password') {
+      if (this.passwordType === "password") {
-        this.passwordType = ''
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
+        this.$refs.password.focus();
-      })
+      });
     },
     handleLogin() {
-      this.loginType = this.$route.query.loginType
+      this.loginType = this.$route.query.loginType;
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           if (this.showCode) {
-            this.isShow = true
+            this.isShow = true;
           } else {
-            this.onSuccess()
+            this.onSuccess();
           }
         } else {
           // console.log('error submit!!')
-          return false
+          return false;
         }
-      })
+      });
     },
-    loginIn() {
+    loginIn(Id) {
-      this.loading = true
+      this.loading = true;
-      this.showCode = false
+      this.showCode = false;
-      this.$store.dispatch('user/login', this.loginForm).then((res) => {
+      if (Id) this.loginForm.UserId = Id;
+      this.$store
+        .dispatch("user/login", this.loginForm)
+        .then((res) => {
           if (res.BasicInfo.IsFirstAdd) {
             // 当前用户为首次登录,请先修改密码之后再次登录
-          this.$message.success(this.$t('login:message:login1'))
+            this.$message.success(this.$t("login:message:login1"));
             setTimeout(() => {
-            this.$router.push({ path: `/recompose?userName=${this.loginForm.username}` })
+              this.$router.push({
-          }, 500)
+                path: `/recompose?userName=${this.loginForm.username}`,
-          return
+              });
-        }else if (res.BasicInfo.LoginState === 1) {
+            }, 500);
+            return;
+          } else if (res.BasicInfo.LoginState === 1) {
             // 请先修改密码后再登录！
-          this.$alert(this.$t('login:message:login3'), this.$t('common:title:warning'), {
+            this.$alert(
-            callback: action => {
+              this.$t("login:message:login3"),
-              this.$router.push({ path: `/recompose?userName=${this.loginForm.username}` })
+              this.$t("common:title:warning"),
-              return
+              {
+                callback: (action) => {
+                  this.$router.push({
+                    path: `/recompose?userName=${this.loginForm.username}`,
+                  });
+                  return;
+                },
               }
-          })
+            );
-          return
+            return;
-        }else if (res.BasicInfo.LoginState === 2) {
+          } else if (res.IsMFA) {
+            this.$MFA({
+              UserId: res.BasicInfo.Id,
+              EMail: res.BasicInfo.EMail,
+              username: this.loginForm.username,
+              callBack: this.loginIn,
+              cancelBack: () => {
+                this.loading = false;
+              },
+            });
+            return;
+          } else if (res.BasicInfo.LoginState === 2) {
             // 本次登录的IP或设备与上次不一致，请确认'
             // this.$alert(this.$t('login:message:login4'), this.$t('common:title:warning'))
-          this.$message.warning(this.$t('login:message:login4'))
+            this.$message.warning(this.$t("login:message:login4"));
           }
-        this.$store.dispatch('permission/generateRoutes').then(res => {
+          this.$store.dispatch("permission/generateRoutes").then((res) => {
-          this.loading = false
+            this.loading = false;
             if (res && res.length > 0) {
-            this.$store.dispatch('global/getNoticeList')
+              this.$store.dispatch("global/getNoticeList");
-            this.$router.addRoutes(res)
+              this.$router.addRoutes(res);
-            if (this.loginType === 'DevOps') {
+              if (this.loginType === "DevOps") {
-              this.$router.replace({ path: res[0].path })
+                this.$router.replace({ path: res[0].path });
-              return
+                return;
               }
-            if (this.hasPermi(['role:radmin'])) {
+              if (this.hasPermi(["role:radmin"])) {
-              this.$router.replace({ path: res[0].path })
+                this.$router.replace({ path: res[0].path });
-              return
+                return;
               }
-            if (this.hasPermi(['role:air', 'role:rpm', 'role:rcrc', 'role:rir'])) {
+              if (
-              this.$router.replace({ path: '/trials/trials-list' })
+                this.hasPermi(["role:air", "role:rpm", "role:rcrc", "role:rir"])
+              ) {
+                this.$router.replace({ path: "/trials/trials-list" });
               } else {
-              this.$router.replace({ path: '/trials' })
+                this.$router.replace({ path: "/trials" });
               }
             } else {
               // 此账户暂未配置菜单权限，请联系管理员处理后再登录。
-            this.$message.warning(this.$t('login:message:login2'))
+              this.$message.warning(this.$t("login:message:login2"));
             }
-        })
+          });
         })
         .catch(() => {
-          this.showCode = true
+          this.showCode = true;
-          this.loading = false
+          this.loading = false;
-        })
+        });
     },
     onSuccess() {
-      this.isShow = false
+      this.isShow = false;
-      this.loginIn()
+      this.loginIn();
     },
     handleResetPwd() {
-      this.$router.push({ name: 'Resetpassword' })
+      this.$router.push({ name: "Resetpassword" });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss">
@@ -322,7 +383,7 @@ $cursor: #fff;
 
 /* reset element-ui css */
 .login-container {
-  .el-input {
+  .login-r .el-input {
     display: inline-block;
     height: 47px;
     width: 85%;
@@ -343,20 +404,21 @@ $cursor: #fff;
       // }
     }
   }
-
+  .login-r {
     .el-form-item {
       border: 1px solid rgba(255, 255, 255, 0.1);
       background: #f4f4f5;
       border-radius: 5px;
       color: #454545;
     }
+  }
 }
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
+$bg: #2d3a4b;
-$dark_gray:#889aa4;
+$dark_gray: #889aa4;
-$light_gray:#606266;
+$light_gray: #606266;
 .login-container {
   position: relative;
   width: 100%;
@@ -375,7 +437,7 @@ $light_gray:#606266;
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     // margin-top: -230px;
     // margin-left: -400px;
     width: 1200px;
@@ -389,17 +451,17 @@ $light_gray:#606266;
       float: left;
       width: 50%;
       height: 100%;
-      .login-logo{
+      .login-logo {
         position: absolute;
-        top:35px;
+        top: 35px;
         left: 50px;
-        img{
+        img {
           height: 40px;
         }
       }
-      .login-image{
+      .login-image {
         position: absolute;
-        top:10px;
+        top: 10px;
         left: 0px;
         // transform: translateY(-50%);
         height: 100%;
@@ -407,7 +469,6 @@ $light_gray:#606266;
           height: 100%;
         }
       }
-
     }
     .login-r {
       position: relative;
@@ -420,12 +481,11 @@ $light_gray:#606266;
         top: 50%;
         // transform: translateY(-50%);
         left: 50%;
-        transform:translate(-50%,-50%);
+        transform: translate(-50%, -50%);
         width: 80%;
         padding: 10px;
         margin: 0 auto;
         overflow: hidden;
-
       }
       .title-container {
         // margin-bottom: 50px;
@@ -469,7 +529,7 @@ $light_gray:#606266;
       }
     }
   }
-  .login-footer{
+  .login-footer {
     position: absolute;
     bottom: 50px;
     left: 0px;
@@ -482,21 +542,20 @@ $light_gray:#606266;
     align-items: center;
     // color: rgb(180, 190, 199);
     color: #909399;
-    a{
+    a {
-      display:inline-block;
+      display: inline-block;
-      text-decoration:none;
+      text-decoration: none;
-      height:20px;
+      height: 20px;
-      line-height:20px;
+      line-height: 20px;
       display: flex;
       justify-content: center;
     }
-    span{
+    span {
       margin: 0 2px;
-
     }
-    img{
+    img {
-      height:20px;
+      height: 20px;
-      line-height:20px;
+      line-height: 20px;
     }
     // p{
     //   display: inline-block;
@@ -507,5 +566,4 @@ $light_gray:#606266;
     // }
   }
 }
-
 </style>

src/views/recompose/index.vue

@@ -146,7 +146,7 @@ export default {
   }
 </style>
 <style scoped>
-/deep/ .is-error{
+::v-deep .is-error{
   margin-bottom: 40px;
 }
 input:-webkit-autofill {