Переглянути джерело

feat:增加隐藏头部菜单功能

coder 1 рік тому
батько
коміт
b9da744fc6
1 змінених файлів з 87 додано та 66 видалено
  1. 87 66
      src/components/NavHeader/index.vue

+ 87 - 66
src/components/NavHeader/index.vue

@@ -9,79 +9,88 @@ function loginOut() {
 const linkTo = (obj) => {
   router.push(obj);
 };
+const { currentRoute } = useRouter()
+const route = currentRoute.value
+const notShowHeader = route.query.notShowHeader
+debugger
 </script>
 
 <template>
   <div class="main-header">
     <div class="header-nav">
-       <div class="w-1200px m-auto flex justify-between items-center">
-         <a :href="link.yzy +'webapps/page/home.html'">
-           <img src="/images/logo.png" class="logo" alt="">
-           <img src="/images/title.png" class="logo-title" alt="">
-         </a>
-         <div class="flex">
-           <a :href="link.qqyxt" class="nav-item leading-50px">亲亲云学堂</a>
-           <a :href="link.yzy +'webapps/page/home.html'" class="nav-item leading-50px">精准教学首页</a>
-           <div class="nav-item">
-             <span class="inline-block align-middle leading-50px">试题库</span>
-             <img src="/images/triangle.png" class="triangle" alt="">
-             <div class="child-nav">
-               <a :href="link.yzy +'/webapps/page/task.html?mold=issue&sort=chapter'">章节试题</a>
-               <a :href="link.yzy + '/webapps/page/task.html?mold=issue&sort=knowledge'">知识点试题</a>
-               <a :href="link.yzy + '/webapps/page/zlzj.html'">智能选题</a>
-             </div>
-           </div>
-           <div class="nav-item">
-             <span class="inline-block align-middle leading-50px">考试阅卷</span>
-             <img src="/images/triangle.png" class="triangle" alt="">
-             <div class="child-nav">
-               <a :href="link.yzy+'/webapps/page/exam.html?mold=manage'">组卷管理</a>
-               <a :href="link.yzy + '/webapps/page/exam.html?mold=online&sort=one&pid=total'">考试管理</a>
-               <a :href="link.yzy + '/webapps/page/marking-process-list.html'">阅卷流程</a>
-               <a href="javascript:;" @click="linkTo({name:'process'})">联考管理</a>
-             </div>
-           </div>
-           <a :href="link.yzy + '/webapps/page/paper_library.html'" class="nav-item leading-50px">试卷库</a>
-           <div class="nav-item">
-             <span class="inline-block align-middle leading-50px">VIP题库</span>
-             <img src="/images/triangle.png" class="triangle" alt="">
-             <div class="child-nav">
-               <a :href="link.yzy + '/webapps/page/vip_task.html?mold=vip&sort=chapter'">章节试题</a>
-               <a :href="link.yzy + '/webapps/page/vip_task.html?mold=vip&sort=knowledge'">知识点试题</a>
-             </div>
-           </div>
-           <a :href="link.yzy + '/webapps/page/propRequireList.html'" class="nav-item leading-50px">命题要求</a>
-           <div class="header-user relative">
-             <img class="inline-block align-middle w-30px h-30px border-radius-50" :src="user.user_avatar.big" alt="">
-             <span class="inline-block align-middle ml-8px text-12px text-white leading-50px">{{user.user_realname}}</span>
-             <img src="/images/triangle.png" class="triangle" alt="">
-             <div class="child-nav">
-               <a :href="link.yzy + '/webapps/page/glzx.html'">管理中心</a>
-               <a :href="link.yzy + '/webapps/page/grzx.html'">个人中心</a>
-               <a href="javascript:;" @click="loginOut">退出登录</a>
-             </div>
-           </div>
-         </div>
-       </div>
+      <div class="w-1200px m-auto flex justify-between items-center">
+        <a :href="link.yzy + 'webapps/page/home.html'">
+          <img src="/images/logo.png" class="logo" alt="">
+          <img src="/images/title.png" class="logo-title" alt="">
+        </a>
+        <div class="flex">
+          <div class="flex" v-show="notShowHeader != 1">
+            <a :href="link.qqyxt" class="nav-item leading-50px">亲亲云学堂</a>
+            <a :href="link.yzy + 'webapps/page/home.html'" class="nav-item leading-50px">精准教学首页</a>
+            <div class="nav-item">
+              <span class="inline-block align-middle leading-50px">试题库</span>
+              <img src="/images/triangle.png" class="triangle" alt="">
+              <div class="child-nav">
+                <a :href="link.yzy + '/webapps/page/task.html?mold=issue&sort=chapter'">章节试题</a>
+                <a :href="link.yzy + '/webapps/page/task.html?mold=issue&sort=knowledge'">知识点试题</a>
+                <a :href="link.yzy + '/webapps/page/zlzj.html'">智能选题</a>
+              </div>
+            </div>
+            <div class="nav-item">
+              <span class="inline-block align-middle leading-50px">考试阅卷</span>
+              <img src="/images/triangle.png" class="triangle" alt="">
+              <div class="child-nav">
+                <a :href="link.yzy + '/webapps/page/exam.html?mold=manage'">组卷管理</a>
+                <a :href="link.yzy + '/webapps/page/exam.html?mold=online&sort=one&pid=total'">考试管理</a>
+                <a :href="link.yzy + '/webapps/page/marking-process-list.html'">阅卷流程</a>
+                <a href="javascript:;" @click="linkTo({ name: 'process' })">联考管理</a>
+              </div>
+            </div>
+            <a :href="link.yzy + '/webapps/page/paper_library.html'" class="nav-item leading-50px">试卷库</a>
+            <div class="nav-item">
+              <span class="inline-block align-middle leading-50px">VIP题库</span>
+              <img src="/images/triangle.png" class="triangle" alt="">
+              <div class="child-nav">
+                <a :href="link.yzy + '/webapps/page/vip_task.html?mold=vip&sort=chapter'">章节试题</a>
+                <a :href="link.yzy + '/webapps/page/vip_task.html?mold=vip&sort=knowledge'">知识点试题</a>
+              </div>
+            </div>
+            <a :href="link.yzy + '/webapps/page/propRequireList.html'" class="nav-item leading-50px">命题要求</a>
+          </div>
+          <div class="header-user relative">
+            <img class="inline-block align-middle w-30px h-30px border-radius-50" :src="user.user_avatar.big" alt="">
+            <span class="inline-block align-middle ml-8px text-12px text-white leading-50px">{{ user.user_realname
+            }}</span>
+            <img src="/images/triangle.png" class="triangle" alt="">
+            <div class="child-nav">
+              <a :href="link.yzy + '/webapps/page/glzx.html'">管理中心</a>
+              <a :href="link.yzy + '/webapps/page/grzx.html'">个人中心</a>
+              <a href="javascript:;" @click="loginOut">退出登录</a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-
 </template>
 <style lang="scss">
 @keyframes navShow {
   from {
     height: 0;
   }
+
   to {
     height: 100%;
   }
 }
-.main-header{
+
+.main-header {
   position: relative;
   width: 100%;
   height: 50px;
 }
-.header-nav{
+
+.header-nav {
   position: fixed;
   left: 0;
   top: 0;
@@ -90,18 +99,21 @@ const linkTo = (obj) => {
   height: 50px;
   background: #0048e5;
 }
-.logo{
+
+.logo {
   width: 21px;
   height: 26.5px;
   display: inline-block;
 }
-.logo-title{
+
+.logo-title {
   width: 81px;
   height: 16.5px;
   display: inline-block;
   margin-left: 10px
 }
-.nav-item{
+
+.nav-item {
   position: relative;
   width: 110px;
   height: 50px;
@@ -110,19 +122,22 @@ const linkTo = (obj) => {
   color: #fff;
   text-align: center;
   cursor: pointer;
+
   &:hover,
-  &.selected{
-    background: rgba(0,0,0,.2);
+  &.selected {
+    background: rgba(0, 0, 0, .2);
   }
-  &:hover{
-    .child-nav{
+
+  &:hover {
+    .child-nav {
       display: block;
       animation: all .2s ease-in-out;
     }
   }
 
 }
-.child-nav{
+
+.child-nav {
   display: none;
   position: absolute;
   left: 0;
@@ -133,18 +148,21 @@ const linkTo = (obj) => {
   border-top: 0;
   box-shadow: 0 0 5px #ccc;
   border-radius: 0 0 5px 5px;
-  a{
+
+  a {
     display: block;
     font-size: 14px;
     text-align: left;
     line-height: 40px;
     padding-left: 20px;
     color: #303133;
-    &:hover{
+
+    &:hover {
       color: #0048e5;
     }
   }
 }
+
 .triangle {
   width: 9px;
   height: 5.5px;
@@ -153,15 +171,18 @@ const linkTo = (obj) => {
   position: relative;
   margin-left: 8px;
 }
-.header-user{
+
+.header-user {
   min-width: 100px;
   font-size: 14px;
   text-align: center;
   cursor: pointer;
   padding: 0 8px;
-  &:hover{
-    background: rgba(0,0,0,.2);
-    .child-nav{
+
+  &:hover {
+    background: rgba(0, 0, 0, .2);
+
+    .child-nav {
       display: block;
     }
   }