语言切换

src/pages/shells/index/index.vue

@@ -6,7 +6,18 @@
           <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
         </el-menu>
       </div>
+      <div class="lang_change_wraper">
+        <el-select v-model="selectType" placeholder="请选择" popper-class="lang_dropdown" @change="selectChanged">
+          <el-option
+            v-for="(item, index) in selectTypeList"
+            :key="index"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
       <div class="header_state_wraper">
+        <div class="state-line"></div>
         <div class="state-item">{{ topInfo.agvrun_status_name }}</div>
         <div class="state-item">{{ topInfo.automatic_status_name }}</div>
         <div class="elec-qty-wrap">
@@ -33,7 +44,7 @@
         <jxTime></jxTime>
       </div>
     </div>
-    <div class="body-conatiner" :class="{'body-conatiner_1': $route.path !== '/index/home'}">
+    <div class="body-conatiner" :class="{'enClass': selectType === 'en-us', 'body-conatiner_1': $route.path !== '/index/home'}">
       <div class="hud_left"></div>
       <div class="hud_right"></div>
       <div class="bottom_bg"></div>
@@ -109,7 +120,7 @@ export default {
       //     router: '/index/home'
       //   }]
       // }, {
-      //   label: '任务管理',
+      //   label: '任务',
       //   index: '2',
       //   router: '',
       //   children: [{
@@ -126,7 +137,7 @@ export default {
       //     router: '/index/taskoperates'
       //   }]
       // }, {
-      //   label: '故障管理',
+      //   label: '故障',
       //   index: '3',
       //   router: '',
       //   children: [{
@@ -139,7 +150,7 @@ export default {
       //     router: '/index/errordeal'
       //   }]
       // }, {
-      //   label: '车辆信息',
+      //   label: '车辆',
       //   index: '4',
       //   router: '',
       //   children: [{
@@ -156,7 +167,7 @@ export default {
       //   index: '5',
       //   router: '/index/teach'
       // }, {
-      //   label: '系统管理',
+      //   label: '系统',
       //   index: '6',
       //   router: '',
       //   children: [{
@@ -189,7 +200,9 @@ export default {
         useKbEvents: false,
         preventClickEvent: false
       },
-      topInfo: {}
+      topInfo: {},
+      selectTypeList: [{value: 'zh-cn', label: '中文'}, {value: 'en-us', label: 'English'}],
+      selectType: ''
     }
   },
   computed: {
@@ -242,6 +255,11 @@ export default {
         }
       })
     }
+    if (this.$i18n.locale === 'zh-cn') {
+      this.selectType = 'zh-cn'
+    } else if (this.$i18n.locale === 'en-us') {
+      this.selectType = 'en-us'
+    }
   },
   beforeDestroy () {
     clearInterval(this.timer)
@@ -373,6 +391,10 @@ export default {
         this.input.blur()
         this.hide()
       }
+    },
+    selectChanged (e) {
+      this.$i18n.locale = e
+      window.localStorage.setItem('locale', e)
     }
   }
 }
@@ -397,7 +419,8 @@ export default {
     border none
     background-color transparent
   .el-menu-item
-    _wh(105px, 77px)
+    // _wh(105px, 77px)
+    _wh(95px, 77px)
     _font(30px, 77px, #8DBFEE, bold, center)
     font-family SourceHanSansCN-Bold
     font-style italic
@@ -427,10 +450,10 @@ export default {
   _wh(1px,42px)
   opacity 0.3
   background #AECAF5
+  margin 0 5px
 .elec-qty-wrap
   position relative
   _wh(67px, 43px)
-  margin-right 5px
   z-index 151
 .elec-qty
   position absolute
@@ -455,7 +478,6 @@ export default {
   position relative
   _fj(flex-start)
   height 77px
-  margin-left 5px
 .header_user_wraper_i
   _fj(flex-start)
   height 77px
@@ -471,7 +493,7 @@ export default {
 .header_state_wraper
   _fj(flex-start)
   height 77px
-  margin-left 60px
+  margin-left 5px
 .header_dropdown_wraper
   position absolute
   top 90%
@@ -548,4 +570,24 @@ export default {
 .side-bar-container
   .el-menu-item-long
     padding 0 30px 10px 87px !important
+.lang_change_wraper
+  _wh(90px, 77px)
+  padding-top 20.5px
+  margin-left 45px
+  /deep/ .el-input, /deep/ .el-select .el-input .el-select__caret
+    font-size: 20px;
+    height 36px
+    line-height 36px
+  /deep/ .el-input__inner
+    font-size: 20px;
+    line-height: 36px;
+    height: 36px;
+    border: 1px solid #4980bd;
+    border-radius 0
+    padding-left 5px
+    padding-right 15px
+  /deep/ .el-input__suffix
+    right 5px
+  /deep/ .el-icon-arrow-up
+    width 10px
 </style>