转换的列子
代码片段
<template>
<div class="box">
<template v-for="(item,index) in list">
<div class="box-list bottom" :style="handleBootom(item)" :key="index">
<div class="box-list-content">
</div>
</div>
<div class="box-list" :style="handleTop(item)" :key="'top'+index">
<div class="box-list-content">
</div>
</div>
<div v-if="!item.noLeftLine" class="box-list left" :style="handleLeft(item)" :key="'left'+index">
<div class="box-list-content"><div v-if="item.leftDoor" class="box-list-door"></div></div>
</div>
<div class="box-list right" :style="handleRight(item)" :key="'right'+index">
<div class="box-list-content">
<div v-if="item.rightDoor" class="box-list-door"></div>
</div>
</div>
<div v-if="!item.noTopLine" class="box-list back" :style="handleBack(item)" :key="'back'+index">
<div class="box-list-content">
<div v-if="item.backDoor" class="box-list-door"></div>
</div>
</div>
<div class="box-list front" :style="handleFront(item)" :key="'front'+index">
<div class="box-list-content">
<div class="box-list-text"></div>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
zHeight:80,//墙壁高度
};
},
props:{
list:{
type:Array,
default:(()=>[])
},
},
computed: {
},
methods:{
handleBootom({height,width,x,y}){
let newy = 0
newy = -(height/2+y)
return `transform: rotateX(-90deg) translateZ(${-height / 2 + this.zHeight}px) translateY(${newy}px) translateX(${x}px);width:${width}px;height:${height}px;`;
},
handleTop({height,width,x,y}){
let newy = 0
newy = -(height/2+y)
return `transform: rotateX(-90deg) translateZ(${-height / 2}px) translateY(${newy}px) translateX(${x}px);width:${width}px;height:${height}px;`;
},
handleLeft({height,width,x,y}){
let newy = 0
newy = -(height/2+y)
return `transform:rotateY(90deg) translateZ(${-height / 2+x}px) translateX(${newy}px);width:${height}px;height:${this.zHeight}px;`;
},
handleRight({height,width,x,y}){
let newy = 0
newy = -(height/2+y)
return `transform:rotateY(-90deg) translateZ(${-width + height / 2 - x}px) translateX(${-newy}px);width:${height}px;height:${this.zHeight}px;`;
},
handleBack({height,width,x,y}){
let newy = y
return `transform: translateZ(${newy}px) translateX(${x}px);width:${width}px;height:${this.zHeight}px;`;
},
handleFront({height,width,x,y}){
let newy = y +height
return `transform: translateZ(${newy}px) translateX(${x}px);width:${width}px;height:${this.zHeight}px;`;
},
}
};
</script>
<style lang="scss" scoped>
.box {
width: 600px;
height: 400px;
text-align: center;
font-size: 24px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(20deg);
}
.front {
position: absolute;
width: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.back {
position: absolute;
width: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.left {
position: absolute;
width: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.right {
position: absolute;
width: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.top {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.bottom {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.box-list{
position: absolute;
left: 0;
top: 0;
border: 1px solid red;
}
.box-list-content{
width: 100%;
height: 100%;
position: relative;
.box-list-text{
position: absolute;
top: -30px;
left: 0px;
font-size: 12px;
color: black;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform-style:flat;
perspective: none;
}
.box-list-door{
position: absolute;
bottom: 0;
left: 20px;
height: 40px;
background: pink;
border-radius: 10px 10px 0 0;
width: 30px;
font-size: 12px;
}
}
.front {
background-color: #003A94;
// transform: translateZ(100px);
}
.left {
background-color: #003A94;
}
.right {
background-color: #003A94;
}
.top {
background-color: rgb(12, 12, 12);
}
.bottom {
background-color: #003A94;
}
.back {
background-color: #003A94;
}
</style>
数据list
let list = [
{
id: "1694588056395",
geoPoint: "34,43",
productId: "",
productName: "框",
width: "69",
height: "144",
type: "2",
txt: null,
backDoor: true,
},
{
id: "1694588065822",
geoPoint: "34,187",
productId: "",
productName: "框",
width: "187",
height: "140",
type: "2",
txt: null,
leftDoor: true,
},
{
id: "1694588076961",
geoPoint: "219,43",
productId: "",
productName: "框",
width: "131",
height: "284",
type: "2",
txt: null,
leftDoor: true,
},
{
id: "1694588119402",
geoPoint: "103,43",
productId: "",
productName: "框",
width: "118",
height: "72",
type: "2",
txt: null,
},
{
id: "1694588153587",
geoPoint: "350,189",
productId: "",
productName: "框",
width: "128",
height: "138",
type: "2",
txt: null,
rightDoor: true,
},
{
id: "1694860108680",
geoPoint: "103,114",
productId: "",
productName: "框",
width: "118",
height: "73",
type: "2",
txt: null,
},
{
id: "1694860172207",
geoPoint: "350,116",
productId: "",
productName: "框",
width: "118",
height: "73",
type: "2",
txt: null,
},
{
id: "1694860238576",
geoPoint: "350,43",
productId: "",
productName: "框",
width: "118",
height: "73",
type: "2",
txt: null,
leftDoor: true,
},
{
id: "1694860346378",
geoPoint: "468,43",
productId: "",
productName: "框",
width: "87",
height: "146",
type: "2",
txt: null,
leftDoor: true,
},
{
id: "1694860376220",
geoPoint: "478,189",
productId: "",
productName: "框",
width: "77",
height: "138",
type: "2",
txt: null,
},
];
list.forEach((item) => {
if (item.width) {
item.width = Number(item.width);
item.height = Number(item.height);
}
if (item.type == 2) {
item.x = Number(item.geoPoint.split(",")[0]);
item.y = Number(item.geoPoint.split(",")[1]);
newList.push(item);
}
});
后续自己可以根据自己想要的效果美化样式，列如：
