header

hejianhao

2025-01-08 c3ad97910472086e01de3f910d82f1a32e1926e7

header

 src/assets/img/bianji@2x.png

 src/assets/img/tuichu@2x.png

 src/component/Header.vue

New file
@@ -0,0 +1,48 @@
<template>
    <div class="header_content">
        <div class="color1 fs--24 font-bold">{{ userInfo.companyName }}</div>
        <div class="flex a-center j-between">
            <div class="flex a-center mr--55 shrink0 pointer">
                <div class="mr--24 fs--20 font-bold shrink0 color2">{{ userInfo.userName }}</div>
                <img src="../assets/img/bianji@2x.png" class="w--23 h--23" />
            </div>
            <img src="../assets/img/tuichu@2x.png" class="w--40 h--40 shrink0 pointer" />
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            userInfo: JSON.parse(localStorage.getItem('userInfo'))
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {},
};
</script>
<style scoped lang="less">
.header_content {
    width: 100%;
    height: 90px;
    background: #014099;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 35px;
}

.color1 {
    color: #FFFFFF;
}

.color2 {
    color: #EDEDF3;
}
</style>

 src/layouts/index.vue

@@ -1,15 +1,6 @@
<!-- 如果在空白页打开则不显示框架 -->
<template>
  <div style="height: 100%;">
    <!-- 判断是否在空白页打开 -->
    <template v-if="!isOneself">
      <div class="app-wrapper">
      </div>
    </template>
    <!-- 如果在空白页打开则不显示框架 -->
    <template v-else>
      <AppContent />
    </template>
  </div>
  <router-view />
</template>

<script>
@@ -17,8 +8,6 @@
export default {
  data() {
    return {
      // 默认页面在框架内显示
      isOneself: false,
      // 获取当前页面名称
      nowRouteName: '',
    }
@@ -29,8 +18,6 @@
  mounted() {
    // 设置标题
    this.setNowRouteName(this.$route)
    // 初始化加载一次判断是否在空白页打开
    this.isOneself = this.$route.meta.oneself
  },
  methods: {
    // 获取当前页面标题
@@ -42,8 +29,6 @@
    // 监听route变化
    $route: function (newVal) {
      this.setNowRouteName(newVal)
      // 判断页面是否在空白页打开
      this.isOneself = newVal.meta.oneself
    },
  },
}

 src/router/index.js

@@ -30,9 +30,6 @@
        path: "/home",
        meta: {
          title: "首页",
          oneself: true,
          hide: true,
          privilege: 'home'
        },
        component: () => import("../view/Home"),
      },
@@ -40,9 +37,6 @@
        path: "/login",
        meta: {
          title: "登录",
          oneself: true,
          hide: true,
          privilege: 'login'
        },
        component: () => import("../view/login"),
      },
@@ -58,8 +52,6 @@

// 前置路由拦截器
router.beforeEach((to, from, next) => {
  console.log(to.path);

  // 没有登录并且要去的页面不是登录页面，强制跳转到登录
  if (!localStorage.getItem('extra') && to.path !== '/login') {
    next('/login');

 src/view/Home.vue

@@ -1,22 +1,23 @@
<template>
    <div>Home
        <UserInfo :show="true"/>
    <div>
        <Header />
        <UserInfo :show="true" />
    </div>
</template>
    

<script>
import UserInfo from '@/component/userInfo.vue'
    export default {
        name: "Home",
        components: {
            UserInfo
        },
        data() {
            return {};
        },
    };
import Header from '@/component/Header.vue'
export default {
    name: "Home",
    components: {
        UserInfo,
        Header
    },
    data() {
        return {};
    },
};
</script>
    
<style>
    
</style>

<style></style>

 src/view/Login.vue

@@ -88,8 +88,11 @@
            }).then((result) => {
                localStorage.setItem('extra', result.data.extra);
                localStorage.setItem('userInfo', JSON.stringify(result.data));
                this.$router.push({ path: '/index' });
            })
                this.$router.push({ path: '/home' });
            }).catch(() => {
                this.code = ''
                this.codeStr = generateVerificationCode()
            });
        }
    },
};