add new

src/views/admin/blogmanage/BlogManageView.vue

@@ -13,7 +13,7 @@
         </div>
         <div class="modal">
             <a-modal v-model:open="formControl.open" :title="delControl.title" width="100%" wrap-class-name="full-modal"
-                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)">
+                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)" :maskClosable="false">
                 <a-form ref="formRef" :model="formState" :rules="rules">
                     <a-flex gap="large" justify="space-between">
                         <a-form-item label="博客标题" name="blogtitle">

src/views/admin/diarymanage/DiaryManageView.vue

@@ -13,7 +13,7 @@
         </div>
         <div class="modal">
             <a-modal v-model:open="formControl.open" :title="delControl.title" width="100%" wrap-class-name="full-modal"
-                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)">
+                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)" :maskClosable="false">
                 <a-form ref="formRef" :model="formState" :rules="rules">
                     <a-flex gap="large" justify="space-between">
                         <a-form-item label="日记标题" name="diarytitle">

src/views/blog/HomePageView.vue

@@ -204,11 +204,13 @@ watch(() => homepageStore.homepagelist, () => {
 
 .main .blog-content {
     display: flex;
+    align-items: flex-start;
     margin: 48px;
 }
 
 .blogs .image-container {
-    width: 300px;
+    flex-shrink: 0;
+    width: 200px;
 
 }
 
@@ -216,6 +218,7 @@ watch(() => homepageStore.homepagelist, () => {
     width: 100%;
     height: auto;
 }
+
 .diarys .image-container {
     width: 1000px;
 
@@ -290,7 +293,7 @@ watch(() => homepageStore.homepagelist, () => {
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
+    -webkit-line-clamp: 4;
     word-wrap: break-word;
     overflow-wrap: break-word;
     line-height: 2;

src/views/blog/blogcontent/BlogListView.vue

@@ -31,8 +31,8 @@
                         </a-tag>
                     </div>
                     <div class="blog-content">
-                        <div>
-                            <a-image :preview="false" :width="200" :src=article.imglink />
+                            <div class="image-container">
+                                <a-image :preview="false" :src=article.imglink  class="responsive-image"/>
                             </div>
                             <div class="text-container">
                                 {{ article.blogcontent }}
@@ -48,6 +48,7 @@
                 </a-card>
             </a-badge-ribbon>
         </div>
+        
         <div class="pagination" v-if="blogstore.isPage">
             <a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef"
                 :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
@@ -160,8 +161,18 @@ onMounted(() => {
 
 .main .blog-content {
     display: flex;
+    align-items: flex-start;
     margin: 48px;
-    width: 45%;
+}
+.blog-content .image-container {
+    flex-shrink: 0;
+    width: 200px;
+   
+}
+
+.blog-content .responsive-image {
+    width: 100%;
+    height: auto;
 }
 
 .main .blog-content>:first-child {
@@ -218,11 +229,11 @@ onMounted(() => {
     }
 }
 
-.main .text-container {
+.blog-content .text-container {
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
+    -webkit-line-clamp: 4;
     word-wrap: break-word;
     overflow-wrap: break-word;
     line-height: 2;