实现特殊的循环布局

实现特殊的循环布局_第1张图片

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        column-count: 2;
        column-gap: 20px;
      }
      .list:first-child {
        height: 100%;
      }
      .list:not(:first-child) {
        height: calc(50% - 10px);
      }
      .list:not(:nth-child(2n -1)) {
        margin-bottom: 20px;
      }

      .self_box {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, calc(50% - 10px));
      }
      .item-1 {
        grid-row: 1 / 3;
      }
    style>

    <script src="./vue/unocss.js">script>
    <script src="./vue/vue.js">script>
  head>
  <body>
    <div id="app" class="grid place-items-center h-100vh w-100vw">
      <div class="h-400px w-800px box">
        <div v-for="(item,i) in list" class="list grid place-items-center text-80px" :class="item.bg">{{i}}div>
      div>

      <div class="h-400px w-800px self_box">
        <div v-for="(item,i) in list" class="grid place-items-center text-80px" :class="item.bg">{{i}}div>
      div>
    div>

    <script>
      new Vue({
        el: '#app',

        data() {
          return {
            list: [
              {
                bg: 'item-1 bg-#ef342a',
              },
              {
                bg: 'bg-green',
              },
              {
                bg: 'bg-orange',
              },
            ],
          }
        },
        computed: {},
      })
    script>
  body>
html>

你可能感兴趣的:(javascript,开发语言,ecmascript)