From 2a89e47d56c1217ef9907cf2ee0c0be7ca467e46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 11 Sep 2024 14:10:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8C=87=E7=A4=BA=E5=99=A8?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/carousel-indicator/index.vue         | 17 ++++++++++++-----
 src/components/common/common-styles/index.vue   |  6 +++++-
 src/components/model-carousel/index.vue         |  3 +--
 .../model-carousel/model-carousel-content.vue   |  3 +++
 .../model-carousel/model-carousel-styles.vue    |  2 +-
 src/components/model-data-magic/index.vue       |  5 ++---
 .../model-data-magic-content.vue                | 11 ++++++-----
 .../model-nav-group/model-nav-group-styles.vue  |  2 +-
 src/components/page-settings/page-styles.vue    |  2 +-
 .../layout/components/main/default/carousel.ts  | 12 +++++++-----
 .../layout/components/main/default/nav-group.ts | 10 +++++-----
 11 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/src/components/common/carousel-indicator/index.vue b/src/components/common/carousel-indicator/index.vue
index 6dee1d0e..fa4ab03d 100644
--- a/src/components/common/carousel-indicator/index.vue
+++ b/src/components/common/carousel-indicator/index.vue
@@ -4,7 +4,7 @@
         <el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
     </el-form-item>
     <template v-if="form.is_show == '1'">
-        <el-form-item label="指示器样式">
+        <el-form-item label="样式">
             <el-radio-group v-model="form.indicator_style" is-button>
                 <el-tooltip content="点" placement="top" effect="light">
                     <el-radio-button value="dot"><icon name="iconfont icon-round-dot"></icon></el-radio-button>
@@ -17,7 +17,7 @@
                 </el-tooltip>
             </el-radio-group>
         </el-form-item>
-        <el-form-item label="指示器位置">
+        <el-form-item label="位置">
             <el-radio-group v-model="form.indicator_location" is-button>
                 <el-tooltip content="左对齐" placement="top" effect="light">
                     <el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
@@ -30,16 +30,19 @@
                 </el-tooltip>
             </el-radio-group>
         </el-form-item>
-        <el-form-item label="指示器大小">
+        <el-form-item label="大小">
             <slider v-model="form.indicator_size" :max="100"></slider>
         </el-form-item>
-        <el-form-item label="指示器色值">
+        <el-form-item v-if="isIndicatorBottom" label="下边距">
+            <slider v-model="form.indicator_bottom" :min="0" :max="100"></slider>
+        </el-form-item>
+        <el-form-item label="色值">
             <div class="flex-col gap-20">
                 <div class="flex-row gap-20"><span class="size-12 cr-9">选中样式</span><color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker></div>
                 <div class="flex-row gap-20"><span class="size-12 cr-9">常规样式</span><color-picker v-model="form.color" default-color="#DDDDDD" @update:value="color_picker_change($event, 'color')"></color-picker></div>
             </div>
         </el-form-item>
-        <el-form-item v-if="form.indicator_style != 'num'" label="指示器圆角">
+        <el-form-item v-if="form.indicator_style != 'num'" label="圆角">
             <radius :value="form.indicator_radius" @update:value="indicator_radius_change"></radius>
         </el-form-item>
     </template>
@@ -63,6 +66,10 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => {}
+    },
+    isIndicatorBottom: {
+        type: Boolean,
+        default: true
     }
 })
 
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 1cfc2d36..cabcd020 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -28,7 +28,7 @@
                         <color-picker v-model="form.color_list[0].color"></color-picker>
                     </div>
                 </el-form-item>
-                <el-form-item label="组件上浮">
+                <el-form-item v-if="isFloatingUp" label="组件上浮">
                     <el-input-number v-model="form.floating_up" :min="0" :max="100" controls-position="right" />
                 </el-form-item>
                 <el-form-item label="内边距">
@@ -112,6 +112,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isFloatingUp: {
+        type: Boolean,
+        default: true,
+    }
 });
 // value 和初始化数据合并数据
 let form = ref(props.value);
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 931c66f6..6c3e9473 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -34,7 +34,7 @@
                     <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit" error-style="width:5rem;height:5rem"></image-empty>
                 </div>
             </swiper-slide>
-            <div v-if="new_style.is_show == '1'" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex abs">
+            <div v-if="new_style.is_show == '1'" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
                 <template v-if="new_style.indicator_style == 'num'">
                     <div :style="indicator_style" class="dot-item">
                         <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ form.carousel_list.length }}</span>
@@ -198,7 +198,6 @@ const slideChange = (swiper: { realIndex: number }) => {
 }
 .dot {
     z-index: 3;
-    bottom: 6px;
     .dot-item {
         margin: 0 0.3rem;
         &.active {
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index 80e637ec..7586efd2 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/src/components/model-carousel/model-carousel-content.vue
@@ -36,6 +36,9 @@
                             <el-form-item label="图片链接" class="w mb-16">
                                 <url-value v-model="item.carousel_link"></url-value>
                             </el-form-item>
+                            <div class="upload_style">
+                                <upload v-model="item.carousel_img" :limit="1" type="video"></upload>
+                            </div>
                         </div>
                         <el-icon class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
                     </div>
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index a091df05..dd81ca44 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="common-style-height">
-        <el-form :model="form" label-width="80">
+        <el-form :model="form" label-width="70">
             <card-container>
                 <div class="mb-12">图片设置</div>
                 <el-form-item label="圆角">
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index c6dc79ae..4e1e395c 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -19,7 +19,7 @@
                         <template v-else>
                             <magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                         </template>
-                        <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
+                        <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
                             <template v-if="item.data_style.indicator_style == 'num'">
                                 <div :style="item.data_style.indicator_styles" class="dot-item">
                                     <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
@@ -48,7 +48,7 @@
                     <template v-else>
                         <magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                     </template>
-                    <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
+                    <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
                         <template v-if="item.data_style.indicator_style == 'num'">
                             <div :style="item.data_style.indicator_styles" class="dot-item">
                                 <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
@@ -355,7 +355,6 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
 }
 .dot {
     z-index: 3;
-    bottom: 6px;
     .dot-item {
         margin: 0 0.3rem;
     }
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 51d7d53c..b4f38020 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -81,12 +81,13 @@ const data_style = {
     indicator_style: 'dot',
     indicator_location: 'center',
     indicator_size: 5,
+    indicator_bottom: 6,
     indicator_radius: {
-        radius: 0,
-        radius_top_left: 0,
-        radius_top_right: 0,
-        radius_bottom_left: 0,
-        radius_bottom_right: 0,
+        radius: 4,
+        radius_top_left: 4,
+        radius_top_right: 4,
+        radius_bottom_left: 4,
+        radius_bottom_right: 4,
     },
     actived_color: '#2A94FF',
     color: '#DDDDDD',
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index c2230a6f..79d00a8d 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/src/components/model-nav-group/model-nav-group-styles.vue
@@ -20,7 +20,7 @@
                 </card-container>
                 <div class="divider-line"></div>
                 <card-container>
-                    <carousel-indicator :value="form"></carousel-indicator>
+                    <carousel-indicator :value="form" :is-indicator-bottom="false"></carousel-indicator>
                 </card-container>
                 <div class="divider-line"></div>
             </template>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 2372205c..4c89db2a 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -57,7 +57,7 @@
             <model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
         </template>
         <div class="bg-f5 divider-line" />
-        <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" :is-floating-up="false" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
diff --git a/src/views/layout/components/main/default/carousel.ts b/src/views/layout/components/main/default/carousel.ts
index b6173194..24431fac 100644
--- a/src/views/layout/components/main/default/carousel.ts
+++ b/src/views/layout/components/main/default/carousel.ts
@@ -24,6 +24,7 @@ interface defaultSearch {
         indicator_style: string;
         indicator_location: string;
         indicator_size: number;
+        indicator_bottom: number;
         indicator_radius: radiusStyle;
         actived_color: string;
         color: string;
@@ -62,12 +63,13 @@ const defaultSearch: defaultSearch = {
         indicator_style: 'dot',
         indicator_location: 'center',
         indicator_size: 5,
+        indicator_bottom: 6,
         indicator_radius: {
-            radius: 0,
-            radius_top_left: 0,
-            radius_top_right: 0,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
+            radius: 4,
+            radius_top_left: 4,
+            radius_top_right: 4,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
         },
         actived_color: '#2A94FF',
         color: '#DDDDDD',
diff --git a/src/views/layout/components/main/default/nav-group.ts b/src/views/layout/components/main/default/nav-group.ts
index 6db3a883..c539842a 100644
--- a/src/views/layout/components/main/default/nav-group.ts
+++ b/src/views/layout/components/main/default/nav-group.ts
@@ -81,11 +81,11 @@ const defaultSearch: defaultSearch = {
         indicator_location: 'center',
         indicator_size: 5,
         indicator_radius: {
-            radius: 0,
-            radius_top_left: 0,
-            radius_top_right: 0,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
+            radius: 4,
+            radius_top_left: 4,
+            radius_top_right: 4,
+            radius_bottom_left: 4,
+            radius_bottom_right: 4,
         },
         actived_color: '#2A94FF',
         color: '#DDDDDD',