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

修改图片魔方和数据魔方显示问题

v1.1.0
于肖磊 2024-10-29 18:50:43 +08:00
parent 87daf436ae
commit 06cd197c93
9 changed files with 73 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,10 +18,10 @@
<template v-else>
<div class="cube-selected-text">
<template v-if="styleActived !== 10">
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
建议{{ Math.round((props.cubeWidth / densityNum) * (item.end.x - item.start.x + 1)) }}
x
{{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
像素
{{ Math.round((props.cubeHeight / densityNum) * (item.end.y - item.start.y + 1)) }}
px
<template v-if="props.type == 'data'">
<div>{{ data_title(item) }}</div>
</template>
@ -264,6 +264,7 @@ const data_title = (item: CubeItem) => {
text-align: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
.item {
border: 1px solid #fff;
border-top: 0;
@ -307,6 +308,7 @@ const data_title = (item: CubeItem) => {
}
.cube-selected {
position: absolute;
overflow: hidden;
background-color: #eee;
border: 1px solid #fff;
text-align: center;

5
src/components/model-data-magic/components/product-list-show.vue
View File

@ -61,7 +61,7 @@
</div>
</template>
<template v-else>
<div class="flex-col gap-20 align-c w h">
<div class="flex-col gap-10 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h shop-max-height">
<template v-if="!isEmpty(item.new_cover)">
@ -108,6 +108,7 @@ const props = withDefaults(defineProps<Props>(), {
});
const split_list = computed(() => props.value || {});
const gap_height = computed(() => 20 / 3 + 'px');
</script>
<style lang="scss" scoped>
@ -138,7 +139,7 @@ const split_list = computed(() => props.value || {});
border-radius: 0.8rem;
}
.shop-max-height{
max-height: 33%;
max-height: calc((100% / 3) - v-bind(gap_height));
}
.half-width {
width: 50%;

15
src/components/model-data-magic/index.vue
View File

@ -70,7 +70,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer, common_img_computer } from '@/utils';
import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -95,7 +95,10 @@ const spacing = computed(() => (new_style.value?.image_spacing || 0) / 2 + 'px')
const content_radius = computed(() => radius_computer(new_style.value.data_radius));
//#region 容器大小计算
const div_width = ref(0);
const container_size = computed(() => div_width.value + 'px');
// 如果容器高度为空，则取容器宽度
const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
const container_size = computed(() => container_height.value + 'px');
const container = ref<HTMLElement | null>(null);
onMounted(() => {
if (container.value) {
@ -129,7 +132,7 @@ const density = ref('4');
//单元魔方宽度。
const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
//单元魔方高度。
const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
const cubeCellHeight = computed(() => container_height.value / parseInt(density.value));
const getSelectedWidth = (item: data_magic) => {
return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
};
@ -147,11 +150,7 @@ const getSelectedLeft = (item: data_magic) => {
};
// 根据当前页面大小计算成百分比
const selected_style = (item: data_magic) => {
return `overflow: hidden;width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
};
// 计算成百分比
const percentage = (num: number) => {
return percentage_count(num, div_width.value);
return `overflow: hidden;width: calc(${getSelectedWidth(item)}px - ${ outer_spacing.value } ); height: calc(${getSelectedHeight(item)}px - ${ outer_spacing.value } ); top: ${getSelectedTop(item)}px;left: ${getSelectedLeft(item)}px;`;
};
//#endregion
//#region 组装页面显示的数据

15
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -10,6 +10,9 @@
</div>
</div>
</el-form-item>
<el-form-item label="容器高度" label-width="60">
<slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
@ -18,10 +21,10 @@
<!-- 风格9 -->
<template v-if="form.style_actived == 7">
<div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
<div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
<div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5 oh', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
<div class="cube-selected-text">
<template v-if="[0, 1].includes(index)">375 x 375 像素</template>
<template v-else>250 x 375 像素</template>
<template v-if="[0, 1].includes(index)">建议195 x {{ Math.round(form.container_height / 2) }}px</template>
<template v-else>建议130 x {{ Math.round(form.container_height / 2) }}px</template>
<div>{{ data_title(item) }}</div>
</div>
</div>
@ -163,11 +166,12 @@ onUnmounted(() => {
const handleResize = () => {
if (window.innerWidth <= 1560) {
const sales = 330 / 390;
cubeWidth.value = 330;
cubeHeight.value = 330;
cubeHeight.value = form.value.container_height * sales;
} else {
cubeWidth.value = 390;
cubeHeight.value = 390;
cubeHeight.value = form.value.container_height;
}
}
//#endregion
@ -176,7 +180,6 @@ const selected_active = ref(0);
// 切换风格
const style_click = (index: number) => {
form.value.data_magic_list = magic_list(index);
form.value.style_actived = index;
selected_active.value = 0;
tabs_name.value = 'content';

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

@ -40,7 +40,7 @@
</div>
</template>
<script setup lang="ts">
import { common_img_computer, common_styles_computer, radius_computer } from '@/utils';
import { common_img_computer, common_styles_computer, radius_computer, is_number } from '@/utils';
const props = defineProps({
value: {
@ -67,7 +67,10 @@ const spacing = computed(() => new_style_spacing.value / 2 + 'px');
const content_img_radius = computed(() => radius_computer(new_style.value));
//#region 容器大小计算
const div_width = ref(0);
const container_size = computed(() => form.value.style_actived === 10 ? '100%' : div_width.value + 'px');
// 如果容器高度为空，则取容器宽度
const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
const container_size = computed(() => form.value.style_actived === 10 ? '100%' : container_height.value + 'px');
const container_size_10 = computed(() => div_width.value + 'px');
const container = ref<HTMLElement | null>(null);
onMounted(() => {
@ -93,7 +96,7 @@ const density = ref('4');
//单元魔方宽度。
const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
//单元魔方高度。
const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
const cubeCellHeight = computed(() => container_height.value / parseInt(density.value));
const getSelectedWidth = (item: CubeItem) => {
return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
};
@ -111,12 +114,7 @@ const getSelectedLeft = (item: CubeItem) => {
};
// 根据当前页面大小计算成百分比
const selected_style = (item: CubeItem) => {
return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
};
// 计算成百分比
const percentage = (num: number) => {
const marks = (num / div_width.value) * 100;
return marks.toFixed(4) + '%';
return `width: ${getSelectedWidth(item)}px; height: ${getSelectedHeight(item)}px; top: ${getSelectedTop(item)}px; left: ${getSelectedLeft(item)}px;`;
};
//#endregion
// 公共样式

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

@ -10,20 +10,25 @@
</div>
</div>
</el-form-item>
<el-form-item v-if="form.style_actived !== 10" label="图片设置">
<el-radio-group v-model="form.img_fit">
<el-radio value="contain">等比缩放</el-radio>
<el-radio value="fill">铺满</el-radio>
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.style_actived !== 10">
<el-form-item label="容器高度">
<slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
</el-form-item>
<el-form-item label="图片设置">
<el-radio-group v-model="form.img_fit">
<el-radio value="contain">等比缩放</el-radio>
<el-radio value="fill">铺满</el-radio>
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
</template>
<template v-else>
<el-form-item label="限制尺寸">
<el-switch v-model="form.limit_size" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.limit_size == '1'">
<el-form-item label="图片高度">
<slider v-model="form.image_height" :max="500"></slider>
<slider v-model="form.image_height" :max="500" @update:model-value="handleResize"></slider>
</el-form-item>
<el-form-item label="图片设置">
<el-radio-group v-model="form.img_fit">
@ -47,7 +52,7 @@
<image-empty v-model="item.img[0]" :fit="form.img_fit" ></image-empty>
</template>
<template v-else>
<div class="cube-selected-text"> 250 x 750 像素</div>
<div class="cube-selected-text">建议130 x {{ form.container_height }}px</div>
</template>
</div>
</div>
@ -61,8 +66,8 @@
</template>
<template v-else>
<div class="cube-selected-text">
<template v-if="[0, 1].includes(index)">375 x 375 像素</template>
<template v-else>250 x 375 像素</template>
<template v-if="[0, 1].includes(index)">建议195 x {{ Math.round(form.container_height / 2) }}px</template>
<template v-else>建议130 x {{ Math.round(form.container_height / 2) }}px</template>
</div>
</template>
</div>
@ -130,11 +135,12 @@ onUnmounted(() => {
const handleResize = () => {
if (window.innerWidth <= 1560) {
const sales = 330 / 390;
cubeWidth.value = 330;
cubeHeight.value = 330;
cubeHeight.value = form.value.container_height * sales;
} else {
cubeWidth.value = 390;
cubeHeight.value = 390;
cubeHeight.value = form.value.container_height;
}
}
//#endregion
@ -147,6 +153,15 @@ const style_click = (index: number) => {
form.value.img_magic_list = cloneDeep(style_show_list[index]);
form.value.style_actived = index;
selected_active.value = 0;
if (index === 10) {
if (window.innerWidth <= 1560) {
cubeWidth.value = 330;
cubeHeight.value = 330;
} else {
cubeWidth.value = 390;
cubeHeight.value = 390;
}
}
}
// 选中的点击事件
const selected_click = (index: number) => {

3
src/config/const/data-magic.ts
View File

@ -9,6 +9,7 @@ interface data_magic {
interface defaultSearch {
content: {
style_actived: number;
container_height: number;
data_magic_list: data_magic[];
};
style: {
@ -22,6 +23,8 @@ const defaultSearch: defaultSearch = {
content: {
// 样式风格
style_actived: 0,
// 容器高度
container_height: 390,
// 数据列表
data_magic_list: [],
},

3
src/config/const/img-magic.ts
View File

@ -10,6 +10,7 @@ interface defaultSearch {
content: {
style_actived: number;
img_magic_list: img_magic[];
container_height: number;
img_fit: string;
limit_size: string,
image_height: number;
@ -44,6 +45,8 @@ const defaultSearch: defaultSearch = {
img_link: {}
}
],
// 容器高度
container_height: 390,
// 图标填充方式
img_fit: 'cover',
// 是否限制尺寸

8
src/utils/index.ts
View File

@ -15,6 +15,14 @@ export const predefine_colors = ['#fff', '#ddd', '#ccc', '#999', '#666', '#333',
export function is_obj_empty(obj: object): boolean {
return Object.keys(obj).length === 0;
}
/**
* 判断一个字符串是否是数字。
* @param val 要检查的值
* @returns 如果字符串为数字，则返回true；否则返回false。
*/
export function is_number(val: string | number): boolean {
return typeof val == 'number' && !isNaN(val);
}
/**
* 将对象或数组中的字符串转换为数字
* 此函数递归地遍历给定对象或数组，将所有能转换为数字的字符串转换成数字类型