|
|
@@ -1,146 +0,0 @@
|
|
|
-<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>
|
