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


    在这里插入图片描述

    <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>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    在这里插入图片描述

    <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>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
  • 相关阅读:
    简单了解GaussDB
    K8S集群进行分布式负载测试
    重新认识AUTOSAR Interface
    uniapp小程序接入腾讯云【增强版人脸核身接入】
    【三维重建】相移法+格雷码
    vue3 解决双击与单击事件的冲突
    React 路由/5版本
    05【保姆级】-GO语言的标识符
    C语言函数(2)
    Linux系统性能监测工具——网络/进程
  • 原文地址:https://blog.csdn.net/qq_45777315/article/details/134015269