视频监控

longyvfengyun

2023-06-30 09ab26b8df36c5ebd7cfc20a862011fb98681588

 src/views/mainLayout/components/PageHeader.vue

@@ -16,61 +16,60 @@

<template>
   <div class="header-wrapper">
      <flex-layout no-bg direction="row">
         <div class="header-left-wrapper">
      <div class="header-left-wrapper">
            <span class="menu-state-icon" @click="changeMenuState">
               <el-icon size="20">
                  <Fold v-if="!isCollapse" />
                  <Expand v-else/>
               </el-icon>
            </span>
            <span class="sys-name">安琪酵母（西藏）益生菌信息采集中心智能实验室</span>
            <span class="sys-version">V1.21</span>
         </div>
         <template #footer>
            <div class="page-header-right">
               <div class="hdw-avatar">
                  <el-dropdown @command="commandClick" @visible-change="visibleChange">
                     <div class="hdw-avatar-wrapper">
         <span class="sys-name">安琪酵母（西藏）益生菌信息采集中心智能实验室</span>
         <span class="sys-version">V1.121</span>
      </div>
      <div class="page-header-right">
         <div class="hdw-avatar">
            <el-dropdown @command="commandClick" @visible-change="visibleChange">
               <div class="hdw-avatar-wrapper">
                        <span class="hdw-avatar-icon">
                    <el-icon size="18"><Avatar /></el-icon>
                  </span>
                        <span class="hdw-avatar-text">admin</span>
                        <el-icon size="16">
                           <ArrowUp v-if="isVisible" />
                           <ArrowDown v-else />
                        </el-icon>
                     </div>
                     <template #dropdown>
                        <el-dropdown-menu>
                           <el-dropdown-item command="passwordChange">密码修改</el-dropdown-item>
                           <el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
                        </el-dropdown-menu>
                     </template>
                  </el-dropdown>
                  <span class="hdw-avatar-text">admin</span>
                  <el-icon size="16">
                     <ArrowUp v-if="isVisible" />
                     <ArrowDown v-else />
                  </el-icon>
               </div>
            </div>
         </template>
      </flex-layout>
               <template #dropdown>
                  <el-dropdown-menu>
                     <el-dropdown-item command="passwordChange">密码修改</el-dropdown-item>
                     <el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
                  </el-dropdown-menu>
               </template>
            </el-dropdown>
         </div>
      </div>
   </div>
</template>

<style lang="less" scoped>
.header-left-wrapper {
   user-select: none;
   height: 64px;
.header-wrapper {
   display: flex;
}
.header-left-wrapper {
   flex: 1;
   user-select: none;
   height: 62px;
   align-items: center;
   padding-right: 150px;
   min-width: 12rem;
   background-image: url("@/assets/images/page-header-left-bg.png");
   background-repeat: no-repeat;
   background-size: 150% 100%;
   color: @font-color-high-light;
   width: 100vh;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   span {
      font-size: 24px;
      font-size: 32px;
      font-weight: bold;
      letter-spacing: 0.2rem;
      &.menu-state-icon {
@@ -87,7 +86,7 @@
      &.sys-version {
         padding-top: 8px;
         font-size: 16px;
         vertical-align: bottom;
         vertical-align: middle;
      }
   }
}