common/src/components/patent-frame/parts/Header.vue

<template>
  <div id="Header">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="main header">
          <el-col :span="24" class="one">
            <el-col :span="12" class="left">
              <span>
                <i v-if="!collapse" class="el-icon-s-fold"></i>
                <i v-else class="el-icon-s-unfold"></i>
              </span>
              <span>{{ siteInfo.zhTitle }}-吉林专利市场</span>
            </el-col>
            <el-col :span="12" class="right">
              <!-- <el-button type="primary" size="small" @click="toWeb">网站平台</el-button> -->
              <span>
                <el-icon><UserFilled /></el-icon>
                {{ user && user._id ? user.name || user.title || user.expert_name : '游客' }}
              </span>
              <el-button type="danger" size="small" @click="logout">退出登录</el-button>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { siteInfo } from '../../../layout/site'
import store from '@/stores/counter'
import type { Ref } from 'vue'
import { ref } from 'vue'
let collapse: Ref<any> = ref(false)
let user: Ref<any> = ref(store.state.user)
// 网站平台
// const toWeb = () => {
//   let env = import.meta.env.VITE_APP_ENV
//   let path = ''
//   if (env == 'development') path = 'http://localhost:8001/zkzxweb'
//   else path = '/zkzxweb'
//   window.open(path)
// }
// 退出登录
const logout = () => {
  localStorage.removeItem('token')
  window.location.href = `${import.meta.env.VITE_APP_HOST}`
}
</script>
<style scoped lang="scss">
.main {
  background-color: #242f42;
  .one {
    height: 60px;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 10px;
    display: flex;
    .left {
      line-height: 60px;
      span {
        display: inline-block;
        margin: 0 10px;
        font-size: 22px;
        color: #ffffff;
        font-weight: bold;
        font-family: cursive;
      }
    }
    .right {
      text-align: right;
      padding: 16px 0;
      span {
        padding: 0 8px;
        color: #ffffff;
        position: relative;
        top: 1px;
      }
      .el-icon {
        top: 2px;
      }
    }
  }
}
</style>