diff --git a/package.json b/package.json
index 866f4126..5cc8e9e3 100644
--- 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 <jeffygisgreat@gmail.com>",
   "private": true,
@@ -139,4 +139,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Elevator.vue b/src/components/Elevator.vue
index f7d7a453..25cfd586 100644
--- 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,6 +124,7 @@ $factor: 1rem;
       border-left: $factor solid $white;
       border-bottom: $factor solid transparent;
     }
+
     .item {
       display: flex;
       flex-direction: column;
@@ -147,36 +132,45 @@ $factor: 1rem;
       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
index 1857490b..f82f55d4 100644
--- 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
index ef218b18..89915486 100644
--- 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
index 9405b5d2..17fe2fa2 100644
--- 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
index e2f7b12f..432a81f8 100644
--- 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
index 69db0200..392c6779 100644
--- 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
index 59fa9dec..eb7f9efb 100644
--- 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
index 2475ccb2..dcc0ae5f 100644
--- 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
index 8b6eae99..86dc9477 100644
--- 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;
 }
diff --git a/src/partials/FooterNav.vue b/src/partials/FooterNav.vue
index 517c2b6a..edde783a 100644
--- a/src/partials/FooterNav.vue
+++ b/src/partials/FooterNav.vue
@@ -4,121 +4,46 @@
       <div class="container">
         <div class="list-item show-on-big-screen">
           <p class="title">公众号</p>
-          <img
-            width="100"
-            src="https://image.nicelinks.site/qrcode_jqx.jpg"
-            alt="晚晴幽草轩 | 公众号"
-          />
+          <img class="image" src="https://image.nicelinks.site/qrcode_jqx.jpg" alt="晚晴幽草轩 | 公众号" />
         </div>
         <div class="list-item">
           <p class="title">产品</p>
-          <a
-            class="nice-link gtag-track"
-            data-action="explore-skill"
-            data-category="footer"
-            data-label="explore-skill"
-            href="https://nicelinks.site/explore/skill"
-            >技术客栈
+          <a class="nice-link gtag-track" data-action="explore-skill" data-category="footer" data-label="explore-skill"
+            href="https://nicelinks.site/explore/skill">技术客栈
           </a>
-          <a
-            class="nice-link gtag-track"
-            data-action="explore-resource"
-            data-category="footer"
-            data-label="explore-resource"
-            href="https://nicelinks.site/explore/resource"
-            >资源之家
+          <a class="nice-link gtag-track" data-action="explore-resource" data-category="footer"
+            data-label="explore-resource" href="https://nicelinks.site/explore/resource">资源之家
           </a>
-          <a
-            class="nice-link gtag-track"
-            data-action="explore-life"
-            data-category="footer"
-            data-label="explore-life"
-            href="https://nicelinks.site/explore/life"
-            >写意人生
+          <a class="nice-link gtag-track" data-action="explore-life" data-category="footer" data-label="explore-life"
+            href="https://nicelinks.site/explore/life">写意人生
           </a>
-          <a
-            class="nice-link gtag-track"
-            data-action="explore-info"
-            data-category="footer"
-            data-label="explore-info"
-            href="https://nicelinks.site/explore/info"
-            >信息快讯
+          <a class="nice-link gtag-track" data-action="explore-info" data-category="footer" data-label="explore-info"
+            href="https://nicelinks.site/explore/info">信息快讯
           </a>
         </div>
         <div class="list-item">
           <p class="title">合作</p>
-          <a
-            class="nice-link gtag-track"
-            data-action="about"
-            data-category="footer"
-            data-label="about"
-            href="/about"
-            >关于我们</a
-          >
-          <a
-            class="nice-link gtag-track"
-            data-action="business"
-            data-category="footer"
-            data-label="business"
-            href="/business"
-            >广告投放</a
-          >
-          <a
-            class="nice-link gtag-track"
-            data-action="sponsor"
-            data-category="footer"
-            data-label="sponsor"
-            href="/sponsor"
-            >倾情捐赠
+          <a class="nice-link gtag-track" data-action="about" data-category="footer" data-label="about"
+            href="/about">关于我们</a>
+          <a class="nice-link gtag-track" data-action="business" data-category="footer" data-label="business"
+            href="/business">广告投放</a>
+          <a class="nice-link gtag-track" data-action="sponsor" data-category="footer" data-label="sponsor"
+            href="/sponsor">倾情捐赠
           </a>
-          <a
-            target="_blank"
-            rel="noopener"
-            class="nice-link gtag-track"
-            data-action="weekly"
-            data-category="footer"
-            data-label="weekly"
-            href="https://blog.nicelinks.site/?ref=nicelinks.site"
-            >倾城博客
+          <a target="_blank" rel="noopener" class="nice-link gtag-track" data-action="weekly" data-category="footer"
+            data-label="weekly" href="https://blog.nicelinks.site/?ref=nicelinks.site">倾城博客
           </a>
         </div>
         <div class="list-item">
           <p class="title">推荐</p>
-          <a
-            class="nice-link gtag-track"
-            target="_blank"
-            data-action="jeffjade-com"
-            data-category="footer"
-            data-label="jeffjade-com"
-            href="https://www.jeffjade.com/?ref=nicelinks.site"
-            >晚晴幽草轩</a
-          >
-          <a
-            class="nice-link gtag-track"
-            target="_blank"
-            data-action="footkapp-lovejade"
-            data-category="footer"
-            data-label="footkapp-lovejade"
-            href="https://quickapp.lovejade.cn/?ref=nicelinks.site"
-            >静轩之别苑</a
-          >
-          <a
-            class="nice-link gtag-track"
-            target="_blank"
-            data-action="forum-lovejade"
-            data-category="footer"
-            data-label="forum-lovejade"
-            href="https://forum.lovejade.cn/?ref=nicelinks.site"
-            >悠然宜想亭</a
-          >
-          <a
-            class="nice-link gtag-track"
-            target="_blank"
-            data-action="wiki-lovejade"
-            data-label="wiki-lovejade"
-            href="https://wiki.lovejade.cn/?ref=nicelinks.site"
-            >清风明月阁</a
-          >
+          <a class="nice-link gtag-track" target="_blank" data-action="jeffjade-com" data-category="footer"
+            data-label="jeffjade-com" href="https://www.jeffjade.com/?ref=nicelinks.site">晚晴幽草轩</a>
+          <a class="nice-link gtag-track" target="_blank" data-action="footkapp-lovejade" data-category="footer"
+            data-label="footkapp-lovejade" href="https://quickapp.lovejade.cn/?ref=nicelinks.site">静轩之别苑</a>
+          <a class="nice-link gtag-track" target="_blank" data-action="forum-lovejade" data-category="footer"
+            data-label="forum-lovejade" href="https://forum.lovejade.cn/?ref=nicelinks.site">悠然宜想亭</a>
+          <a class="nice-link gtag-track" target="_blank" data-action="wiki-lovejade" data-label="wiki-lovejade"
+            href="https://wiki.lovejade.cn/?ref=nicelinks.site">清风明月阁</a>
         </div>
       </div>
       <div class="contact">
@@ -126,45 +51,20 @@
           <img class="tooltip-img" src="https://image.nicelinks.site/qrcode_jqx.jpg" alt="静晴轩" />
           <icon class="icons" name="weixin"></icon>
         </div>
-        <a
-          v-for="item in contactArray"
-          :data-action="'social-' + item.class"
-          data-category="footer"
-          :data-label="'social-' + item.class"
-          :href="assembleExternalLink(item.path + item.name)"
-          :title="item.title"
-          target="_blank"
-          rel="noopener"
-          :class="item.class"
-          class="social-btn gtag-track"
-        >
+        <a v-for="item in contactArray" :data-action="'social-' + item.class" data-category="footer"
+          :data-label="'social-' + item.class" :href="assembleExternalLink(item.path + item.name)" :title="item.title"
+          target="_blank" rel="noopener" :class="item.class" class="social-btn gtag-track">
           <icon class="icons" :name="item.class"></icon>
         </a>
       </div>
       <div class="icp">
         <span>{{ copyright }}</span>
-        <a
-          class="link gtag-track"
-          data-action="link-jeffjade"
-          data-category="footer"
-          data-label="link-jeffjade"
-          href="https://www.jeffjade.com?utm_source=nicelinks.site"
-          target="_blank"
-          rel="noopener"
-          >晚晴幽草轩</a
-        >
+        <a class="link gtag-track" data-action="link-jeffjade" data-category="footer" data-label="link-jeffjade"
+          href="https://www.jeffjade.com?utm_source=nicelinks.site" target="_blank" rel="noopener">晚晴幽草轩</a>
         出品
         <br class="show-on-small-screen" />
-        <a
-          class="beian-link gtag-track"
-          data-action="beian"
-          data-category="footer"
-          data-label="beian"
-          href="https://beian.miit.gov.cn/"
-          target="_blank"
-          rel="noopener"
-          >粤ICP备17099767号</a
-        >
+        <a class="beian-link gtag-track" data-action="beian" data-category="footer" data-label="beian"
+          href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">粤ICP备17099767号</a>
         <img class="zero" src="/static/img/zero.gif" alt="深圳市市场监督管理局企业主体身份公示" />
       </div>
     </div>
@@ -252,9 +152,16 @@ export default {
           color: $black;
         }
 
+        .image {
+          display: block;
+          width: 10rem;
+          height: auto;
+          aspect-ratio: 1 / 1;
+        }
+
         .nice-link {
           display: block;
-          margin: 1rem 0;
+          padding: .6rem 0;
           font-weight: 400;
           color: $footer-grey;
         }
@@ -267,7 +174,7 @@ export default {
 
       .beian-link {
         margin-left: 15px;
-        color: $black-grey !important;
+        color: $black-grey  !important;
       }
 
       .zero {
diff --git a/src/partials/HeaderNav.vue b/src/partials/HeaderNav.vue
index b5bf7dbc..7a021f36 100644
--- a/src/partials/HeaderNav.vue
+++ b/src/partials/HeaderNav.vue
@@ -396,8 +396,10 @@ export default {
       float: right;
 
       .avatar {
-        height: 38px;
-        width: 38px;
+        display: block;
+        width: 4rem;
+        height: 4rem;
+        aspect-ratio: 1 / 1;
         box-shadow: 0 0 0 2px #fff;
         border-radius: 50%;
         position: relative;