large_screen/src/views/newmain.vue

<template>
  <div class="grid">
    <div class="item1 item">
      <item1></item1>
    </div>
    <div class="span-col-2 span-row-3 item2 item">
      <Main></Main>
    </div>
    <!-- <div class="span-col-2 span-row-3 item2">item2</div> -->
    <div class="item3 item">
      <item3></item3>
    </div>
    <div class="item4 item">
      <excavation></excavation>
    </div>
    <div class="item5 item">
      <item5></item5>
    </div>
    <div class="item6 item">
      <item6></item6>
    </div>
    <div class="item7 item">
      <item7></item7>
    </div>
    <div class="item8 item">
      <coal-proportion></coal-proportion>
    </div>
    <div class="span-col-2 span-row-2 item9 item">
      <div class="watch watch1">
        <m3u8></m3u8>
      </div>
      <div class="watch watch2">
        <m3u8></m3u8>
      </div>
      <div class="watch watch3">
        <m3u8></m3u8>
      </div>
      <div class="watch watch4">
        <m3u8></m3u8>
      </div>
      <div class="watch watch5">
        <m3u8></m3u8>
      </div>
      <div class="watch watch6">
        <m3u8></m3u8>
      </div>
    </div>
    <div class="item10 item">
      <equipment></equipment>
    </div>
    <div class="item11 item">
      <coal-position></coal-position>
    </div>
    <div class="item12 item">
      <item12></item12>
    </div>
  </div>
</template>

<script>
import Main from "../components/newMain/item2/Main";
import item1 from "@/components/newMain/item1";
import item6 from "@/components/newMain/item6";
import item5 from "@/components/newMain/item5";
import item7 from "@/components/newMain/item7";
import item3 from "@/components/newMain/item3";
import item12 from "@/components/newMain/item12";
import excavation from "@/components/newMain/item4";
import coalPosition from "@/components/newMain/item11";
import coalProportion from "@/components/newMain/item8";
import equipment from "@/components/newMain/item10";
import m3u8 from "@/common/m3u8";

export default {
  name: "newMain",
  components: {
    Main,
    item1,
    item6,
    item5,
    item7,
    item3,
    item12,
    excavation,
    coalPosition,
    coalProportion,
    equipment,
    m3u8,
  },
};
</script>

<style lang="less" scoped>
.grid {
  // background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
  //   linear-gradient(
  //     to top,
  //     rgba(255, 255, 255, 0.4) 0%,
  //     rgba(0, 0, 0, 0.25) 200%
  //   );
  background: #bdc3c7; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #2c3e50,
    #bdc3c7
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #2c3e50,
    #bdc3c7
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  width: 100%;
  height: 890px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
  .item {
    position: relative;
    background-color: #303030;
    border-radius: 20px;
    padding: 0px;
  }
}
.span-col-2 {
  grid-column: span 2 / auto;
}

.span-row-3 {
  grid-row: span 3 / auto;
}

.span-row-2 {
  grid-row: span 2 / auto;
}
.item9 {
  display: grid;
  grid-template-columns: repeat(3, 257px);
  grid-template-rows: repeat(3, 160px);
  grid-gap: 5px;
  .watch {
    margin-top: 20px;
  }
}
</style>