cas_cloud_web_i18n_old/src/components/WebsiteHeader/index.vue

<template>
  <div class="webHead">
    <el-row>
      <el-col :span="8">
        <img src="@/assets/logo/logo.png" class="logo" />
      </el-col>
      <el-col :span="16">
        <ul class="menu">
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/' ? 'active' : ''"
              @click="handlePath('/')"
            >
              首页
            </div>
          </li>
          <li class="menu-item1 solution">
            <div
              class="menu-item-tit"
              :class="pagePath.indexOf('/solution/') != -1 ? 'active' : ''"
            >
              解决方案
            </div>
            <div class="show_box">
              <div
                class="pointer"
                :class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
                @click="handlePath('/solution/small')"
              >
                中小型企业服务
              </div>
              <div
                class="pointer"
                :class="pagePath == '/solution/large' ? 'x_blue _active' : ''"
                @click="handlePath('/solution/large')"
              >
                大型企业服务
              </div>
              <div
                class="pointer"
                :class="
                  pagePath == '/solution/government' ? 'x_blue _active' : ''
                "
                @click="handlePath('/solution/government')"
              >
                政府区域服务
              </div>
              <div
                class="pointer"
                :class="
                  pagePath == '/solution/scientific' ? 'x_blue _active' : ''
                "
                @click="handlePath('/solution/scientific')"
              >
                科研区域服务
              </div>
            </div>
          </li>
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/innovate' ? 'active' : ''"
              @click="handlePath('/innovate')"
            >
              创新服务
            </div>
          </li>
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/activity' ? 'active' : ''"
              @click="handlePath('/activity')"
            >
              活动报名
            </div>
          </li>
          <li class="menu-item1">
            <div
              class="menu-item-tit"
              :class="pagePath == '/about' ? 'active' : ''"
              @click="handlePath('/about')"
            >
              关于我们
            </div>
          </li>
          <li class="menu-item1" style="display: flex; justify-content: center">
            <div
              v-if="!userStore.avatar"
              class="menu-item-tit"
              :class="pagePath == '/login' ? 'active' : ''"
              @click="handlePath('/login')"
            >
              登录注册
            </div>

            <el-dropdown
              v-else
              style="margin-top: 20px"
              class="avatar-container right-menu-item hover-effect"
              trigger="click"
            >
              <div class="avatar-wrapper">
                <img :src="userStore.avatar" class="user-avatar" />
                <i class="el-icon-caret-bottom" />
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <router-link to="/identity/index"> -->
                  <el-dropdown-item @click="handlePage"
                    >个人中心</el-dropdown-item
                  >
                  <!-- </router-link> -->
                  <el-dropdown-item divided @click="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
let state = reactive({});
let pagePath = ref("");
const route = useRoute();
const router = useRouter();
watch(
  () => route.path,
  (newVal, oldVal) => {
    pagePath.value = newVal;
  }
);
pagePath.value = route.path;

function handlePage() {
  // router.push("/identity/index");

  //   let routeData = "";
  //   const selectRole = localStorage.getItem("select_identity");
  //   if (selectRole > 0) {
  //     routeData = router.resolve({ path: "/admin" });
  //   } else {
  //     routeData = router.resolve({ path: "/identity/index" });
  //   }
  //   window.open(routeData.href, "_blank");
  const routeData = router.resolve({ path: "/identity/index" });
  window.open(routeData.href, "_blank");
}

function handlePath(path) {
  pagePath.value = path;
  router.push(path);
}
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      useUserStore()
        .logOut()
        .then(() => {
          location.href = "/";
        });
    })
    .catch(() => {});
}
</script>

<style lang="scss">
ol,
ul,
dl {
  margin: 0;
  padding: 0;
}
li,
dd,
dt {
  padding: 0;
  margin: 0;
  list-style: none;
}
.webHead {
  position: fixed;
  z-index: 2001;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 260px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 43px 0px rgba(0, 42, 255, 0.09);
  .logo {
    height: 30px;
    margin: 25px 0;
  }
  .menu {
    display: flex;
    .solution {
      position: relative;
      .show_box {
        display: none;
        position: absolute;
        top: 80px;
        width: 100%;
        text-align: center;
        background-color: red;
        div {
          height: 42px;
          line-height: 42px;
          font-size: 14px;
          color: #666666;
          background-color: #f2f6ff;
        }
        ._active {
          background-color: #fff;
        }
      }
      &:hover {
        .show_box {
          display: block;
        }
      }
    }
    .menu-item1 {
      flex: 1;
      text-align: center;
      .menu-item-tit {
        display: inline-block;
        padding: 25px 0;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000;
        cursor: pointer;
      }
      .menu-item-tit:hover {
        opacity: 0.8;
      }

      .active {
        font-size: 20px;
        font-weight: 500;
        border-bottom: 2.5px solid #000;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>