<!-- 前台头部 -->
<template>
  <el-header style="height:70px">
    <div class="header-container">
      <!-- 图标 -->
      <div class="flex">
        <div class="logo-container" @click="goIndex">
          <img :src="logo" alt />
          <img :src="logowenzi" alt class="logowenzi" />
        </div>
      </div>
      <!-- 单项工程 -->
      <div
        class="single-border"
        v-if="
          this.$route.name == 'projectBefore' ||
          this.$route.name == 'bidContract' ||
          this.$route.name == 'workProcess' ||
          this.$route.name == 'completed'
        "
      >
        <div class="inside-box">
          <div class="menu-box">
            <!-- ******按钮 ***********-->
            <div
              v-for="item in MenuList"
              :key="item.alias"
              class="menu-btn"
              :class="[item.alias === activeMenu ? 'active' : '']"
              @click="activeTab(item)"
            >
              <i :class="item.iconName"></i>
              {{ item.name }}
            </div>
            <!-- *********** -->
          </div>
        </div>
        <div class="project-box">
          <el-tooltip
            class="item"
            effect="dark"
            :content="this.$route.params.projectName"
            placement="bottom"
          >
            <div class="project-name">
              {{ this.$route.params.projectName }}
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="nav-title" v-if="this.$route.name == 'ProjectFlowChart' || this.$route.name=='fundPlan' || this.$route.name=='contractPay' || this.$route.name=='PersonnelManagement'">
        <el-tooltip
          effect="dark"
          :content="this.$route.params.projectName"
          placement="bottom"
        >
          <div class="pro-name">
             {{ this.$route.params.projectName }}
          </div>
        </el-tooltip>
      </div>
      <div class="flex header-right">
        <!-- 搜索框 -->
        <div
          class="search-box"
          v-if="
            this.$route.name !== 'searchList' &&
            this.$route.name !== 'searchListDetial' &&
            this.$route.name !== 'projectDetails'
          "
        >
        </div>
        <!-- 二维码 -->
          <!-- <el-tooltip placement="bottom" effect="light">
            <img src="@/assets/logo_code.png" class="navigator-btnI" width="13" height="13" style="margin-top:2px">
             <div slot="content"  class="toolTip-light-border">
                <img src="@/assets/qr_code.png" width="150">
             </div>
          </el-tooltip> -->
         <!-- </span> -->
        <el-tooltip
          :content="isScreenFull ? '退出全屏' : '全屏'"
          placement="bottom"
        >
          <span class="navigator-btnI">
            <i
              v-if="!isScreenFull"
              @click="handleScreenFull"
              class="icon-fullscreen top-link-icon"
            ></i>
            <i
              v-if="isScreenFull"
              @click="handleScreenFull"
              class="icon-restore top-link-icon"
            ></i>
          </span>
        </el-tooltip>

        <span @click="showDrawer">
          <el-tooltip content="消息" placement="bottom">
            <el-badge :value="messnum" class="navigator-btnI">
              <i class="el-icon-bell"></i>
            </el-badge>
          </el-tooltip>
        </span>

        <el-popover
          popper-class="header-popper"
          :visible-arrow="false"
          width="250"
          trigger="hover"
        >
          <HtAvatar slot="reference" :user="currentUser" />
          <template>
            <div>
              <div class="flex user-box-header">
                <HtAvatar style="margin-right: 15px" :user="currentUser" />
                <div>
                  <h3
                    v-if="$store.state.login.currentUser"
                    style="margin: 5px 0; color: #fff"
                  >
                    {{ $store.state.login.currentUser.username }}
                  </h3>
                </div>
              </div>
              <el-divider class="user-box-divider"></el-divider>
              <div>
                <ul class="user-link-ul">
                  <li @click="openResetPwdDialog">
                    <i class="icon-set"></i>
                    修改密码
                  </li>
                  <li v-if="userType !== 2" @click="handleSysPlat">
                    <i class="icon-monitor" />
                    系统管理
                  </li>
                </ul>
              </div>
              <div class="flex user-box-logout" @click="logout">
                <el-link :underline="false">退出系统</el-link>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>

    <ht-sidebar-dialog
      width="28%"
      title="风格设置"
      :visible="styleSettingDialogVisible"
      :before-close="handleStyleSettingDialogClose"
    >
      <el-form :model="styleSetting" style="margin-left: -30px">
        <ht-form-item label="标签页风格" label-width="100px">
          <el-radio-group v-model="styleSetting.tabsStyle.tabType">
            <el-radio-button label="card">选项卡样式</el-radio-button>
            <el-radio-button label>默认样式</el-radio-button>
            <el-radio-button label="border-card">卡片化</el-radio-button>
            <el-radio-button label="menuSetting">菜单配置</el-radio-button>
          </el-radio-group>
        </ht-form-item>
      </el-form>
    </ht-sidebar-dialog>

    <ht-sidebar-dialog
      title="查看个人信息"
      :visible="infoDialogVisible"
      width="28%"
      :before-close="handleStyleSettingDialogClose"
    >
      <el-form
        v-if="currentUser && currentUser.user"
        :inline="true"
        ref="form"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="用户名称" style="width: 50%">
          <span class="content_span">{{ currentUser.user.fullname }}</span>
        </el-form-item>
        <el-form-item label="用户账号">
          <span class="content_span">{{ currentUser.user.account }}</span>
        </el-form-item>
        <el-form-item label="手机号码" style="width: 50%">
          <span class="content_span">{{ currentUser.user.mobile }}</span>
        </el-form-item>
        <el-form-item label="邮箱地址">
          <span class="content_span">{{ currentUser.user.email }}</span>
        </el-form-item>
        <el-form-item label="用户性别" style="width: 50%">
          <span class="content_span">{{ currentUser.user.sex }}</span>
        </el-form-item>
        <el-form-item label="用户状态">
          <span class="content_span">
            {{
              currentUser.user.status == '1'
                ? '正常'
                : currentUser.user.status == '0'
                ? '禁用'
                : currentUser.user.status == '-1'
                ? '未激活'
                : '离职'
            }}
          </span>
        </el-form-item>

        <el-form-item label="家庭地址" style="width: 100%">
          <span class="content_span">{{ currentUser.user.address }}</span>
        </el-form-item>
        <el-form-item style="width: 100%" label="所属角色">
          <template v-for="name in currentUser.role">
            <el-tag type="warning" size="small" :key="name" v-if="name">
              {{ name }}
            </el-tag>
          </template>
        </el-form-item>
        <el-form-item style="width: 100%" label="所属岗位">
          <el-tooltip
            :content="post.pathName"
            placement="top"
            :key="post.postId"
            v-for="post in currentUser.post"
          >
            <el-tag type="success" size="small">{{ post.postName }}</el-tag>
          </el-tooltip>
        </el-form-item>
        <el-form-item style="width: 100%" label="所属组织">
          <el-tooltip
            :content="org.pathName"
            placement="top"
            :key="org.orgId"
            v-for="org in currentUser.org"
          >
            <el-tag size="small">{{ org.orgName }}</el-tag>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </ht-sidebar-dialog>

    <ht-sidebar-dialog
      title="修改密码"
      :visible.sync="modifyPwdDialogVisible"
      :close-on-click-modal="false"
      width="28%"
      id="modlfy-dialog"
      :before-close="handleStyleSettingDialogClose"
    >
      <el-form
        :model="pwdForm"
        :rules="pwdRules"
        ref="pwdForm"
        label-width="120px"
        size="mini"
      >
        <el-form-item label="旧密码" prop="old">
          <el-input
            type="password"
            v-model="pwdForm.old"
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new">
          <el-input
            type="password"
            placeholder="请输入新密码"
            v-model="pwdForm.new"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="newRepeat">
          <el-input
            type="password"
            placeholder="请再次输入新密码"
            v-model="pwdForm.newRepeat"
          ></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" style="text-align: center; bottom: auto">
        <el-button size="small" type="primary" @click="submitForm()"
          >确认</el-button
        >
        <el-button size="small" @click="modifyPwdDialogVisible = false"
          >取 消</el-button
        >
      </span>
    </ht-sidebar-dialog>
    <projectMessageDrawer
      ref="messageDrawer"
      :message="messageList"
      @readload="readload"
      plat="frontPlat"
    />
  </el-header>
</template>

<script>
import HtAvatar from '@/components/common/HtAvatar.vue'
// import LangSelect from '@/components/lang/LangSelect.vue'
// import FrontMenu from '../layout/FrontMenu.vue'
import screenfull from 'screenfull'
import {mapState} from 'vuex'
import {Base64} from 'js-base64'
import req from '@/request.js'
import projectMessageDrawer from '@/components/message/projectMessageDrawer'
import uc from '@/api/uc.js'

export default {
  name: 'navigator',
  components: {projectMessageDrawer, HtAvatar},
  props: ['menuShow', 'showTopMenu'],
  data() {
    var validateNew = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      }
      let config = this.pwdStrategy
      if (config.enable == 1) {
        let pwdRule = config.pwdRule
        let pwdLength = config.pwdLength
        if (pwdRule) {
          if (value.length < pwdLength) {
            callback(new Error('新密码长度至少为' + pwdLength))
          } else if (pwdRule == 2) {
            var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])')
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、字母'))
            } else {
              callback()
            }
          } else if (pwdRule == 3) {
            var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])')
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、字母、特殊字符'))
            } else {
              callback()
            }
          } else if (pwdRule == 4) {
            var re = new RegExp(
              '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
            )
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、大小字母、特殊字符'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      } else {
        if (value.length < 6) {
          callback(new Error('新密码长度至少为6'))
        } else {
          callback()
        }
      }
    }
    var validateold = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'))
      } else {
        callback()
      }
    }
    var validateNewReapeat = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else {
        callback()
      }
    }
    return {
      messageList: [],
      messnum: '',
      logo: '',
      logowenzi: require('@/assets/img/logowenzi.png'),
      bizUrl: '',
      showLogo: true,
      isScreenFull: false,
      styleSettingDialogVisible: false,
      styleSetting: {
        tabsStyle: {
          tabPosition: 'top',
          tabType: 'border-card',
        },
        elementUI: {
          theme: 'day-theme',
        },
      },
      searchWork: '',
      searchMenus: [],
      infoDialogVisible: false,
      modifyPwdDialogVisible: false,
      pwdForm: {
        old: '',
        new: '',
        newRepeat: '',
      },
      pwdRules: {
        old: [{validator: validateold, trigger: 'blur'}],
        new: [{validator: validateNew, trigger: 'blur'}],
        newRepeat: [{validator: validateNewReapeat, trigger: 'blur'}],
      },
      isIeExplorer: false,
      sysPath: '',
      platName: '管理平台',
      searchValue: '', //搜索输入值
      MenuList: [
        {
          id: 1,
          alias: 'projectBefore',
          name: '前期手续',
          iconName: 'el-icon-tickets',
        },
        {
          id: 2,
          alias: 'bidContract',
          name: '招投标与合同',
          iconName: 'el-icon-medal',
        },
        {
          id: 3,
          alias: 'workProcess',
          name: '施工过程',
          iconName: 'el-icon-office-building',
        },
        {
          id: 4,
          alias: 'completed',
          name: '竣工验收',
          iconName: 'el-icon-document-checked',
        },
      ],
      activeMenu: '',
    }
  },
  computed: {
    ...mapState({
      sysMenus: (state) => state.menu.sysMenus,
      currentUser: (state) => state.user.currentUserDetail,
      token: (state) => state.login.currentUser.token,
      frontUrl: function () {
        if (
          this.currentUser &&
          this.currentUser.user &&
          this.currentUser.user.account &&
          (!window.ssoConfig.mode || window.ssoConfig.mode == 'jwt')
        ) {
          return `${this.bizUrl}?token= ` + this.token
        } else {
          return this.bizUrl
          // return this.bizUrl ? this.bizUrl : `${window.context.front}`
        }
      },
      mobileUrl: function () {
        if (
          this.currentUser &&
          this.currentUser.user &&
          this.currentUser.user.account &&
          (!window.ssoConfig.mode || window.ssoConfig.mode == 'jwt')
        ) {
          return `${window.context.mobile}?token= ` + this.token
        } else {
          return `${window.context.mobile}`
        }
      },
      pwdStrategy: (state) => state.user.pwdStrategy,
      userType: function () {
        if (this.currentUser && this.currentUser.user) {
          return this.currentUser.user.userType
        }
      },
    }),
  },
  watch: {
    styleSetting: {
      handler: function (val, oldval) {
        let str = JSON.stringify(val)
        localStorage.setItem('styleSetting', str)
        this.$store.dispatch('styleSetting/actionStyleSetting', JSON.parse(str))
      },
      deep: true, //对象内部的属性监听，也叫深度监听
    },
    $route: 'currentTab',
  },
  methods: {
    // 刷新页面保持当前路由
    currentTab() {
      let pullpath = this.$route.path
      let path = pullpath.split('/')
      let urlAnchor = path[path.indexOf('projectLayout') + 1]
      this.MenuList.filter((item) => {
        if (item.alias == urlAnchor) {
          this.activeMenu = urlAnchor
        }
      })
    },
    // 切换Tabs
    activeTab(item) {
      this.activeMenu = item.alias
      this.$router.push({name: item.alias})
    },
    goIndex() {
      // this.$router.push({
      //   path: `/frontPlat/frontIndex`,
      // })
    },
    handleSysPlat() {
      if (!this.sysMenus.length) {
        this.$store.dispatch('menu/actionSysMenus').then((res) => {
          if (res) {
            window.open(
              window.context.manage +
                // "http://localhost:8081/mvue"+
                '/sysplat/' +
                `${this.sysMenus[0].children[0].alias}` +
                '?token=' +
                this.token,
              '_blank'
            )
          }
        })
      } else {
        window.open(
          window.context.manage +
            // "http://localhost:8081/mvue"+
            '/sysplat/' +
            `${this.sysMenus[0].children[0].alias}` +
            '?token=' +
            this.token,
          '_blank'
        )
      }
    },
    readload(val) {
      this.getUnread()
    },
    getUnread() {
      uc.messagelist().then((res) => {
        this.messageList = res.data.rows
        if (res.data.rows.length > 0) {
          this.messnum = res.data.rows.length
        } else {
          this.messnum = ''
        }
        console.log(this.messageList)
      })
    },
    getBizUrl() {
      this.$http
        .get('${portal}/sys/sysProperties/v1/getByAlias?alias=biz.url', {
          responseType: 'text',
        })
        .then((res) => {
          this.bizUrl = res.data
        })
    },
    showDrawer() {
      this.$refs.messageDrawer.drawer = true
    },

    submitForm() {
      let this_ = this
      this.$refs['pwdForm'].validate((valid) => {
        if (valid) {
          this.$http
            .post('${uc}/api/user/v1/user/changUserPsd', {
              oldPwd: this.pwdForm.old,
              newPwd: this.pwdForm.new,
            })
            .then((resp) => {
              let data = resp.data
              if (data && data.state) {
                this.modifyPwdDialogVisible = false
                this.$alert('修改密码成功, 请使用新密码重新登录。', '提示', {
                  confirmButtonText: '确定',
                  callback: (action) => {
                    //退出登录
                    this_.logout()
                  },
                })
              }
            })
        }
      })
    },
    openInfoDialog() {
      this.$router.push({
        path: '/frontPlat/personMenus/personInfo',
      })
      this.$refs.frontMenu.activeIndex = ''
      // this.infoDialogVisible = true
    },
    openMap() {
      this.$router.push({
        path: `/frontPlat/maptest`,
      })
      this.handleMenuCollapse()
    },
    openResetPwdDialog() {
      this.$store.dispatch('user/getDefPwdStrategy')
      this.modifyPwdDialogVisible = true
      if (this.$refs['pwdForm']) {
        this.$refs['pwdForm'].resetFields()
      }
    },
    handleMenuCollapse() {
      this.$bus.$emit('frontMenuShow', !this.menuShow)
    },
    logout() {
      this.$store.dispatch('menu/clearMenus')
      this.$store.dispatch('user/clearUser')
      this.$store.dispatch('menu/setCopyMenus', []) //菜单
      let loginRouthPath =
        localStorage.getItem(
          this.$store.state.login.currentUser.account + 'loginRoutePath'
        ) || '/login'
      this.$store.dispatch('login/logoutAndCleanUp').then(() => {
        switch (window.ssoConfig.mode) {
          case 'cas':
          case 'oauth':
            window.sessionStorage.removeItem('currentUser')
            window.location.href =
              window.ssoConfig.logout +
              '?service=' +
              window.location.href.split('?')[0]
            break
          default:
            this.$router.push({
              path: loginRouthPath,
            })
            break
        }
      })
    },
    handleScreenFull(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning',
        })
        return false
      }
      screenfull.toggle(document.getElementsByTagName('body')[0])
      this.isScreenFull = !this.isScreenFull
    },
    handleStyleSettingDialog() {
      let styleSetting = localStorage.getItem('styleSetting')
      if (styleSetting && styleSetting != 'null') {
        this.styleSetting = JSON.parse(styleSetting)
      }
      this.styleSettingDialogVisible = true
    },
    handleStyleSettingDialogClose() {
      this.styleSettingDialogVisible = false
      this.infoDialogVisible = false
      this.modifyPwdDialogVisible = false
    },
    querySearch(queryString, cb) {
      // 查询出二级三级的菜单
      let menus = []
      menus = [...this.menus]
      if (queryString) {
        this.searchMenus = []
        this.preFilterMenus(this.menus, queryString)
      } else {
        this.searchMenus = menus
      }
      // 调用 callback 返回建议列表的数据
      this.searchMenus = this.searchMenus.unique('alias')
      cb(this.searchMenus)
    },
    preFilterMenus(menus, queryString) {
      if (menus instanceof Array) {
        menus.forEach((x) => {
          this.filterMenus(x, queryString)
        })
      } else {
        this.filterMenus(menus, queryString, true)
      }
    },
    filterMenus(x, queryString, isComponent) {
      if (x.children) {
        let r = x.children.filter((menu) => {
          this.preFilterMenus(menu, queryString)
          return (
            menu.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1 ||
            menu.alias.toLowerCase().indexOf(queryString.toLowerCase()) != -1
          )
        })
        if (r && r.length >= 1) {
          r.forEach((y) => {
            if (isComponent) {
              y.parentComponent = x
            }
            this.searchMenus.push(y)
          })
        }
      }
    },
    handleSelect(item) {
      if (!item.parentComponent) {
        this.$router.push({path: `/${item.alias}`})
      } else {
        this.$router.push({
          path: `/${item.parentComponent.alias}#${item.alias}`,
        })
      }
    },
    //获取系统默认配置 系统Logo、名称
    sysSetting() {
      const _this = this
      let url =
        window.context.portal + '/sys/sysProperties/v1/getDecryptBySysSetting'
      _this.$http.get(url).then((response) => {
        if (response && response.data && response.data.value) {
          let sysSettingData = JSON.parse(response.data.value)
          sysSettingData.nameFront
            ? (_this.platName = sysSettingData.nameFront)
            : null
          if (sysSettingData.frontLogo.length > 0) {
            let frontLogo = sysSettingData.frontLogo
            _this.showLogo = true
            req
              .get(
                window.context.portal +
                  '/file/onlinePreviewController/v1/getFileById_' +
                  frontLogo[0].id,
                'arraybuffer'
              )
              .then((response) => {
                let type = response.headers['content-type']
                if (type) {
                  _this.logo = window.URL.createObjectURL(
                    new Blob([response.data], {type: type})
                  )
                } else {
                  _this.logo = window.URL.createObjectURL(
                    new Blob([response.data])
                  )
                }
              })
            //_this.logo = window.context.portal + "/file/v1/downloadFile?fileId=" + manageLogo[0].id;
          } else {
            this.showLogo = false
          }
        } else {
          this.showLogo = false
        }
      })
    },
  },
  mounted() {
    !this.currentUser && this.$store.dispatch('user/loadCurrentUserDetail')
    const currentUser = this.$store.state.login.currentUser
    if (currentUser) {
      let userAttrs = this.$store.state.login.currentUser.userAttrs
      if (userAttrs) {
        //租户
        const tenantId = userAttrs.tenantId
        if (tenantId) {
          let _this = this
          let url = '${uc}/uc/tenantManage/v1/getJson?id=' + tenantId
          this.$http.get(url).then(
            (resp) => {
              if (resp.data) {
                let tenantManage = resp.data
                tenantManage.nameFront
                  ? (_this.platName = tenantManage.nameFront)
                  : null
                if (tenantManage.frontLogo) {
                  let frontLogo = JSON.parse(tenantManage.frontLogo)
                  if (frontLogo && frontLogo.length > 0) {
                    _this.showLogo = true
                    req
                      .get(
                        window.context.portal +
                          '/file/onlinePreviewController/v1/getFileById_' +
                          frontLogo[0].id,
                        'arraybuffer'
                      )
                      .then((response) => {
                        let type = response.headers['content-type']
                        if (type) {
                          _this.logo = window.URL.createObjectURL(
                            new Blob([response.data], {type: type})
                          )
                        } else {
                          _this.logo = window.URL.createObjectURL(
                            new Blob([response.data])
                          )
                        }
                      })
                  }
                } else {
                  _this.showLogo = false
                }
              }
            },
            (error) => {
              _this.showLogo = false
              reject(error)
            }
          )
        } else {
          //不是租户
          this.sysSetting()
        }
      } else {
        //不是租户
        this.sysSetting()
      }
    } else {
      //不是租户
      this.sysSetting()
    }
  },
  created() {
    this.currentTab()
    this.getUnread()
    this.getBizUrl()
    let USER_AGENT = navigator.userAgent.toLowerCase()
    let isChrome = /.*(chrome)\/([\w.]+).*/
    if (!isChrome.test(USER_AGENT)) {
      this.isIeExplorer = true
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.v-line {
  color: #77757a;
  margin-right: 15px;
}
/deep/ .el-badge__content {
  height: 16px;
  line-height: 16px;
  border: 0;
  padding: 0 3px;
}
.navigator-btnI {
  cursor: pointer;
  margin-right: 20px;
  i {
    color: #e1e4ec;
    font-size: 18px;
    cursor: pointer;
  }
  img{
    width: 15px;
    height: 15px;
    margin-top: 5px;
  }
}
.el-avatar {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.el-avatar i {
  font-size: 16px;
  color: #c0c4cc;
}

.navbar-menu-collapse {
  cursor: pointer;
  /*width: 120px;*/
  height: 30px;
  //margin-left: 15px;
  // margin-left: 30px;
  //background: $--color-secondary;
  //background: $--color-newPrimary;
  display: flex;
  justify-content: left;
  align-items: center;
}

.navbar-menu-collapse > img {
  height: 30px;
}
.navbar-menu-collapse > i {
  font-size: 18px;
  /*margin: 13px;*/
  //color: $--color-primary;
  color: #fff;
  transition: all 0.5s;
}

.navbar-menu-collapse > i:hover {
  color: #fff;
}

.logo-container {
  // margin-left: 20px;
  cursor: pointer;
  // background-color: #113556;
  padding: 5px 16px;
  display: flex;
  align-items: center;
  .logowenzi {
    height: 5vw !important;
    width: 10vw !important;
    margin-left: 5px;
    // margin-top: -5px;
    // margin-left: 10px;
  }
}

.logo-container > i.icon-hotent-H-c {
  font-size: 36px;
  background-image: linear-gradient($--color-secondary, $--color-primary);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-right: -5px;
}

.logo-container > i.icon-hotent-H-ie {
  font-size: 36px;
  background-clip: text;
  -webkit-background-clip: text;
  color: $--color-primary;
  margin-right: -5px;
}

.logo-container:hover > i.icon-hotent-H-c {
  background-image: linear-gradient($--color-primary, $--color-secondary);
}

.logo-container > span.pre-word {
  font-size: 26px;
  font-weight: bold;
  color: $--color-primary;
}

.logo-container > span.tail-word {
  font-size: 24px;
  /*font-weight: bold;*/
  color: #bdbfc2;
}

.logo-container > img {
  height: 3.8vw !important;
  width: 3.8vw !important;
  vertical-align: middle;
}

.logo-container .logoText {
  vertical-align: middle;
}

.header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  background: linear-gradient(90deg, $--color-primary, #4d89f1);
  // background: #144871;
  width: 100%;
  height: 4vw;
}

.logo-link {
  font-size: 18px;
  color: #2274af;
  text-decoration: none;
}

.nav-logo {
  width: 25px;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
  margin-top: -6px;
}

.header-right {
  margin-right: 20px;
  align-items: center;
  justify-content: space-between;
}

.header-right > .el-link,
.header-right > span > .el-link {
  margin-right: 25px;
  font-size: 13px;
}

.header-right > .el-link:hover,
.header-right > span > .el-link:hover {
  color: #fff;
}
/deep/.el-link.el-link--default:hover {
  color: #fff;
}
/deep/.el-link.el-link--default {
  color: #e1e4ec;
}
//#606266
.el-link {
  color: #e1e4ec !important;
}
.user-link-ul {
  .el-link {
    color: #606266 !important;
    i {
      font-size: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}
.user-link-ul .el-link:hover {
  color: #606266 !important;
}
.el-link:hover {
  color: #fff !important;
}

.top-link-icon {
  font-size: 16px !important;
}

.top-message-header {
  background: #f7f7f7;
  justify-content: space-between;
  padding: 5px 10px;
}

.user-box-divider {
  margin: 10px 0;
}

.user-box-header {
  padding: 10px;
}

.inline-input {
  margin-right: 25px;
}

.inline-input >>> .el-input__inner {
  // background: #3f77d7;
  border: none;
  color: #666;
  height: 25px;
  line-height: 25px;
}

.el-input--small .el-input__icon {
  line-height: 25px;
}

.user-link-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.user-link-ul > li {
  padding: 8px 10px;
  cursor: pointer;
}

.user-link-ul > li > i {
  margin-right: 5px;
  font-size: 16px;
  font-weight: bold;
}

.user-link-ul > li:hover {
  background: #ebebeb;
  // background: #164773;
}

.top-message-more {
  border-top: 1px solid #dedede;
  margin-top: 10px;
  padding: 10px;
}

.top-message-body {
  justify-content: center;
  align-items: center;
  min-height: 80px;
}

.top-message-more > a:hover,
.top-message-more > a:focus {
  color: #555;
}

.user-box-logout {
  justify-content: center;
  background: #f7f7f7;
  border-top: 1px solid #dedede;
  margin-top: 10px;
  color: #ff7717 !important;
}

.top-message-more:hover,
.user-box-logout:hover {
  background: #ebebeb;
}

.user-box-logout > .el-link {
  line-height: 35px;
  width: 100%;
  color: #ff7717 !important;
}

.user-box-logout > .el-link:hover,
.user-box-logout > .el-link:focus {
  color: #ff7717 !important;
}

#screenfull {
  margin-right: 25px;

  svg {
    width: 12px;
    height: 12px;
    margin-bottom: -2px;
  }
}
.content_span {
  color: #212121;
  display: inline-block;
}

.logoText {
  font-size: 30px !important;
  /*font-weight: bold;*/
  color: #fff;
  letter-spacing: 1px;
  /*font-family: Roboto,Microsoft YaHei,Sans-serif;*/
  font-family: HuaweiFont, 微软雅黑 Regular, 微软雅黑, 宋体;
  // margin-left: 10px;
}
.header-popper {
  top: 50px !important;
}
.search-box {
  display: flex;
  align-items: center;
  margin-right: 10px;
  /deep/ .el-input--small {
    margin-right: 10px;
    input {
      width: 180px;
      transition: all 0.3s;
    }
    input:focus {
      width: 250px !important;
      transition: all 0.3s;
    }
  }
  /deep/ .el-input--small .el-input__inner {
    border-radius: 16px;
  }
  /deep/ .el-input__suffix {
    display: flex;
    align-items: center;
  }
  i {
    font-size: 18px;
    &:hover {
      cursor: pointer;
    }
  }
}

.single-border {
  width: 100%;
  display: flex;
  .inside-box {
    width: 45%;
  }
  .project-box {
    width: 55%;
    margin-top: 12px;
    display: flex;
    align-self: center;
    .project-name {
      height: 100%;
      padding-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #ebeef5;
      font-size: 24px;
      font-family: 'KaiTi';
    }
  }
}
.menu-box {
  border-bottom: 0;
  margin-left: 45px;
  height: 48px;
  margin-top: 12px;
  // display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  .menu-btn {
    line-height: 33px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 7px 10px;
    color: #ebeef5;
    background: linear-gradient(to left, rgb(33, 97, 215), rgb(24, 124, 201));
    margin-right: 5px;
    font-size: 18px;
  }
  .menu-btn:hover {
    cursor: pointer;
    color: #4398fb;
    background: #e5e8ef;
  }
  .active {
    color: #4398fb;
    background: #e5e8ef;
  }
}
.item {
  margin: 4px;
}
.nav-title {
  width: 100%;
  padding-left: 30px;
  padding-right:10px;
 display: flex;
}
.pro-name{
 overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #ebeef5;
  font-size: 24px;
  font-family: 'KaiTi';
}

</style>
<style lang="scss">
.el-tooltip__popper.is-light{
  border: 1px solid rgb(215, 213, 213);
}
</style>