支持国际化

.config.dev.js

@@ -42,6 +42,9 @@ module.exports = {
     wmp: {
       url: 'http://wmp-learning2.ezijing.com'
     },
+    seg: {
+      url: 'http://seg-learning2.ezijing.com'
+    },
     ciis: {
       url: 'http://ciis-learning2.ezijing.com'
     },

.config.pro.js

@@ -23,6 +23,9 @@ module.exports = {
     wmp: {
       url: 'http://wmp-learning.ezijing.com'
     },
+    seg: {
+      url: 'http://seg-learning.ezijing.com'
+    },
     ciis: {
       url: 'http://ciis-learning.ezijing.com'
     },

.config.test.js

@@ -24,6 +24,9 @@ module.exports = {
     wmp: {
       url: 'http://wmp-learning2.ezijing.com'
     },
+    seg: {
+      url: 'http://seg-learning2.ezijing.com'
+    },
     ciis: {
       url: 'http://ciis-learning2.ezijing.com'
     },

src/assets/languages/en.js

+export default {
+  main: {
+    title: 'Online Learning System'
+  },
+  login: {
+    rememberMe: 'Remember Me',
+    submitText: 'Log in',
+    pwdLogin: 'Password login',
+    codeLogin: 'Verification code login',
+    forgetPassword: 'Forget password'
+  },
+  loginPwd: {
+    account: { placeholder: 'Mobile / Email', rule: 'Please input user ID' },
+    password: { placeholder: 'Password', rule: 'Please enter the password' },
+    successMessage: 'Login successfully'
+  },
+  loginCode: {
+    account: { placeholder: 'Mobile / Email', rule: 'Please input user ID' },
+    code: { placeholder: 'Verification code', rule: 'Enter 4-digit verification code' },
+    sendCodeText: 'Send the verification code',
+    sendCodeMessage: 'Verification code sent',
+    successMessage: 'Login successfully'
+  },
+  password: {
+    title: 'Forget password',
+    backText: 'Back to login',
+    account: { title: 'Account', placeholder: 'Mobile / Email', rule: 'Please input user ID' },
+    code: { title: 'Verification code', placeholder: 'Verification code', rule: 'Enter 4-digit verification code' },
+    newPassword: {
+      title: 'Password',
+      placeholder: 'Password',
+      rule: 'Please enter a new password',
+      rule2: 'Please enter 6-20 letters, numbers and punctuation marks'
+    },
+    confirmPassword: {
+      title: 'Confirm password',
+      placeholder: 'Confirm password',
+      rule: 'Please re-enter the new password',
+      rule2: 'Enter the password twice is not the same'
+    },
+    sendCodeText: 'Send the verification code',
+    sendCodeMessage: 'Verification code sent',
+    submitText: 'Submit',
+    alertTitle: 'Tip',
+    successMessage: 'Password reset successfully',
+    confirmButtonText: 'Go to login'
+  }
+}

src/assets/languages/en.json

-{
-  "common": {
-    "title": "theme"
-  },
-  "action": {
-    "interface": "interface back test"
-  },
-  "components": {
-    "errorPages": {
-      "404page": {
-        "errStr": "很抱歉，您访问的页面已经断开",
-        "goBack": "返回首页",
-        "goNext": "返回上一页"
-      }
-    }
-  }
-}

src/assets/languages/index.js

 import Cookies from 'js-cookie'
 import VueI18n from 'vue-i18n'
 import language from './language'
-import zhCNLocale from 'element-ui/lib/locale/lang/zh-CN'
-import enLocale from 'element-ui/lib/locale/lang/en'
+import elZhCN from 'element-ui/lib/locale/lang/zh-CN'
+import elEN from 'element-ui/lib/locale/lang/en'
+
+import zhCN from './zh-CN'
+import en from './en'
 
 export default () => {
   let _locale = 'zh-CN'
@@ -34,8 +37,8 @@ export default () => {
   return new VueI18n({
     locale: _locale, // 定义默认语言为中文
     messages: {
-      'zh-CN': Object.assign(require('./zh-CN.json'), zhCNLocale),
-      en: Object.assign(require('./en.json'), enLocale)
+      'zh-CN': Object.assign(zhCN, elZhCN),
+      en: Object.assign(en, elEN)
     }
   })
 }

src/assets/languages/zh-CN.js

+export default {
+  main: {
+    title: '在线学习系统'
+  },
+  login: {
+    rememberMe: '记住我',
+    submitText: '登录',
+    pwdLogin: '密码登录',
+    codeLogin: '验证码登录',
+    forgetPassword: '忘记密码'
+  },
+  loginPwd: {
+    account: { placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
+    password: { placeholder: '密码', rule: '请输入密码' },
+    successMessage: '登录成功'
+  },
+  loginCode: {
+    account: { placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
+    code: { placeholder: '验证码', rule: '请输入验证码' },
+    sendCodeText: '获取验证码',
+    sendCodeMessage: '验证码已发送',
+    successMessage: '登录成功'
+  },
+  password: {
+    title: '忘记密码',
+    backText: '返回登录',
+    account: { title: '账号', placeholder: '邮箱/手机号', rule: '请输入邮箱/手机号' },
+    code: { title: '验证码', placeholder: '验证码', rule: '请输入验证码' },
+    newPassword: { title: '密码', placeholder: '密码', rule: '请输入登录密码', rule2: '长度为6-20个字符' },
+    confirmPassword: {
+      title: '确认密码',
+      placeholder: '确认密码',
+      rule: '请再次输入密码',
+      rule2: '两次输入密码不一致'
+    },
+    sendCodeText: '获取验证码',
+    sendCodeMessage: '验证码已发送',
+    submitText: '提交',
+    alertTitle: '提示',
+    successMessage: '密码修改成功，快去登录吧',
+    confirmButtonText: '去登录'
+  }
+}

src/assets/languages/zh-CN.json

-{
-  "common": {
-    "title": "主题"
-  },
-  "action": {
-    "interface": "接口返回数据测试"
-  },
-  "components": {
-    "errorPages": {
-      "404page": {
-        "errStr": "很抱歉，您访问的页面已经断开",
-        "goBack": "返回首页",
-        "goNext": "返回上一页"
-      }
-    }
-  }
-}

src/components/countdown.vue

@@ -9,7 +9,12 @@ export default {
     step: { type: Number, default: 1000 },
     disabled: { type: Boolean, default: false },
     seconds: { type: Number, default: 60 },
-    defaultValue: { type: String, default: '获取验证码' }
+    defaultValue: {
+      type: String,
+      default() {
+        return this.$t('loginCode.sendCodeText')
+      }
+    }
   },
   data() {
     return {
@@ -29,7 +34,7 @@ export default {
   computed: {
     curretnValue() {
       const longTime = this.seconds - this.currentSeconds
-      return longTime < this.seconds ? `${longTime}秒后重发` : this.defaultValue
+      return longTime < this.seconds ? `${longTime}S` : this.defaultValue
     }
   },
   methods: {

src/components/languageSwitch.vue

 <template>
-  <div class="tap-language-switch">
-    <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
-      <el-submenu index="1">
-        <template slot="title">{{ show }}</template>
-        <template v-for="item in language.arr">
-          <template v-for="(v, k) in item">
-            <el-menu-item :key="k" :index="k">{{ v }}</el-menu-item>
-          </template>
-        </template>
-      </el-submenu>
-    </el-menu>
+  <div class="language-switch">
+    <el-select size="medium" v-model="value" @change="handleChange">
+      <el-option v-for="item in languages" :key="item.value" :label="item.name" :value="item.value"> </el-option>
+    </el-select>
   </div>
 </template>
 
 <script>
 import Cookies from 'js-cookie'
-import language from '@/assets/languages/language'
 
 export default {
   name: 'LanguageSwitch',
   data() {
-    const _defaultLocale = 'zh-CN'
-    const _lang = Cookies.get('lang') || window.navigator.language || window.navigator.userLanguage || ''
-    if (_lang) {
-      if (language[_lang]) {
-        this.$i18n.locale = _lang
-      } else {
-        let flag = true
-        /* 做一下 兼容性处理 */
-        for (const k in language) {
-          const reg = new RegExp(k, 'gi')
-          if (reg.test(_lang)) {
-            this.$i18n.locale = k
-            flag = false
-            break
-          }
-        }
-        if (flag) {
-          /* 当前语言版本 - 不再我们的语言库中，那么默认 en */
-          this.$i18n.locale = _defaultLocale
-          Cookies.set('lang', _defaultLocale, { expires: 30, domain: '.ezijing.com' })
-        }
-      }
-    } else {
-      this.$i18n.locale = _defaultLocale
-      Cookies.set('lang', _defaultLocale, { expires: 30, domain: '.ezijing.com' })
-    }
-    let show = language[this.$i18n.locale].show
-    language[this.$i18n.locale].arr.forEach((item, i) => {
-      if (item[this.$i18n.locale]) {
-        show = item[this.$i18n.locale]
-      }
-    })
     return {
-      show: show,
-      language: language[this.$i18n.locale]
+      value: this.$i18n.locale,
+      languages: [
+        { name: '中文', value: 'zh-CN' },
+        { name: 'English', value: 'en' }
+      ]
     }
   },
-  mounted() {},
   methods: {
-    handleSelect(key, val) {
-      Cookies.set('lang', key, { expires: 30, domain: '.ezijing.com' })
-      this.$i18n.locale = key
+    handleChange(value) {
+      Cookies.set('lang', value, { expires: 30, domain: '.ezijing.com' })
+      this.$i18n.locale = value
       /* 刷新页面 */
       this.$router.go(0)
     }
@@ -70,13 +32,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tap-language-switch {
-  position: absolute;
-  top: 5px;
-  right: 100px;
-  height: 70px;
-  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-    border: none;
-  }
+.language-switch {
+  width: 100px;
 }
 </style>

src/components/loginAccount.vue

@@ -2,7 +2,11 @@
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
       <el-form-item prop="account">
-        <el-input v-model="ruleForm.account" placeholder="邮箱/手机号" @keyup.enter.native="handleSubmit">
+        <el-input
+          v-model="ruleForm.account"
+          :placeholder="$t('loginPwd.account.placeholder')"
+          @keyup.enter.native="handleSubmit"
+        >
           <i slot="prefix" class="el-input__icon el-icon-user"></i>
         </el-input>
       </el-form-item>
@@ -10,18 +14,20 @@
         <el-input
           type="password"
           v-model="ruleForm.password"
-          placeholder="请输入登录密码"
+          :placeholder="$t('loginPwd.password.placeholder')"
           @keyup.enter.native="handleSubmit"
         >
           <i slot="prefix" class="el-input__icon el-icon-lock"></i>
         </el-input>
       </el-form-item>
-      <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">记住我</el-checkbox>
-      <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">登录</el-button>
+      <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
+      <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">
+        {{ $t('login.submitText') }}
+      </el-button>
     </el-form>
     <div class="login-footer">
-      <router-link to="code">验证码登录</router-link>
-      <router-link to="../password">忘记密码</router-link>
+      <router-link to="code">{{ $t('login.codeLogin') }}</router-link>
+      <router-link to="../password">{{ $t('login.forgetPassword') }}</router-link>
     </div>
   </div>
 </template>
@@ -35,8 +41,8 @@ export default {
     return {
       ruleForm: { type: 1, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
       rules: {
-        account: [{ required: true, message: '请输入账号', trigger: 'change' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'change' }]
+        account: [{ required: true, message: this.$t('loginPwd.account.rule'), trigger: 'change' }],
+        password: [{ required: true, message: this.$t('loginPwd.password.rule'), trigger: 'change' }]
       },
       loading: false
     }
@@ -63,7 +69,7 @@ export default {
     },
     // 登录成功
     handleSuccess(response) {
-      this.$message({ type: 'success', message: '登录成功' })
+      this.$message({ type: 'success', message: this.$t('loginPwd.successMessage') })
       if (this.nextUrl) {
         window.location.href = this.nextUrl
       } else {

src/components/loginCode.vue

@@ -2,12 +2,20 @@
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
       <el-form-item prop="account">
-        <el-input v-model="ruleForm.account" placeholder="邮箱/手机号" @keyup.enter.native="handleSubmit">
+        <el-input
+          v-model="ruleForm.account"
+          :placeholder="$t('loginCode.account.placeholder')"
+          @keyup.enter.native="handleSubmit"
+        >
           <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="ruleForm.password" placeholder="请输入验证码" @keyup.enter.native="handleSubmit">
+        <el-input
+          v-model="ruleForm.password"
+          :placeholder="$t('loginCode.code.placeholder')"
+          @keyup.enter.native="handleSubmit"
+        >
           <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
           <countdown
             slot="suffix"
@@ -18,12 +26,12 @@
           ></countdown>
         </el-input>
       </el-form-item>
-      <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">记住我</el-checkbox>
-      <el-button type="primary" class="submit-button" @click="handleSubmit">登录</el-button>
+      <el-checkbox v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox>
+      <el-button type="primary" class="submit-button" @click="handleSubmit">{{ $t('login.submitText') }}</el-button>
     </el-form>
     <div class="login-footer">
-      <router-link to="index">密码登录</router-link>
-      <router-link to="../password">忘记密码</router-link>
+      <router-link to="index">{{ $t('login.pwdLogin') }}</router-link>
+      <router-link to="../password">{{ $t('login.forgetPassword') }}</router-link>
     </div>
   </div>
 </template>
@@ -42,8 +50,8 @@ export default {
     return {
       ruleForm: { type: 2, account: '', password: '', RememberMe: false, service: 'https://h5.ezijing.com' },
       rules: {
-        account: [{ required: true, message: '请输入邮箱/手机号', trigger: 'change' }],
-        password: [{ required: true, message: '请输入验证码', trigger: 'change' }]
+        account: [{ required: true, message: this.$t('loginCode.account.rule'), trigger: 'change' }],
+        password: [{ required: true, message: this.$t('loginCode.code.rule'), trigger: 'change' }]
       },
       loading: false
     }
@@ -73,7 +81,7 @@ export default {
     },
     // 登录成功
     handleSuccess(response) {
-      this.$message({ type: 'success', message: '登录成功' })
+      this.$message({ type: 'success', message: this.$t('loginCode.successMessage') })
       if (this.nextUrl) {
         window.location.href = this.nextUrl
       } else {
@@ -88,7 +96,7 @@ export default {
         .then(response => {
           console.log(response)
           if (response.code === 0) {
-            this.$message({ type: 'success', message: '验证码已发送' })
+            this.$message({ type: 'success', message: this.$t('loginCode.sendCodeMessage') })
           } else {
             // 停止计时
             this.$refs.countdown.stop()

src/components/password.vue

 <template>
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="form" @submit.native.prevent>
-      <el-form-item prop="account" label="账号">
-        <el-input v-model="ruleForm.account" placeholder="邮箱/手机号">
+      <el-form-item prop="account" :label="$t('password.account.title')">
+        <el-input v-model="ruleForm.account" :placeholder="$t('password.account.placeholder')">
           <i slot="prefix" class="el-input__icon el-icon-user"></i>
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" label="验证码">
-        <el-input v-model="ruleForm.code" placeholder="请输入验证码">
+      <el-form-item prop="code" :label="$t('password.code.title')">
+        <el-input v-model="ruleForm.code" :placeholder="$t('password.code.placeholder')">
           <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
           <countdown
             slot="suffix"
@@ -18,17 +18,23 @@
           ></countdown>
         </el-input>
       </el-form-item>
-      <el-form-item prop="password" label="新密码">
-        <el-input type="password" v-model="ruleForm.password" placeholder="请输入新登录密码">
+      <el-form-item prop="password" :label="$t('password.newPassword.title')">
+        <el-input type="password" v-model="ruleForm.password" :placeholder="$t('password.newPassword.placeholder')">
           <i slot="prefix" class="el-input__icon el-icon-lock"></i>
         </el-input>
       </el-form-item>
-      <el-form-item prop="passwordR" label="确认新密码">
-        <el-input type="password" v-model="ruleForm.passwordR" placeholder="请输入新登录密码">
+      <el-form-item prop="passwordR" :label="$t('password.confirmPassword.title')">
+        <el-input
+          type="password"
+          v-model="ruleForm.passwordR"
+          :placeholder="$t('password.confirmPassword.placeholder')"
+        >
           <i slot="prefix" class="el-input__icon el-icon-lock"></i>
         </el-input>
       </el-form-item>
-      <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">提交</el-button>
+      <el-button type="primary" class="submit-button" :loading="loading" @click="handleSubmit">
+        {{ $t('password.submitText') }}
+      </el-button>
     </el-form>
   </div>
 </template>
@@ -46,9 +52,9 @@ export default {
   data() {
     const validatePass = (rule, value, callback) => {
       if (value === '') {
-        callback(new Error('请再次输入密码'))
+        callback(new Error(this.$t('password.confirmPassword.rule')))
       } else if (value !== this.ruleForm.password) {
-        callback(new Error('两次输入密码不一致!'))
+        callback(new Error(this.$t('password.confirmPassword.rule2')))
       } else {
         callback()
       }
@@ -56,14 +62,14 @@ export default {
     return {
       ruleForm: { account: '', code: '', password: '', passwordR: '' },
       rules: {
-        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
-        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+        account: [{ required: true, message: this.$t('password.account.rule'), trigger: 'blur' }],
+        code: [{ required: true, message: this.$t('password.code.rule'), trigger: 'blur' }],
         password: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, max: 20, message: '长度为6-20个字符', trigger: 'blur' }
+          { required: true, message: this.$t('password.newPassword.rule'), trigger: 'blur' },
+          { min: 6, max: 20, message: this.$t('password.newPassword.rule2'), trigger: 'blur' }
         ],
         passwordR: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { required: true, message: this.$t('password.confirmPassword.rule'), trigger: 'blur' },
           { validator: validatePass, trigger: 'blur' }
         ]
       },
@@ -91,9 +97,9 @@ export default {
     },
     // 成功
     handleSuccess(response) {
-      this.$alert('密码修改成功，快去登录吧', '提示', {
+      this.$alert(this.$t('password.successMessage'), this.$t('password.alertTitle'), {
         type: 'success',
-        confirmButtonText: '去登录',
+        confirmButtonText: this.$t('password.confirmButtonText'),
         callback: action => {
           this.$router.push('login')
         }
@@ -107,7 +113,7 @@ export default {
         .then(response => {
           console.log(response)
           if (response.code === 0) {
-            this.$message({ type: 'success', message: '验证码已发送' })
+            this.$message({ type: 'success', message: this.$t('password.sendCodeMessage') })
           } else {
             // 停止计时
             this.$refs.countdown.stop()

src/pages/campbellsville/components/layout.vue

@@ -5,6 +5,7 @@
         <div class="header-logo">
           <a :href="url"><img src="../assets/logo.png" /></a>
         </div>
+        <language-switch />
       </div>
     </header>
     <section class="main">
@@ -12,7 +13,7 @@
       <div class="inner">
         <div class="main-hd hidden-xs-only">
           <img src="../assets/login_logo.png" class="login-logo" />
-          <h1 class="login-title">在线学习系统</h1>
+          <h1 class="login-title">{{ $t('main.title') }}</h1>
         </div>
         <div class="main-bd">
           <router-view></router-view>
@@ -29,7 +30,9 @@
 </template>
 
 <script>
+import languageSwitch from '@/components/languageSwitch.vue'
 export default {
+  components: { languageSwitch },
   data() {
     return {
       url: webConf.others.campbellsville.url
@@ -42,8 +45,11 @@ export default {
 .header {
   padding: 15px 20px;
   .inner {
-    max-width: 980px;
+    max-width: 1400px;
     margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 .header-title {

src/pages/campbellsville/password.vue

 <template>
   <div class="password">
-    <el-page-header @back="$router.push('login')" title="返回登录" content="忘记密码"></el-page-header>
+    <el-page-header
+      @back="$router.push('login')"
+      :title="$t('password.backText')"
+      :content="$t('password.title')"
+    ></el-page-header>
     <div class="password-form">
       <router-view></router-view>
     </div>

src/pages/ciis/components/layout.vue

@@ -5,6 +5,7 @@
         <div class="header-logo">
           <a :href="url"><img src="../assets/logo.png" /></a>
         </div>
+        <language-switch />
       </div>
     </header>
     <section class="main">
@@ -12,7 +13,7 @@
       <div class="inner">
         <div class="main-hd hidden-xs-only">
           <img src="../assets/login_logo.png" class="login-logo" />
-          <h1 class="login-title">在线学习系统</h1>
+          <h1 class="login-title">{{ $t('main.title') }}</h1>
         </div>
         <div class="main-bd">
           <router-view></router-view>
@@ -29,7 +30,9 @@
 </template>
 
 <script>
+import languageSwitch from '@/components/languageSwitch.vue'
 export default {
+  components: { languageSwitch },
   data() {
     return {
       url: webConf.others.ciis.url
@@ -42,16 +45,13 @@ export default {
 .header {
   padding: 15px 20px;
   .inner {
-    max-width: 980px;
+    max-width: 1400px;
     margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
-.header-title {
-  margin-top: 5px;
-  font-size: 32px;
-  font-weight: 700;
-  letter-spacing: 5px;
-}
 .main {
   position: relative;
   .inner {

src/pages/ciis/password.vue

 <template>
   <div class="password">
-    <el-page-header @back="$router.push('login')" title="返回登录" content="忘记密码"></el-page-header>
+    <el-page-header
+      @back="$router.push('login')"
+      :title="$t('password.backText')"
+      :content="$t('password.title')"
+    ></el-page-header>
     <div class="password-form">
       <router-view></router-view>
     </div>

src/pages/seg/components/layout.vue

+<template>
+  <div class="wrapper">
+    <header class="header">
+      <div class="inner">
+        <div class="header-logo">
+          <a :href="url"><img src="../assets/logo.png" /></a>
+        </div>
+        <language-switch />
+      </div>
+    </header>
+    <section class="main">
+      <div class="bg"></div>
+      <div class="inner">
+        <div class="main-hd hidden-xs-only">
+          <img src="../assets/login_logo.png" class="login-logo" width="40" />
+          <h1 class="login-title">{{ $t('main.title') }}</h1>
+        </div>
+        <div class="main-bd">
+          <router-view></router-view>
+        </div>
+      </div>
+    </section>
+    <footer class="footer">
+      <p class="t2">
+        Copyright © 2020 Zijing Education. All rights reserved.
+        <br />清控紫荆（北京）教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号
+      </p>
+    </footer>
+  </div>
+</template>
+
+<script>
+import languageSwitch from '@/components/languageSwitch.vue'
+export default {
+  components: { languageSwitch },
+  data() {
+    return {
+      url: webConf.others.seg.url
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  padding: 15px 20px;
+  .inner {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.main {
+  position: relative;
+  .inner {
+    position: relative;
+    display: flex;
+    max-width: 700px;
+    margin: -200px auto 0;
+    background-color: #fff;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+  }
+}
+.bg {
+  height: 360px;
+  background: url(../assets/login_bg.png) no-repeat center center;
+  background-size: cover;
+}
+.main-hd {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 260px;
+  text-align: center;
+  background-color: #bb133e;
+  color: #fff;
+}
+.login-logo {
+  margin-bottom: 30px;
+}
+.login-title {
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 28px;
+  color: #fff;
+  margin: 0;
+}
+.main-bd {
+  flex: 1;
+  padding: 40px;
+}
+.footer {
+  padding: 20px 10px;
+  text-align: center;
+  .t1 {
+    color: #535353;
+  }
+  .t2 {
+    margin-top: 10px;
+    color: #898989;
+  }
+}
+@media (max-width: 768px) {
+  .bg {
+    height: 215px;
+  }
+  .main .inner {
+    margin: -120px 20px 0;
+  }
+  .main-bd {
+    padding: 20px;
+  }
+}
+</style>

src/pages/seg/login.vue

+<template>
+  <router-view @success="handleSuccess"></router-view>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleSuccess(response) {
+      const { url } = webConf.others.seg
+      window.location.href = url
+    }
+  }
+}
+</script>

src/pages/seg/password.vue

+<template>
+  <div class="password">
+    <el-page-header
+      @back="$router.push('login')"
+      :title="$t('password.backText')"
+      :content="$t('password.title')"
+    ></el-page-header>
+    <div class="password-form">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.password-form {
+  margin-top: 20px;
+}
+</style>

src/router/routes.js

@@ -100,6 +100,27 @@ export default [
       }
     ]
   },
+  {
+    path: '/seg',
+    component: () => import(/* webpackChunkName: "seg" */ '../pages/seg/components/layout.vue'),
+    children: [
+      { path: '', redirect: 'login/index' },
+      {
+        path: 'login',
+        component: () => import(/* webpackChunkName: "seg" */ '../pages/seg/login.vue'),
+        children: [
+          { path: '', redirect: 'index' },
+          { path: 'index', component: loginAccount },
+          { path: 'code', component: loginCode }
+        ]
+      },
+      {
+        path: 'password',
+        component: () => import(/* webpackChunkName: "seg" */ '../pages/seg/password.vue'),
+        children: [{ path: '', component: password }]
+      }
+    ]
+  },
   {
     path: '/ciis',
     component: () => import(/* webpackChunkName: "ciis" */ '../pages/ciis/components/layout.vue'),