From 997234bb4622cccc53e374747c39f14c47eca55e Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 22 Aug 2024 16:21:33 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=96=87=E7=AB=A0=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83=20sws=202024-08-22?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/image-empty/index.vue     |  2 +-
 src/components/model-article-list/index.vue   | 34 +++++++++++++------
 .../model-article-list-styles.vue             | 11 ++++--
 src/components/model-article-tabs/index.vue   |  2 +-
 .../model-article-tabs-styles.vue             | 11 ++++--
 .../components/main/default/article-list.ts   |  4 ++-
 .../components/main/default/article-tabs.ts   |  4 ++-
 src/layout/index.vue                          |  2 +-
 8 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/components/base/image-empty/index.vue b/src/components/base/image-empty/index.vue
index 99710e96..653ebde4 100644
--- a/src/components/base/image-empty/index.vue
+++ b/src/components/base/image-empty/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" @load="on_load">
+    <el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" fit="cover" @load="on_load">
         <template #error>
             <div class="image-slot" :style="errorStyle">
                 <img :src="error_image" :style="errorImgStyle" />
diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index 2d5b622d..2b82abef 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -10,9 +10,9 @@
                         <template v-else>
                             <image-empty v-model="item.link.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
                         </template>
-                        <div class="flex-col jc-sb" :style="article_type !== '0' ? content_padding : ''">
+                        <div class="flex-col jc-sb flex-1" :style="article_type !== '0' ? content_padding : ''">
                             <div class="title text-line-2" :style="article_name">{{ item.new_title }}</div>
-                            <div class="flex-row jc-sb gap-8 align-c mt-10">
+                            <div class="flex-row jc-sb gap-8 align-e mt-10">
                                 <div :style="article_date">{{ is_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
                                 <icon v-show="is_show.includes('1')" name="eye" :style="article_page_view">16</icon>
                             </div>
@@ -24,7 +24,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, gradient_handle, padding_computer, radius_computer, get_math } from '@/utils';
+import { common_styles_computer, padding_computer, radius_computer, get_math } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 import ArticleAPI from '@/api/article';
 const props = defineProps({
@@ -75,7 +75,8 @@ const content_spacing = ref('');
 // 文章间距
 const article_spacing = ref('');
 const article_spacing_children = ref('');
-const article_item_width = ref('50%');
+const article_item_width = ref('104');
+const article_item_height = ref('104');
 
 const article_style = ref({});
 const default_article_list: ArticleList = {
@@ -127,6 +128,7 @@ watch(
         }
         if (article_type.value == '3') {
             article_item_width.value = `${new_style.article_width}px`;
+            article_item_height.value = `${new_style.article_height}px`;
         }
         if (new_style.common_style && props.isCommonStyle) {
             style_container.value = common_styles_computer(new_style.common_style);
@@ -137,9 +139,9 @@ watch(
 const article_type_class = computed(() => {
     switch (article_type.value) {
         case '0':
-            return 'style2 flex-col';
+            return 'style1 flex-col';
         case '1':
-            return 'style1 flex-row flex-wrap';
+            return 'style2 flex-row flex-wrap';
         case '2':
             return 'style3 flex-col';
         case '3':
@@ -175,26 +177,38 @@ const get_auto_article_list = async (new_content: any) => {
 <style lang="scss" scoped>
 .style1 {
     .item {
-        width: calc(50% - 0.5rem);
+        width: 100%;
+        .img {
+            height: 8.3rem;
+            width: 11rem;
+        }
     }
 }
 .style2 {
     .item {
-        width: 100%;
+        width: calc(50% - 0.5rem);
         .img {
-            width: 11rem;
-            height: 8.3rem;
+            height: 18rem;
         }
     }
 }
 .style3 {
     .item {
         width: 100%;
+        .img {
+            width: 100%;
+            height: 18rem;
+        }
     }
 }
 .style4 {
     .item {
         min-width: v-bind(article_item_width);
+        width: v-bind(article_item_width);
+        .img {
+            width: 100%;
+            height: v-bind(article_item_height);
+        }
     }
 }
 </style>
diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue
index 146dab56..c6cb11d4 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -51,9 +51,14 @@
                 <el-form-item label="文章间距">
                     <slider v-model="form.article_spacing"></slider>
                 </el-form-item>
-                <el-form-item v-if="article_style == '3'" label="内容宽度">
-                    <slider v-model="form.article_width" :max="1000"></slider>
-                </el-form-item>
+                <template v-if="article_style == '3'">
+                    <el-form-item label="内容宽度">
+                        <slider v-model="form.article_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.article_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
             </card-container>
         </el-form>
         <common-styles :value="form.common_style" @update:value="common_style_update" />
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index 68bedf22..daad17cd 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -7,7 +7,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, get_math } from '@/utils';
+import { common_styles_computer } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index a22a370c..10752256 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -79,9 +79,14 @@
                 <el-form-item label="文章间距">
                     <slider v-model="form.article_spacing"></slider>
                 </el-form-item>
-                <el-form-item v-if="article_style == '3'" label="内容宽度">
-                    <slider v-model="form.article_width" :max="1000"></slider>
-                </el-form-item>
+                <template v-if="article_style == '3'">
+                    <el-form-item label="内容宽度">
+                        <slider v-model="form.article_width" :max="1000"></slider>
+                    </el-form-item>
+                    <el-form-item label="内容高度">
+                        <slider v-model="form.article_height" :max="1000"></slider>
+                    </el-form-item>
+                </template>
             </card-container>
         </el-form>
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
diff --git a/src/layout/components/main/default/article-list.ts b/src/layout/components/main/default/article-list.ts
index 2ec495a8..72318fb8 100644
--- a/src/layout/components/main/default/article-list.ts
+++ b/src/layout/components/main/default/article-list.ts
@@ -34,6 +34,7 @@ interface DefaultArticleList {
         article_spacing: number;
         content_spacing: number;
         article_width: number;
+        article_height: number;
         common_style: object;
     };
 }
@@ -85,7 +86,8 @@ const defaultArticleList: DefaultArticleList = {
         },
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
-        article_width: 160, // 文章宽度
+        article_width: 155, // 文章宽度
+        article_height: 155, // 文章宽度
         common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
     },
 };
diff --git a/src/layout/components/main/default/article-tabs.ts b/src/layout/components/main/default/article-tabs.ts
index 1cd0757b..1dde4aa3 100644
--- a/src/layout/components/main/default/article-tabs.ts
+++ b/src/layout/components/main/default/article-tabs.ts
@@ -49,6 +49,7 @@ interface DefaultArticleTabs {
         article_spacing: number;
         content_spacing: number;
         article_width: number;
+        article_height: number;
         common_style: object;
     };
 }
@@ -114,7 +115,8 @@ const defaultArticleTabs: DefaultArticleTabs = {
         },
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
-        article_width: 160, // 文章宽度
+        article_width: 155, // 文章宽度
+        article_height: 155, // 文章宽度
         common_style: { ...defaultCommon, padding_left: 10, padding_right: 10, padding_bottom: 10 },
     },
 };
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c74bc131..7dffb5ca 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -30,7 +30,7 @@ interface diy_data_item {
 const form = ref<diy_data_item>({
     model: {
         img: '',
-        name: '',
+        name: 'demo',
     },
     header: {
         name: '页面设置',