农场 nuxt3实现的大屏界面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

37 lines
822 B

<template>
<div :style="{ width: body.left.width }">
<div
class="item m-t"
:style="{
width: item.width,
height: item.height,
'background-image': `url(${item.background.image})`,
}"
v-for="item in body.left.data"
:key="item.title.text"
>
<!-- 区块标题-->
<DataCenterTitle :item="item"></DataCenterTitle>
<div class="p-16 flex-1 overflow-hidden">
<component :is="item.component"></component>
</div>
</div>
</div>
</template>
<script setup>
import useLayoutConfig from '@/hooks/useLayoutConfig';
const body = useLayoutConfig();
</script>
<style scoped>
.item {
background-position: left top;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
}
</style>