Merge pull request #11 from ZyqGitHub1/dev

change scroll style
ZyqGitHub1 · Jul 24, 2019 · a640fbd · a640fbd
2 parents d4f6f2c + e167c63
commit a640fbd
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 19 deletions.
diff --git a/src/layouts/Home.vue b/src/layouts/Home.vue
@@ -67,24 +67,29 @@
         </div>
       </div>
       <q-separator />
-      <q-list separator>
-        <q-item
-          v-for="classInfo in videoClass"
-          :key="classInfo.$.id"
-          clickable
-          v-ripple
-          @click="changeClass(classInfo.$.id)"
-          :active="currentClass === classInfo.$.id"
-        >
-          <q-item-section>{{ classInfo._ }}</q-item-section>
-        </q-item>
-      </q-list>
-      <q-inner-loading :showing="loading">
-        <q-spinner-gears
-          size="50px"
-          color="primary"
-        />
-      </q-inner-loading>
+      <q-scroll-area
+        :thumb-style="thumbStyle"
+        class="class-list"
+      >
+        <q-list separator>
+          <q-item
+            v-for="classInfo in videoClass"
+            :key="classInfo.$.id"
+            clickable
+            v-ripple
+            @click="changeClass(classInfo.$.id)"
+            :active="currentClass === classInfo.$.id"
+          >
+            <q-item-section>{{ classInfo._ }}</q-item-section>
+          </q-item>
+        </q-list>
+        <q-inner-loading :showing="loading">
+          <q-spinner-gears
+            size="50px"
+            color="primary"
+          />
+        </q-inner-loading>
+      </q-scroll-area>
     </q-drawer>
 
     <q-drawer
@@ -298,6 +303,15 @@ export default {
         this.$store.commit('setHttps', value);
       },
     },
+    thumbStyle() {
+      return {
+        right: '2px',
+        borderRadius: '5px',
+        backgroundColor: '#027be3',
+        width: '5px',
+        opacity: 0.75,
+      };
+    },
   },
 };
 </script>
@@ -310,4 +324,8 @@ export default {
 .serch {
   margin-top: 24px;
 }
+
+.class-list {
+  height: calc(100% - 100px)
+}
 </style>
diff --git a/src/pages/VideoList.vue b/src/pages/VideoList.vue
@@ -1,6 +1,9 @@
 <template>
   <q-page padding>
-    <q-scroll-area style="height: calc(100vh - 198px);">
+    <q-scroll-area
+      style="height: calc(100vh - 198px);"
+      :thumb-style="thumbStyle"
+    >
       <div class="q-pa-md row items-start justify-center q-gutter-md">
         <q-card
           class="my-card cursor-pointer"
@@ -148,6 +151,15 @@ export default {
       https: state => state.app.https,
       keyWord: state => state.site.keyWord,
     }),
+    thumbStyle() {
+      return {
+        right: '2px',
+        borderRadius: '5px',
+        backgroundColor: '#027be3',
+        width: '5px',
+        opacity: 0.75,
+      };
+    },
   },
 };
 </script>