Merge remote-tracking branch 'origin/dev-yxl' into dev-sws
commit
c79918b31d
|
|
@ -13,17 +13,20 @@
|
||||||
<icon name="close" color="f" size="8"></icon>
|
<icon name="close" color="f" size="8"></icon>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="item.img && !isEmpty(item.img[0] || '') && props.type == 'img'">
|
<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>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="cube-selected-text">
|
<div class="cube-selected-text">
|
||||||
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
|
<template v-if="styleActived !== 10">
|
||||||
x
|
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
|
||||||
{{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 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="props.type == 'data'">
|
||||||
|
<div>{{ data_title(item) }}</div>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-else>不限尺寸</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,6 +60,7 @@ interface Props {
|
||||||
type?: string;
|
type?: string;
|
||||||
cubeWidth: number;
|
cubeWidth: number;
|
||||||
cubeHeight: number;
|
cubeHeight: number;
|
||||||
|
styleActived?: number;
|
||||||
}
|
}
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
list: () => [],
|
list: () => [],
|
||||||
|
|
@ -64,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
type: 'img',
|
type: 'img',
|
||||||
cubeWidth: 390,
|
cubeWidth: 390,
|
||||||
cubeHeight: 390,
|
cubeHeight: 390,
|
||||||
|
styleActived: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
const selected_active = ref(0);
|
const selected_active = ref(0);
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<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)">
|
<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>
|
<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));
|
const content_img_radius = computed(() => radius_computer(new_style.value));
|
||||||
//#region 容器大小计算
|
//#region 容器大小计算
|
||||||
const div_width = ref(0);
|
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);
|
const container = ref<HTMLElement | null>(null);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (container.value) {
|
if (container.value) {
|
||||||
|
|
@ -129,6 +135,9 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
|
||||||
.img-spacing-border {
|
.img-spacing-border {
|
||||||
padding: v-bind(spacing);
|
padding: v-bind(spacing);
|
||||||
}
|
}
|
||||||
|
.style_actived_10 {
|
||||||
|
height: v-bind(container_size_10) !important;
|
||||||
|
}
|
||||||
.style-size {
|
.style-size {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<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>
|
</template>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</card-container>
|
</card-container>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue