提交

src/components/header/index.vue

@@ -1,14 +1,9 @@
 <template>
   <header class="header">
     <div class="main">
-      <h3 class="font-size-36 text-normal lh64">桐乡艺校</h3>
+      <h3 class="logo">桐乡艺校</h3>
       <ul class="nav-list">
-        <li class="selected">首页<span></span></li>
-        <li>课程资源<span></span></li>
-        <li>直播课堂<span></span></li>
-        <li>智慧教研<span></span></li>
-        <li>艺术广场<span></span></li>
-        <li>数字美术馆<span></span></li>
+        <li v-for="item in navList" :class="curNavName==item.name?'selected':''" @click="switchNav(item)">{{item.title}}<span></span></li>
       </ul>
       <div>
         <span class="icon-message d-in-block v-mid hand"></span>
@@ -24,10 +19,147 @@
 
 <script>
 export default {
-  name: "commonHeader"
+  name: "commonHeader",
+  data() {
+    return {
+      navList:[{
+        id:'1',
+        title:'首页',
+        name:'home'
+      },{
+        id:'2',
+        title:'课程资源',
+        name:'resource'
+      },{
+        id:'3',
+        title:'直播课堂',
+        name:'zbkt'
+      },{
+        id:'4',
+        title:'智慧教研',
+        name:'zhjy'
+      },{
+        id:'5',
+        title:'艺术广场',
+        name:'ysgc'
+      },{
+        id:'6',
+        title:'数字美术馆',
+        name:'szmsg'
+      }],
+      curNavName:'home'
+    }
+  },
+  methods:{
+    switchNav(item) {
+      this.$router.push({
+        name:item.name
+      });
+      localStorage.setItem('curNav',item.name);
+    }
+  },
+  mounted() {
+    if(localStorage.getItem('curNav')) {
+      this.curNavName = localStorage.getItem('curNav');
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.header {
+  width: 100%;
+  height: 64px;
+  background: #fff;
+  box-shadow: 0px 10px 24px 0px rgba(0,20,31,0.08);
+  .main {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .logo{
+    font-size: 36px;
+    line-height: 64px;
+    color: #000;
+  }
+  .nav-list {
+    margin-left: 226px;
+    display: flex;
 
+    li {
+      position: relative;
+      font-size: 18px;
+      color: #000;
+      text-align: center;
+      cursor: pointer;
+      line-height: 64px;
+
+      & + li {
+        margin-left: 45px;
+      }
+
+      &.selected {
+        span {
+          display: block;
+        }
+      }
+
+      span {
+        display: none;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 3px;
+        background: #00A3FF;
+      }
+    }
+  }
+  .login-btn{
+    width: 100px;
+    height: 40px;
+    background: #00a3ff;
+    border-radius: 20px;
+    font-size: 16px;
+    color: #fff;
+    text-align: center;
+  }
+  .icon-message {
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+    background: url("@/assets/images/header/icon-message.png") center no-repeat;
+    background-size: 20px 20px;
+  }
+  .shot{
+    margin-left: 10px;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-shadow: 0 1px 2px rgba(17,46,74,0.10) inset;
+    overflow: hidden;
+    img{
+      width: 100%;
+      border-radius: 50%;
+    }
+    .dot{
+      position: absolute;
+      right: 3px;
+      bottom: 3px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #3EBB92;
+      border: 2px solid #F1FEF6;
+    }
+  }
+}
 </style>

src/pages/courseResources.vue

@@ -1,4 +1,5 @@
 <template>
+  <common-header/>
   <div class="courseResources">
     <div class="courseResourcesCont">
 
@@ -7,7 +8,7 @@
         <div class="searchValue">
           <input type="text" placeholder="搜索关键字" v-model="searchKey" >
           <div class="searchBtn">
-            <img src="../assets/kczt/searchIcon.png" alt="">
+            <img src="../assets/kczy/searchIcon.png" alt="">
           </div>
         </div>
         <div class="littleTab">
@@ -33,8 +34,13 @@
 
 <script>
   import CourseType from '../components/CourseType.vue'
+  import commonHeader from "@/components/header/index.vue";
   export default {
     name: 'courseResources',
+    components:{
+      CourseType,
+      commonHeader
+    },
     data() {
       return {
         searchKey: '',
@@ -286,12 +292,8 @@
       },
 
   },
-  component: {
-    CourseType
-   },
   }
 </script>
-
 <style scoped lang="scss">
 .courseResources{
   width:100%;
@@ -339,8 +341,9 @@
           vertical-align: middle;
           cursor: pointer;
           img{
-            display: inline-block;
+            display: block;
             text-align: center;
+            margin: 6px auto 0;
           }
         }
       }

src/pages/courseResourcesAll.vue

@@ -1,4 +1,5 @@
 <template>
+  <common-header/>
   <div class="courseResources">
     <div class="likeBread">
       <div class="likeBread_left">基础课程</div>
@@ -67,8 +68,12 @@
 </template>
 
 <script>
+  import commonHeader from "@/components/header/index.vue";
   export default {
     name: 'courseResources',
+    components:{
+      commonHeader
+    },
     data() {
       return {
         searchKey: '',

src/pages/szmsg/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <common-header/>
   <div class="ysgc">
     <ResourceSearch></ResourceSearch>
     <div class="ysgc-kind">
@@ -49,8 +50,9 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import ResourceSearch from "../../components/ResourceSearch/index.vue";
+import commonHeader from "@/components/header/index.vue";
 import { ref } from "vue";
 </script>
 <style lang="scss" scoped>

src/pages/ysgc/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <common-header/>
   <div class="ysgc">
     <ResourceSearch></ResourceSearch>
     <div class="ysgc-kind">
@@ -49,6 +50,7 @@
 </template>
 <script setup>
 import ResourceSearch from "../../components/ResourceSearch/index.vue";
+import commonHeader from "@/components/header/index.vue";
 import { ref } from "vue";
 </script>
 <style lang="scss" scoped>

src/pages/zbkt/index.vue

@@ -4,7 +4,7 @@ import img_ssys from '~/assets/zbkt/ssys.png';
 import img_wlzb from '~/assets/zbkt/wlzb.png';
 import img_ztzb from '~/assets/zbkt/ztzb.png';
 import img_kcb1 from '~/assets/zbkt/kcb.png';
-
+import commonHeader from "@/components/header/index.vue";
 const router = useRouter()
 function routeTo(url) {
   router.push(url)
@@ -14,6 +14,7 @@ function routeTo(url) {
 </script>
 
 <template>
+  <common-header/>
   <div class="flex flex-col w-full items-center">
     <div class="w-full mb-20"><img :src="img_lczs" alt="" class="w-full" /></div>
 

src/pages/zhjy/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <common-header/>
   <div class="content">
     <div class="main-img">
       <div><img src="@/assets/img/zhjy/jx.png" alt="" /></div>
@@ -138,8 +139,12 @@
 </template>
 
 <script>
+import commonHeader from "@/components/header/index.vue";
 export default {
   name: "index",
+  components:{
+    commonHeader
+  },
   data() {},
   methods: {
     zxxxDetail() {
@@ -159,7 +164,7 @@ export default {
 .content {
   width: 1280px;
   background: #fcfeff;
-  margin: 0 auto;
+  margin: 25px auto 0;
 }
 .main-img {
   width: 100%;

src/router/index.js

@@ -1,102 +1,114 @@
-import { createRouter, createWebHashHistory } from "vue-router";
+import {createRouter, createWebHashHistory} from "vue-router";
 
 export default createRouter({
-	history: createWebHashHistory(),
-	routes: [
-		{
-			path: '/',
-			redirect: '/home'
-		},
-		{
-			path: '/home',
-			title: '首页',
-			component: () => import("~/pages/home/index.vue"),
-		},
+    history: createWebHashHistory(),
+    routes: [
+        {
+            path: '/',
+            redirect: '/home'
+        },
+        {
+            path: '/home',
+            name: 'home',
+            title: '首页',
+            component: () => import("~/pages/home/index.vue"),
+        },
 
-		{
-			path: '/zhjy',
-			component: () => import("~/pages/zhjy/index.vue"),
-		},
-		{
-			path: '/zhjy/zhjyzxxx',
-			name: "zhjy_zhjyzxxx",
-			component: () => import("~/pages/zhjy/zhjyzxxx/index.vue"),
-		},
-		{
-			path: '/zhjy/zhjyxtbk',
-			name: "zhjy_zhjyxtbk",
-			component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
-		},
-		{
-			path: '/zhjy/zhjytbjy',
-			name: "zhjy_zhjytbjy",
-			component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
-		},
-		{
-			path: '/ysgc',
-			component: () => import("~/pages/ysgc/index.vue"),
-		},
-		{
-			path: '/szmsg',
-			component: () => import("~/pages/szmsg/index.vue"),
-		},
-		{
-			path: '/tskcz',
-			component: () => import('~/pages/szmsg/tskcz/index.vue'),
-		},
-    {
-      path: '/resource',
-      title:'资源',
-      component: () => import("~/pages/courseResources.vue"),
-    },
-    {
-      path: '/resourceAll',
-      title:'全部资源',
-      component: () => import("~/pages/courseResourcesAll.vue"),
-    },
-		{
-			path: '/zbkt',
-			title: '直播课堂',
-			children: [
-				{
-					path: '',
-					component: () => import("~/pages/zbkt/index.vue"),
-				},
-				{
-					path: 'ssys',
-					children: [
-						{
-							path: '',
-							component: () => import("~/pages/zbkt/ssys/index.vue"),
-						},
-					]
-				},
-				{
-					path: 'wlzb',
-					children: [
-						{
-							path: '',
-							component: () => import("~/pages/zbkt/wlzb/index.vue"),
-						},
-					]
-				},
-				{
-					path: 'ztzb',
-					children: [
-						{
-							path: '',
-							component: () => import("~/pages/zbkt/ztzb/index.vue"),
-						},
-					]
-				}
-			]
-    },
-    {
-      path: '/resourceChapter',
-      title:'课程资源章节',
-      component: () => import("~/pages/courseResourcesChapter.vue"),
-    },
-	]
+        {
+            path: '/zhjy',
+            name: 'zhjy',
+            component: () => import("~/pages/zhjy/index.vue"),
+        },
+        {
+            path: '/zhjy/zhjyzxxx',
+            name: "zhjy_zhjyzxxx",
+            component: () => import("~/pages/zhjy/zhjyzxxx/index.vue"),
+        },
+        {
+            path: '/zhjy/zhjyxtbk',
+            name: "zhjy_zhjyxtbk",
+            component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
+        },
+        {
+            path: '/zhjy/zhjytbjy',
+            name: "zhjy_zhjytbjy",
+            component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
+        },
+        {
+            path: '/ysgc',
+            name: 'ysgc',
+            component: () => import("~/pages/ysgc/index.vue"),
+        },
+        {
+            path: '/szmsg',
+            name: 'szmsg',
+            component: () => import("~/pages/szmsg/index.vue"),
+        },
+        {
+            path: '/tskcz',
+            name: 'tskcz',
+            component: () => import('~/pages/szmsg/tskcz/index.vue'),
+        },
+        {
+            path: '/resource',
+            name: 'resource',
+            title: '资源',
+            component: () => import("~/pages/courseResources.vue"),
+        },
+        {
+            path: '/resourceAll',
+            name: 'resourceAll',
+            title: '全部资源',
+            component: () => import("~/pages/courseResourcesAll.vue"),
+        },
+        {
+            path:'',
+            title: '直播课堂',
+            children: [
+                {
+                    path: '/zbkt',
+                    name: 'zbkt',
+                    component: () => import("~/pages/zbkt/index.vue"),
+                },
+                {
+                    path: 'ssys',
+                    name: 'ssys',
+                    children: [
+                        {
+                            path: '',
+                            component: () => import("~/pages/zbkt/ssys/index.vue"),
+                        },
+                    ]
+                },
+                {
+                    path: 'wlzb',
+                    name: 'wlzb',
+                    children: [
+                        {
+                            path: '',
+                            component: () => import("~/pages/zbkt/wlzb/index.vue"),
+                        },
+                    ]
+                },
+                {
+                    path: 'ztzb',
+                    name: 'ztzb',
+                    children: [
+                        {
+                            path: '',
+                            component: () => import("~/pages/zbkt/ztzb/index.vue"),
+                        },
+                    ]
+                }
+            ]
+        },
+        {
+            path: '/resourceChapter',
+            name: 'resourceChapter',
+            title: '课程资源章节',
+            component: () => import("~/pages/courseResourcesChapter.vue"),
+        },
+    ]
 
 })
 

src/styles/mixin.scss

@@ -1719,88 +1719,4 @@ input.m0 {
 
 .border-box {
 	box-sizing: border-box;
-}
-
-.header {
-	width: 100%;
-	height: 64px;
-	background: #fff;
-
-	.main {
-		width: 1400px;
-		margin: 0 auto;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.nav-list {
-		margin-left: 226px;
-		display: flex;
-
-		li {
-			position: relative;
-			font-size: 18px;
-			color: #000;
-			text-align: center;
-			cursor: pointer;
-			line-height: 64px;
-
-			& + li {
-				margin-left: 45px;
-			}
-
-			&.selected {
-				span {
-					display: block;
-				}
-			}
-
-			span {
-				display: none;
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				width: 100%;
-				height: 3px;
-				background: #00A3FF;
-			}
-		}
-	}
-    .login-btn{
-		width: 100px;
-		height: 40px;
-		background: #00a3ff;
-		border-radius: 20px;
-		font-size: 16px;
-		color: #fff;
-		text-align: center;
-	}
-    .icon-message {
-		width: 20px;
-		height: 20px;
-		background: url("@/assets/images/header/icon-message.png") center no-repeat;
-		background-size: 20px 20px;
-	}
-	.shot{
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		box-shadow: 0 1px 2px rgba(17,46,74,0.10) inset;
-		overflow: hidden;
-		img{
-			width: 100%;
-			border-radius: 50%;
-		}
-		.dot{
-			position: absolute;
-			right: 3px;
-			bottom: 3px;
-			width: 14px;
-			height: 14px;
-			border-radius: 50%;
-			background: #3EBB92;
-			border: 2px solid #F1FEF6;
-		}
-	}
 }