From efdaa0966989fe98421f075a8947ad5e65c608b7 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Mon, 26 Aug 2024 11:43:35 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=96=87=E7=AB=A0=E7=BB=84=E4=BB=B6=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=97=A0=E5=9B=BE=E6=A8=A1=E5=BC=8F=20sws=202024-08-2?=
 =?UTF-8?q?6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../footer-nav/footer-nav-content.vue         |  4 +-
 src/components/model-article-list/index.vue   | 48 ++++++++++++-------
 .../model-article-list-content.vue            |  8 +++-
 .../model-article-list-styles.vue             | 26 +++++-----
 .../model-article-tabs-content.vue            |  3 +-
 .../model-article-tabs-styles.vue             | 26 +++++-----
 6 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/src/components/footer-nav/footer-nav-content.vue b/src/components/footer-nav/footer-nav-content.vue
index bb44cf84..16e1e9a9 100644
--- a/src/components/footer-nav/footer-nav-content.vue
+++ b/src/components/footer-nav/footer-nav-content.vue
@@ -27,11 +27,11 @@
                                 <el-form-item label="图标" label-width="45">
                                     <div class="flex-col jc-c align-c mr-12">
                                         <upload v-model="row.src" :limit="1" :size="44" :styles="1"></upload>
-                                        <text class="cr-9 size-12">选中</text>
+                                        <text class="cr-9 size-12">未选中</text>
                                     </div>
                                     <div class="flex-col jc-c align-c">
                                         <upload v-model="row.src_checked" :limit="1" :size="44" :styles="1"></upload>
-                                        <text class="cr-9 size-12">未选中</text>
+                                        <text class="cr-9 size-12">选中</text>
                                     </div>
                                 </el-form-item>
                                 <el-form-item label="名称" label-width="45">
diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index ad7d5c32..a5916e0d 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="oh" :style="style_container">
-        <div class="re" :style="style">
-            <div class="flex-warp" :class="article_theme_class" :style="article_spacing">
+        <div class="re oh" :style="style">
+            <div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
                 <template v-for="(item, index) in data_list" :key="index">
                     <div class="item gap-10 bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
-                        <template v-if="item.new_cover.length > 0">
-                            <image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
+                        <template v-if="article_theme !== '3'">
+                            <template v-if="item.new_cover.length > 0">
+                                <image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
+                            </template>
+                            <template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
                         </template>
-                        <template v-else>
-                            <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
-                        </template>
-                        <div class="flex-col jc-sb flex-1" :style="article_theme !== '0' ? content_padding : ''">
-                            <div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
-                            <div class="flex-row jc-sb gap-8 align-e mt-10">
+                        <div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
+                            <div class="title" :class="article_theme == '3' ? 'text-line-1 flex-1 flex-width' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
+                            <div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
                                 <div :style="article_date">{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
                                 <icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">16</icon>
                             </div>
@@ -119,17 +119,19 @@ watch(
         // 文章间距
         article_spacing.value = `gap: ${new_style.article_spacing}px;`;
         // 文章样式
-        article_style.value = content_radius.value + content_spacing.value;
+        article_style.value = content_spacing.value;
+        style.value = '';
         if (article_theme.value == '0') {
-            article_style.value += content_padding.value;
-        }
-        if (article_theme.value == '1') {
+            article_style.value += content_padding.value + content_radius.value;
+        } else if (article_theme.value == '1') {
             article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
-            article_style.value += article_spacing_children.value;
-        }
-        if (article_theme.value == '3') {
+            article_style.value += article_spacing_children.value + content_radius.value;
+        } else if (article_theme.value == '3') {
+            style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
+        } else if (article_theme.value == '4') {
             article_item_width.value = `${new_style.article_width}px`;
             article_item_height.value = `${new_style.article_height}px`;
+            article_style.value += content_radius.value;
         }
         if (new_style.common_style && props.isCommonStyle) {
             style_container.value = common_styles_computer(new_style.common_style);
@@ -146,7 +148,9 @@ const article_theme_class = computed(() => {
         case '2':
             return 'style3 flex-col';
         case '3':
-            return 'style4 flex-row';
+            return 'style4 flex-col';
+        case '4':
+            return 'style5 flex-row';
     }
     return `style${article_theme.value}`;
 });
@@ -203,6 +207,14 @@ const get_auto_data_list = async (new_content: any) => {
     }
 }
 .style4 {
+    .item {
+        width: 100%;
+        &:not(:last-child) {
+            border-bottom: 0.1rem solid #eee;
+        }
+    }
+}
+.style5 {
     .item {
         min-width: v-bind(article_item_width);
         width: v-bind(article_item_width);
diff --git a/src/components/model-article-list/model-article-list-content.vue b/src/components/model-article-list/model-article-list-content.vue
index 77d01ea6..f120491f 100644
--- a/src/components/model-article-list/model-article-list-content.vue
+++ b/src/components/model-article-list/model-article-list-content.vue
@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选择风格">
-                    <el-radio-group v-model="form.theme">
+                    <el-radio-group v-model="form.theme" @change="theme_change">
                         <el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
@@ -77,7 +77,8 @@ const base_list = reactive({
         { name: '单列展示', value: '0' },
         { name: '两列展示（纵向）', value: '1' },
         { name: '大图展示', value: '2' },
-        { name: '左右滑动展示', value: '3' },
+        { name: '无图模式', value: '3' },
+        { name: '左右滑动展示', value: '4' },
     ],
     data_type_list: [
         { name: '选择文章', value: '0' },
@@ -118,6 +119,9 @@ const init = () => {
         base_list.article_category_list = article_store.article;
     }
 };
+const theme_change = (val: any) => {
+    form.field_show = ['1'];
+};
 
 const data_list_remove = (index: number) => {
     form.data_list.splice(index, 1);
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 c6cb11d4..53689b9a 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -39,19 +39,23 @@
                 <el-form-item label="内容圆角">
                     <radius :value="form.content_radius"></radius>
                 </el-form-item>
-                <el-form-item label="图片圆角">
-                    <radius :value="form.img_radius"></radius>
-                </el-form-item>
+                <template v-if="theme !== '3'">
+                    <el-form-item label="图片圆角">
+                        <radius :value="form.img_radius"></radius>
+                    </el-form-item>
+                </template>
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
-                <el-form-item label="内容间距">
-                    <slider v-model="form.content_spacing"></slider>
-                </el-form-item>
-                <el-form-item label="文章间距">
-                    <slider v-model="form.article_spacing"></slider>
-                </el-form-item>
-                <template v-if="article_style == '3'">
+                <template v-if="theme !== '3'">
+                    <el-form-item label="内容间距">
+                        <slider v-model="form.content_spacing"></slider>
+                    </el-form-item>
+                    <el-form-item label="文章间距">
+                        <slider v-model="form.article_spacing"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="theme == '4'">
                     <el-form-item label="内容宽度">
                         <slider v-model="form.article_width" :max="1000"></slider>
                     </el-form-item>
@@ -82,7 +86,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
-const article_style = computed(() => data.value.article_style);
+const theme = computed(() => data.value.theme);
 const emit = defineEmits(['update:value']);
 const font_weight = reactive([
     { name: '加粗', value: '500' },
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index b561fa93..bd2c6926 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -106,7 +106,8 @@ const base_list = reactive({
         { name: '单列展示', value: '0' },
         { name: '两列展示（纵向）', value: '1' },
         { name: '大图展示', value: '2' },
-        { name: '左右滑动展示', value: '3' },
+        { name: '无图模式', value: '3' },
+        { name: '左右滑动展示', value: '4' },
     ],
     data_type_list: [
         { name: '选择文章', value: '0' },
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 10752256..9762d32e 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -67,19 +67,23 @@
                 <el-form-item label="内容圆角">
                     <radius :value="form.content_radius"></radius>
                 </el-form-item>
-                <el-form-item label="图片圆角">
-                    <radius :value="form.img_radius"></radius>
-                </el-form-item>
+                <template v-if="theme !== '3'">
+                    <el-form-item label="图片圆角">
+                        <radius :value="form.img_radius"></radius>
+                    </el-form-item>
+                </template>
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
-                <el-form-item label="内容间距">
-                    <slider v-model="form.content_spacing"></slider>
-                </el-form-item>
-                <el-form-item label="文章间距">
-                    <slider v-model="form.article_spacing"></slider>
-                </el-form-item>
-                <template v-if="article_style == '3'">
+                <template v-if="theme !== '3'">
+                    <el-form-item label="内容间距">
+                        <slider v-model="form.content_spacing"></slider>
+                    </el-form-item>
+                    <el-form-item label="文章间距">
+                        <slider v-model="form.article_spacing"></slider>
+                    </el-form-item>
+                </template>
+                <template v-if="theme == '4'">
                     <el-form-item label="内容宽度">
                         <slider v-model="form.article_width" :max="1000"></slider>
                     </el-form-item>
@@ -111,7 +115,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
-const article_style = computed(() => data.value.article_style);
+const theme = computed(() => data.value.theme);
 const font_weight = reactive([
     { name: '加粗', value: '500' },
     { name: '正常', value: '400' },