当前位置：首页 > news >正文

vue首页多模块布局（标题布局）

news 2025/9/10 17:18:27

在这里插入图片描述

<template><div class="box"><div class="content"><div class="box1" style="background-color: rgb(245,23,156)">第一个</div><div class="box2" style="background-color: rgb(12,233,3)">第二个</div><div class="box3" style="background-color: rgb(109,5,255)">第三个</div><div class="box4" style="background-color: rgb(233,187,3)">第四个</div><div class="box5" style="background-color: rgb(233,3,34)">第五个</div><div class="box6" style="background-color: rgb(245,23,156)">第六个</div><div class="box7" style="background-color: rgb(3,179,233)">第七个</div><div class="box8" style="background-color: rgb(233,187,3)">第八个</div></div></div></template><script>
export default {components: {//组件},provide() {return {};},data() {return {};},created() { //创建时},methods: {}
};
</script><style scoped>.box{height: calc(100% - 40px);background-color: red;padding: 20px;}.content{width: 100%;height: 100%;background-color: #fff;/*  设置网格布局  */display: grid;/*  设置列数 每个行岁站的份数  */grid-template-columns: repeat(3,1fr);/*  设置行数 每个行所占的份数  */grid-template-rows: repeat(3,1fr);/*  网格间距  */gap: 10px;}/*  跨列  */.box7{grid-column: span 2;}</style>

在这里插入图片描述

<template><div class="box"><div class="content"><div class="box0" style="background-color: #409EFF">此处未标题</div><div class="box1" style="background-color: rgb(245,23,156)">第一个</div><div class="box2" style="background-color: rgb(12,233,3)">第二个</div><div class="box3" style="background-color: rgb(109,5,255)">第三个</div><div class="box4" style="background-color: rgb(233,187,3)">第四个</div><div class="box5" style="background-color: rgb(233,3,34)">第五个</div><div class="box6" style="background-color: rgb(245,23,156)">第六个</div><div class="box7" style="background-color: rgb(3,179,233)">第七个</div><div class="box8" style="background-color: rgb(233,187,3)">第八个</div></div></div></template><script>
export default {components: {//组件},provide() {return {};},data() {return {};},created() { //创建时},methods: {}
};
</script><style scoped>.box{height: calc(100% - 40px);background-color: red;padding: 20px;}.content{width: 100%;height: 100%;background-color: #fff;/*  设置网格布局  */display: grid;/*  设置列数 每个行岁站的份数  */grid-template-columns: repeat(3,1fr);/*  设置行数 每个行所占的份数  这种是统一样式固定排列grid-template-rows: repeat(3,1fr);*/grid-template-rows: 50px 1fr 1fr 1fr;/* 解读： 第一行50px高度 后面默认统一 *//*  网格间距  */gap: 10px;}/*  跨列  */.box7{grid-column: span 2;}.box0{grid-column: span 3;}</style>