fix responsive

src/assets/scss/style.scss

@@ -325,6 +325,9 @@ body {
 
 .history__block {
   margin-bottom: 4rem;
+  @include small {
+    margin-bottom: 2rem;
+  }
 }
 
 .calendar-parent {
@@ -832,4 +835,10 @@ input[type="radio"]:checked + label {
   }
 }
 
+.relBlock {
+  @include small {
+    flex-direction: column;
+  }
+}
+
 

src/views/Trends.vue

@@ -41,7 +41,7 @@
                     <button class='sub__date' @click.once.prevent="getHisTops(singledate)">套用</button>
                 </div>
             <div class="row mb-3">
-                <div class="col-3 mb-3" v-for="(htop, i) in HisTops" :key="htop[0]">
+                <div class="col-6 col-md-3 mb-3" v-for="(htop, i) in HisTops" :key="htop[0]">
                     <a href="" class="popular__card" @click.prevent="search(htop[1])">
                         <div class="card">
                             <div class="card-content d-flex align-items-center justify-content-around">
@@ -67,7 +67,7 @@
                     <span class="btn__delete" @click.prevent.stop="deleteWord(item)">X</span>
                 </span>
             </div>
-            <div class="mb-3 d-flex align-items-center justify-content-between">
+            <div class="relBlock mb-3 d-flex align-items-center justify-content-between">
                 <div>
                     <h2 class="text-muted kw__title">關鍵字</h2>
                     <span class="kw__query">{{ query.trim() }}</span>
@@ -93,7 +93,7 @@
                 </div> -->
             </div>
             <div class="row">
-                <div class="col-12 col-md-6 text-left hotWord">
+                <div class="col-12 col-md-6 text-left hotWord mb-5">
                     <h3 class="usernews__table__title">正在熱搜關鍵字</h3>
                     <div class="row justify-content-center">
                         <b-card class="col-5 hotWord__card mr-2">
@@ -149,7 +149,7 @@
                             </template>
                         </tr>
                     </table>
-                    <div>
+                    <div class="text-center">
                         <button class="prenxt-btn" @click.prevent="prevnext('prev')" :class="{'disabled': page === 0}"><i class="fas fa-chevron-left"></i></button>
                         <button class="prenxt-btn" @click.prevent="prevnext('next')" :class="{'disabled': page >= totalPages-1 }"><i class="fas fa-chevron-right"></i></button>
                     </div>
@@ -260,6 +260,7 @@ export default {
             // vm.isLoading = true;
             vm.$http.get(`http://api.ptt.cx:8000/ts_top?td=${vm.initialdate[1]}&tc=${vm.topAmount}`, {headers: {'Access-Control-Allow-Origin': '*'}}).then(res => {
                 console.log(res.data);
+
                 vm.tops = res.data;
                 vm.isLoading = false;
             });

src/views/Usernews.vue

@@ -52,18 +52,18 @@
             </div>
             <h3 class="usernews__table__title">其他賣家這麼賣</h3>
             <div class="mb-5 row align-items-center">
-                <div class="col-12 col-lg-9 col-table">
+                <div class="col-12 col-table">
                 <b-table striped hover sticky-header='400px'
                     :items="recommends"
                     :fields="fields" 
                     :sort-by.sync="sortBy"
                     :sort-desc.sync="sortDesc"></b-table>
                 </div>
-                <div class="col-12 col-lg-3">
+               <!--  <div class="col-12 col-lg-3">
                     <b-card shadow>
                         <ve-line :data="chartData[1]" :settings="chartSettings" :colors="color"></ve-line>
                     </b-card>
-                </div>
+                </div> -->
             </div>
         <!-- <h3 class="usernews__table__title">找文章靈感</h3>
         <div class="mb-4">