💄 细节修改

src/components/Footer.vue

@@ -9,7 +9,7 @@
           </div>
         </div>
         <div class="col-sm-12 col-md-6">
-          <div class="d-block links text-end">
+          <div class="d-block links text-md-end">
             <span>友情链接：</span>
             <a href="#">厦门市文化馆</a>
             <a href="#">厦门市图书馆</a>
@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-      <div class="row">
+      <div class="row mt-3 mt-md-0">
         <div class="links">
           <a href="#"><img src="@/assets/images/footer/GonganLogo.png" />闽公网安备 44040202000131号</a>
           <a href="#">闽ICP备09020130号</a>
@@ -88,4 +88,34 @@
     }
   }
 }
+
+
+@media (max-width: 768px) {
+  .main-footer {
+    > div {
+      padding: 40px 30px;
+      background-size: 333px;
+    }
+    a {
+      margin-right: 10px;
+    }
+  }
+}
+@media (max-width: 425px) {
+ .main-footer {
+    > div {
+      padding: 20px 20px;
+      background-size: 233px;
+    }
+    span {
+      display: block;
+      text-align: left;
+      margin-bottom: 5px;
+    }
+    a {
+      margin-right: 5px;
+    }
+  } 
+
+}
 </style>

src/components/NavBar.vue

@@ -29,7 +29,10 @@
 
     <!-- 移动端菜单 -->
     <div class="mobile-menu">
-      <IconMenu @click="mobileMenuShow = !mobileMenuShow" />
+      <IconMenu 
+        :openState="mobileMenuShow"
+        @click="mobileMenuShow = !mobileMenuShow"
+      />
       <div 
         :class="[
           'mobile-menu-popover',
@@ -182,6 +185,9 @@ nav {
     background-color: $box-color;
     border-bottom: $border-grey-color;
     color: $text-color;
+    padding: 14px 0;
+
+    animation: mobile-menu-popover-fade 0.3s ease-in-out;
 
     a {
       line-height: 40px;
@@ -228,4 +234,9 @@ nav {
     } 
   }
 }
+
+@keyframes mobile-menu-popover-fade {
+  0% { opacity: 0; transform: translateY(-10px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
 </style>

src/components/icons/IconMenu.vue

@@ -1,7 +1,41 @@
 <template>
-  <svg class="icon" viewBox="0 0 1024 1024" width="30" height="30">
-    <path d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" fill="currentColor"></path>
-    <path d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" fill="currentColor"></path>
-    <path d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" fill="currentColor"></path>
+  <svg 
+    :class="[
+      'icon-menu',
+      openState ? 'open' : '',
+    ]"
+    viewBox="0 0 1024 1024"
+    width="30"
+    height="30"
+  >
+    <path class="line1" d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" fill="currentColor"></path>
+    <path class="line2" d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" fill="currentColor"></path>
+    <path class="line3" d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" fill="currentColor"></path>
   </svg>
-</template>
+</template>
+
+<script setup lang="ts">
+defineProps({	
+  openState: Boolean	
+})
+</script>
+
+<style lang="scss">
+.icon-menu {
+  path {
+    transition: all 0.3s;
+  }
+  &.open {
+    .line1 {
+      transform: rotate(45deg) translate(25%, -25%);
+    }
+    .line2 {
+      opacity: 0;
+    }
+    .line3 {
+      transform: rotate(-45deg) translate(-50%, 0%);
+    }
+  }
+}
+
+</style>

src/views/NewsView.vue

@@ -179,6 +179,13 @@ const options = [
     border-radius: 6px;
     background-color: $box-color;
 
+    &:hover { 
+      background-color: $box-hover-color;
+    }
+    &:active {
+      transform: scale(0.95);
+    }
+
     img {
       width: 320px;
       height: 180px;