update

src/assets/css/style.css

@@ -87,6 +87,11 @@ input:focus-visible {
 .search span {
   position: relative;
 }
+@media (max-width: 600px) {
+  .search span {
+    margin: auto;
+  }
+}
 .search input {
   padding: 5px 15px;
   border-radius: 100px;

src/assets/css/style.scss

@@ -88,6 +88,10 @@ input:focus-visible {
 
   span {
     position: relative;
+
+    @media (max-width: 600px) {
+      margin: auto;
+    }
   }
 
   input {

src/views/Article.vue

@@ -83,11 +83,11 @@ const breadcrumbs = reactive([
 const tagList = reactive([
   {
     title: "工藝書單",
-    url: "",
+    url: "#bookList",
   },
   {
     title: "線上閱讀",
-    url: "",
+    url: "#readList",
   },
   {
     title: "國際專欄",
@@ -252,7 +252,7 @@ function isAnchorLink(url) {
 
         <h2 id="articleList">國際專欄</h2>
 
-        <div class="search pt-5 mb-10 me-16" ref="searchLocation">
+        <div class="search pt-5 my-10 me-sm-16" ref="searchLocation">
           <span>
             <input v-model="searchInput" type="text" @keyup.enter="search()" />
             <button @click="search()">
@@ -285,7 +285,7 @@ function isAnchorLink(url) {
           </v-col>
         </v-row>
 
-        <h2>線上閱讀</h2>
+        <h2 id="readList">線上閱讀</h2>
 
         <v-row class="align-center justify-center my-16 read-list">
           <v-col
@@ -307,9 +307,9 @@ function isAnchorLink(url) {
 
         <PDFViewer />
 
-        <h2>工藝書單</h2>
+        <h2 id="bookList">工藝書單</h2>
 
-        <div class="search pt-10 pb-5 me-16" ref="searchLocation ">
+        <div class="search pt-5 my-10 me-sm-16" ref="searchLocation ">
           <span>
             <input v-model="searchInput" type="text" @keyup.enter="search()" />
             <button @click="search()">
@@ -411,7 +411,7 @@ h2 {
     right: -40px;
     bottom: -60px;
     z-index: 1;
-    background: #fff;
+    background: rgba(255, 255, 255, 0.8);
     border: 2px solid #c8cbcc;
 
     @media (max-width: 1280px) {
@@ -421,7 +421,7 @@ h2 {
     @media (max-width: 600px) {
       width: 330px;
       right: -3px;
-      bottom: -100px;
+      bottom: -80px;
     }
 
     p {