浏览代码

企业navbar样式调整

Xiao_123 3 月之前
父节点
当前提交
c3625a989f
共有 3 个文件被更改,包括 42 次插入32 次删除
  1. 19 14
      src/components/CtTooltip/index.js
  2. 23 17
      src/layout/company/navBar.vue
  3. 0 1
      src/store/system.js

+ 19 - 14
src/components/CtTooltip/index.js

@@ -1,5 +1,5 @@
 // 引入组件
-import {createApp, nextTick} from "vue";
+import { createApp, nextTick } from "vue"
 import MyToolTip from './ToolTip.vue'
 
 /**
@@ -9,15 +9,15 @@ import MyToolTip from './ToolTip.vue'
 // 位置定位
 function calculationLocation(el, target, placements) {
   if (!el || !target) return;
-  console.log('el:', el)
-  console.log('target:', target)
+  // console.log('el:', el)
+  // console.log('target:', target)
 
   el.tooltipPosition.y = 0;
   el.tooltipPosition.x = 0;
   let el_dom = el.$el?.nextElementSibling?.getBoundingClientRect() || target?.w_tipInstance?.$el?.nextElementSibling?.getBoundingClientRect() || null
   let target_dom = target.getBoundingClientRect()
   if(!el_dom) {
-    console.log('el_dom:不存在', el_dom)
+    // console.log('el_dom:不存在', el_dom)
     return
   }
 
@@ -53,18 +53,23 @@ function getElStyleAttr(element, attr) {
 // }
 
 const isOverflow = (target) => {
-  const scrollWidth = target.scrollWidth
-  const offsetWidth = target.offsetWidth
-  const range = document.createRange()
-  range.setStart(target, 0)
-  range.setEnd(target, target.childNodes.length)
-  const rangeWidth = range.getBoundingClientRect().width
-  const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
-  return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
+  // const scrollWidth = target.scrollWidth
+  // const offsetWidth = target.offsetWidth
+  // const range = document.createRange()
+  // range.setStart(target, 0)
+  // range.setEnd(target, target.childNodes.length)
+  // const rangeWidth = range.getBoundingClientRect().width
+  // const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
+  // return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
+
   // return scrollWidth > offsetWidth
+
+  const scrollWidth = target.scrollWidth
+  const clientWidth = target.clientWidth
+  return scrollWidth > clientWidth
 }
 
-export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
+export const ellipsisTooltip = {
   mounted(el, binding) {
     //获取指令的参数
     const {
@@ -129,5 +134,5 @@ export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
     }
     window.removeEventListener('scroll', el._scrollHandler)
   }
-} : {}
+}
 

+ 23 - 17
src/layout/company/navBar.vue

@@ -1,27 +1,31 @@
 <template>
   <div>
-    <v-toolbar
-      class="banner"
-      density="compact"
-      style="padding-left: 0px;height: 50px;font-size: 14px;"
-    >
+    <v-toolbar class="banner font-size-14 pl-0" density="compact" style="height: 50px;">
       <div class="innerBox d-flex justify-space-between">
-        <div>
-          <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
-            <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="97" style="height: 40px"></v-img>
-          </div>
+        <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
+          <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="97" style="height: 40px"></v-img>
         </div>
         
         <div class="d-flex user-nav align-center">
+          <!-- 企业logo、企业名称 -->
           <div class="d-flex align-center cursor-pointer">
             <v-img @click="enterpriseClick(2)" rounded width="40" height="40" :src="baseInfo?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" ></v-img>
             <span @click="enterpriseClick(1)" class="ml-3 commonHover">{{ formatName(baseInfo?.enterpriseAnotherName || baseInfo?.enterpriseName) }}</span>
           </div>
-          <div class="ml-3 cursor-pointer border-left border-right px-3 commonHover" @click="handleLogout(false)">我要求职</div>
-          <div class="d-flex align-center px-3 border-right cursor-pointer commonHover" @click="router.push('/recruit/enterprise/membershipPackage/index?key=1')">
+
+          <div class="enterprise-septal-line"></div>
+          <div class="cursor-pointer mx-3 commonHover" @click="handleLogout(false)">我要求职</div>
+
+          <div class="enterprise-septal-line"></div>
+          <div class="d-flex align-center mx-3 cursor-pointer commonHover" @click="router.push('/recruit/enterprise/membershipPackage/index?key=1')">
             <div>剩余M豆:{{ enterpriseUserAccount?.balance ? enterpriseUserAccount?.balance / 100 : 0 }}个</div>
           </div>
-          <svg-icon v-if="baseInfo?.vipFlag && Date.now() < baseInfo?.vipExpireDate" name="vip" size="30" class="ml-3"></svg-icon>
+
+          <!-- 企业会员标识 -->
+          <div v-if="baseInfo?.vipFlag && Date.now() < baseInfo?.vipExpireDate" >
+            <div class="enterprise-septal-line"></div>
+            <svg-icon name="vip" size="30" class="ml-3"></svg-icon>
+          </div>
           
           <!-- 头像用户名 -->
           <div class="d-flex align-center" v-if="showBall">
@@ -199,10 +203,12 @@ getEnterpriseListData()
   color: var(--color-333);
   font-size: 15px;
 }
-.border-left {
-  border-left: 1px solid #fff;
-}
-.border-right {
-  border-right: 1px solid #fff;
+.enterprise-septal-line {
+  width: 1px;
+  display: inline-block;
+  height: 20px;
+  vertical-align: middle;
+  background-color: #fff;
+  margin: 0 10px;
 }
 </style>

+ 0 - 1
src/store/system.js

@@ -33,7 +33,6 @@ export const useSystem = defineStore('system',
     const breadcrumbs = ref([])
 
     const setBreadcrumbs = (matched, fullPath) => {
-      console.log('1111', matched, fullPath)
       const _fullPath = fullPath.split('/')
       const arr = matched.map((item, index) => {
         // 重组路径