国际化跟随浏览器变更

src/views/login/index.vue

@@ -7,20 +7,13 @@
       <div class="login-l">
         <div class="login-logo">
           <img v-if="language === 'zh'" src="@/assets/zzlogo2.png" alt="" />
-          <img
+          <img v-else-if="NODE_ENV === 'usa'" src="@/assets/zzlogo-usa.png" alt="" class="usa-logo" />
-            v-else-if="NODE_ENV === 'usa'"
-            src="@/assets/zzlogo-usa.png"
-            alt=""
-            class="usa-logo"
-          />
           <img v-else src="@/assets/zzlogo4.png" alt="" />
         </div>
-        <div
+        <div :class="{
-          :class="{
           'login-image': true,
           'login-image-usa': true,
-          }"
+        }">
-        >
           <svg-icon icon-class="login-bg" style="width: 90%; height: 90%" />
           <!-- <img src="@/assets/login-bg.png" v-else /> -->
         </div>
@@ -29,77 +22,43 @@
         <div class="title-container">
           <!-- IRC Management System -->
           <div v-if="NODE_ENV === 'usa'">
-            <svg-icon
+            <svg-icon icon-class="login-logo" style="width: 300px; height: 94px" />
-              icon-class="login-logo"
-              style="width: 300px; height: 94px"
-            />
           </div>
           <div class="title" v-else>{{ $t('login:title:system') }}</div>
         </div>
-        <el-form
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-          ref="loginForm"
+          label-position="left">
-          :model="loginForm"
+          <el-form-item prop="username" :rules="[
-          :rules="loginRules"
-          class="login-form"
-          auto-complete="on"
-          label-position="left"
-        >
-          <el-form-item
-            prop="username"
-            :rules="[
             {
               required: true,
               message: this.$t('login:formRule:userName'),
               trigger: 'blur',
             },
-            ]"
+          ]">
-          >
             <span class="svg-container">
               <svg-icon icon-class="user" />
             </span>
             <!-- User Name -->
-            <el-input
+            <el-input ref="username" v-model="loginForm.username" size="small" :placeholder="$t('login:form:userName')"
-              ref="username"
+              name="username" type="text" tabindex="1" />
-              v-model="loginForm.username"
-              size="small"
-              :placeholder="$t('login:form:userName')"
-              name="username"
-              type="text"
-              tabindex="1"
-            />
           </el-form-item>
 
-          <el-form-item
+          <el-form-item prop="password" :rules="[
-            prop="password"
-            :rules="[
             {
               required: true,
               message: this.$t('login:formRule:password'),
               trigger: 'blur',
             },
-            ]"
+          ]">
-          >
             <span class="svg-container">
               <svg-icon icon-class="password" />
             </span>
             <!-- password -->
-            <el-input
+            <el-input :key="passwordType" ref="password" v-model="loginForm.password" size="small" :type="passwordType"
-              :key="passwordType"
+              :placeholder="$t('login:form:password')" name="password" auto-complete="new-password"
-              ref="password"
+              autocomplete="new-password" tabindex="2" @keyup.enter.native="handleLogin" />
-              v-model="loginForm.password"
-              size="small"
-              :type="passwordType"
-              :placeholder="$t('login:form:password')"
-              name="password"
-              auto-complete="new-password"
-              autocomplete="new-password"
-              tabindex="2"
-              @keyup.enter.native="handleLogin"
-            />
             <span class="show-pwd" @click="showPwd">
-              <svg-icon
+              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
-              />
             </span>
             <!-- <el-input
               :key="passwordType"
@@ -118,33 +77,20 @@
             </span> -->
           </el-form-item>
           <!-- Login -->
-          <el-button
+          <el-button :loading="loading" type="primary" style="
-            :loading="loading"
-            type="primary"
-            style="
               width: 100%;
               margin-bottom: 10px;
               background-color: rgb(0, 147, 221);
-            "
+            " size="medium" @click.native.prevent="handleLogin">
-            size="medium"
-            @click.native.prevent="handleLogin"
-          >
             {{ $t('login:button:login') }}
           </el-button>
           <div style="text-align: right">
-            <TopLang
+            <TopLang v-if="
-              v-if="
               VUE_APP_OSS_CONFIG_REGION !== 'oss-us-west-1' &&
               NODE_ENV !== 'usa'
-              "
+            " />
-            />
             <!-- Forget password? -->
-            <el-button
+            <el-button type="text" size="medium" @click.native.prevent="handleResetPwd" style="color: rgb(0, 147, 221)">
-              type="text"
-              size="medium"
-              @click.native.prevent="handleResetPwd"
-              style="color: rgb(0, 147, 221)"
-            >
               {{ $t('login:button:forgetPassword') }}
             </el-button>
           </div>
@@ -152,19 +98,14 @@
       </div>
     </div>
     <div v-if="language === 'zh'" class="login-footer">
-      <span
+      <span>Copyright © {{ new Date().getFullYear() }} 上海展影医疗科技有限公司
-        >Copyright © {{ new Date().getFullYear() }} 上海展影医疗科技有限公司
+        版权所有</span>
-        版权所有</span
-      >
       <span> | </span>
       <a target="_blank" href="https://beian.miit.gov.cn/">
         <span> 沪ICP备2021037850-2 </span>
       </a>
       <span> | </span>
-      <a
+      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002005859">
-        target="_blank"
-        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002005859"
-      >
         <img src="@/assets/filing.png" />
         <span>沪公网安备 31011002005859号</span>
       </a>
@@ -180,43 +121,23 @@
         <span style="color: #428bca">About</span>
       </a>
     </div>
-    <Vcode
+    <Vcode :show="isShow" :fail-text="$t('login:button:failText')" :success-text="$t('login:button:successText')"
-      :show="isShow"
+      :slider-text="$t('login:button:sliderText')" :imgs="[Img1]" @success="onSuccess" />
-      :fail-text="$t('login:button:failText')"
+    <el-dialog v-if="aboutVisible" :visible.sync="aboutVisible" width="680px" style="margin-top: 0"
-      :success-text="$t('login:button:successText')"
+      :close-on-click-modal="false" size="small">
-      :slider-text="$t('login:button:sliderText')"
+      <div style="
-      :imgs="[Img1]"
-      @success="onSuccess"
-    />
-    <el-dialog
-      v-if="aboutVisible"
-      :visible.sync="aboutVisible"
-      width="680px"
-      style="margin-top: 0"
-      :close-on-click-modal="false"
-      size="small"
-    >
-      <div
-        style="
           margin: 0 auto;
           width: 600px;
           line-height: 28px;
           text-align: center;
-        "
+        ">
-      >
+        <h1 style="text-align: center; margin-bottom: 30px" v-if="NODE_ENV === 'usa'">
-        <h1
-          style="text-align: center; margin-bottom: 30px"
-          v-if="NODE_ENV === 'usa'"
-        >
           About
         </h1>
         <h1 style="text-align: center; margin-bottom: 30px" v-else>关于</h1>
         <p style="margin-bottom: 0px" v-if="NODE_ENV === 'usa'">
           <!-- {{ $t('login:title:system_title_about') }} -->
-          <svg-icon
+          <svg-icon icon-class="login-logo" style="width: 250px; height: 71px" />
-            icon-class="login-logo"
-            style="width: 250px; height: 71px"
-          />
         </p>
         <p style="margin-bottom: 0px" v-else>{{ $t('login:title:system') }}</p>
         <p style="margin-bottom: 20px; margin-top: 0">
@@ -247,13 +168,8 @@
       </div>
     </el-dialog>
     <browserTip ref="browserTip" />
-    <toggleRole
+    <toggleRole v-if="toggleRoleVisible" :visible.sync="toggleRoleVisible" :loading="toggleRoleLoading"
-      v-if="toggleRoleVisible"
+      @save="loginByRole" @cancel="cancel" />
-      :visible.sync="toggleRoleVisible"
-      :loading="toggleRoleLoading"
-      @save="loginByRole"
-      @cancel="cancel"
-    />
   </div>
 </template>
 
@@ -339,7 +255,13 @@ export default {
     this.location = this.$route.query.location
     zzSessionStorage.setItem('loginType', this.loginType)
     localStorage.setItem('location', this.location)
-    if (process.env.VUE_APP_OSS_CONFIG_REGION === 'oss-us-west-1') {
+    // zh-CN navigator.language
+    if (navigator.language !== 'zh-CN') {
+      this.$i18n.locale = 'en'
+      this.setLanguage('en')
+      this.$updateDictionary()
+    }
+    else if (process.env.VUE_APP_OSS_CONFIG_REGION === 'oss-us-west-1') {
       this.$i18n.locale = 'en'
       this.setLanguage('en')
       this.$updateDictionary()
@@ -640,6 +562,7 @@ $cursor: #fff;
       // }
     }
   }
+
   .login-r {
     .el-form-item {
       border: 1px solid rgba(255, 255, 255, 0.1);
@@ -655,23 +578,28 @@ $cursor: #fff;
 $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #606266;
+
 .login-container {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: rgb(249, 249, 249);
+
   ::v-deep .el-input__inner::placeholder {
     color: $dark_gray;
   }
+
   .login-header {
     margin: 10px 0px 20px 10px;
     height: 3rem;
     width: 720px;
+
     .login-logo {
       height: 100%;
     }
   }
+
   .login-body {
     position: absolute;
     left: 50%;
@@ -685,32 +613,39 @@ $light_gray: #606266;
     box-sizing: border-box;
     background: rgb(255, 255, 255);
     border-radius: 10px 0px 0px 10px;
+
     .login-l {
       position: relative;
       float: left;
       width: 50%;
       height: 100%;
+
       .login-logo {
         position: absolute;
         top: 35px;
         left: 50px;
+
         img {
           height: 40px;
         }
+
         .usa-logo {
           height: 60px;
         }
       }
+
       .login-image {
         position: absolute;
         top: 10px;
         left: 0px;
         // transform: translateY(-50%);
         height: 100%;
+
         img {
           height: 100%;
         }
       }
+
       .login-image-usa {
         width: 100%;
         display: flex;
@@ -718,6 +653,7 @@ $light_gray: #606266;
         justify-content: flex-end;
       }
     }
+
     .login-r {
       position: relative;
       float: left;
@@ -735,16 +671,19 @@ $light_gray: #606266;
         margin: 0 auto;
         overflow: hidden;
       }
+
       .title-container {
         // margin-bottom: 50px;
         text-align: center;
         margin-top: 20%;
+
         .title {
           font-size: 35px;
           color: $light_gray;
           text-align: center;
           font-weight: bold;
         }
+
         .title-logo-message {
           font-size: 26px;
           color: $light_gray;
@@ -784,6 +723,7 @@ $light_gray: #606266;
       }
     }
   }
+
   .login-footer {
     position: absolute;
     bottom: 50px;
@@ -797,6 +737,7 @@ $light_gray: #606266;
     align-items: center;
     // color: rgb(180, 190, 199);
     color: #909399;
+
     a {
       display: inline-block;
       text-decoration: none;
@@ -805,13 +746,16 @@ $light_gray: #606266;
       display: flex;
       justify-content: center;
     }
+
     span {
       margin: 0 2px;
     }
+
     img {
       height: 20px;
       line-height: 20px;
     }
+
     // p{
     //   display: inline-block;
     //   height:20px;