页面修改

src/components/label_link_picture/left.vue

 <template>
-  <!--圖片連結 - 圖左-->
+  <!--圖片連結 - 圖右-->
   <div class="q-mt-lg">
-    <section class="tour5 section-block">
-      <a @click="OpenNewUrl(plugData.LinkUrl1)" :title="plugData.TripTitle1" class="pd-img"
-        :style="{backgroundImage:`url('${(plugData.TripImage1&&plugData.TripImage1!=''?plugData.TripImage1:plugData.ImageUrl1)}')`}"></a>
-      <a @click="OpenNewUrl(plugData.LinkUrl2)" :title="plugData.TripTitle2" class="pd-img"
-        :style="{backgroundImage:`url('${(plugData.TripImage2&&plugData.TripImage2!=''?plugData.TripImage2:plugData.ImageUrl2)}')`}"></a>
+    <section class="tour6 section-block">
       <div class="pd-content">
         <h2 class="block-title">{{plugData.Title}}</h2>
         <p class="title-teaser">
           {{plugData.Describe}}
         </p>
       </div>
+      <a @click="OpenNewUrl(plugData.LinkUrl1)" :title="plugData.TripTitle1" class="pd-img"
+        :style="{backgroundImage:`url('${(plugData.TripImage1&&plugData.TripImage1!=''?plugData.TripImage1:plugData.ImageUrl1)}')`}"></a>
+      <a  @click="OpenNewUrl(plugData.LinkUrl2)" :title="plugData.TripTitle2" class="pd-img"
+        :style="{backgroundImage:`url('${(plugData.TripImage2&&plugData.TripImage2!=''?plugData.TripImage2:plugData.ImageUrl2)}')`}"></a>
     </section>
   </div>
 </template>
@@ -24,37 +24,37 @@
 </script>
 
 <style>
-  .tour5 {
+  .tour6 {
     display: flex;
     padding: 20px 0;
     flex-wrap: wrap;
   }
 
-  .tour5>* {
+  .tour6>* {
     display: block;
     margin-right: 20px;
     flex-basis: calc(33.333% - 15px);
   }
 
-  .tour5 .pd-img::before {
+  .tour6 .pd-img::before {
     content: "";
     float: left;
     padding-top: 100%;
     box-sizing: border-box;
   }
 
-  .tour5 .pd-img {
+  .tour6 .pd-img {
     background-size: cover;
     background-position: center;
     text-decoration: none;
     color: var(--q-color-primary);
   }
 
-  .tour5> :nth-child(3n) {
+  .tour6> :nth-child(3n) {
     margin-right: 0;
   }
 
-  .tour5 .pd-content .block-title {
+  .tour6 .pd-content .block-title {
     font-size: 32px;
     font-weight: 600;
     padding: 0;
@@ -62,7 +62,7 @@
     line-height: unset;
   }
 
-  .tour5 .pd-content .title-teaser {
+  .tour6 .pd-content .title-teaser {
     font-size: 16px;
     color: #666;
     line-height: 1.8;
@@ -71,26 +71,26 @@
   }
 
   @media only screen and (max-width: 800px) {
-    .tour5 {
+    .tour6 {
       padding: 20px;
     }
   }
 
   @media only screen and (max-width: 1200px) {
-    .tour5>* {
-      flex-basis: calc(50% - 10px);
+    .tour6>* {
+      flex-basis: calc(50% - 10px) !important;
       margin-bottom: 20px;
     }
 
-    .tour5> :nth-child(even) {
-      margin-right: 0;
+    .tour6> :nth-child(3n) {
+      margin-right: 0 !important;
     }
 
-    .tour5 .pd-content {
-      padding: 0 10px;
-      margin-bottom: 0;
-      margin-right: 0;
-      flex-basis: 100%;
+    .tour6 .pd-content {
+      padding: 0 10px !important;
+      margin-bottom: 20px !important;
+      margin-right: 0 !important;
+      flex-basis: 100% !important;
     }
   }
 

src/components/label_link_picture/right.vue

 <template>
-  <!--圖片連結 - 圖右-->
+  <!--圖片連結 - 圖左-->
   <div class="q-mt-lg">
-    <section class="tour6 section-block">
+    <section class="tour5 section-block">
+      <a @click="OpenNewUrl(plugData.LinkUrl1)" :title="plugData.TripTitle1" class="pd-img"
+        :style="{backgroundImage:`url('${(plugData.TripImage1&&plugData.TripImage1!=''?plugData.TripImage1:plugData.ImageUrl1)}')`}"></a>
+      <a @click="OpenNewUrl(plugData.LinkUrl2)" :title="plugData.TripTitle2" class="pd-img"
+        :style="{backgroundImage:`url('${(plugData.TripImage2&&plugData.TripImage2!=''?plugData.TripImage2:plugData.ImageUrl2)}')`}"></a>
       <div class="pd-content">
         <h2 class="block-title">{{plugData.Title}}</h2>
         <p class="title-teaser">
           {{plugData.Describe}}
         </p>
       </div>
-      <a @click="OpenNewUrl(plugData.LinkUrl1)" :title="plugData.TripTitle1" class="pd-img"
-        :style="{backgroundImage:`url('${(plugData.TripImage1&&plugData.TripImage1!=''?plugData.TripImage1:plugData.ImageUrl1)}')`}"></a>
-      <a  @click="OpenNewUrl(plugData.LinkUrl2)" :title="plugData.TripTitle2" class="pd-img"
-        :style="{backgroundImage:`url('${(plugData.TripImage2&&plugData.TripImage2!=''?plugData.TripImage2:plugData.ImageUrl2)}')`}"></a>
     </section>
   </div>
 </template>
@@ -24,37 +24,37 @@
 </script>
 
 <style>
-  .tour6 {
+  .tour5 {
     display: flex;
     padding: 20px 0;
     flex-wrap: wrap;
   }
 
-  .tour6>* {
+  .tour5>* {
     display: block;
     margin-right: 20px;
     flex-basis: calc(33.333% - 15px);
   }
 
-  .tour6 .pd-img::before {
+  .tour5 .pd-img::before {
     content: "";
     float: left;
     padding-top: 100%;
     box-sizing: border-box;
   }
 
-  .tour6 .pd-img {
+  .tour5 .pd-img {
     background-size: cover;
     background-position: center;
     text-decoration: none;
     color: var(--q-color-primary);
   }
 
-  .tour6> :nth-child(3n) {
+  .tour5> :nth-child(3n) {
     margin-right: 0;
   }
 
-  .tour6 .pd-content .block-title {
+  .tour5 .pd-content .block-title {
     font-size: 32px;
     font-weight: 600;
     padding: 0;
@@ -62,7 +62,7 @@
     line-height: unset;
   }
 
-  .tour6 .pd-content .title-teaser {
+  .tour5 .pd-content .title-teaser {
     font-size: 16px;
     color: #666;
     line-height: 1.8;
@@ -71,26 +71,26 @@
   }
 
   @media only screen and (max-width: 800px) {
-    .tour6 {
+    .tour5 {
       padding: 20px;
     }
   }
 
   @media only screen and (max-width: 1200px) {
-    .tour6>* {
-      flex-basis: calc(50% - 10px) !important;
+    .tour5>* {
+      flex-basis: calc(50% - 10px);
       margin-bottom: 20px;
     }
 
-    .tour6> :nth-child(3n) {
-      margin-right: 0 !important;
+    .tour5> :nth-child(even) {
+      margin-right: 0;
     }
 
-    .tour6 .pd-content {
-      padding: 0 10px !important;
-      margin-bottom: 20px !important;
-      margin-right: 0 !important;
-      flex-basis: 100% !important;
+    .tour5 .pd-content {
+      padding: 0 10px;
+      margin-bottom: 0;
+      margin-right: 0;
+      flex-basis: 100%;
     }
   }