update

src/assets/css/style.css

@@ -93,7 +93,7 @@ input:focus-visible {
   }
 }
 .search input {
-  padding: 5px 35px 5px 15px;
+  padding: 5px 15px;
   border-radius: 100px;
   border: 1px solid #ccc;
   background-color: #fff;

src/assets/css/style.scss

@@ -95,7 +95,7 @@ input:focus-visible {
   }
 
   input {
-    padding: 5px 35px 5px 15px;
+    padding: 5px 15px;
     border-radius: 100px;
     border: 1px solid #ccc;
     background-color: #fff;

src/components/Navbar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive } from "vue";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 import { useMainStore } from "@/stores/store";
 import Login from "@/views/Login.vue";
 
@@ -28,7 +28,6 @@ function handleMouseEvents(event) {
 }
 
 function handleClick(url) {
-  console.log('handleClick', url);
   menuShow.value = false;
   collegeMenuShow.value = false;
   router.push(url);
@@ -109,7 +108,9 @@ const collegeList = reactive([
         >
           <ul>
             <li v-for="(item, index) in collegeList" :key="index">
-              <a href="javascript:;" @click="handleClick(item.url)">{{ item.title }}</a>
+              <a href="javascript:;" @click="handleClick(item.url)">{{
+                item.title
+              }}</a>
 
               <!-- <router-link :to="item.url">{{ item.title }}</router-link> -->
             </li>
@@ -196,7 +197,7 @@ const collegeList = reactive([
     }
 
     @media (max-width: 600px) {
-      top: 71px;
+      top: 103%;
     }
 
     &.slider {

src/main.js

@@ -1,4 +1,4 @@
-import { createApp,markRaw } from 'vue'
+import { createApp, markRaw } from 'vue'
 import '@/assets/css/style.css'
 import App from './App.vue'
 import router from "./router"
@@ -8,7 +8,7 @@ import { createPinia } from 'pinia'
 // Pinia Use Store
 const pinia = createPinia();
 pinia.use(({ store }) => {
-store.router = markRaw(router)
+    store.router = markRaw(router)
 });
 
 // Google Login

src/stores/store.js

@@ -8,14 +8,14 @@ export const useMainStore = defineStore('mainStore', {
     loginDialog: false, // 登入視窗
     profile: {}, // 使用者資訊
   }),
-  // getters: {
-  //   isMobile: () => {
-  //     // 判斷是否為手機裝置
-  //     return /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-  //       window.navigator.userAgent
-  //     );
-  //   },
-  // },
+  getters: {
+    isMobile: () => {
+      // 判斷是否為手機裝置
+      return /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        window.navigator.userAgent
+      );
+    },
+  },
   actions: {
     // 檢查登入狀態
     checkToken() {

src/views/Article.vue

@@ -156,6 +156,10 @@ const articleList = reactive([
   },
 ]);
 
+function getPDF(name) {
+  return `https://ntcri.org/pdf/${name}.pdf`;
+}
+
 // function getPDF(name) {
 //   let url;
 
@@ -333,15 +337,20 @@ function isAnchorLink(url) {
             :key="index"
             class="d-flex flex-column align-center px-3"
           >
-            <!-- <a
+            <a
               v-if="store.isMobile"
               :href="getPDF(item.fileName)"
               target="_blank"
             >
               <img :src="item.img" alt="" />
-            </a> -->
+            </a>
 
-            <img :src="item.img" alt="" @click="updatePDF(item.fileName)" />
+            <img
+              v-else
+              :src="item.img"
+              alt=""
+              @click="updatePDF(item.fileName)"
+            />
 
             <!-- <a :href="item.url" target="_blank">
               <img :src="item.img" alt="" />

src/views/News.vue

@@ -143,7 +143,7 @@ const categoryList = reactive([
           </v-btn>
         </div>
 
-        <div class="search pt-5 mb-10 me-16" ref="searchLocation">
+        <div class="search pt-5 mb-10 me-sm-16" ref="searchLocation">
           <span>
             <input
               v-model="searchInput"
@@ -187,18 +187,20 @@ const categoryList = reactive([
               class="d-flex flex-md-row flex-column align-center pa-5"
             >
               <v-row class="align-center">
-                <v-col cols="4">
+                <v-col cols="12" sm="4">
                   <router-link :to="`/news/${item.news_id}`" class="cover-img">
                     <img src="@/assets/img/img-04.jpg" alt="" />
                   </router-link>
                 </v-col>
-                <v-col cols="8">
-                  <section
-                    class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0"
-                  >
-                    <h2>{{ item.title }}</h2>
-                    <p v-html="item.content"></p>
-                  </section>
+                <v-col cols="12" sm="8">
+                  <router-link :to="`/news/${item.news_id}`" class="cover-img">
+                    <section
+                      class="d-flex flex-column px-1 px-sm-10 py-1 py-md-0"
+                    >
+                      <h2>{{ item.title }}</h2>
+                      <p v-html="item.content"></p>
+                    </section>
+                  </router-link>
                 </v-col>
               </v-row>
             </v-card>
@@ -292,6 +294,10 @@ const categoryList = reactive([
             font-size: 26px;
             font-weight: 500;
             line-height: 36px;
+            @media (max-width: 600px) {
+              font-size: 22px;
+              line-height: 30px;
+            }
           }
 
           p {
@@ -325,7 +331,7 @@ const categoryList = reactive([
 
             @media (max-width: 600px) {
               min-width: auto;
-              height: 200px;
+              height: 50vw;
             }
           }
         }

src/views/NewsDetail.vue

@@ -56,13 +56,13 @@ const news = reactive({
                 <p v-html="news.data.content"></p>
 
                 <div class="btn-block mt-10">
-                <v-btn rounded="xl" color="grey-darken-2" class="px-7">
-                  檔案下載
-                </v-btn>
-                <v-btn rounded="xl" color="grey-darken-2" class="px-7 ms-3">
-                  前往連結
-                </v-btn>
-              </div>
+                  <v-btn rounded="xl" color="grey-darken-2" class="px-7">
+                    檔案下載
+                  </v-btn>
+                  <v-btn rounded="xl" color="grey-darken-2" class="px-7 ms-3">
+                    前往連結
+                  </v-btn>
+                </div>
               </section>
             </v-col>
           </v-row>
@@ -80,16 +80,6 @@ const news = reactive({
 .btn-block {
   display: flex;
   justify-content: end;
-  // position: absolute;
-  // bottom: 80px;
-  // right: 180px;
-  // @media (max-width: 600px) {
-  //   bottom: 65px;
-  //   right: unset;
-  //   width: 100%;
-  //   display: flex;
-  //   justify-content: center;
-  // }
 }
 
 .content {
@@ -98,15 +88,12 @@ const news = reactive({
   background-position: center;
   background-size: cover;
   border-radius: 50px;
+  @media (max-width: 960px) {
+    width: 90%;
+    margin: auto;
+  }
 }
 .article {
-  // position: absolute;
-  // right: 0;
-  // left: 0;
-  // top: 75px;
-  // height: 780px;
-  // overflow-y: scroll;
-  // overflow-x: hidden;
   margin: auto;
   padding: 80px 50px;
   display: flex;
@@ -114,18 +101,13 @@ const news = reactive({
   border: 1px solid #d4d6d8;
   border-radius: 50px;
 
-  // background-image: url('@/assets/img/news/news-detail-banner.png');
-  // background-position: center;
-  // background-size: cover;
-
-  @media (max-width: 960px) {
-    width: 80%;
-  }
+  // @media (max-width: 960px) {
+  //   width: 80%;
+  // }
 
   @media (max-width: 600px) {
-    top: 55px;
-    height: 470px;
-    padding-top: 10px;
+    padding-top: 50px;
+    border: none;
   }
 
   h2 {
@@ -139,8 +121,6 @@ const news = reactive({
     height: 100%;
     padding: 30px;
     p {
-      // padding: 20px;
-      // margin-bottom: 20px;
       font-size: 18px;
       font-weight: 400;
       line-height: 32px;