🚑 optimizate page CLS

nicejade · Aug 31, 2022 · 0696db0 · 0696db0
1 parent 1857eeb
commit 0696db0
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 214 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nicelinks-vue-client",
-  "version": "2.17.0",
+  "version": "2.18.1",
   "description": "A nice website for assembling nice links created using Vue.js",
   "author": "jeffjade <[email protected]>",
   "private": true,
@@ -139,4 +139,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}
diff --git a/src/components/Elevator.vue b/src/components/Elevator.vue
@@ -3,20 +3,14 @@
     <div class="tooltip">
       <div class="pannel">
         <div class="item">
-          <img
-            class="qrcode"
-            src="https://image.nicelinks.site/qrcode_jqx.jpg"
-            alt="晚晴幽草轩-公众号"
-          />
+          <img class="qrcode" src="https://image.nicelinks.site/qrcode_jqx.jpg" alt="晚晴幽草轩-公众号" />
           <span class="text font-medium">晚晴幽草轩</span>
           <span class="text">微信扫码关注</span>
         </div>
         <div class="item">
-          <img
-            class="qrcode"
+          <img class="qrcode"
             src="https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg?imageView2/1/w/250/h/250/interlace/1/ignore-error/1"
-            alt="倾城之链-小程序"
-          />
+            alt="倾城之链-小程序" />
           <span class="text font-medium">倾城之链</span>
           <span class="text">微信扫码体验</span>
         </div>
@@ -25,25 +19,11 @@
         <icon class="qrcode" name="qrcode"></icon>
       </div>
     </div>
-    <a
-      target="_blank"
-      class="outside-link-btn gtag-track"
-      data-action="recommend-btn"
-      data-category="elevator"
-      data-label="recommend-btn"
-      rel="noopener"
-      :href="reportPath"
-      >投稿
+    <a target="_blank" class="outside-link-btn gtag-track" data-action="recommend-btn" data-category="elevator"
+      data-label="recommend-btn" rel="noopener" :href="reportPath">投稿
     </a>
-    <a
-      target="_blank"
-      class="outside-link-btn gtag-track"
-      data-action="feedback-btn"
-      data-category="elevator"
-      data-label="feedback-btn"
-      rel="noopener"
-      :href="reportPath"
-      >反馈
+    <a target="_blank" class="outside-link-btn gtag-track" data-action="feedback-btn" data-category="elevator"
+      data-label="feedback-btn" rel="noopener" :href="reportPath">反馈
     </a>
   </div>
 </template>
@@ -99,6 +79,7 @@ $factor: 1rem;
   margin: 1rem 0;
   outline: none;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+
   &:hover {
     cursor: pointer;
     animation: jelly 0.5s;
@@ -108,11 +89,13 @@ $factor: 1rem;
 .tooltip {
   position: relative;
   display: inline-block;
+
   &:hover {
     .pannel {
       visibility: visible;
     }
   }
+
   .pannel {
     position: absolute;
     bottom: -9.25 * $factor;
@@ -129,6 +112,7 @@ $factor: 1rem;
     height: 26 * $factor;
     padding: 2 * $factor;
     border-radius: 2 * $factor;
+
     &:before {
       content: '';
       position: absolute;
@@ -140,43 +124,53 @@ $factor: 1rem;
       border-left: $factor solid $white;
       border-bottom: $factor solid transparent;
     }
+
     .item {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
       width: 18 * $factor;
       height: 100%;
+
       .qrcode {
         width: 16 * $factor;
         height: 16 * $factor;
+        aspect-ratio: 1 / 1;
       }
+
       .text {
         font-size: 1.6 * $factor;
         color: $common-link;
       }
     }
   }
+
   .connect {
     .qrcode {
-      width: 3 * $factor !important;
-      height: 3 * $factor !important;
+      width: 3 * $factor  !important;
+      height: 3 * $factor  !important;
       margin: 0 auto;
       transform: scale(1);
     }
   }
 }
+
 @keyframes jelly {
+
   0%,
   100% {
     transform: scale(1, 1);
   }
+
   25% {
     transform: scale(0.9, 1.1);
   }
+
   50% {
     transform: scale(1.1, 0.9);
   }
+
   75% {
     transform: scale(0.95, 1.05);
   }

diff --git a/src/components/Waline.vue b/src/components/Waline.vue
@@ -46,7 +46,7 @@ export default {
 
         label,
         input {
-          font-size: 1.4rem;
+          font-size: 1.2rem;
         }
       }
 
@@ -63,7 +63,12 @@ export default {
   .wl-content,
   .wl-count,
   .wl-empty {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
+  }
+
+  .wl-action:nth-child(1),
+  .wl-action:nth-child(3) {
+    display: none;
   }
 
   .vbtn {

diff --git a/src/components/linksList/LinkItem.vue b/src/components/linksList/LinkItem.vue
@@ -507,13 +507,14 @@ export default {
     @include flex-box-center(row, start, center);
 
     .avatar {
+      position: relative;
       float: left;
-      border-radius: 50%;
-      height: 6rem;
       width: 6rem;
+      height: 6rem;
+      border-radius: 50%;
       box-shadow: 0px 10px 30px 0px rgba(0, 64, 128, 0.1);
-      position: relative;
       margin: 0;
+      aspect-ratio: 1 / 1;
     }
 
     .user-info {

diff --git a/src/components/sidebar/AdsPosition.vue b/src/components/sidebar/AdsPosition.vue
@@ -1,16 +1,10 @@
 <template>
   <div id="jade-gg-position">
     <h2 class="aside-widget-title">{{ $t('adPosition') }}</h2>
-    <el-carousel
-      trigger="click"
-      class="jade-gg-body"
-      indicator-position="outside"
-      :interval="5000"
-      height="255px"
-    >
+    <el-carousel trigger="click" class="jade-gg-body" indicator-position="outside" :interval="5000" height="255px">
       <el-carousel-item v-for="item in advertsList" :key="item.item">
-        <a :href="item.path" target="_blank" rel="noopener">
-          <img :src="item.image" :alt="item.alt" />
+        <a class="link" :href="item.path" target="_blank" rel="noopener">
+          <img class="img" :src="item.image" :alt="item.alt" />
         </a>
       </el-carousel-item>
     </el-carousel>
@@ -38,11 +32,24 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #jade-gg-position {
   .jade-gg-body {
-    overflow: hidden;
     width: 100%;
+    overflow: hidden;
+
+    .link {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      .img {
+        display: block;
+        width: 25rem;
+        height: auto;
+        aspect-ratio: 1 / 1;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/sidebar/AwesomeSentence.vue b/src/components/sidebar/AwesomeSentence.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="awesome-sentence" class="awesome-sentence">
     <div class="lined-paper" v-show="currentSentenceStr" v-loading="isLoading">
-      <preview-md id="sentence" :value="currentSentenceStr || $t('noFill')" />
+      <preview-md class="sentence" id="sentence" :value="currentSentenceStr || $t('noFill')" />
     </div>
     <div class="btn-group">
       <el-button class="common-btn" @click="onPreviousClick">
@@ -60,7 +60,7 @@ export default {
     PreviewMd,
   },
 
-  mounted() {},
+  mounted() { },
 
   watch: {
     'sentence.content': function (val = '') {
@@ -188,6 +188,12 @@ export default {
     -o-background-size: 100% 26px;
     background-size: 100% 26px;
 
+    .sentence {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1 / 1;
+    }
+
     div,
     p {
       line-height: 26px;

diff --git a/src/components/sidebar/FriendshipLinks.vue b/src/components/sidebar/FriendshipLinks.vue
@@ -1,12 +1,6 @@
 <template>
   <div id="friendship-links">
-    <a
-      target="_blank"
-      class="friendship-links"
-      rel="noopener"
-      @click="onFriendshipClick"
-      href="/friendlink"
-      >🤝友情链接
+    <a target="_blank" class="friendship-links" rel="noopener" @click="onFriendshipClick" href="/friendlink">🤝友情链接
     </a>
   </div>
 </template>
@@ -29,7 +23,11 @@ export default {
 
 <style scoped lang="scss">
 @import './../../assets/scss/variables.scss';
+
 .friendship-links {
+  display: inline-block;
+  width: 100%;
+  height: 2rem;
   font-size: $font-large;
   color: $jade;
   font-weight: 500;
@@ -39,6 +37,7 @@ export default {
   text-shadow: -15px 5px 20px $producthunt;
   transition: all 0.3s ease-out;
 }
+
 .friendship-links:hover {
   text-shadow: 0px 6px 20px $producthunt;
 }

diff --git a/src/components/sidebar/Main.vue b/src/components/sidebar/Main.vue
@@ -8,12 +8,9 @@
     <h2 class="aside-widget-title">{{ $t('friendshipLinks') }}</h2>
     <friendship-links class="sub-content" />
     <h2 class="aside-widget-title">{{ $t('miniprogramCode') }}</h2>
-    <div class="text-center">
-      <img
-        class="miniprogram"
-        alt="倾城之链.小程序"
-        src="https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg?imageView2/1/w/250/h/250/interlace/1/ignore-error/1"
-      />
+    <div class="sub-content">
+      <img class="miniprogram" alt="倾城之链.小程序"
+        src="https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg?imageView2/1/w/250/h/250/interlace/1/ignore-error/1" />
     </div>
     <h2 class="aside-widget-title">{{ $t('rewardme') }}</h2>
     <reward-me class="sub-content" />
@@ -108,8 +105,9 @@ export default {
   }
 
   .miniprogram {
-    display: block;
-    width: 100%;
+    display: inline-block;
+    width: 25rem;
+    height: auto;
     aspect-ratio: 1 / 1;
   }
 }

diff --git a/src/components/sidebar/RewardMe.vue b/src/components/sidebar/RewardMe.vue
@@ -111,14 +111,12 @@ export default {
   backface-visibility: hidden;
 }
 
-#reward .front .reward-img {
-  width: 100%;
-  max-width: 256px;
-}
-
+#reward .front .reward-img,
 #reward .back .reward-img {
-  width: 100%;
-  max-width: 256px;
+  display: inline-block;
+  width: 25rem;
+  height: auto;
+  aspect-ratio: 1 / 1;
 }
 
 #reward .back {

diff --git a/src/components/sidebar/SitesRecommend.vue b/src/components/sidebar/SitesRecommend.vue
@@ -1,12 +1,6 @@
 <template>
   <div id="sites-recommend">
-    <a
-      target="_blank"
-      class="nice-link-recommend"
-      rel="noopener"
-      @click="onRecommendClick"
-      :href="reportPath"
-      >👍优质网站推荐
+    <a target="_blank" class="nice-link-recommend" rel="noopener" @click="onRecommendClick" :href="reportPath">👍优质网站推荐
     </a>
   </div>
 </template>
@@ -33,7 +27,11 @@ export default {
 
 <style scoped lang="scss">
 @import './../../assets/scss/variables.scss';
+
 .nice-link-recommend {
+  display: inline-block;
+  width: 100%;
+  height: 2rem;
   font-size: $font-large;
   color: $jade;
   font-weight: 500;
@@ -43,6 +41,7 @@ export default {
   text-shadow: -15px 5px 20px $producthunt;
   transition: all 0.3s ease-out;
 }
+
 .nice-link-recommend:hover {
   text-shadow: 0px 6px 20px $producthunt;
 }