Merge pull request #7 from ZyqGitHub1/dev

修复bug
ZyqGitHub1 · Jul 21, 2019 · e192fd1 · e192fd1
2 parents ecb62f2 + 8d1792d
commit e192fd1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -62,6 +62,8 @@ module.exports = function (ctx) {
         'QPageSticky',
         'QInput',
         'QSeparator',
+        'QChip',
+        'QTooltip',
       ],
 
       directives: ['Ripple'],

diff --git a/src/pages/VideoList.vue b/src/pages/VideoList.vue
@@ -3,7 +3,7 @@
     <q-scroll-area style="height: calc(100vh - 198px);">
       <div class="q-pa-md row items-start justify-center q-gutter-md">
         <q-card
-          class="my-card"
+          class="my-card cursor-pointer"
           v-for="video in videoList"
           :key="video.id"
           @click="gotoPlayer(video)"
@@ -13,16 +13,35 @@
             spinner-color="red"
             style="height: 200px;width: 290px"
           >
-            <div class="absolute-bottom text-subtitle1 text-center q-pa-xs">{{video.name}}</div>
+            <div
+              class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
+            >{{video.name}}</div>
             <template v-slot:error>
               <div class="absolute-full flex flex-center bg-negative text-white">
                 <span>Cannot load image</span>
+                <div
+                  class="absolute-bottom ellipsis text-subtitle1 text-center q-pa-xs"
+                >{{video.name}}</div>
               </div>
             </template>
           </q-img>
           <q-card-section>
-            <div class="text-h6">{{video.type}}</div>
-            <div class="text-subtitle2">{{ video.last }}</div>
+            <div class="text-h6 ellipsis title">
+              {{video.name}}
+              <q-tooltip>{{video.name}}</q-tooltip>
+            </div>
+            <q-chip
+              square
+              color="teal"
+              text-color="white"
+              icon="bookmark"
+            >{{video.type}}</q-chip>
+            <q-chip
+              square
+              color="teal"
+              text-color="white"
+              icon="event"
+            >{{video.last}}</q-chip>
           </q-card-section>
         </q-card>
       </div>
@@ -71,13 +90,16 @@ export default {
       this.getVideoList(value);
     },
     currentSite() {
+      this.pagination.page = 1;
       this.getVideoList(1);
     },
     currentClass() {
+      this.pagination.page = 1;
       this.getVideoList(1);
     },
     keyWord(newKeyWord, oldKeyWord) {
       if (newKeyWord !== oldKeyWord) {
+        this.pagination.page = 1;
         this.getVideoList(1);
       }
     },
@@ -106,7 +128,7 @@ export default {
         .then(res => parseStringSync(res.data, { explicitArray: false }))
         .then((data) => {
           this.videoList = data.rss.list.video;
-          this.pagination.total = _toInteger(data.rss.list.$.recordcount);
+          this.pagination.total = _toInteger(data.rss.list.$.pagecount);
         })
         .catch(console.error)
         .finally(() => {
@@ -130,9 +152,13 @@ export default {
 };
 </script>
 
-<style>
+<style lang="stylus">
 .my-card {
   width: 100%;
   max-width: 290px;
+
+  .title {
+    margin: 4px;
+  }
 }
 </style>