简化版界面

2025-01-03 13:37:54 +08:00
parent 09f714b378
commit 8a7117baef
17 changed files with 725 additions and 43 deletions
--- a/src/images/new/RF1.png
+++ b/src/images/new/RF1.png
--- a/src/images/new/RF2.png
+++ b/src/images/new/RF2.png
--- a/src/images/new/RF3.png
+++ b/src/images/new/RF3.png
--- a/src/images/new/header_bg_1.png
+++ b/src/images/new/header_bg_1.png
--- a/src/images/new/login_header_bg.png
+++ b/src/images/new/login_header_bg.png
--- a/src/images/new/logo.png
+++ b/src/images/new/logo.png
--- a/src/pages/modules/errormanage/ErrorInfo.vue
+++ b/src/pages/modules/errormanage/ErrorInfo.vue
@@ -5,7 +5,7 @@
      <div class="title_wrap title_wrap2">
        <h2>{{ $t('errorinfo.topinfo') }}</h2>
      </div>
-      <div class="page_container page_container2">
+      <div class="page_container">
        <div class="grid_wrapper">
          <table>
            <tr>
@@ -137,16 +137,11 @@ export default {
 .bggreen
  background center / 80% 80% url(../../../images/new/state_btn.png) no-repeat
 .title_wrap2
-  width 1715px
  background center / 100% 100% url(../../../images/new/bg-title-l.png) no-repeat
-.page_container2
-  width 1715px
 .t-head
  height 80px
  line-height 80px
  background center / 100% 100% url(../../../images/new/bg-head-tb-in.png) no-repeat
-.main-container
-  padding-left 67px
 .box0
  width 1785px
  height 102px
--- a/src/pages/modules/home/home.vue
+++ b/src/pages/modules/home/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-container main-container_l">
+  <div class="main-container">
    <div class="con1" :class="$i18n.locale === 'en-us' ? 'con-en' : ''">
      <!-- <div class="tip" v-if="dataInfo.error_name">{{dataInfo.error_name}}</div> -->
      <div class="tip" v-if="dataInfo.error_name">{{ dataInfo[$langPre.computedProp('error_name')] }}</div>
@@ -144,18 +144,15 @@ export default {

 <style lang="stylus" scoped>
@import '~@style/mixin'
-.main-container_l
-  width 100%
-  padding-left 53px
+.main-container
+  _fj()
 .con1
-  float left
  position relative
-  width 811px
+  width 45.257%
  height 776px
  // background center / 100% 100% url(../../../images/aio/car2.png) no-repeat
  background center / 100% 100% url(../../../images/new/car-home.png) no-repeat
  // background center / 100% 100% url(../../../images/aio/AGV223.gif) no-repeat
-  margin-right 235px
  .tip
    width 542px
    height 120px
@@ -170,7 +167,8 @@ export default {
 .con-en
  background center / 100% 100% url(../../../images/new/car-home2.png) no-repeat
 .con2
-  float left
+  width 41.965%
+  margin-right 97px
 .btn
  width 486px
  height 91px
@@ -181,7 +179,7 @@ export default {
  color #f6f9fe
  font-size 30px
 .rt
-  width 746px
+  width 99.203%
  height 102px
  font-size 36px
  font-style italic
@@ -192,7 +190,7 @@ export default {
    margin-left 31px
    padding-top 40px
 .rc
-  width 752px
+  width 100%
  height 697px
  font-size 36px
  color #e1e9f4
--- a/src/pages/modules/home/home_mini.vue
+++ b/src/pages/modules/home/home_mini.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="main-container">
+    <div class="navs_wraper">
+      <div class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)" @click="toPage(e)">
+        <div class="relative nav_item_i">
+          <div class="nav_icon"></div>
+          <p>{{ e.title }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MinniHome',
+  data () {
+    return {
+      nav: [
+        {title: '任务', zh_title: '任务', en_title: 'Task', router: '/mini/carrypoint'},
+        {title: '故障', zh_title: '故障', en_title: 'Fault', router: '/mini/errorinfo'},
+        {title: '示教', zh_title: '示教', en_title: 'Teach', router: '/mini/teach'}
+      ]
+    }
+  },
+  methods: {
+    toPage (e) {
+      this.$router.push(e.router)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.main-container
+  display flex
+.navs_wraper
+  _fj()
+  width 100%
+  padding 0 12%
+.nav_item
+  width 29%
+  padding 12px
+  color #fff
+  font-size 40px
+  border 1px solid #2f9ae3
+  background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
+                    linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);
+  background-size: 12px 12px;
+  background-repeat: repeat;
+  cursor pointer
+.nav_item_i
+  _fj()
+  padding 20px 40px 20px 35px
+  background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
+  border-top 2px solid #62b2f0
+  border-left 2px solid #62b2f0
+  box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
+  p
+    font-size 56px
+    color #F6F9FE
+    font-family: YouSheBiaoTiHei
+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  &::before
+    content ''
+    position absolute
+    bottom 0
+    left 0
+    width 100%
+    height 2px
+    background-image linear-gradient(to right,#62b2f0,#b1ebf8)
+  &::after
+    content ''
+    position absolute
+    top 0
+    right 0
+    height 100%
+    width 2px
+    background-image linear-gradient(to bottom,#62b2f0,#b1ebf8)
+.nav_icon
+  width 25%
+  padding-top 25%
+  border-radius 50%
+.nav_item_1
+  .nav_icon
+    background #217872 center center / 70% auto url(../../../images/new/RF1.png) no-repeat
+.nav_item_2
+  .nav_icon
+    background #80732F center center / 70% auto url(../../../images/new/RF2.png) no-repeat
+.nav_item_3
+  .nav_icon
+    background #80372D center center / 70% auto url(../../../images/new/RF3.png) no-repeat
+</style>
--- a/src/pages/modules/login/login.vue
+++ b/src/pages/modules/login/login.vue
@@ -231,11 +231,13 @@ export default {
 .login-header
  position absolute
  top 0
-  _wh(100%, 181px)
+  _wh(100%, 125px)
  background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
 .login_logo
+  position: relative;
+  top: -14px;
  _wh(100%, 100%)
-  background center / 532px 127px url(../../../images/new/logo.png) no-repeat
+  background center / 532px 100% url(../../../images/new/logo.png) no-repeat
 .login-bottom
  position absolute
  bottom 0
--- a/src/pages/modules/teach/debug.vue
+++ b/src/pages/modules/teach/debug.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-container main-container_l">
+  <div class="main-container">
    <div class="iframe_wrap">
      <iframe class="iframe" src="./static/Magic20241213/HMI_JavaApp_FullScreen.html" frameborder="0"></iframe>
    </div>
@@ -8,9 +8,6 @@

 <style lang="stylus" scoped>
@import '~@style/mixin'
-.main-container_l
-  width 100%
-  padding-left 53px
 .iframe_wrap
  position relative
  _wh(100%, 100%)
--- a/src/pages/modules/vehicleinformation/slam.vue
+++ b/src/pages/modules/vehicleinformation/slam.vue
--- a/src/pages/shells/index/index.vue
+++ b/src/pages/shells/index/index.vue
@@ -48,12 +48,14 @@
      <div class="hud_left"></div>
      <div class="hud_right"></div>
      <div class="bottom_bg"></div>
-      <div v-show="$route.path !== '/index/home' && $route.path !== '/index/errorinfo' && $route.path !== '/index/teach' && $route.path !== '/index/debug'" class="side-bar-container">
+      <div v-show="childmenus !== null && childmenus.length > 1" class="side-bar-container">
        <el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
          <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index" :class="{'el-menu-item-long': menu.title.length === 5 }">{{selectType === 'en-us' ? menu.en_title : menu.zh_title}}</el-menu-item>
        </el-menu>
      </div>
-      <router-view></router-view>
+      <div class="content-container" :class="{'mini-content-container': childmenus === null || childmenus.length <= 1, 'teach-content-container': $route.path === '/index/teach'}">
+        <router-view></router-view>
+      </div>
    </div>
    <jxDialog
    ref="child"
@@ -111,6 +113,7 @@ export default {
      timer: null,
      username: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user.username : '',
      menus: [] || JSON.parse(this.$store.getters.menus),
+      childmenus: [],
      dropdown: false,
      oldpassword: '',
      newpassword1: '',
@@ -128,21 +131,16 @@ export default {
      selectType: ''
    }
  },
-  computed: {
-    routerPath () {
-      return this.$route.meta.jumpPath
-    },
-    childmenus () {
-      let res = []
-      this.menus.map(el => {
-        if (el.index === this.$route.meta.jumpPath) {
-          res = el.children
-        }
-      })
-      return res
-    }
-  },
  watch: {
+    $route (to, from) {
+      if (to.meta && to.meta.jumpPath) {
+        this.menus.map(el => {
+          if (el.index === this.$route.meta.jumpPath) {
+            this.childmenus = el.children
+          }
+        })
+      }
+    },
    oldpassword (val) {
      if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
        this.unclick = true
--- a/src/pages/shells/mini/index.vue
+++ b/src/pages/shells/mini/index.vue
@@ -0,0 +1,553 @@
+<template>
+  <div class="index-container" :class="{'enClass': selectType === 'en-us'}">
+    <div class="header-container">
+      <button class="home_button" @click="$router.push('/mini/home')"><p>首页</p></button>
+      <div class="logo_wraper"></div>
+      <div class="lang_change_wraper">
+        <el-select v-model="selectType" :placeholder="$t('common.pleaseselect')" 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">{{ selectType === 'en-us' ? topInfo.en_agvrun_status_name : topInfo.zh_agvrun_status_name }}</div>
+        <div class="state-item">{{ selectType === 'en-us' ? topInfo.en_automatic_status_name :  topInfo.zh_automatic_status_name }}</div>
+        <div class="elec-qty-wrap">
+          <div class="elec-qty" :style="{width: Number(topInfo.electric) + '%'}" :class="{'elec-qty_s': Number(topInfo.electric) <= 40}"></div>
+          <div class="elec-qty_border"></div>
+          <div class="elec-txt">{{ topInfo.electric }}%</div>
+        </div>
+        <div class="state-line"></div>
+      </div>
+      <div class="header_user_wraper">
+        <div class="header_user_wraper_i" @click="showDropdown">
+          <div class="user_name">{{ username }}</div>
+        </div>
+        <div v-show="dropdown" class="header_dropdown_wraper">
+          <ul>
+            <li @click="showDialog">{{ $t('common.changepassword') }}</li>
+            <li @click="toEixt">{{ $t('common.exit') }}</li>
+          </ul>
+          <div class="popper__arrow"></div>
+        </div>
+        <div class="state-line" style="margin-right: 0"></div>
+      </div>
+      <div class="time-container">
+        <jxTime></jxTime>
+      </div>
+    </div>
+    <div class="body-conatiner" :class="{'body-conatiner_1': $route.path !== '/mini/home', 'body-conatiner_2': $route.path === '/mini/teach'}">
+      <div class="hud_left"></div>
+      <div class="hud_right"></div>
+      <div class="bottom_bg"></div>
+      <div v-show="childmenus.length > 0" class="side-bar-container">
+        <el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
+          <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index" :class="{'el-menu-item-long': menu.title.length === 5 }">{{selectType === 'en-us' ? menu.en_title : menu.zh_title}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div class="content-container" :class="{'mini-content-container': childmenus.length === 0, 'teach-content-container': $route.path === '/mini/teach'}">
+        <router-view></router-view>
+      </div>
+    </div>
+    <jxDialog
+    ref="child"
+    title="修改密码"
+    :unclick="unclick"
+    @toSure="toSureDialog"
+    @toCancle="toCancle"
+    >
+      <div class="form_wraper">
+        <div class="form">
+          <div class="form_item">
+            <div class="form_item__label form_item__label_pass"><i>*</i>{{ $t('common.oldpassword') }}</div>
+            <div class="form_item__content form_item__content_pass">
+              <input type="password" class="form_item__input" v-model="oldpassword" @focus="show" data-layout="normal">
+            </div>
+          </div>
+        </div>
+        <div class="form">
+          <div class="form_item">
+            <div class="form_item__label form_item__label_pass"><i>*</i>{{ $t('common.newpassword') }}</div>
+            <div class="form_item__content form_item__content_pass">
+              <input type="password" class="form_item__input" v-model="newpassword1" @focus="show" data-layout="normal">
+            </div>
+          </div>
+        </div>
+        <div class="form">
+          <div class="form_item">
+            <div class="form_item__label form_item__label_pass"><i>*</i>{{ $t('common.newpassword') }}</div>
+            <div class="form_item__content form_item__content_pass">
+              <input type="password" class="form_item__input" v-model="newpassword2" @focus="show" data-layout="normal">
+            </div>
+          </div>
+        </div>
+      </div>
+    </jxDialog>
+    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
+  </div>
+</template>
+
+<script>
+import jxTime from '@components/time.vue'
+import jxDialog from '@components/dialog.vue'
+import { updatePass, authLogout } from '@config/getData2.js'
+import { sendWebsocket, closeWebsocket } from '@/config/websocket.js'
+import {encrypt} from '../../../main.js'
+export default {
+  components: {
+    jxTime,
+    jxDialog
+  },
+  data () {
+    return {
+      itime: this.$store.getters.setTime,
+      timer: null,
+      username: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).user.username : '',
+      childmenus: [],
+      dropdown: false,
+      oldpassword: '',
+      newpassword1: '',
+      newpassword2: '',
+      unclick: false,
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      },
+      topInfo: {},
+      selectTypeList: [{value: 'zh-cn', label: '中文'}, {value: 'en-us', label: 'English'}],
+      selectType: ''
+    }
+  },
+  watch: {
+    $route (to, from) {
+      if (to.meta && to.path) {
+        this.getChildmenus(to.path)
+      }
+    },
+    oldpassword (val) {
+      if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
+    },
+    newpassword1 (val) {
+      if (val === '' || this.oldpassword === '' || this.newpassword2 === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
+    },
+    newpassword2 (val) {
+      if (val === '' || this.oldpassword === '' || this.newpassword1 === '') {
+        this.unclick = true
+      } else {
+        this.unclick = false
+      }
+    }
+  },
+  created () {
+    this._queryHead()
+    // this.timer = setInterval(() => {
+    //   this._queryHead()
+    // }, this.itime)
+    if (this.$i18n.locale === 'zh-cn') {
+      this.selectType = 'zh-cn'
+    } else if (this.$i18n.locale === 'en-us') {
+      this.selectType = 'en-us'
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+    closeWebsocket(true)
+  },
+  destroyed () {
+    clearTimeout(this.timer)
+  },
+  methods: {
+    getChildmenus (path) {
+      switch (path) {
+        case '/mini/errorinfo':
+          this.childmenus = [{index: '1', title: '故障', zh_title: '故障', en_title: 'Fault', router: '/mini/errorinfo'}, {index: '2', title: '恢复定位', zh_title: '恢复定位', en_title: 'Slam', router: '/mini/slam'}]
+          break
+        case '/mini/slam':
+          this.childmenus = [{index: '1', title: '故障', zh_title: '故障', en_title: 'Fault', router: '/mini/errorinfo'}, {index: '2', title: '恢复定位', zh_title: '恢复定位', en_title: 'Slam', router: '/mini/slam'}]
+          break
+        default:
+          this.childmenus = []
+      }
+    },
+    handleSelectChild (key) {
+      this.childmenus.map(el => {
+        if (el.index === key) {
+          this.$router.push({ path: el.router })
+        }
+      })
+    },
+    showDropdown () {
+      this.dropdown = !this.dropdown
+    },
+    showDialog () {
+      this.dropdown = false
+      this.$refs.child.active = true
+      this.oldpassword = ''
+      this.newpassword1 = ''
+      this.newpassword2 = ''
+      this.unclick = true
+    },
+    toSureDialog () {
+      this._updatePass()
+      this.hide()
+    },
+    toCancle () {
+      this.hide()
+    },
+    async _updatePass () {
+      this.$refs.child.disabled = true
+      if (!this.oldpassword) {
+        // this.toast('旧密码不能为空')
+        this.toast(this.$t('common.toast1'))
+        this.$refs.child.disabled = false
+        return
+      }
+      if (!this.newpassword1) {
+        // this.toast('新密码不能为空')
+        this.toast(this.$t('common.toast2'))
+        this.$refs.child.disabled = false
+        return
+      }
+      if (!this.newpassword2) {
+        // this.toast('输入新密码')
+        this.toast(this.$t('common.toast3'))
+        this.$refs.child.disabled = false
+        return
+      }
+      if (this.newpassword1 !== this.newpassword2) {
+        // this.toast('新密码输入不一致，请重新输入')
+        this.toast(this.$t('common.toast4'))
+        this.$refs.child.disabled = false
+        return
+      }
+      try {
+        let res = await updatePass(encrypt(this.newpassword1), encrypt(this.oldpassword))
+        this.toast(res.desc)
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      } catch (e) {
+        this.$refs.child.active = false
+        this.$refs.child.disabled = false
+      }
+    },
+    async _authLogout () {
+      await authLogout()
+    },
+    // async _queryHead () {
+    //   let res = await queryHead()
+    //   if (res.code === '1') {
+    //     this.topInfo = res.result
+    //   } else {
+    //     this.toast(res.desc)
+    //   }
+    // },
+    _queryHead () {
+      let getTimestamp = new Date().getTime()
+      let url = this.$store.getters.baseUrl
+      url = url.substring(7)
+      sendWebsocket('ws://' + url + '/webSocket/SendHomeInfo/' + getTimestamp, {}, this.wsMessage, this.wsErr)
+    },
+    wsMessage (res) {
+      // console.log(res)
+      clearTimeout(this.timer)
+      let data = res.head
+      this.$store.dispatch('materObj', res.home.result)
+      if (data.code === '1') {
+        this.topInfo = data.result
+      } else {
+        this.toast(data.desc)
+      }
+    },
+    wsErr () {
+      this.timer = setTimeout(() => {
+        this._queryHead()
+      }, 10000)
+    },
+    toEixt () {
+      this.$store.dispatch('setSignOut')
+      this._authLogout()
+      this.$router.push('/login')
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
+    },
+    selectChanged (e) {
+      this.$i18n.locale = e
+      window.localStorage.setItem('locale', e)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.index-container
+  position relative
+  _wh(100%, 100%)
+.header-container
+  position absolute
+  left 0
+  top 0
+  z-index 150
+  _fj(flex-end,  flex-start)
+  _wh(100%, 124px)
+  background top center / 100% 84px url(../../../images/new/header_bg_1.png) no-repeat
+.home_button
+  position: absolute;
+  left: 30px;
+  top: 10px;
+  width: 122px;
+  height: 55px;
+  background: linear-gradient(to top, #fa733a, rgba(251, 114, 57, 30%));
+  border: 2px solid #ffd8b2;
+  border-radius: 8px;
+  p
+    font-family SourceHanSansCN-Bold
+    font-size 30px
+    font-weight 700
+    line-height 55px
+    color #fff
+    letter-spacing 10px
+.logo_wraper
+  position: absolute;
+  left: 50%;
+  top: -19%;
+  transform: translateX(-266px);
+  _wh(532px, 125px)
+  background top center / 100% auto url(../../../images/new/logo.png) no-repeat
+.horizontal-menu-container
+  height 77px
+  .el-menu
+    border none
+    background-color transparent
+  .el-menu-item
+    // _wh(105px, 77px)
+    _wh(95px, 77px)
+    _font(30px, 77px, #8DBFEE, bold, center)
+    font-family SourceHanSansCN-Bold
+    font-style italic
+    background linear-gradient(0deg, #A2C3E3 0%, #5E9ED9 11.9140625%, #A2C3E3 100%)
+    -webkit-background-clip text
+    -webkit-text-fill-color transparent
+    border-bottom 0
+    padding 0
+  .el-menu-item.is-active
+    color #fff
+  .el-menu--horizontal>.el-menu-item.is-active
+    border-bottom 0
+    width 128px
+    color #fff
+    -webkit-text-fill-color #fff
+    background center / 100% 100% url(../../../images/new/nav_bg.png) no-repeat
+.time-container
+  height 77px
+  margin-right 10px
+.state-item
+  _wh(67px, 43px)
+  _font(20px,43px,#fff,,center)
+  font-family Adobe Heiti Std
+  margin-right 3px
+  background center / 100% 100% url(../../../images/new/state-item_bg.png) no-repeat
+.state-line
+  _wh(1px,42px)
+  opacity 0.3
+  background #AECAF5
+  margin 0 5px
+.elec-qty-wrap
+  position relative
+  _wh(67px, 43px)
+  z-index 151
+.elec-qty
+  position absolute
+  z-index 152
+  _wh(0, 100%)
+  background-color green
+  background left top url(../../../images/new/elec.png) no-repeat
+  background-size cover
+.elec-qty_s
+  background-image url(../../../images/new/elec.png)
+.elec-qty_border
+  position absolute
+  z-index 152
+  _wh(100%, 100%)
+  background center / 100% 100% url(../../../images/new/elec_bg.png) no-repeat
+.elec-txt
+  position relative
+  z-index 153
+  _font(20px, 43px, #fff,,center)
+  font-family Adobe Heiti Std
+.header_user_wraper
+  position relative
+  _fj(flex-start)
+  height 77px
+.header_user_wraper_i
+  _fj(flex-start)
+  height 77px
+.user_name
+  _font(22px, 77px, #fff,,left)
+  font-family: SourceHanSansCN-Regular
+  padding-left 50px
+  margin-right 4px
+  background left center / 50px 52px url(../../../images/new/user_icon.png) no-repeat
+.icon_admin
+  _font(32px, 60px, #54C0B3,,left)
+  margin-right 2px
+.header_state_wraper
+  _fj(flex-start)
+  height 77px
+  margin-left 5px
+.header_dropdown_wraper
+  position absolute
+  top 90%
+  left 50%
+  transform translateX(-50%)
+  z-index 1000
+  width 180px
+  background: rgba(7,31,62,0.95);
+  border: 1px solid #4980BD;
+  ul
+    width 100%
+    li
+      width 100%
+      _font(30px, 80px, #fff,,)
+      padding 0 20px
+      &:first-child
+        color #58e9ff
+.popper__arrow
+  position absolute
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 6px;
+  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
+  top: -6px;
+  left: 50%;
+  transform: translateX(-6px)
+  margin-right: 3px;
+  border-top-width: 0;
+  border-bottom-color: #4980BD;
+  &:after
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    content: " ";
+    border-width: 6px;
+    top: 1px;
+    margin-left: -6px;
+    border-top-width: 0;
+    border-bottom-color: rgba(7,31,62,0.95);
+.side-bar-container
+  .el-menu
+    border-right 0
+    background-color transparent
+  .el-menu-item
+    height 120px
+    _font(36px, 40px, #fff,,)
+    font-family: YouSheBiaoTiHei
+    white-space wrap
+    background center / 100% 100% url(../../../images/new/sidebar_bg.png) no-repeat
+    _fj(center)
+    padding 0 43px 10px 87px !important
+  .el-menu-item.is-active
+    background center / 100% 100% url(../../../images/new/sidebar_active_bg.png) no-repeat
+.hud_left
+  position absolute
+  left 0
+  _wh(53px, 735px)
+  background center / 100% 100% url(../../../images/new/hud_left.png) no-repeat
+.hud_right
+  position absolute
+  right 0
+  _wh(53px, 735px)
+  background center / 100% 100% url(../../../images/new/hud_right.png) no-repeat
+.bottom_bg
+  position absolute
+  bottom 0
+  _wh(100%, 92px)
+  background center bottom / 100% 100% url(../../../images/new/bottom_bg.png) no-repeat
+.side-bar-container
+  .el-menu-item-long
+    padding 0 30px 10px 87px !important
+.lang_change_wraper
+  _wh(120px, 77px)
+  padding-top 17px
+  margin-left 45px
+  /deep/ .el-input, /deep/ .el-select .el-input .el-select__caret
+    font-size: 20px;
+    height 43px
+    line-height 43px
+  /deep/ .el-input__inner
+    font-size: 20px;
+    height 43px
+    line-height 43px
+    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
+.enClass
+  .horizontal-menu-container .el-menu-item
+    font-size 24px
+  .side-bar-container .el-menu-item
+    font-size 20px
+    line-height 22px
+    padding 0 14px 10px 20px !important
+    white-space pre-line
+  .state-item
+    font-size 12px
+  .header_dropdown_wraper
+    width 300px
+  .form_item__label_pass
+    width 205px
+  .form_item__content_pass
+    width calc(100% - 205px)
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,9 @@ const Preload = r => require.ensure([], () => r(require('@page/Preload')), 'Prel
 const Login = r => require.ensure([], () => r(require('@page/modules/login/login.vue')), 'login')

 const IndexComponent = r => require.ensure([], () => r(require('@page/shells/index/index.vue')), 'shells')
+const MiniIndexComponent = r => require.ensure([], () => r(require('@page/shells/mini/index.vue')), 'mini')
 const Home = r => require.ensure([], () => r(require('@page/modules/home/home.vue')), 'modules')
+const MiniHome = r => require.ensure([], () => r(require('@page/modules/home/home_mini.vue')), 'mini')

 const CarryPoint = r => require.ensure([], () => r(require('@page/modules/taskmanage/CarryPoint.vue')), 'modules')
 const TaskLists = r => require.ensure([], () => r(require('@page/modules/taskmanage/TaskLists.vue')), 'modules')
@@ -16,7 +18,7 @@ const ErrorDeal = r => require.ensure([], () => r(require('@page/modules/errorma

 const VehicleStatus = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/vehiclestatus.vue')), 'modules')
 const VehicleControl = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/vehiclecontrol.vue')), 'modules')
-const Slam = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/slam.vue')), 'modules')
+const Slam = r => require.ensure([], () => r(require('@page/modules/teach/slam.vue')), 'modules')

 const Teach = r => require.ensure([], () => r(require('@page/modules/teach/teach.vue')), 'modules')
 const Debug = r => require.ensure([], () => r(require('@page/modules/teach/debug.vue')), 'modules')
@@ -111,6 +113,28 @@ const router = new VueRouter({
        component: Debug,
        meta: {jumpPath: '7', guidePath: '1'}
      }]
+    },
+    {
+      path: '/mini',
+      component: MiniIndexComponent,
+      children: [{
+        path: 'home',
+        component: MiniHome
+      }, {
+        path: 'carrypoint',
+        component: CarryPoint
+      }, {
+        path: 'errorinfo',
+        component: ErrorInfo,
+        meta: {guidePath: '1'}
+      }, {
+        path: 'slam',
+        component: Slam,
+        meta: {guidePath: '2'}
+      }, {
+        path: 'teach',
+        component: Teach
+      }]
    }
  ]
 })
--- a/src/style/common.styl
+++ b/src/style/common.styl
@@ -61,16 +61,27 @@
 .body-conatiner_2
  padding 0
 .side-bar-container
+  position absolute
+  left 0
+  top 0
  _wh(228px, 100%)
-  padding-top 101px
+  padding-top 211px
+.content-container
+  _wh(100%, 100%)
+  padding-left 264px
+  padding-right 64px
+.mini-content-container
+  width 100%
+  padding-left 69px
+  padding-right 69px
+.teach-content-container
+  padding 0
 .main-container
-  _wh(calc(100% - 228px), 100%)
-  padding-right 53px
+  _wh(100%, 100%)
 .left_side
  _wh(2.72rem, 100%)
 .right_side
  _wh(100%, 100%)
-  padding 0 26.5px
 .content_wrap
  _wh(100%, 100%)
 .title_wrap
--- a/src/style/reset.css
+++ b/src/style/reset.css
@@ -118,6 +118,14 @@ input::-webkit-input-placeholder {
    float: right !important;
 }

+.relative {
+     position: relative;
+}
+
+.absolute {
+     position: absolute;
+}
+
 .text-left {
     text-align: left;
 }