grid网格布局实现图表框架(vue)

最新推荐文章于 2024-04-16 19:48:14 发布

查查茶茶丸

最新推荐文章于 2024-04-16 19:48:14 发布

阅读量704

点赞数

文章标签： vue.js 数学建模前端

本文链接：https://blog.csdn.net/KK_vicent/article/details/131231030

版权

需求

需要实现一个如图所示的界面

实现

用grid布局来实现

      <div class="inner">
        <div v-for="(item, index) in componentList" :key="item.id" :class="'comp' + index">
          <component
            :is="item.component"
            :title="item.name"
          ></component>
        </div>
      </div>
      

const componentList = [
  {
    name: "comp1",
    component: comp1,
  },
  {
    name: "comp2",
    component: comp2,
  },
  {
    name: "comp3",
    component: comp3,
  },
  {
    name: "comp4",
    component: comp4,
  },
  {
    name: "comp5",
    component: comp5,
  },
  {
    name: "comp6",
    component: comp6,
  },
  {
    name: "comp7",
    component: comp7,
  },
  {
    name: "comp8",
    component: comp8,
  },
  {
    name: "comp9",
    component: comp9,
  },
];


      // css (stylus)
      .inner
        display: grid
        justify-content: center
        grid-template-columns: vw(430) vw(372) vw(579) vw(430)
        grid-template-rows: repeat(3, vh(310))
        grid-gap: vw(15) vw(20)
        .comp0
          grid-row: 1
          grid-column: 1
        .comp1
          grid-row: 1 / span 2
          grid-column: 2 / span 2
        .comp2
          grid-row: 1
          grid-column: 4
        .comp3
          grid-row: 2
          grid-column: 1
        .comp4
          grid-row: 2
          grid-column: 4
        .comp5
          grid-row: 3
          grid-column: 1
        .comp6
          grid-row: 3
          grid-column: 2
        .comp7
          grid-row: 3
          grid-column: 3
        .comp8
          grid-row: 3
          grid-column: 4