Merge remote-tracking branch 'origin/dev-yxl' into dev-sws
commit
c79918b31d
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue