修改

src/api/layout/index.js

@@ -3,8 +3,8 @@ import request from '@/utils/request';
 /**
  * 获取当前登录的菜单、按钮权限
  */
-export async function getResourcesTree () {
-  const res = await request.get('/system/resources/getResourcesTree');
+ export async function getResourcesTree ({groupId,roleId}) {
+  const res = await request.get('/system/resources/getResourcesTree?groupId='+groupId+'&roleId='+roleId);
   if (res.data.code == 0 && res.data.data) {
     return res.data.data;
   }
@@ -21,7 +21,16 @@ export async function updatePassword (data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
-
+/**
+ * 角色切换 重新获取token
+ */
+ export async function changeRole(data) {
+  const res = await request.post('/main/user/changeRole',data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
 /**
  * 查询未读通知
  */

src/layout/components/header-tools.vue

@@ -17,12 +17,34 @@
     <div class="ele-admin-header-tool-item">
       <header-notice />
     </div>
+    <div class="ele-admin-header-tool-item">
+      <el-select v-model="groupId" @change="groupIdChange">
+        <el-option
+          v-for="item in loginChangeGroupVOList"
+          :key="item.groupId"
+          :label="item.groupName"
+          :value="item.groupId"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="ele-admin-header-tool-item">
+      <el-select v-model="roleId" @change="roleChange">
+        <el-option
+          v-for="item in loginChangeRoleVOList"
+          :key="item.roleId"
+          :label="item.roleName"
+          :value="item.roleId"
+        >
+        </el-option>
+      </el-select>
+    </div>
     <!-- 用户信息 -->
     <div class="ele-admin-header-tool-item">
       <el-dropdown @command="onUserDropClick">
         <div class="ele-admin-header-avatar">
           <el-avatar
-            :src="loginUser && loginUser.avatar ? loginUser.avatar : ''"
+          :src="loginUser && loginUser.avatar ? loginUser.avatar : ''"
           />
           <span class="hidden-xs-only">{{
             loginUser && loginUser.nickname ? loginUser.nickname : ''
@@ -31,6 +53,9 @@
         </div>
         <template v-slot:dropdown>
           <el-dropdown-menu>
+            <!--            <router-link to="/user/profile">-->
+            <!--              <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>-->
+            <!--            </router-link>-->
             <el-dropdown-item command="profile" icon="el-icon-user">
               {{ $t('layout.header.profile') }}
             </el-dropdown-item>
@@ -60,67 +85,101 @@
 </template>
 
 <script>
-  import HeaderNotice from './header-notice.vue';
-  import PasswordModal from './password-modal.vue';
-  import SettingDrawer from './setting-drawer.vue';
-  import I18nIcon from './i18n-icon.vue';
-  import { logout } from '@/utils/page-tab-util';
-  import { userLogout } from '@/api/system/user';
-
-  export default {
-    components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
-    props: {
-      // 是否是全屏
-      fullscreen: Boolean
+import HeaderNotice from './header-notice.vue';
+import PasswordModal from './password-modal.vue';
+import SettingDrawer from './setting-drawer.vue';
+import I18nIcon from './i18n-icon.vue';
+import { logout } from '@/utils/page-tab-util';
+import { userLogout } from '@/api/system/user';
+import router from '@/router/index';
+export default {
+  components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
+  props: {
+    // 是否是全屏
+    fullscreen: Boolean
+  },
+  data() {
+    return {
+      // 是否显示修改密码弹窗
+      passwordVisible: false,
+      // 是否显示主题设置抽屉
+      settingVisible: false,
+      groupId: '',
+      roleId: '',
+      currentUser:{
+        currentGroupId:'',
+        currentRoleId:''
+      }
+    };
+  },
+  created() {
+    this.currentUser = JSON.parse(sessionStorage['currentUser']);
+    this.groupId =  this.currentUser.currentGroupId;
+    this.roleId =  this.currentUser.currentRoleId;
+  },
+  computed: {
+    // 当前用户信息
+    loginUser() {
+      return this.$store.state.user.info;
     },
-    data() {
-      return {
-        // 是否显示修改密码弹窗
-        passwordVisible: false,
-        // 是否显示主题设置抽屉
-        settingVisible: false
-      };
+    // 部门下拉
+    loginChangeGroupVOList() {
+      return this.$store.state.user?.info?.loginChangeGroupVOList;
     },
-    computed: {
-      // 当前用户信息
-      loginUser() {
-        return this.$store.state.user.info;
-      }
+    // 角色下拉
+    loginChangeRoleVOList() {
+      return this.$store.state.user?.info?.loginChangeGroupVOList.find(
+        (item) => item.groupId == this.groupId
+      )?.loginChangeRoleVOList;
+    }
+  },
+  methods: {
+    groupIdChange(val) {
+      this.roleChange(this.loginChangeRoleVOList[0].roleId);
+    },
+    roleChange(val) {
+      this.roleId = val;
+      this.currentUser.currentGroupId = this.groupId;
+      this.currentUser.currentRoleId = val;
+      sessionStorage['currentUser']=JSON.stringify(this.currentUser)
+      this.$store
+        .dispatch('user/fetchUserInfo')
+        .then(({ menus, homePath, authoritiesRouter }) => {
+          router.roleChange({ menus, homePath, authoritiesRouter });
+        });
     },
-    methods: {
-      /* 用户信息下拉点击事件 */
-      onUserDropClick(command) {
-        if (command === 'password') {
-          this.passwordVisible = true;
-        } else if (command === 'profile') {
-          if (this.$route.fullPath !== '/user/profile') {
-            this.$router.push('/user/profile');
-          }
-        } else if (command === 'logout') {
-          // 退出登录
-          this.$confirm(
-            this.$t('layout.logout.message'),
-            this.$t('layout.logout.title'),
-            { type: 'warning' }
-          )
-            .then(() => {
-              userLogout().then((res) => {
-                console.log(res);
-                localStorage.removeItem('userId');
-                logout();
-              });
-            })
-            .catch(() => {});
+    /* 用户信息下拉点击事件 */
+    onUserDropClick(command) {
+      if (command === 'password') {
+        this.passwordVisible = true;
+      } else if (command === 'profile') {
+        if (this.$route.fullPath !== '/user/profile') {
+          this.$router.push('/user/profile');
         }
-      },
-      /* 全屏切换 */
-      toggleFullscreen() {
-        this.$emit('fullscreen');
-      },
-      /* 打开设置抽屉 */
-      openSetting() {
-        this.settingVisible = true;
+      } else if (command === 'logout') {
+        // 退出登录
+        this.$confirm(
+          this.$t('layout.logout.message'),
+          this.$t('layout.logout.title'),
+          { type: 'warning' }
+        )
+          .then(() => {
+            userLogout().then((res) => {
+              localStorage.removeItem('userId');
+              logout();
+            });
+          })
+          .catch(() => {});
       }
+    },
+    /* 全屏切换 */
+    toggleFullscreen() {
+      this.$emit('fullscreen');
+    },
+    /* 打开设置抽屉 */
+    openSetting() {
+      this.settingVisible = true;
     }
-  };
+  }
+};
 </script>

src/router/index.js

@@ -1,87 +1,114 @@
 /**
  * 路由配置
  */
-import Vue from 'vue';
-import NProgress from 'nprogress';
-import VueRouter from 'vue-router';
-import { WHITE_LIST, REDIRECT_PATH, LAYOUT_PATH } from '@/config/setting';
-import store from '@/store';
-import { getToken } from '@/utils/token-util';
-import { routes, getMenuRoutes } from './routes';
-
-import { getLoginUser } from '@/api/login';
-Vue.use(VueRouter);
-
-const router = new VueRouter({
+ import Vue from 'vue';
+ import NProgress from 'nprogress';
+ import VueRouter from 'vue-router';
+ import { WHITE_LIST, REDIRECT_PATH, LAYOUT_PATH } from '@/config/setting';
+ import store from '@/store';
+ 
+ import { getToken, setToken } from '@/utils/token-util';
+ import { routes, getMenuRoutes } from './routes';
+ import { getLoginUser } from '@/api/login';
+ import { changeRole } from '@/api/layout/index';
+ 
+ Vue.use(VueRouter);
+ 
+ const router = new VueRouter({
   base: window.__POWERED_BY_QIANKUN__ ? '/page-fm/' : '/fm/',
-  routes,
-  mode: 'history',
-  scrollBehavior () {
-    return { y: 0 };
-  }
-});
-
-/**
- * 路由守卫
- */
-router.beforeEach((to, from, next) => {
-  if (!from.path.includes(REDIRECT_PATH)) {
-    NProgress.start();
-  }
-  // 判断是否登录
-  if (getToken()) {
-    if (!store.state.user.info?.userId) {
-      getLoginUser().then((res) => {
-        store.commit('user/setUserInfo', res);
-      });
-    }
-    // 还未注册动态路由则先获取
-    if (!store.state.user.menus) {
-      store
-        .dispatch('user/fetchUserInfo')
-        .then(({ menus, homePath, authoritiesRouter }) => {
-          if (menus) {
-            router.addRoute(
-              getMenuRoutes([...menus, ...authoritiesRouter], homePath)
-            );
-            next({ ...to, replace: true });
-          }
-        })
-        .catch((e) => {
-          console.error(e);
-          next();
-        });
-    } else {
-      // console.log(router.getRoutes(), 'router', routes);
-      if (routes.length >= router.getRoutes()?.length) {
-        router.addRoute(
-          getMenuRoutes([
-            ...store.state.user.menus,
-            ...store.state.user.authoritiesRouter,
-            to.fullPath
-          ])
-        );
-        next({ ...to });
-      } else {
-        next();
-      }
-    }
-  } else if (WHITE_LIST.includes(to.path)) {
-    next();
-  } else {
-    next({
-      path: '/login',
-      query: to.path === LAYOUT_PATH ? {} : { from: to.path }
-    });
-  }
-});
-
-router.afterEach((to) => {
-  if (!to.path.includes(REDIRECT_PATH) && NProgress.isStarted()) {
-    setTimeout(() => {
-      NProgress.done(true);
-    }, 200);
-  }
-});
-
-export default router;
+   routes,
+   mode: 'history',
+   scrollBehavior() {
+     return { y: 0 };
+   }
+ });
+ /**
+  * 路由守卫
+  */
+ router.beforeEach((to, from, next) => {
+   console.log(store.state.user);
+   console.log(to);
+   console.log(from);
+ 
+   if (!from.path.includes(REDIRECT_PATH)) {
+     NProgress.start();
+   }
+   // 判断是否登录
+   if (getToken()) {
+     if (!store.state.user.info?.userId) {
+       getLoginUser().then((res) => {
+         store.commit('user/setUserInfo', res);
+       });
+     }
+     // 还未注册动态路由则先获取
+     if (!store.state.user.menus) {
+       store
+         .dispatch('user/fetchUserInfo')
+         .then(({ menus, homePath, authoritiesRouter }) => {
+      
+           if (menus) {
+             router.addRoute(
+               getMenuRoutes([...menus, ...authoritiesRouter], homePath)
+             );
+             next({ ...to, replace: true });
+           }
+         })
+         .catch((e) => {
+           console.error(e);
+           next();
+         });
+     } else {
+       // console.log(router.getRoutes(), 'router', routes);
+       if (routes.length >= router.getRoutes()?.length) {
+         router.addRoute(
+           getMenuRoutes([
+             ...store.state.user.menus,
+             ...store.state.user.authoritiesRouter,
+             to.fullPath
+           ])
+         );
+         next({ ...to });
+       } else {
+         next();
+       }
+     }
+   } else if (WHITE_LIST.includes(to.path)) {
+     next();
+   } else {
+     next({
+       path: '/login',
+       query: to.path === LAYOUT_PATH ? {} : { from: to.path }
+     });
+   }
+ });
+ 
+ router.afterEach((to) => {
+   if (!to.path.includes(REDIRECT_PATH) && NProgress.isStarted()) {
+     setTimeout(() => {
+       NProgress.done(true);
+     }, 200);
+   }
+ });
+ router.roleChange = async ({ menus, homePath, authoritiesRouter }) => {
+   const currentUser = JSON.parse(sessionStorage['currentUser']);
+ 
+   if (menus && menus.length > 0) {
+     router.addRoute(
+       getMenuRoutes([...menus, ...authoritiesRouter], homePath)
+     );
+     if (router.currentRoute.path != (menus[0].redirect || menus[0].path)) {
+       await router.replace({
+         path: menus[0].redirect || menus[0].path,
+       })
+     }
+     const newToken = await changeRole({ groupId: currentUser.currentGroupId, roleId: currentUser.currentRoleId })
+     setToken(newToken)
+     setTimeout(() => {
+       window.location.reload()
+     }, 100);
+   }
+ 
+   // next({ ...to, replace: true });
+ };
+ export default router;
+ 

src/store/modules/user.js

@@ -119,7 +119,8 @@ export default {
     // },
     //动态路由
     async fetchUserInfo({ commit }) {
-      const result = await getResourcesTree().catch(() => { });
+      let currentUser=JSON.parse(sessionStorage['currentUser'])
+      const result = await getResourcesTree({groupId:currentUser.currentGroupId,roleId:currentUser.currentRoleId}).catch(() => {});
       const list = result.filter((i) => i.path === '/page-fm');
       if (!list.length) {
         return {};

src/views/doc/util.js

@@ -72,8 +72,7 @@ export function getFileType() {
         'prt', '3dxml', 'CATPart', 'CATProduct', 'cgr',
         'model', 'exp', 'session', 'x_t', 'xmt_txt',
         'x_b', 'xmp_bin', 'xmp_txt', 'sat', '.sab', '.igs',
-        'iges', 'stp', 'step', 'jt', 'xcgm', '3dm', 'stl', 'obj', '3mf', 'fbx', 'vda', 'dxf', 'dwg', 'pdf'
-        , 'idf', 'idb', 'emn', 'brd'
+        'iges', 'stp', 'step', 'jt', 'xcgm', '3dm', 'stl', 'obj', '3mf', 'fbx', 'vda', 'dxf', 'dwg', 'idf', 'idb', 'emn', 'brd'
     ]
 }
 export function fileStatus(fileType, status, lcyStatus) {

src/views/login/index.vue

@@ -19,7 +19,7 @@
           clearable
           v-model="form.loginName"
           prefix-icon="el-icon-user"
-          :placeholder="$t('login.loginName')"
+          placeholder="请输入登录账号"
         />
       </el-form-item>
       <el-form-item prop="loginPwd">
@@ -27,7 +27,7 @@
           show-password
           v-model="form.loginPwd"
           prefix-icon="el-icon-lock"
-          :placeholder="$t('login.loginPwd')"
+          placeholder="请输入登录密码"
         />
       </el-form-item>
       <!-- <el-form-item prop="code">
@@ -107,250 +107,261 @@
 </template>
 
 <script>
-  import I18nIcon from '@/layout/components/i18n-icon.vue';
-  import { getToken } from '@/utils/token-util';
-  import { login, getCaptcha, sub } from '@/api/login';
-  import { SYSTEM_NAME } from '@/config/setting';
+import I18nIcon from '@/layout/components/i18n-icon.vue';
+import { getToken } from '@/utils/token-util';
+import { login, getCaptcha, sub } from '@/api/login';
+import { SYSTEM_NAME } from '@/config/setting';
 
-  export default {
-    // eslint-disable-next-line vue/multi-word-component-names
-    name: 'Login',
-    components: { I18nIcon },
-    data () {
-      return {
-        // 登录框方向, 0居中, 1居右, 2居左
-        direction: 0,
-        // 加载状态
-        loading: false,
-        // 表单数据
-        form: {
-          loginName: 'mes111',
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Login',
+  components: { I18nIcon },
+  data() {
+    return {
+
+      // 登录框方向, 0居中, 1居右, 2居左
+      direction: 0,
+      // 加载状态
+      loading: false,
+      // 表单数据
+      form: {
+        loginName: 'mes111',
           loginPwd: '123456',
           remember: true
-        },
-        // 验证码base64数据
-        captcha: '',
-        // 验证码内容, 实际项目去掉
-        text: ''
+      },
+      // 验证码base64数据
+      captcha: '',
+      // 验证码内容, 实际项目去掉
+      text: ''
+    };
+  },
+  computed: {
+    // 表单验证规则
+    rules() {
+      return {
+        loginName: [
+          {
+            required: true,
+            message: this.$t('login.loginName'),
+            type: 'string',
+            trigger: 'blur'
+          }
+        ],
+        loginPwd: [
+          {
+            required: true,
+            message: this.$t('login.loginPwd'),
+            type: 'string',
+            trigger: 'blur'
+          }
+        ]
       };
-    },
-    computed: {
-      // 表单验证规则
-      rules () {
-        return {
-          loginName: [
-            {
-              required: true,
-              message: this.$t('login.loginName'),
-              type: 'string',
-              trigger: 'blur'
-            }
-          ],
-          loginPwd: [
-            {
-              required: true,
-              message: this.$t('login.loginPwd'),
-              type: 'string',
-              trigger: 'blur'
+    }
+  },
+  created() {
+    if (getToken()) {
+      this.goHome();
+    } else {
+      // 重置菜单权限
+      this.$store.commit('user/setMenus', null);
+    }
+  },
+  methods: {
+    /* 提交 */
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.loading = true;
+        login(this.form)
+          .then( (res) => {
+            localStorage.setItem(`userId-${SYSTEM_NAME}`, res.data.userId);
+            // 用户信息
+            if (res.data?.loginChangeGroupVOList.length > 0) {
+              sessionStorage['currentUser'] = JSON.stringify({
+                currentGroupId: res.data.loginChangeGroupVOList[0].groupId,
+                currentRoleId:
+                  res.data.loginChangeGroupVOList[0].loginChangeRoleVOList[0]
+                    .roleId
+              });
             }
-          ]
-        };
-      }
-    },
-    created () {
-      if (getToken()) {
-        this.goHome();
-      } else {
-        // 重置菜单权限
-        this.$store.commit('user/setMenus', null);
-      }
-    },
-    methods: {
-      /* 提交 */
-      submit () {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            return false;
-          }
-          this.loading = true;
-          login(this.form)
-            .then((res) => {
-              localStorage.setItem(`userId-${SYSTEM_NAME}`, res.data.userId);
-              // 用户信息
-              this.$store.commit('user/setUserInfo', res.data);
-              this.loading = false;
-              this.$message.success(res.message);
-              this.$store.dispatch('user/getCurrentUserAuthorityDept');
-              this.goHome();
-            })
-            .catch((e) => {
-              this.loading = false;
-              // this.$message.error(e.message);
-            });
-        });
-      },
-      /* 跳转到首页 */
-      goHome () {
-        this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
-      },
-      /* 更换图形验证码 */
-      changeCaptcha () {
-        // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
-        getCaptcha()
-          .then((data) => {
-            this.captcha = data.base64;
-            // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
-            this.text = data.text;
-            // 自动回填验证码, 实际项目去掉这个
-            this.form.code = this.text;
-            this.$refs?.form?.clearValidate();
+       
+            this.$store.commit('user/setUserInfo', res.data);
+            this.loading = false;
+            this.$message.success(res.message);
+            this.$store.dispatch('user/getCurrentUserAuthorityDept');
+
+            this.goHome();
           })
           .catch((e) => {
+            this.loading = false;
             // this.$message.error(e.message);
           });
-      }
+      });
+    },
+    /* 跳转到首页 */
+    goHome() {
+      this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
+    },
+    /* 更换图形验证码 */
+    changeCaptcha() {
+      // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
+      getCaptcha()
+        .then((data) => {
+          this.captcha = data.base64;
+          // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
+          this.text = data.text;
+          // 自动回填验证码, 实际项目去掉这个
+          this.form.code = this.text;
+          this.$refs?.form?.clearValidate();
+        })
+        .catch((e) => {
+          // this.$message.error(e.message);
+        });
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  /* 背景 */
-  .login-wrapper {
-    padding: 50px 20px;
-    position: relative;
-    box-sizing: border-box;
-    background-image: url('@/assets/bg-login.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    min-height: 100vh;
+/* 背景 */
+.login-wrapper {
+  padding: 50px 20px;
+  position: relative;
+  box-sizing: border-box;
+  background-image: url('@/assets/bg-login.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-height: 100vh;
 
-    &:before {
-      content: '';
-      background-color: rgba(0, 0, 0, 0.2);
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
+  &:before {
+    content: '';
+    background-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
+}
 
-  /* 卡片 */
-  .login-form {
-    margin: 0 auto;
-    width: 360px;
-    max-width: 100%;
-    padding: 25px 30px;
-    position: relative;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
-    box-sizing: border-box;
-    border-radius: 4px;
-    z-index: 2;
-
-    h4 {
-      text-align: center;
-      margin: 0 0 25px 0;
-    }
+/* 卡片 */
+.login-form {
+  margin: 0 auto;
+  width: 360px;
+  max-width: 100%;
+  padding: 25px 30px;
+  position: relative;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  border-radius: 4px;
+  z-index: 2;
 
-    & > .el-form-item {
-      margin-bottom: 25px;
-    }
+  h4 {
+    text-align: center;
+    margin: 0 0 25px 0;
   }
 
-  .login-form-right .login-form {
-    margin: 0 15% 0 auto;
+  & > .el-form-item {
+    margin-bottom: 25px;
   }
+}
 
-  .login-form-left .login-form {
-    margin: 0 auto 0 15%;
-  }
+.login-form-right .login-form {
+  margin: 0 15% 0 auto;
+}
 
-  /* 验证码 */
-  .login-input-group {
-    display: flex;
-    align-items: center;
+.login-form-left .login-form {
+  margin: 0 auto 0 15%;
+}
 
-    :deep(.el-input) {
-      flex: 1;
-    }
+/* 验证码 */
+.login-input-group {
+  display: flex;
+  align-items: center;
+
+  :deep(.el-input) {
+    flex: 1;
   }
+}
 
-  .login-captcha {
-    height: 38px;
-    width: 102px;
-    margin-left: 10px;
-    border-radius: 4px;
-    border: 1px solid #dcdfe6;
-    text-align: center;
-    cursor: pointer;
+.login-captcha {
+  height: 38px;
+  width: 102px;
+  margin-left: 10px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  text-align: center;
+  cursor: pointer;
 
-    &:hover {
-      opacity: 0.75;
-    }
+  &:hover {
+    opacity: 0.75;
   }
+}
 
-  .login-btn {
-    display: block;
-    width: 100%;
-  }
+.login-btn {
+  display: block;
+  width: 100%;
+}
 
-  /* 第三方登录图标 */
-  .login-oauth-icon {
-    color: #fff;
-    padding: 5px;
-    margin: 0 10px;
-    font-size: 18px;
-    border-radius: 50%;
-    cursor: pointer;
-  }
+/* 第三方登录图标 */
+.login-oauth-icon {
+  color: #fff;
+  padding: 5px;
+  margin: 0 10px;
+  font-size: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+}
 
-  /* 底部版权 */
-  .login-copyright {
-    color: #eee;
-    padding-top: 20px;
-    text-align: center;
-    position: relative;
-    z-index: 1;
-  }
+/* 底部版权 */
+.login-copyright {
+  color: #eee;
+  padding-top: 20px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
 
-  /* 响应式 */
-  @media screen and (min-height: 550px) {
-    .login-form {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-top: -220px;
-    }
+/* 响应式 */
+@media screen and (min-height: 550px) {
+  .login-form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: -220px;
+  }
 
-    .login-form-right .login-form,
-    .login-form-left .login-form {
-      left: auto;
-      right: 15%;
-      transform: translateX(0);
-      margin: -220px auto auto auto;
-    }
+  .login-form-right .login-form,
+  .login-form-left .login-form {
+    left: auto;
+    right: 15%;
+    transform: translateX(0);
+    margin: -220px auto auto auto;
+  }
 
-    .login-form-left .login-form {
-      right: auto;
-      left: 15%;
-    }
+  .login-form-left .login-form {
+    right: auto;
+    left: 15%;
+  }
 
-    .login-copyright {
-      position: absolute;
-      bottom: 20px;
-      right: 0;
-      left: 0;
-    }
+  .login-copyright {
+    position: absolute;
+    bottom: 20px;
+    right: 0;
+    left: 0;
   }
+}
 
-  @media screen and (max-width: 768px) {
-    .login-form-right .login-form,
-    .login-form-left .login-form {
-      left: 50%;
-      right: auto;
-      transform: translateX(-50%);
-      margin-right: auto;
-    }
+@media screen and (max-width: 768px) {
+  .login-form-right .login-form,
+  .login-form-left .login-form {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    margin-right: auto;
   }
+}
 </style>