From a33dd9dd3c6cee0e2db1131b93310962709b2c2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 11 Oct 2024 19:14:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue    | 19 ++++++++++++-------
 src/components/model-img-magic/index.vue      | 11 ++++++++++-
 .../model-img-magic-content.vue               |  2 +-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 68ca6c56..f3c3de6d 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -13,17 +13,20 @@
                     <icon name="close" color="f" size="8"></icon>
                 </div>
                 <template v-if="item.img && !isEmpty(item.img[0] || '') && props.type == 'img'">
-                    <image-empty v-model="item.img[0]"></image-empty>
+                    <image-empty v-model="item.img[0]" :fit="styleActived == 10 ? 'contain' : 'cover'"></image-empty>
                 </template>
                 <template v-else>
                     <div class="cube-selected-text">
-                        {{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
-                        x
-                        {{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
-                        像素
-                        <template v-if="props.type == 'data'">
-                            <div>{{ data_title(item) }}</div>
+                        <template v-if="styleActived !== 10">
+                            {{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
+                            x
+                            {{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
+                            像素
+                            <template v-if="props.type == 'data'">
+                                <div>{{ data_title(item) }}</div>
+                            </template>
                         </template>
+                        <template v-else>不限尺寸</template>
                     </div>
                 </template>
             </div>
@@ -57,6 +60,7 @@ interface Props {
     type?: string;
     cubeWidth: number;
     cubeHeight: number;
+    styleActived?: number;
 }
 const props = withDefaults(defineProps<Props>(), {
     list: () => [],
@@ -64,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
     type: 'img',
     cubeWidth: 390,
     cubeHeight: 390,
+    styleActived: 0
 });
 
 const selected_active = ref(0);
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index 20a86fd6..404206a2 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -18,6 +18,11 @@
                         </div>
                     </div>
                 </template>
+                <template v-else-if="form.style_actived == 10">
+                    <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'h': item.img.length > 0, 'style_actived_10': item.img.length == 0 }]" :style="selected_style(item)">
+                        <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
+                    </div>
+                </template>
                 <template v-else>
                     <div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
                         <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
@@ -53,7 +58,8 @@ const spacing = computed(() => new_style.value.image_spacing / 2 + 'px');
 const content_img_radius = computed(() => radius_computer(new_style.value));
 //#region 容器大小计算
 const div_width = ref(0);
-const container_size = computed(() => div_width.value + 'px');
+const container_size = computed(() => form.value.style_actived === 10 ? '100%' : div_width.value + 'px');
+const container_size_10 = computed(() => div_width.value + 'px');
 const container = ref<HTMLElement | null>(null);
 onMounted(() => {
     if (container.value) {
@@ -129,6 +135,9 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
 .img-spacing-border {
     padding: v-bind(spacing);
 }
+.style_actived_10 {
+    height: v-bind(container_size_10) !important;
+}
 .style-size {
     height: 100%;
     width: 100%;
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index 9f4681eb..d8ea15f2 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -45,7 +45,7 @@
                         </div>
                     </template>
                     <template v-else>
-                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
+                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
                     </template>
                 </el-form-item>
             </card-container>