login

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" :dir="dir">
     <router-view />
   </div>
 </template>
@@ -7,5 +7,16 @@
 <script>
 export default {
   name: "App",
+  data() {
+    return {
+      dir: "ltr",
+    };
+  },
+  created() {
+    let lang_type = localStorage.getItem("language_type");
+    if (lang_type == "AR") {
+      this.dir = "rtl";
+    }
+  },
 };
 </script>

src/common/font/font.css

@@ -60,7 +60,3 @@
   font-family: 'sourceR';
   src: url('SourceSansPro-Regular.ttf');
 }
-#app{
-  font-family: "sourceR";
-  
-}

src/components/login/ForgetPassword.vue

@@ -29,13 +29,13 @@
         <div>
           <img
             v-if="loginType == '手机'"
-            class="leftimg"
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
             src="../../assets/login/phone1.png"
             alt=""
           />
           <img
             v-else
-            class="leftimg"
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
             src="../../assets/login/email.png"
             alt=""
           />
@@ -48,7 +48,7 @@
           />
           <!-- <img
             @click="showLoginType"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/Frame 3.png"
             alt=""
           /> -->
@@ -64,7 +64,11 @@
           </div>
         </div>
         <div class="Verification">
-          <img class="leftimg" src="../../assets/login/diandian.png" alt="" />
+          <img
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
+            src="../../assets/login/diandian.png"
+            alt=""
+          />
           <input
             @input="verification_codeChange"
             v-model="verification_code"
@@ -77,14 +81,25 @@
           <button v-if="VerificationCodeShow" class="waitTime">
             {{ time + "s" }}
           </button>
-          <button v-else @click="getVerificationCode" class="getVerification">
-            GET
+          <button
+            v-else
+            @click="getVerificationCode"
+            :class="[
+              'getVerification',
+              language_type == 'AR' ? 'marginRight' : '',
+            ]"
+          >
+            获取验证码
           </button>
         </div>
       </div>
       <div class="tomima">
         <div>
-          <img class="leftimg" src="../../assets/login/yaoshi.png" alt="" />
+          <img
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
+            src="../../assets/login/yaoshi.png"
+            alt=""
+          />
           <input
             :type="parsswordType"
             :class="passwordError ? 'inputError' : 'input'"
@@ -96,14 +111,14 @@
           <img
             v-show="parsswordType == 'password'"
             @click="lookParssowrd(1)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password1.png"
             alt=""
           />
           <img
             v-show="parsswordType == 'text'"
             @click="lookParssowrd(1)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password2.png"
             alt=""
           />
@@ -112,7 +127,11 @@
           </p>
         </div>
         <div>
-          <img class="leftimg" src="../../assets/login/yaoshi.png" alt="" />
+          <img
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
+            src="../../assets/login/yaoshi.png"
+            alt=""
+          />
           <input
             :type="twoPasswordType"
             :class="passwordErrorTwo ? 'inputError' : 'input'"
@@ -124,14 +143,14 @@
           <img
             v-show="twoPasswordType == 'password'"
             @click="lookParssowrd(2)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password1.png"
             alt=""
           />
           <img
             v-show="twoPasswordType == 'text'"
             @click="lookParssowrd(2)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password2.png"
             alt=""
           />
@@ -156,6 +175,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/api";
+import { mapGetters } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -183,7 +203,9 @@ export default {
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -470,6 +492,10 @@ export default {
           position: absolute;
           top: 10px;
           left: 10px;
+          &.posRight {
+            left: auto;
+            right: 10px;
+          }
         }
         .rightimg {
           width: 24px;
@@ -525,6 +551,10 @@ export default {
           border: 1px solid #ff9900;
           color: white;
         }
+        .marginRight {
+          margin-right: 16px;
+          margin-left: 0px;
+        }
         .waitTime {
           background: #f0f0f0;
           color: black;
@@ -569,6 +599,10 @@ export default {
           position: absolute;
           top: 10px;
           left: 10px;
+          &.posRight {
+            right: 10px;
+            left: auto;
+          }
         }
         .rightimg {
           width: 24px;
@@ -577,6 +611,10 @@ export default {
           right: 10px;
           top: 10px;
           cursor: pointer;
+          &.posLeft {
+            right: auto;
+            left: 10px;
+          }
         }
         p {
           font-size: 14px;

src/components/login/LoginNav.vue

@@ -49,11 +49,7 @@
       <p class="p1">{{ configInfor.title }}</p>
     </div>
     <div class="userName">
-      <el-dropdown
-        style="margin-right: 16px"
-        trigger="click"
-        @command="changeLang"
-      >
+      <el-dropdown style="margin: 0 16px" trigger="click" @command="changeLang">
         <span class="el-dropdown-link" style="color: #fff; cursor: pointer">
           {{ lang ? lang : "中文"
           }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -68,9 +64,15 @@
         </el-dropdown-menu>
       </el-dropdown>
       <div v-if="!userMessage" class="selectLoginOrRegistration">
-        <span @click="cutLoginReg('login')">登录</span>
+        <!-- 登录 -->
+        <span class="lrBtn" @click="cutLoginReg('login')">{{
+          $t("Key9")
+        }}</span>
         <span> | </span>
-        <span @click="cutLoginReg('signin')">注册</span>
+        <!-- 注册 -->
+        <span class="lrBtn" @click="cutLoginReg('signin')">{{
+          $t("Key10")
+        }}</span>
       </div>
       <!-- 用户头像和用户名 -->
       <div class="user" v-else>
@@ -113,10 +115,16 @@
 <script>
 import Cookies from "js-cookie";
 import { getStaticContent, getContent } from "@/api/api";
-import { setI18nLang } from "@/utils/i18n";
+
 import { getToken, removeToken } from "@/utils/auth";
 export default {
-  props: ["type", "changeLoginReg", "FatheruserMessage", "projectList", "configInfor"],
+  props: [
+    "type",
+    "changeLoginReg",
+    "FatheruserMessage",
+    "projectList",
+    "configInfor",
+  ],
   data() {
     return {
       activeIndex: "1",
@@ -185,7 +193,8 @@ export default {
       this.lang = command.language_name;
       let lang_type = command.language_type;
       console.log(lang_type);
-      await setI18nLang(lang_type);
+      localStorage.setItem("language_type", lang_type);
+      //await setI18nLang(lang_type);
       this.$router.go(0);
     },
     // 切换登录的注册
@@ -219,7 +228,7 @@ export default {
       this.userShow = false;
       this.userMessage = null;
       this.changeLoginReg("login", null);
-      this.projectListArr = []
+      this.projectListArr = [];
     },
     getLangList() {
       let MethodName = "language_manager-GetLanguageList";
@@ -238,6 +247,11 @@ export default {
   },
   created() {
     let _this = this;
+    let language_type = localStorage.getItem("language_type");
+    if (language_type) {
+      _this.language_type = language_type;
+    }
+
     if (this.FatheruserMessage) {
       _this.userMessage = this.FatheruserMessage;
     } else {
@@ -261,7 +275,6 @@ export default {
   justify-content: space-between;
   padding: 0 60px 0 40px;
   z-index: 999;
-  font-family: "sourceR";
   background: linear-gradient(180deg, #000000 0%, rgba(44, 44, 44, 0) 100%);
   .logo {
     display: flex;
@@ -285,15 +298,15 @@ export default {
     .el-menu.el-menu--horizontal {
       border-bottom: none;
     }
-    .logo-img{
-        width: 48px;
-        height: 48px;
+    .logo-img {
+      width: 48px;
+      height: 48px;
     }
-    .p1{
-        font-size: 18px;
-        line-height: 26px;
-        color: #FFFFFF;
-        margin: 0 10px;
+    .p1 {
+      font-size: 18px;
+      line-height: 26px;
+      color: #ffffff;
+      margin: 0 10px;
     }
   }
   .userName {
@@ -340,21 +353,16 @@ export default {
     }
     .selectLoginOrRegistration {
       display: flex;
-      width: 161px;
       height: 32px;
       border: 1px solid #ffffff;
       box-sizing: border-box;
       border-radius: 4px;
-      // justify-content: space-evenly;
       align-items: center;
-      span {
-        margin-left: 23px;
-      }
-      > :first-child {
-        cursor: pointer;
-      }
-      > :last-child {
+      .lrBtn {
+        min-width: 64px;
+        padding: 0 8px;
         cursor: pointer;
+        text-align: center;
       }
     }
     .user {

src/components/login/LoginNav2.vue

@@ -1,27 +1,14 @@
 <template>
   <!-- 顶部登录导航 -->
   <div class="LoginNav">
-    <div class="logo">
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect"
-        text-color="black"
-        active-text-color="#FF9900"
-      >
-        <el-menu-item index="1">首页</el-menu-item>
-      </el-menu>
+    <div class="logo" @click="goHome">
+      <img :src="configInfor.logo_image_url_home" class="logo-img" />
+      <p class="p1">{{ configInfor.title }}</p>
     </div>
     <div class="userName">
-      <el-dropdown
-        v-if="userMessage"
-        style="margin-right: 16px"
-        trigger="click"
-        @command="changeLang"
-      >
-        <span class="el-dropdown-link" style="color: #fff; cursor: pointer">
-          {{ lang ? lang : "choose language"
+      <el-dropdown trigger="click" @command="changeLang">
+        <span class="el-dropdown-link" style="cursor: pointer">
+          {{ lang ? lang : "中文"
           }}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown" style="width: 200px">
@@ -33,10 +20,9 @@
           >
         </el-dropdown-menu>
       </el-dropdown>
-      <div class="selectLoginOrRegistration">
-        <span @click="cutLoginReg('login')">登录</span>
-        <span> | </span>
-        <span @click="cutLoginReg('signin')">注册</span>
+      <div class="selectLoginOrRegistration" style="margin: 0 16px">
+        <!-- 登录 -->
+        <span @click="cutLoginReg('login')">{{ $t("Key9") }}</span>
       </div>
       <div class="message">
         <img src="../../assets/login/Vector.png" alt="" />
@@ -51,7 +37,7 @@ import { getAcsCode, getStaticContent, getContent } from "@/api/api";
 import { getToken } from "@/utils/auth";
 
 export default {
-  props: ["type", "changeLoginReg"],
+  props: ["type", "changeLoginReg", "configInfor"],
   data() {
     return {
       activeIndex: "",
@@ -129,8 +115,8 @@ export default {
     async changeLang(command) {
       this.lang = command.language_name;
       let lang_type = command.language_type;
-      console.log(lang_type);
-      await setI18nLang(lang_type);
+      //await setI18nLang(lang_type);
+      localStorage.setItem("language_type", lang_type);
       this.$router.go(0);
     },
     // 切换登录的注册
@@ -155,9 +141,16 @@ export default {
         }
       });
     },
+    goHome() {
+      this.$router.go(-1);
+    },
   },
   created() {
     let _this = this;
+    let language_type = localStorage.getItem("language_type");
+    if (language_type) {
+      _this.language_type = language_type;
+    }
     _this.getLangList();
   },
 };
@@ -176,6 +169,7 @@ export default {
   .logo {
     display: flex;
     align-items: center;
+    cursor: pointer;
     .el-menu-demo {
       background: rgba(0, 0, 0, 0);
       // margin-left: 100px;
@@ -190,6 +184,16 @@ export default {
     .el-menu.el-menu--horizontal {
       border-bottom: none;
     }
+    .logo-img {
+      width: 48px;
+      height: 48px;
+    }
+    .p1 {
+      font-size: 18px;
+      line-height: 26px;
+      color: #000;
+      margin: 0 10px;
+    }
   }
   .userName {
     display: flex;
@@ -234,7 +238,7 @@ export default {
     }
     .selectLoginOrRegistration {
       display: flex;
-      width: 161px;
+
       height: 32px;
       border: 1px solid black;
       box-sizing: border-box;
@@ -243,12 +247,9 @@ export default {
       align-items: center;
       color: black;
       span {
-        margin-left: 23px;
-      }
-      > :first-child {
-        cursor: pointer;
-      }
-      > :last-child {
+        min-width: 64px;
+        padding: 0 8px;
+        text-align: center;
         cursor: pointer;
       }
     }

src/components/login/login.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 登录 -->
-  <div class="login">
+  <div class="login_content">
     <div class="title">
       <p>登录账户</p>
     </div>
@@ -10,13 +10,19 @@
         @click="selectTS('teacher')"
         :class="TorS == 'teacher' ? 'select' : ''"
       >
-        <p>我是老师</p>
+        <p>
+          {{ $t("Key11") }}
+          <!-- 我是老师</p> -->
+        </p>
       </div>
+
       <div
         @click="selectTS('student')"
         :class="TorS == 'teacher' ? '' : 'select'"
       >
-        <p>我是学生</p>
+        <p>{{ $t("Key12") }}</p>
+
+        <!-- 我是学生</p> -->
       </div>
     </div>
     <div class="main" @keydown="downLogin">
@@ -25,19 +31,21 @@
         <div>
           <img
             v-if="TorS == 'teacher'"
-            class="leftimg"
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
             src="../../assets/login/email.png"
             alt=""
           />
           <img
             v-else
-            class="leftimg"
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
             src="../../assets/login/email.png"
             alt=""
           />
           <input
             :class="accountError ? 'inputError' : 'input'"
-            :placeholder="TorS == 'teacher' ? '邮箱或者用户名' : '邮箱或者用户名'"
+            :placeholder="
+              TorS == 'teacher' ? '邮箱或者用户名' : '邮箱或者用户名'
+            "
             v-model="email_phone"
             @input="Changeemail_phone"
           />
@@ -59,7 +67,11 @@
           </div>
         </div>
         <div>
-          <img class="leftimg" src="../../assets/login/yaoshi.png" alt="" />
+          <img
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
+            src="../../assets/login/yaoshi.png"
+            alt=""
+          />
           <input
             :type="parsswordType"
             :class="passwordError ? 'inputError' : 'input'"
@@ -70,14 +82,14 @@
           <img
             v-show="parsswordType == 'password'"
             @click="lookParssowrd"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password1.png"
             alt=""
           />
           <img
             v-show="parsswordType == 'text'"
             @click="lookParssowrd"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password2.png"
             alt=""
           />
@@ -111,7 +123,11 @@
           </div>
         </div>
         <div class="Verification">
-          <img class="leftimg" src="../../assets/login/diandian.png" alt="" />
+          <img
+            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
+            src="../../assets/login/diandian.png"
+            alt=""
+          />
           <input style="width: 202px" class="input" type="text" />
           <button
             @click="getVerificationCode"
@@ -125,21 +141,27 @@
       <!-- 记住我 忘记密码 -->
       <div class="remeberMeAndForgetparssword">
         <el-checkbox v-model="rememberMe">
-          <span style="color: black"> 记住我 </span>
+          <!-- 记住我 -->
+          <span style="color: black">{{ $t("Key19") }}</span>
         </el-checkbox>
-        <p @click="cutLoginReg('Forget password')">忘记密码？</p>
+        <!-- 忘记密码？ -->
+        <p @click="cutLoginReg('Forget password')">{{ $t("Key20") }}</p>
       </div>
       <!-- 登录 -->
       <div class="btnLogin">
         <img v-if="isLogin" src="../../assets/login/Ellipse87.png" alt="" />
-        <p @click="gotoLogin" v-else>登录</p>
+        <!-- 登录 -->
+        <p @click="gotoLogin" v-else>{{ $t("Key9") }}</p>
       </div>
       <!-- 同意协议 -->
       <div class="agreement">
         <el-checkbox v-model="ageeemnt">
-          <span style="color: black"> 我已阅读并同意 </span>
-          <span> 用户协议 </span>
+          <!-- 我已阅读并同意   用户协议-->
+          <span style="color: black">{{ $t("Key21") }} </span>
         </el-checkbox>
+        <span class="userAgree" @click="viewUserAgreement">{{
+          $t("Key22")
+        }}</span>
       </div>
     </div>
     <div v-show="shadow" class="shadow"></div>
@@ -151,6 +173,7 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin, getContent } from "@/api/api";
 import { setToken } from "@/utils/auth";
+import { mapGetters } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -174,7 +197,9 @@ export default {
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -280,6 +305,7 @@ export default {
     cutLoginReg(value) {
       this.changeLoginReg(value);
     },
+    viewUserAgreement() {},
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -311,12 +337,12 @@ export default {
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.login {
+.login_content {
   width: 462px;
-  // height: 500px;
   background: #fff;
   border-radius: 8px;
   margin-left: 30px;
+  padding-bottom: 47px;
   .title {
     height: 100px;
     line-height: 100px;
@@ -325,6 +351,7 @@ export default {
       font-size: 20px;
       color: #ff9900;
       font-weight: bold;
+      margin: 0;
     }
   }
   .teacherAndStudent {
@@ -387,6 +414,10 @@ export default {
         position: absolute;
         top: 10px;
         left: 10px;
+        &.posRight {
+          right: 10px;
+          left: auto;
+        }
       }
       .rightimg {
         width: 24px;
@@ -395,6 +426,10 @@ export default {
         right: 10px;
         top: 10px;
         cursor: pointer;
+        &.posLeft {
+          left: 10px;
+          right: auto;
+        }
       }
       .selectLoginType {
         position: absolute;
@@ -482,6 +517,7 @@ export default {
       font-size: 16px;
       span {
         color: #ff9900;
+        cursor: pointer;
       }
     }
   }
@@ -506,7 +542,7 @@ export default {
 }
 </style>
 <style lang="scss">
-.login {
+.login_content {
   input::-ms-reveal {
     display: none;
   }
@@ -526,5 +562,15 @@ export default {
     background-color: white;
     border-color: black;
   }
+  .remeberMeAndForgetparssword {
+    .el-checkbox__label {
+      padding: 0 10px;
+    }
+  }
+  .agreement {
+    .el-checkbox__label {
+      padding: 0 10px;
+    }
+  }
 }
 </style>

src/components/login/registration.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="registration2">
     <div class="title">
-      <p class="p1">注册账户</p>
-      <p class="p2">用户信息</p>
+      <!-- 注册账号 -->
+      <p class="p1">{{ $t("Key23") }}</p>
+      <!-- 用户信息 -->
+      <p class="p2">{{ $t("Key24") }}</p>
     </div>
     <div class="form" v-loading="loading">
       <!-- 
@@ -12,17 +14,17 @@
         :model="ruleForm"
         :rules="rules"
         ref="ruleForm"
-        class="demo-ruleForm"
+        :class="['demo-ruleForm', language_type == 'AR' ? 'ruleForm' : '']"
         :hide-required-asterisk="true"
         :show-message="false"
       >
         <el-form-item prop="Username">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin1.png" alt="" />
-            <span> 用户名 </span>
+            <span> <!-- 用户名  -->{{ $t("Key25") }} </span>
           </span>
           <el-input
-            placeholder="请输入"
+            :placeholder="$t('Key26')"
             v-model="ruleForm.Username"
             @input="trimInput('Username')"
           ></el-input>
@@ -30,10 +32,10 @@
         <el-form-item prop="Realname">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin2.png" alt="" />
-            <span> 真实姓名 </span>
+            <span> <!-- 真实姓名  -->{{ $t("Key27") }} </span>
           </span>
           <el-input
-            placeholder="请输入您的真实姓名"
+            :placeholder="$t('Key28')"
             v-model="ruleForm.Realname"
             @input="trimInput('Realname')"
           ></el-input>
@@ -41,11 +43,11 @@
         <el-form-item prop="FromWhereCode" class="Noafter">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin3.png" alt="" />
-            <span> 地区 </span>
+            <span> <!-- 地区  -->{{ $t("Key29") }} </span>
           </span>
           <el-select
             v-model="ruleForm.FromWhereCode"
-            placeholder="选择国家和地区"
+            :placeholder="$t('Key30')"
           >
             <el-option
               v-for="(item, i) in TimeZoneList"
@@ -59,11 +61,11 @@
         <el-form-item prop="org_id">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin4.png" alt="" />
-            <span> 机构 </span>
+            <span> {{ $t("Key31") }} </span>
           </span>
           <el-select
             v-model="ruleForm.org_id"
-            placeholder="选择机构"
+            :placeholder="$t('Key32')"
             v-loadmore="SelectScroll"
             v-loading="SelectLoading"
           >
@@ -76,11 +78,17 @@
           </el-select>
         </el-form-item>
         <hr />
-        <div class="title2">注册信息</div>
+        <div class="title2">
+          <!-- 注册信息 -->
+          {{ $t("Key84") }}
+        </div>
         <el-form-item prop="user_type">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin5.png" alt="" />
-            <span> 身份 </span>
+            <span>
+              <!-- 身份 -->
+              {{ $t("Key33") }}
+            </span>
           </span>
           <el-radio-group style="width: 334px" v-model="ruleForm.user_type">
             <el-radio label="TEACHER">
@@ -94,24 +102,24 @@
         <el-form-item prop="email">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin6.png" alt="" />
-            <span> 邮箱 </span>
+            <span> {{ $t("Key34") }} </span>
           </span>
           <el-input
             @change="ChangeEmail"
             v-model="ruleForm.email"
-            placeholder="邮箱"
+            :placeholder="$t('Key34')"
             @input="trimInput('email')"
           />
         </el-form-item>
         <el-form-item prop="verification_code">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin7.png" alt="" />
-            <span> 验证码 </span>
+            <span> {{ $t("Key36") }} </span>
           </span>
           <el-input
             style="width: 202px"
             v-model="ruleForm.verification_code"
-            placeholder="验证码"
+            :placeholder="$t('Key36')"
             @input="verification_codeChange"
             maxlength="6"
           />
@@ -122,7 +130,10 @@
             type="button"
             v-else
             @click.prevent="getVerificationCode"
-            class="getVerification"
+            :class="[
+              'getVerification',
+              language_type == 'AR' ? 'marginRight' : '',
+            ]"
           >
             获取
           </button>
@@ -130,11 +141,14 @@
         <el-form-item prop="password">
           <span slot="label" class="lable">
             <img src="../../assets/login/singin9.png" alt="" />
-            <span> 密码 </span>
+            <span>
+              <!-- 密码  -->
+              {{ $t("Key14") }}
+            </span>
           </span>
           <el-input
             v-model="ruleForm.password"
-            placeholder="密码"
+            :placeholder="$t('Key14')"
             :type="parsswordType"
             @change="changeParssword"
             @input="trimInput('password')"
@@ -142,29 +156,33 @@
           <img
             v-show="parsswordType == 'password'"
             @click="lookParssowrd(1)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password1.png"
             alt=""
           />
           <img
             v-show="parsswordType == 'text'"
             @click="lookParssowrd(1)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password2.png"
             alt=""
           />
           <p :class="passwordError ? 'textRed' : 'psswordHint'">
-            请输入8-12位大写字母、小写字母、数字和组合。
+            <!-- 请输入8-12位大写字母、小写字母、数字和组合。 -->
+            {{ $t("Key17") }}
           </p>
         </el-form-item>
         <el-form-item prop="Twopassword">
           <span slot="label" class="lable" style="width: 200px">
             <img src="../../assets/login/singin9.png" alt="" />
-            <span> 重复 </span>
+            <span>
+              <!-- 重复  -->
+              {{ $t("Key15") }}
+            </span>
           </span>
           <el-input
             v-model="ruleForm.Twopassword"
-            placeholder="确认密码"
+            :placeholder="$t('Key16')"
             :type="twoPasswordType"
             @change="Changetowpassword"
             @input="trimInput('Twopassword')"
@@ -172,19 +190,20 @@
           <img
             v-show="twoPasswordType == 'password'"
             @click="lookParssowrd(2)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password1.png"
             alt=""
           />
           <img
             v-show="twoPasswordType == 'text'"
             @click="lookParssowrd(2)"
-            class="rightimg"
+            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
             src="../../assets/login/password2.png"
             alt=""
           />
           <p :class="passwordErrorTwo ? 'textRed' : 'psswordHint'">
-            请再次输入密码。这两个项必须相同。
+            <!-- 请再次输入密码。这两个项必须相同。 -->
+            {{ $t("Key18") }}
           </p>
         </el-form-item>
         <hr />
@@ -192,8 +211,14 @@
           <!-- 同意协议 -->
           <div class="agreement">
             <el-checkbox v-model="ageeemnt">
-              <span style="color: black"> 我已阅读并同意 </span>
-              <span> 用户协议 </span>
+              <span style="color: black">
+                <!-- 我已阅读并同意  -->
+                {{ $t("Key21") }}
+              </span>
+              <span>
+                <!-- 用户协议 -->
+                {{ $t("Key22") }}
+              </span>
             </el-checkbox>
           </div>
           <!-- 我有账户 -->
@@ -206,7 +231,7 @@
             <img src="../../assets/login/Ellipse87.png" alt="" />
           </button>
           <button v-else type="button" @click.prevent="submitForm('ruleForm')">
-            注册
+            <!-- 注册 -->{{ $t("Key10") }}
           </button>
         </div>
       </el-form>
@@ -218,7 +243,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/api";
-
+import { mapGetters } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -307,7 +332,9 @@ export default {
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -337,7 +364,7 @@ export default {
         return;
       }
       if (this.passwordError) {
-        this.$message.warning("请输入8-12位大写字母、小写字母、数字和组合");
+        this.$message.warning(this.$t("Key17"));
         return;
       }
       if (flag) {
@@ -530,11 +557,10 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .registration2 {
-  margin-top: 40px;
   width: 1200px;
   background: white;
-  margin-left: 60px;
-  padding: 40px 0 40px 40px;
+  margin: 40px 60px 40px 60px;
+  padding: 40px 40px 40px 40px;
   border-radius: 8px;
   .title {
     p {
@@ -582,7 +608,7 @@ export default {
           vertical-align: middle;
         }
         span {
-          margin-left: 10px;
+          margin: 0 10px;
         }
       }
     }
@@ -593,6 +619,9 @@ export default {
       left: 5px;
       top: 10px;
     }
+    .ruleForm .el-form-item::after {
+      left: -8px;
+    }
     .getVerification {
       width: 116px;
       height: 40px;
@@ -603,6 +632,10 @@ export default {
       background: #ff9900;
       border: 1px solid #ff9900;
       color: white;
+      &.marginRight {
+        margin-right: 16px;
+        margin-left: 0px;
+      }
     }
     .waitTime {
       width: 116px;
@@ -621,6 +654,10 @@ export default {
       right: 10px;
       top: 10px;
       cursor: pointer;
+      &.posLeft {
+        right: auto;
+        left: 10px;
+      }
     }
     .psswordHint {
       width: 334px;
@@ -696,4 +733,17 @@ export default {
     }
   }
 }
+</style>
+
+<style lang="scss">
+.registration2 {
+  .el-form-item__label {
+    padding: 0;
+  }
+  .agreement {
+    .el-checkbox__label {
+      padding: 0 10px;
+    }
+  }
+}
 </style>

src/main.js

@@ -15,9 +15,9 @@ import router from './router'
 import "@/common/font/font.css"
 import i18n from "@/utils/i18n"
 
-Vue.use(i18n)
-    // import '@/icons' // icon
-    // import '@/permission' // permission control
+// Vue.use(i18n)
+// import '@/icons' // icon
+// import '@/permission' // permission control
 
 /**
  * If you don't want to use mock-server
@@ -34,30 +34,31 @@ Vue.use(i18n)
 
 // element 下拉框下拉加载
 Vue.directive('loadmore', {
-    bind(el, binding) {
-        // 获取element-ui定义好的scroll盒子
-        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
-        SELECTWRAP_DOM.addEventListener('scroll', function() {
-            const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
-            if (CONDITION) {
-                binding.value()
-            }
-        })
-    }
+  bind(el, binding) {
+    // 获取element-ui定义好的scroll盒子
+    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
+    SELECTWRAP_DOM.addEventListener('scroll', function () {
+      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
+      if (CONDITION) {
+        binding.value()
+      }
+    })
+  }
 })
 
 
 
 // set ElementUI lang to EN
 Vue.use(ElementUI, { locale })
-    // 如果想要中文版 element-ui，按如下方式声明
-    // Vue.use(ElementUI)
+// 如果想要中文版 element-ui，按如下方式声明
+// Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
 new Vue({
-    el: '#app',
-    router,
-    store,
-    render: h => h(App)
+  el: '#app',
+  router,
+  store,
+  i18n,
+  render: h => h(App)
 })

src/store/modules/lang.js

@@ -4,45 +4,45 @@ import { getToken, removeToken } from "@/utils/auth";
 
 
 const state = {
-    language_type: localStorage.getItem('language_type') || 'ZH'
+  language_type: localStorage.getItem('language_type') || 'ZH'
 }
 
 const mutations = {
-    SET_UPDATE_LANGUAGE_TYPE: (state, language_type) => {
-        localStorage.setItem('language_type', language_type);
-        state.language_type = language_type;
-    },
+  SET_UPDATE_LANGUAGE_TYPE: (state, language_type) => {
+    localStorage.setItem('language_type', language_type);
+    state.language_type = language_type;
+  },
 }
 
 const actions = {
-    // 用户更换语言类型
-    updateLanguageType({ commit }, language_type) {
-        return new Promise((reslove, reject) => {
-            let MethodName = "login_control-UpdateLanguageType";
-            let userInfor = JSON.parse(getToken());
-            let UserCode = "",
-                UserType = "",
-                SessionID = "";
-            if (userInfor) {
-                UserCode = userInfor.user_code;
-                UserType = userInfor.user_type;
-                SessionID = userInfor.session_id;
-            }
-            getContent(MethodName, UserCode, UserType, SessionID, { language_type })
-                .then(() => {
-                    commit('SET_UPDATE_LANGUAGE_TYPE', language_type);
-                    reslove();
-                })
-                .catch(error => {
-                    reject(error);
-                });
+  // 用户更换语言类型
+  updateLanguageType({ commit }, language_type) {
+    return new Promise((reslove, reject) => {
+      let MethodName = "login_control-UpdateLanguageType";
+      let userInfor = JSON.parse(getToken());
+      let UserCode = "",
+        UserType = "",
+        SessionID = "";
+      if (userInfor) {
+        UserCode = userInfor.user_code;
+        UserType = userInfor.user_type;
+        SessionID = userInfor.session_id;
+      }
+      getContent(MethodName, UserCode, UserType, SessionID, { language_type })
+        .then(() => {
+          commit('SET_UPDATE_LANGUAGE_TYPE', language_type);
+          reslove();
+        })
+        .catch(error => {
+          reject(error);
         });
-    },
+    });
+  },
 }
 
 export default {
-    namespaced: true,
-    state,
-    mutations,
-    actions
+  namespaced: true,
+  state,
+  mutations,
+  actions
 }

src/utils/i18n.js

@@ -12,35 +12,35 @@ import ruLocal from 'element-ui/lib/locale/lang/ru-RU';
 
 Vue.use(VueI18n);
 const i18n = new VueI18n({
-    locale: localStorage.getItem('language_type') || "ZH", //store.getters.language_type,
-    messages: {
-        ZH: {
-            ...zhLocal
-        },
-        AR: {
-            ...arLocal
-        },
-        EN: {
-            ...enLocal
-        },
-        JA: {
-            ...jaLocal
-        },
-        DE: {
-            ...deLocal
-        },
-        RU: {
-            ...ruLocal
-        }
+  locale: localStorage.getItem('language_type') || "ZH", //store.getters.language_type,
+  messages: {
+    ZH: {
+      ...zhLocal
     },
-    silentTranslationWarn: true
+    AR: {
+      ...arLocal
+    },
+    EN: {
+      ...enLocal
+    },
+    JA: {
+      ...jaLocal
+    },
+    DE: {
+      ...deLocal
+    },
+    RU: {
+      ...ruLocal
+    }
+  },
+  silentTranslationWarn: true
 });
 
 ElementLocale.i18n((key, value) => i18n.t(key, value));
 
 export async function setI18nLang(language_type) {
-    console.log(language_type);
-    await store.dispatch('lang/updateLanguageType', language_type);
+  console.log(language_type);
+  await store.dispatch('lang/updateLanguageType', language_type);
 }
 
 /**
@@ -48,18 +48,23 @@ export async function setI18nLang(language_type) {
  * @param {Object} Parameter word_key_list 需要读取的词汇
  */
 export function updateWordPack(Parameter) {
+  return new Promise((resolve, reject) => {
     Parameter.language_type = store.getters.language_type;
     let MethodName = 'language_manager-GetWordPack';
     getStaticContent(MethodName, Parameter).then(data => {
-        let localWord = i18n.messages[data.language_type];
-        if (localWord === undefined) {
-            localWord = {};
-        }
-        let wordPack = Object.assign(localWord, data.word_pack);
+      let localWord = i18n.messages[data.language_type];
+      if (localWord === undefined) {
+        localWord = {};
+      }
+      let wordPack = Object.assign(localWord, data.word_pack);
 
-        i18n.setLocaleMessage(data.language_type, wordPack);
-        // localStorage.setItem('i18n-message', JSON.stringify(i18n.messages));
+      i18n.setLocaleMessage(data.language_type, wordPack);
+      // localStorage.setItem('i18n-message', JSON.stringify(i18n.messages));
     });
+    resolve()
+  }).catch(err => {
+    reject(err)
+  });
 }
 
 export default i18n;

src/views/login/Signup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="signup">
-    <LoginNav2 />
+  <div class="signup" v-if="configInfor && isData">
+    <LoginNav2 :configInfor="configInfor" />
     <Registration />
   </div>
 </template>
@@ -10,6 +10,9 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import Registration from "@/components/login/registration";
 import LoginNav2 from "@/components/login/LoginNav2";
+import { getConfig } from "@/utils/auth";
+import { getConfigInfor } from "@/utils/index";
+import { updateWordPack } from "@/utils/i18n";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -19,7 +22,10 @@ export default {
   props: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      configInfor: null,
+      isData: false,
+    };
   },
   //计算属性 类似于data概念
   computed: {},
@@ -28,9 +34,46 @@ export default {
   //方法集合
   methods: {},
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  async created() {
+    await updateWordPack({
+      word_key_list: [
+        "Key9",
+        "Key10",
+        "Key14",
+        "Key15",
+        "Key16",
+        "Key17",
+        "Key18",
+        "Key21",
+        "Key22",
+        "Key23",
+        "Key24",
+        "Key25",
+        "Key26",
+        "Key27",
+        "Key28",
+        "Key29",
+        "Key30",
+        "Key31",
+        "Key32",
+        "Key33",
+        "Key34",
+        "Key35",
+        "Key36",
+        "Key37",
+        "Key84",
+      ],
+    });
+    this.isData = true;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    if (getConfig()) {
+      this.configInfor = JSON.parse(getConfig());
+    } else {
+      this.configInfor = getConfigInfor();
+    }
+  },
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前

src/views/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="index">
+  <div class="index" v-if="isData">
     <template v-if="isPc">
       <div class="shadow" v-if="LoginOrRegistration != 'signin'">
         <LoginNav
@@ -18,11 +18,15 @@
             <div class="text">
               <p class="p1">{{ configInfor.title }}</p>
               <p class="p2">
-                这里有丰富的教学资源、先进的教学方法，无论您是教师或学生都能在这里尽情汲取养分！
+                {{ $t("Key1") }}
+                <!-- 这里有丰富的教学资源、先进的教学方法，无论您是教师或学生都能在这里尽情汲取养分！ -->
               </p>
             </div>
           </div>
-          <div class="login" v-if="LoginOrRegistration == 'login'">
+          <div
+            :class="['login', language_type == 'AR' ? 'left' : '']"
+            v-if="LoginOrRegistration == 'login'"
+          >
             <Login
               :ForgetType.sync="loginType"
               :changeLoginReg="changeLoginReg"
@@ -67,7 +71,6 @@
             <span> About us </span>
             <span>
               <span style="margin-right: 16px"> Office: </span>
-
               hzmd@160.com
             </span>
             <span>
@@ -106,7 +109,7 @@ import { updateWordPack } from "@/utils/i18n";
 import { getToken, removeToken } from "@/utils/auth";
 
 import { getConfigInfor } from "@/utils/index";
-
+import { mapGetters } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -252,10 +255,13 @@ export default {
       userMessage: null,
       language_list: null,
       configInfor: null,
+      isData: false,
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapGetters(["language_type"]),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -347,9 +353,6 @@ export default {
               this.getChildSysList();
             }
             this.getLangList();
-            updateWordPack({
-              word_key_list: ["teaching", "teaching"],
-            });
           }
         });
       } else {
@@ -436,7 +439,22 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  async created() {
+    await updateWordPack({
+      word_key_list: [
+        "Key1",
+        "Key9",
+        "Key10",
+        "Key11",
+        "Key12",
+        "Key19",
+        "Key20",
+        "Key21",
+        "Key22",
+      ],
+    });
+    this.isData = true;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.browserRedirect();
@@ -464,7 +482,6 @@ export default {
   min-height: 100vh;
   background: url("../../assets/login/indexBG.png") no-repeat;
   background-size: cover;
-  font-family: "sourceR";
   position: relative;
   min-width: 1260px;
   .empty {
@@ -496,6 +513,10 @@ export default {
         top: 0;
         right: 15px;
         z-index: 1;
+        &.left {
+          left: 15px;
+          right: auto;
+        }
       }
       .ForgetPassword {
         position: absolute;
@@ -526,7 +547,7 @@ export default {
         }
       }
       .text {
-        margin-left: 32px;
+        margin: 0 32px;
         color: white;
         p {
           width: 533px;

vue.config.js

@@ -40,7 +40,7 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.helxsoft.cn`,
+        target: `http://gcls.utschool.cn`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''