feat:【商城】店铺装修-广告魔方:多个小块的边距减少 1 倍,视觉效果和 uniapp 更一致
This commit is contained in:
parent
0f43503085
commit
897ecfed6d
@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative"
|
||||
:style="{ height: `${rowCount * CUBE_SIZE}px`, width: `${4 * CUBE_SIZE}px` }"
|
||||
:style="{
|
||||
height: `${rowCount * CUBE_SIZE}px`,
|
||||
width: `${4 * CUBE_SIZE}px`,
|
||||
padding: `${property.space}px`
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="absolute"
|
||||
:style="{
|
||||
width: `${item.width * CUBE_SIZE - property.space * 2}px`,
|
||||
height: `${item.height * CUBE_SIZE - property.space * 2}px`,
|
||||
margin: `${property.space}px`,
|
||||
width: `${item.width * CUBE_SIZE - property.space}px`,
|
||||
height: `${item.height * CUBE_SIZE - property.space}px`,
|
||||
top: `${item.top * CUBE_SIZE}px`,
|
||||
left: `${item.left * CUBE_SIZE}px`
|
||||
}"
|
||||
@ -63,10 +66,10 @@ const rowCount = computed(() => {
|
||||
let count = 0
|
||||
if (props.property.list.length > 0) {
|
||||
// 最大行号
|
||||
count = Math.max(...props.property.list.map((item) => item.bottom))
|
||||
count = Math.max(...props.property.list.map((item) => item.top + item.height))
|
||||
}
|
||||
// 行号从 0 开始,所以加 1
|
||||
return count + 1
|
||||
// 保证至少有一行
|
||||
return count == 0 ? 1 : count
|
||||
})
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user