小屏显示优化

app.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-.min-h-screen.bg-white.text-gray-800
-  header.header.absolute.left-0.top-0.right-0.border-gray-100.transition-all.duration-150(
+.min-h-screen.bg-white.text-gray-800.w-full
+  header.header.absolute.left-0.top-0.right-0.border-gray-100.transition-all.duration-150.w-full.overflow-hidden(
     :class="{ 'border-b-1': route.path !== '/' && route.path !== '/account/signin' }"
   )
     nav.container.mx-auto.flex.text-gray-400.text-lg.font-bold
@@ -83,6 +83,12 @@ onMounted(() => {
   word-break: break-all;
 }
 
+.markdown pre {
+  max-width: 100%;
+  overflow: auto;
+  overflow-y: hidden
+}
+
 .markdown pre code {
   padding: 1rem;
   border-radius: 0.5rem;
@@ -107,6 +113,7 @@ onMounted(() => {
   margin: 2rem 0;
   word-wrap: break-word;
   word-break: break-all;
+  white-space: wrap;
 }
 
 .markdown input[type="checkbox"] {

pages/blog/index.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-div.container.mx-auto.py-24.flex.gap-8(
+div.container.mx-auto.py-24.flex.gap-8.w-full(
   class=">sm:px-16 >sm:py-32"
 )
   // 左侧栏(main)
-  main.flex.flex-1.flex-col.gap-2
+  main.flex.flex-1.flex-col.gap-2.max-w-full.px-4
     // markdown输入框(点击外缘聚焦输入)
     div.flex.flex-col.gap-6.p-6(v-if="account.online" @click="focusMarkdownInput()")
       div.create-blog
@@ -23,12 +23,12 @@ div.container.mx-auto.py-24.flex.gap-8(
         ) 发布 (Ctrl+Enter)
     // 展示blog列表
     div(v-if="!pending")
-      div.flex.flex-col.gap-0.p-6(
+      div.flex.flex-col.gap-0.w-full.mb-12(
         v-for="item in data.filter(x => !x.title)", :key="item.id" tabindex="0"
         :class="{'bg-gray-100': item.__select}"
         @click="event => selectItem(event,item)"
       )
-        div.markdown(v-html="item.html")
+        div.w-full.markdown.overflow-hidden(v-html="item.html")
         div.flex.gap-4.text-gray-500.text-xs
           time(:datetime="item.createdAt") {{ item.date }}
           button(@click.stop="comments.show(item.id)") 评论