sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改图片魔方逻辑

v1.0.0
于肖磊 2024-10-11 19:14:18 +08:00
parent 522f75135e
commit a33dd9dd3c
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/common/magic-cube/index.vue
View File

@ -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);

11
src/components/model-img-magic/index.vue
View File

@ -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%;

2
src/components/model-img-magic/model-img-magic-content.vue
View File

@ -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>