🚑 optimizate mobile list page CLS

nicejade · Aug 29, 2022 · 5b701f8 · 5b701f8
1 parent cf56c05
commit 5b701f8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/src/components/linksList/Index.vue b/src/components/linksList/Index.vue
@@ -7,28 +7,16 @@
             <h4>{{ $t('warmReminder') }}</h4>
           </div>
           <div class="no-result-tip">
-            <img
-              class="no-result-img"
-              src="https://image.nicelinks.site/no-result.svg"
-              :alt="$t('description')"
-            />
+            <img class="no-result-img" src="https://image.nicelinks.site/no-result.svg" :alt="$t('description')" />
             <div v-html="$t('noResultTip')"></div>
           </div>
         </el-card>
         <content-placeholder v-else slot="link-desc" :rows="placeholderRows" />
       </div>
     </el-card>
     <el-card v-else :class="cardClassName" shadow="hover" :key="item._id" v-for="item in pdata">
-      <a
-        class="gtag-track"
-        data-action="route-entry"
-        data-category="list"
-        data-label="route-entry"
-        :href="getAssembleRoute(item)"
-        target="_blank"
-        ref="bookmark"
-        v-if="isAbstract"
-      >
+      <a class="gtag-track" data-action="route-entry" data-category="list" data-label="route-entry"
+        :href="getAssembleRoute(item)" @click="onListClick" target="_blank" ref="bookmark" v-if="isAbstract">
         <LinkItem :pitem="item" :is-abstract="isAbstract"> </LinkItem>
       </a>
       <LinkItem v-else :pitem="item" :is-abstract="isAbstract"></LinkItem>
@@ -81,12 +69,18 @@ export default {
     ContentPlaceholder,
   },
 
-  created() {},
+  created() { },
 
   methods: {
     getAssembleRoute(item) {
       return `/post/${item._id}`
     },
+
+    onListClick() {
+      if (window.IS_FROM_GOOGLE_ADS) {
+        window.gtag_report_conversion()
+      }
+    }
   },
 }
 </script>
@@ -98,14 +92,31 @@ export default {
 .main {
   .links-list {
     .single-moudle {
+      aspect-ratio: 2.8 / 1;
+
       &:hover {
         background-color: $white-grey;
       }
     }
 
     .el-card {
       text-align: left;
-      border-bottom: 1px solid $item-border-color !important;
+      border-bottom: 1px solid $item-border-color  !important;
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-screen) {
+  .main {
+    .links-list {
+      .single-moudle {
+        aspect-ratio: auto;
+        height: 22rem;
+
+        .el-card__body {
+          height: 100%;
+        }
+      }
     }
   }
 }

diff --git a/src/components/linksList/LinkItem.vue b/src/components/linksList/LinkItem.vue
@@ -18,8 +18,8 @@
         </div>
       </div>
     </div>
-    <h2 class="title mb-normal">
-      <a v-if="isAbstract" class="title-link" :href="'/post/' + item._id"
+    <h2 class="mb-normal" :style="isAbstract ? '' : 'margin-top: 3rem;'">
+      <a v-if="isAbstract" class="title-link text-ellipsis" :href="'/post/' + item._id"
         @click.stop="onStopPropagationClick('list-title', 'list')">
         {{ item.title }}</a>
       <a v-else class="title-link" :href="getRedirectLink(item.urlPath, item.alive)"
@@ -41,7 +41,7 @@
         @click.stop="onStopPropagationClick('tags')" target="_blank" rel="noopener">{{ iitem }}</a>
     </div>
     <!-- list is abstract: 是否显示摘要内容  -->
-    <div class="abstract" v-if="isAbstract">
+    <div class="abstract mb-normal" style="-webkit-box-orient: vertical;" v-if="isAbstract">
       {{ getAbstractContent(item) }}
     </div>
     <div v-if="!isAbstract">
@@ -400,36 +400,30 @@ export default {
 }
 
 .content {
-  margin: 5px;
-
-  .title {
-    margin-top: 3rem;
-
-    .title-link {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      font-size: 1.8rem;
-      font-weight: bolder;
-      line-height: 1.2;
-      text-decoration: none;
-      color: $link-title;
-      transition: color 0.3s ease-in;
-
-      &:hover {
-        transition: color 0.3s ease-out;
-        color: $link-title-hover;
-      }
+  .title-link {
+    font-size: 1.8rem;
+    font-weight: bolder;
+    line-height: 1.2;
+    text-decoration: none;
+    color: $link-title;
+    transition: color 0.3s ease-in;
+
+    &:hover {
+      transition: color 0.3s ease-out;
+      color: $link-title-hover;
     }
   }
 
   .abstract {
     width: 100%;
-    margin-bottom: 1rem;
     font-size: $font-small;
     color: $black-grey;
     line-height: 1.5;
     letter-spacing: 0.02rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .operate-area {