vue首页多模块布局(标题布局)

java 复制代码
<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>
java 复制代码
<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>
相关推荐
赵得C3 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
叫我阿柒啊4 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
@八度余温6 小时前
eslint 和 prettier 的相同点和区别
vue·eslint
周航宇JoeZhou8 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
计算机学长felix10 小时前
基于Django的“酒店推荐系统”设计与开发(源码+数据库+文档+PPT)
数据库·python·mysql·django·vue
陶甜也12 小时前
threeJS 实现开花的效果
前端·vue·blender·threejs
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
借你耳朵说爱你1 天前
浅拷贝和深拷贝两种不同的对象复制
vue·web
F2E_Zhangmo1 天前
基于cornerstone3D的dicom影像浏览器 第四章 鼠标实现翻页、放大、移动、窗宽窗位调节
vue·cornerstone·cornerstone3d·cornerstonejs