ba_web/src/views/homeMy/layout/head.vue

<template>
  <div class="head-container">
    <div class="home-head-box relative">
      <div class="time absolute">
        <div class="f18" style="line-height: 18px;">{{ datatime }}</div>
        <div class="f16 pl36" style="line-height: 16px;">{{ hour + ":" + minute + ":" + second }}</div>
      </div>
      <div class="title absolute" @click="goPath">{{ props.title }}</div>
      <div class="top-right">
        <div class="info">
          <img class="photo" src="@/assets/my/photo.png" />
          <div class="text">
            <div>姓名：{{ username }}</div>
            <div class="dept" :tabindex="deptName">
              单位：<el-tooltip :content="deptName">{{ deptName }}</el-tooltip>
            </div>
          </div>
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <el-icon :size="20" color="#fff">
                <CaretBottom />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu class="loginOut" @click="logout">
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="meun" @click="modularShowFn" title="后台">
          <img src="@/assets/my/meun.png" />
        </div>
         <el-popover trigger="click" placement="bottom" v-model:visible="showVisible" :append-to-body="false">
          <template #reference>
            <span class="el-dropdown-tools" @click="showVisible = !showVisible">
              <span class="el-dropdown-tools-n">
                <el-icon :size="26" color="#28426a">
                  <Tools />
                </el-icon>
              </span>
            </span>
          </template>
          <div @click="handleRhtx" class="settingItem"><el-icon>
              <Notification />
            </el-icon>融合通信 </div>
          <div @click="handleJxkh" class="settingItem"><el-icon>
              <Notification />
            </el-icon>绩效考核</div>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getRecentDay, timeValidate } from "@/utils/tools.js";
import { useStore } from "vuex";
import { ref, onMounted, defineProps, onUnmounted } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "街面智慧巡防"
  }
});
const showVisible = ref(false)
const store = useStore();
const datatime = ref(getRecentDay(0));
const minute = ref("00"); //分
const second = ref("00"); //秒
const hour = ref("00"); //时
const day = ref(0);
const timersfm = ref(null);
const username = localStorage.getItem("USERNAME");
const deptName = ref(JSON.parse(localStorage.getItem("userInfo")).pxgs||"");
const router = useRouter();

onMounted(() => {
  timersfm.value = setInterval(() => {
    CurrentTime();
  }, 1000);
});
// 获取时分秒
function CurrentTime() {
  const date = new Date();
  hour.value = date.getHours();
  minute.value = date.getMinutes();
  second.value = date.getSeconds();
  day.value = day.value < 10 ? "0" + day.value : day.value;
  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
  second.value = second.value < 10 ? "0" + second.value : second.value;
}
// 退出
const logout = () => {
  store.dispatch("user/logout");
  store.commit("app/clearTag", null, { immediate: true });
  store.commit("permission/deleteRouter", { immediate: true });
  store.commit("user/deleteKeepLiiveRoute", "lz/home");
};
// 打开菜单弹窗
function modularShowFn(val) {
  router.replace('/editPassword');
}
function goPath() {
  console.log(21222);
  router.replace('/editPassword');
}
</script>

<style lang="scss" scoped>
.head-container {
  width: 100%;
  height: 70px;
  position: relative;
  background: #263445;
  z-index: 2;
}

.home-head-box {
  width: 100%;
  height: 138px;
  background: url("~@/assets/images/home_head.png") no-repeat center center;
  z-index: 2;

  .title {
    font-size: 36px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    font-family: "YSBTH";
    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .title-tow {
    background: #fff;
    position: absolute;
    height: 70px;
    width: 500px;
    top: 50px;
    left: calc(50% - 270px);
    font-size: 36px;
    font-family: "YSBTH";
    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 100px;

    .back {
      background: url("~@/assets/images/bi/fbt.png") no-repeat center center;
      height: 100%;
      width: 100%;
    }
  }

  .time {
    font-family: "DigifaceWide";
    color: #fff;
    left: 25%;
    top: 18px;
  }

  .wd {
    right: 26%;
    top: 16px;
    font-size: 16px;
    font-family: "DigifaceWide";
    color: #fff;
  }

  .zbbb {
    position: absolute;
    right: 20px;
    top: 22px;
    font-size: 16px;
    width: 162px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    background: url("~@/assets/images/btnbb.png") no-repeat center center;
    background-size: 100% 100%;
  }
}

.top-right {
  display: flex;
  align-items: center;
  position: absolute;
  right: 2%;
  top: 12%;

  .info {
    display: flex;
    align-items: center;

    .text {
      color: #e6ffff;
      font-size: 15px;
      margin-left: 14px;
      line-height: 23px;

      .dept {
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .meun {
    margin-left: 30px;
    margin-right: 4px;
  }

  .el-dropdown-tools {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(20, 135, 180);
    border-radius: 50%;
    text-align: center;

    .el-dropdown-tools-n {
      display: inline-block;
      width: 34px;
      height: 34px;
      border: 1px solid #fff;
      border-radius: 50%;
      background: #9ec6fc;
      text-align: center;
      line-height: 32px;
      margin-top: 2px;
      padding-top: 2px;
      box-sizing: border-box;
    }
  }
}
</style>