update navbar

src/components/Navbar.vue

@@ -14,7 +14,12 @@ function toggleMenu() {
       <img src="@/assets/img/logo.png" alt="" />
     </router-link>
     <ul class="menu d-md-flex align-center" :class="{ slider: menuShow }">
-      <li>最新消息</li>
+      <li>
+        <router-link :to="'/news'">最新消息</router-link>
+      </li>
+      <li>
+       工藝學群
+      </li>
       <li>
         <router-link :to="'/course-list'">探索課程</router-link>
       </li>
@@ -23,7 +28,7 @@ function toggleMenu() {
       <li>
         <router-link :to="'/login'">學員登入</router-link>
       </li>
-      <li>EN</li>
+      <!-- <li>EN</li> -->
       <li>
         <v-icon icon="mdi-magnify"></v-icon>
       </li>
@@ -40,17 +45,17 @@ function toggleMenu() {
 
 <style lang="scss" scoped>
 .navbar {
-  width: 90vw;
+  width: 95vw;
   max-width: 1200px;
   margin: 40px auto;
   padding: 20px 50px 20px 30px;
   border: 1px solid;
-  position: absolute;
+  position: relative;
   z-index: 1000;
-  background: #fff;
+  background: transparent;
   top: 0;
   left: 0;
-  right: 50%;
+  right: 0;
 
   @media (max-width: 1200px) {
     margin: 40px;

src/views/Home.vue

@@ -90,28 +90,20 @@ const previous = () => {
 </script>
 
 <template>
-  <!-- <Navbar /> -->
   <div class="home-container">
     <div class="wrapper">
       <div>
-        <!-- <Navbar /> -->
       </div>
-      <div
-        class="scrollable"
-        :style="{ transform: `translateX(-${scrollLeft}px)` }"
-      >
+      <div class="scrollable" :style="{ transform: `translateX(-${scrollLeft}px)` }">
         <section class="main-block">
           <Navbar />
           <div class="img-item">
             <img src="@/assets/img/banner-0615.webp" alt="" />
-            <p
-              v-show="shouldAnimate"
-              :class="{
-                animate__animated: shouldAnimate,
-                animate__fadeInRight: shouldAnimate && !shouldFadeOut,
-                animate__fadeOutRight: shouldAnimate && shouldFadeOut,
-              }"
-            >
+            <p v-show="shouldAnimate" :class="{
+              animate__animated: shouldAnimate,
+              animate__fadeInRight: shouldAnimate && !shouldFadeOut,
+              animate__fadeOutRight: shouldAnimate && shouldFadeOut,
+            }">
               臺灣工藝學校 <br />
               以佈局具國際視野之工藝學習共享平台為目標，藉由「工藝學校」的主體概念，推動臺灣工藝學校全球學習平台，以共享、友善、全人、全民的終身工藝手作台進行人才、課程、知識、教材之工藝資源嫁接媒合與內容設計，以在地、就近、線上、線下等多元方式提供不同型態之學習體驗內容及選擇。
             </p>
@@ -150,6 +142,7 @@ const previous = () => {
 .home-container {
   height: 150vw; // 捲軸高度
   overflow: hidden;
+
   @media (max-width: 991px) {
     height: 300vw;
   }
@@ -163,16 +156,19 @@ const previous = () => {
     height: 100vh;
     display: flex;
     align-items: end;
+
     .img-item {
       width: 100%;
       height: 100%;
       position: relative;
+
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: top;
       }
+
       p {
         width: 600px;
         top: 170px;
@@ -189,11 +185,13 @@ const previous = () => {
           top: 140px;
           right: 6%;
         }
+
         @media (max-width: 767px) {
           display: none !important;
         }
       }
     }
+
     &::after {
       content: "";
       display: table;
@@ -205,9 +203,11 @@ const previous = () => {
       width: 100vw;
       display: flex;
       align-items: center;
+
       @media (max-width: 1200px) {
         height: 84vh;
       }
+
       @media (max-width: 991px) {
         width: 150vw;
       }
@@ -215,41 +215,55 @@ const previous = () => {
 
     .main-block {
       height: 82vh;
+
+      .navbar {
+        right: 50%;
+        position: absolute;
+      }
     }
 
     .map-block {
       height: 100vh;
+
       .content {
         width: 100%;
         height: 100%;
         display: flex;
+
         .map,
         .list {
           @media (max-width: 991px) {
             width: 100%;
           }
         }
+
         .map {
           width: 60%;
         }
+
         .list {
           width: 40%;
+
           img {
             width: 200px;
             margin-right: 20px;
             border-radius: 5px;
             box-shadow: 2px 2px 4px #aaaaaa;
           }
+
           h2 {
             font-size: 18px;
           }
+
           h2,
           p {
             line-height: 30px;
           }
+
           .v-list-item {
             padding: 30px 20px;
             border-bottom: 1px solid #cccccc;
+
             .v-list-item__content {
               overflow: initial !important;
             }
@@ -269,16 +283,18 @@ const previous = () => {
     z-index: 1000;
     display: flex;
     align-items: center;
+
     @media (max-width: 1200px) {
       height: 16vh;
     }
+
     p {
       cursor: pointer;
       transition: all 0.3s;
+
       &:hover {
         opacity: 0.8;
       }
     }
   }
-}
-</style>
+}</style>

src/views/Login.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import axios from "axios";
-import Navbar from "@/components/NavbarSub.vue";
+import Navbar from "@/components/Navbar.vue";
 
 const handleSignIn = async (response) => {
   const credential = response.credential;