From e6f22e18169663c7566cbadc21163f3eaf2079b2 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 15:18:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/upload/index.vue        |  5 ++++-
 .../model-carousel/model-carousel-content.vue | 22 ++++++++++++++++---
 .../model-carousel/model-carousel-styles.vue  | 10 +++++++++
 .../components/main/default/carousel.ts       |  4 ++++
 src/views/layout/components/main/index.scss   |  2 +-
 src/views/layout/components/main/index.vue    |  6 ++++-
 6 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index ffb58157..146f934a 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -209,7 +209,10 @@
                     <div v-if="!isEmpty(icon_value)" class="upload-del-icon" @click.stop="del_icon_event">
                         <icon name="close-o" color="c" size="14"></icon>
                     </div>
-                    <icon :name="!isEmpty(icon_value) ? icon_value : 'add'" :size="Number(size) / 2 + ''" color="c"></icon>
+                    <div class="flex-col gap-5 align-c">
+                        <icon :name="!isEmpty(icon_value) ? icon_value : 'add'" :size="upload_size == '100%' ? '36' : Number(size) / 2 + ''" color="c"></icon>
+                        <slot></slot>
+                    </div>
                 </div>
             </template>
             <div v-if="isTips" class="size-12 cr-9">{{ tipsText }}</div>
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index 7586efd2..ee08f758 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/src/components/model-carousel/model-carousel-content.vue
@@ -31,14 +31,21 @@
                     <div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re">
                         <div class="flex-col align-c jc-c gap-20 w">
                             <div class="upload_style">
-                                <upload v-model="item.carousel_img" :limit="1" size="100%"></upload>
+                                <upload v-model="item.carousel_img" :limit="1" size="100%">
+                                    <p class="upload-text">上传图片</p>
+                                </upload>
                             </div>
-                            <el-form-item label="图片链接" class="w mb-16">
+                            <el-form-item label="图片链接" class="w">
                                 <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>
+                                <upload v-model="item.carousel_video" :limit="1" type="icon" is-icon size="100%">
+                                    <p class="upload-text">上传视频</p>
+                                </upload>
                             </div>
+                            <el-form-item label="按钮名称" class="w mb-16">
+                                <el-input v-model="form.title" placeholder="请输入视频按钮名称" clearable></el-input>
+                            </el-form-item>
                         </div>
                         <el-icon class="iconfont icon-close-o size-16 abs cr-c top-de-5 right-de-5" @click="remove(index)" />
                     </div>
@@ -63,6 +70,7 @@ const { form } = toRefs(state);
 const add = () => {
     form.value.carousel_list.push({
         carousel_img: [],
+        carousel_video: [],
         carousel_link: {},
     });
 };
@@ -84,4 +92,12 @@ const remove = (index: number) => {
 .tips {
     color: $cr-info-dark;
 }
+.upload-text {
+    font-weight: 500;
+    font-size: 1.4rem;
+    color: #999999;
+    line-height: 2rem;
+    text-align: left;
+    font-style: normal;
+}
 </style>
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index dd81ca44..005f6ebc 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -18,6 +18,16 @@
             <card-container>
                 <carousel-indicator :value="form"></carousel-indicator>
             </card-container>
+            <div class="divider-line"></div>
+            <card-container>
+                <div class="mb-12">视频按钮是否显示</div>
+                <el-form-item label="是否显示">
+                    <el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form" @update:value="radius_change"></radius>
+                </el-form-item>
+            </card-container>
         </el-form>
         <div class="divider-line"></div>
         <common-styles :value="form.common_style" @update:value="common_styles_update" />
diff --git a/src/views/layout/components/main/default/carousel.ts b/src/views/layout/components/main/default/carousel.ts
index 24431fac..197139de 100644
--- a/src/views/layout/components/main/default/carousel.ts
+++ b/src/views/layout/components/main/default/carousel.ts
@@ -3,6 +3,7 @@ import defaultCommon from "./index";
 
 interface carousel_list {
     carousel_img: uploadList[];
+    carousel_video: uploadList[];
     carousel_link: object;
 }
 interface defaultSearch {
@@ -40,14 +41,17 @@ const defaultSearch: defaultSearch = {
         carousel_list: [
             {
                 carousel_img: [],
+                carousel_video: [],
                 carousel_link: {}
             },
             {
                 carousel_img: [],
+                carousel_video: [],
                 carousel_link: {}
             },
             {
                 carousel_img: [],
+                carousel_video: [],
                 carousel_link: {}
             }
         ]
diff --git a/src/views/layout/components/main/index.scss b/src/views/layout/components/main/index.scss
index b2002bb8..8270ea16 100644
--- a/src/views/layout/components/main/index.scss
+++ b/src/views/layout/components/main/index.scss
@@ -137,7 +137,7 @@
             .plug-in-border {
                 position: relative;
                 // border: 0.2rem solid $cr-main;
-                // z-index: 1;
+                z-index: 1;
                 box-sizing: border-box;
             }
             .plug-in-border::before {
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 3990a7e0..7a3e5263 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -318,7 +318,11 @@ const model_style = computed(() => {
                 bottom = container_height - 60 + height;
             }
         }
-        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${ item.com_data.style.common_style?.floating_up || 0 }px;`;
+        let z_index = '';
+        if (item.com_data.style.common_style?.floating_up !== 0) {
+            z_index = `z-index: 1`;
+        }
+        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${ item.com_data.style.common_style?.floating_up || 0 }px;${ z_index };`;
     };
 });