注册页面中英文替换 修改电气管理顶部导航栏布局

wuyouming666

2023-09-13 eb967d7573a8297e493d455dfce2c77319215990

 CanadaMes-ui/src/layout/index.vue

@@ -1,5 +1,5 @@
<template>
  <el-container style="flex: 1;">
  <el-container style="flex: 1;height:100%;">
    <div style="width: 200px;background-color: #222f3e" :style="{width: isCollapse?'70px':'250px'}">
      <el-aside :width="isCollapse?'70px':'250px'">
        <el-col :gutter="20">
@@ -13,14 +13,14 @@
                      background-color="#222f3e" text-color="#fff" active-text-color="#ffd04b"
                      :collapse="isCollapse" :unique-opened="true"
                      :collapse-transition="false" :router="true">
              <el-menu-item index="/" @click="goToHome">
              <!-- <el-menu-item index="/" @click="goToHome">
                <template slot="title">
                  <!--图标-->
               
                  <i class="el-icon-menu"></i>
                  <!--文本-->
                
                  <span>{{ $t('home') }}</span>
                </template>
              </el-menu-item>
              </el-menu-item> -->
              <!--一级菜单-->
              <el-submenu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
                <!--一级菜单模板区域-->
@@ -31,6 +31,7 @@
                  <span>{{ item.name }}</span>
                </template>
                <!--二级菜单-->
              
                <el-menu-item :index="'/'+menu.router"
                              v-for="menu in item.menuLists" :key="menu.id"
                              @click="addTag(menu.router)">
@@ -53,16 +54,15 @@
        <el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal"
                 background-color="#576574" text-color="#fff" active-text-color="#ffd04b">
          <div class="header-left">
            <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" style="height:30px"></el-button>
            <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" style="height:30px;"></el-button>
          </div>
          <div class="tagContainer">
            <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag>
            <!-- <el-button icon="el-icon-circle-close" class="close-all-btn" @click="removeAllTags"></el-button> -->
          </div>
          <div class="tagContainer" style="display: flex;">
  <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag>
</div>
          <template>
            <el-submenu index="1" class="custom-submenu">
            <el-submenu index="1" class="custom-submenu"  >
              <template slot="title">
                <el-avatar src="../assets/emi.png" style="width:30px;height:30px;margin-top:2px;"></el-avatar>
                <el-avatar src="../assets/emi.png"   style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar>
              </template>
              <el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item>
              <el-menu-item index="1-2" @click="showChangePasswordDialog">{{ $t('changePassword') }}</el-menu-item>
@@ -149,6 +149,7 @@
    ...mapState('tags', ['tags'])
  },
  methods: {
    
    logout: function () {
      removeToken()
      this.$router.push('/login')
@@ -168,6 +169,7 @@
    this.$store.commit('tags/addTag', tag);
  }
},


    removeTag(index) {
      this.$store.commit('tags/removeTag', index); // 从 Vuex Store 中移除标签
@@ -210,7 +212,8 @@
        '权限列表': 'PermissionList',
        '角色管理': 'RoleManagement',
        '角色列表': 'RoleList',
        '电气管理': 'Electrical management'
        '电气管理': 'Electrical management',
        '主页': 'Home'
        // 根据实际需求继续添加对照关系
      };

@@ -235,11 +238,16 @@
</script>

<style scoped lang="less">

.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 45px !important;
}
.custom-submenu  {
 
 
 height: 90px   !important;
}


.header-container {

@@ -250,6 +258,7 @@

.header-left {
 margin-right: auto;
width:30px;
 
}
.el-aside {