python_93040206/ClientPlatform/src 2/components/user-header.vue

<template>
  <div>
    <header class="header-box">
      <div class="logo">DeepBIO</div>
      <div class="nav-box">
        <div
          @click="toNewPage('home')"
          :class="[active === 'home' && 'active', 'item']"
        >
          <i class="el-icon-s-home"></i>Home
        </div>
        <!--                <div @click="toNewPage('server')" :class="[active === 'server' &&'active', 'item']"><i class="el-icon-s-operation"></i>Server</div>-->
        <!--        <div-->
        <!--          @click="toNewPage('service')"-->
        <!--          :class="[active === 'service' && 'active', 'item']"-->
        <!--        >-->
        <!--          <i class="el-icon-printer"></i>Service-->
        <!--        </div>-->
        <div
          @click="toNewPage('order')"
          :class="[active === 'order' && 'active', 'item']"
        >
          <i class="el-icon-s-claim"></i>Order
        </div>

        <!--        <div-->
        <!--          @click="toNewPage('task')"-->
        <!--          :class="[active === 'task' && 'active', 'item']"-->
        <!--        >-->
        <!--          <i class="el-icon-s-order"></i>Task-->
        <!--        </div>-->
        <div
          @click="toNewPage('about')"
          :class="[active === 'about' && 'active', 'item']"
        >
          <i class="el-icon-s-order"></i>Contact us
        </div>
      </div>
      <div class="user-box">
        <div class="login" @click="settingFn" v-if="userInfo && userInfo.id">
          {{ userInfo.name || "暂无名称" }}
        </div>
        <div class="login" v-else @click="$refs.loginCom.show()">login</div>
      </div>
    </header>
    <loginCom ref="loginCom"></loginCom>
  </div>
</template>

<script>
import { userInfo } from "@/api";
import loginCom from "./login.vue";

export default {
  name: "userHeader",
  data() {
    return {
      userInfo: {},
      active: "",
      avatar:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2b22236d-a6e4-4437-b9f6-4ca9a01bac3a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682345978&t=f6e3b830ea09df2467363b2681ee65c0",
    };
  },
  components: { loginCom },
  mounted() {
    setTimeout(async () => {
      this.active = this.$route.name;

      const token = localStorage.getItem("token");
      // const userInfoStr = localStorage.getItem("userInfo");
      if (token) {
        const res = await userInfo({ token });
        this.userInfo = res.data;
        this.$store.commit("setUserInfo", this.userInfo);
      }
    }, 300);
  },
  watch: {
    $route(to, from) {
      setTimeout(() => {
        this.active = this.$route.name;
      }, 100);
    },
  },
  methods: {
    toLogin() {
      console.log(61);
    },
    toNewPage(name) {
      // 判断是否登录
      if (!this.userInfo?.id && !/home|about/.test(name)) {
        this.$refs.loginCom.show();
        return;
      }
      this.$router.push({
        path: `/${name}`,
      });
    },
    settingFn() {
      this.$router.push({ name: "userInfo" });
    },
  },
};
</script>
<style lang="less" scoped>
.header-box {
  color: #ffffff;
  background-color: rgb(16, 126, 100);
  //background-color: #ffffff;
  font-size: 34px;
  display: flex;
  padding: 10px 40px;
  flex-direction: row;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px,
    rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
  position: fixed;
  z-index: 100;
  right: 0;
  left: 0;
  top: 0;
  .logo {
    margin-right: 40px;
  }

  .nav-box {
    font-size: 20px;
    display: flex;
    margin-right: 30px;
    align-items: center;
    font-weight: bold;

    .item {
      margin-right: 24px;
      cursor: pointer;
      transition: all ease 50ms;

      &.active {
        color: #f6903d;
        //color: #409eff;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          //background-color: #409eff;
          background-color: #f6903d;
          bottom: -20px;
          left: 0;
          right: 0;
        }
      }
    }
  }

  .user-box {
    color: #000000;
    font-size: 24px;
    line-height: 46.5px;
    align-items: center;

    .login {
      cursor: pointer;
    }

    //font-size: ;
  }
}
</style>