列表响应式

shenxiang11 · Apr 8, 2024 · fbb270b · fbb270b
1 parent e7c503b
commit fbb270b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/src/TheLayout.vue b/src/TheLayout.vue
@@ -38,17 +38,14 @@ router.onBeforeRouteChange = function (to) {
 
   <footer class="rounded-lg m-4">
     <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
-      <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400"
-        >© 2023 前端芯事. All Rights Reserved.</span
-      >
+      <span class="block text-sm text-gray-500 text-center dark:text-gray-400">© 2024 前端芯事. All Rights Reserved.</span>
     </div>
   </footer>
 </template>
 
 <style scoped>
 .container {
-  @apply md:w-full;
-  width: 960px;
+  @apply md:w-[960px] w-full px-[20px];
   min-height: 100vh;
   margin: 0 auto;
 }

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -27,10 +27,10 @@ watch(() => frontmatter.value.current, function() {
       :href="site.base.slice(0, -1) + post.url"
       v-for="post in posts"
       :key="post.url"
-      class="border my-4 flex gap-4 h-36 p-4 rounded-md"
+      class="border my-4 flex flex-col gap-4 md:h-36 p-4 rounded-md md:flex-row"
     >
-      <div class="overflow-hidden">
-        <img v-if="post.cover" :src="post.cover.image" class="w-48 h-full object-cover" />
+      <div class="md:overflow-hidden">
+        <img v-if="post.cover" :src="post.cover.image" class="md:w-48 md:h-full w-full h-auto object-cover" />
       </div>
       <div class="flex-shrink-0 flex-grow flex flex-col">
         <h1 class="text-xl font-semibold mb-3">{{ post.title }}</h1>