首页布局

src/common/index.styl

@@ -5,8 +5,6 @@
   background: url('assets/bg.jpg') no-repeat fixed top;
 }
 
-
-
 .wrap .bg-left{
     position: absolute;
     pointer-events: auto;
@@ -17,37 +15,51 @@
 }
 
 .wrap .bg-top{
+    position: absolute;
     width: 97%;
     margin: 0 auto;
-    height: 116px;
+    height: 100.64px;
+    left: 1.5%;
+    top: 0;
 }
 
 .wrap .bg-top .animation{
-
+    position: absolute;
+    top: -1px;
+    left: 288px;
+    width: 1346px;
+    height: 162px;
 }
 
+// .wrap .bg-top .animation video{
+//     width: 1346px;
+//     height: 162px;
+//     object-fit: fill;
+//     mix-blend-mode: screen;
+//     filter: saturate(200%);
+// }
+
 .wrap .bg-top .animation span{
     position: absolute;
-    left: 651px;
+    left: 33%;
     top: 1px;
-    width: 610px;
+    width: 34%;
     height: 66px;
-    perspective: 610px;
-    font-family: '站酷酷黑体';
+    line-height: 60px;
     font-size: 50px;
-    font-weight: normal;
-    color: rgb(255, 255, 255);
+    color: #fff;
     text-align: center;
-    letter-spacing: 0px;
     overflow: hidden;
     cursor: pointer;
     pointer-events: auto;
+    transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
+    text-shadow: #0075ff 0px 0px 8px;
 }
 
 .wrap .bg-right{
     position: absolute;
     pointer-events: auto;
-    left: 1900px;
+    right: 10px;
     top: 16px;
     width: 12px;
     height: 96%;
@@ -63,6 +75,25 @@
 }
 
 .wrap .pic{
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
+}
+
+.content{
+    position: absolute;
+    top: 9%;
+    left: 2%;
+    width: 96%;
+    height: 87%;
+}
+
+.box-top{
+    width:100%;
+    height: 10px;
+    background:  url('assets/box-top.png') repeat fixed center;
+}
+
+.box-bottom{
+    width:100%;
+    background:  url('assets/box-bottom.png') repeat fixed top;
 }

src/common/portrait.styl

@@ -20,6 +20,10 @@
 }
 
 // margin
+.ma-2 {
+  margin: 8px;
+}
+
 .ma-3 {
   margin: 12px;
 }
@@ -175,6 +179,10 @@
   flex: 1;
 }
 
+.flex-2{
+  display: flex;
+  flex: 2;
+}
 // other
 .pointer{
   cursor:pointer;
@@ -242,3 +250,11 @@ h2{
 .ant-btn-link:hover, .ant-btn-link:focus{
   color: #13ACC4;
 }
+
+.fill-width{
+  width:100%;
+}
+
+.fill-height{
+  height:100%;
+}

src/components/Duration/Duration.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div>数据统计组件</div> -->
-  <div class="chart-box" :style="{ width: 'width', height: 'height' }">
-    <div id="Duration" style="width: 25%; height: 300%"></div>
+  <div :style="{ width: 'width', height: 'height' }" class="chart-box">
+    <div id="Duration" style="width: 100%"></div>
   </div>
 </template>
 <script>

src/components/Sensor/Sensor.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div>数据统计组件</div> -->
-  <div class="chart-box" :style="{ width: 'width', height: 'height' }">
-    <div id="Sensor" style="width: 25%; height: 300%"></div>
+  <div :style="{ width: 'width', height: 'height' }" class="chart-box">
+    <div id="Sensor" style="width: 100%;"></div>
   </div>
 </template>
 <script>

src/components/Statistics/Statistics.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div>数据统计组件</div> -->
-  <div class="chart-box" :style="{ width: 'width', height: 'height' }">
-    <div id="myChart" style="width: 25%; height: 300%"></div>
+  <div :style="{ width: 'width', height: 'height' }" class="chart-box">
+    <div id="myChart" style="width: 100%;"></div>
   </div>
 </template>
 <script>

src/views/Index/Index.vue

@@ -6,6 +6,15 @@
     <div class="bg-top">
       <img class="pic" src="~assets/bg-top.png" />
       <div class="animation">
+        <!-- <video src="~assets/top-video.webm"></video> -->
+        <video
+          autoplay
+          height="162"
+          loop
+          src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
+          style="width: 1346px; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%);"
+          width="1346"
+        ></video>
         <span>盐湖区人民医院数字看板</span>
       </div>
     </div>
@@ -15,22 +24,68 @@
     <div class="bg-bottom">
       <img class="pic" src="~assets/bg-bottom.png" />
     </div>
-    <!--进度条-->
-    <div class="content-title">背景</div>
-
-    <div class="content-wrap d-flex flex-column">
-      <!-- 右侧三列布局 -->
-      <div class="content">
-        <!-- 第一列 -->
-        <div class="calendar-column elevation-1">
-          <statistics />
-          <duration />
-          <sensor />
+    <!--内容区-->
+    <div class="content d-flex flex-column">
+      <!-- 第一行 -->
+      <div class="flex-2 flex-row">
+        <div class="flex-1 ma-2">
+          <div class="d-flex flex-column flex-1">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top"></div>
+              <div class="flex-1 fill-width box-bottom">
+                <statistics class="flex-1" />
+              </div>
+            </div>
+            <div style="width:100%;height:20px"></div>
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top"></div>
+              <div class="flex-1 fill-width box-bottom">
+                <duration class="flex-1" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex-2 ma-2">第二列</div>
+        <div class="flex-1 ma-2">
+          <div class="d-flex flex-column flex-1">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top"></div>
+              <div class="flex-1 fill-width box-bottom">
+                <sensor class="flex-1" />
+              </div>
+            </div>
+            <div style="width:100%;height:20px"></div>
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top"></div>
+              <div class="flex-1 fill-width box-bottom">
+                <div class="flex-1">第二行</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 第二行 -->
+      <div class="flex-1 flex-row">
+        <div class="flex-1 ma-2">
+          <div class="d-flex flex-column flex-1">
+            <div class="box-top"></div>
+            <div class="flex-1 fill-width box-bottom">第一列</div>
+          </div>
         </div>
         <!-- 第二列 -->
-        <div class="content-column content-column-2">第二列</div>
+        <div class="flex-2 ma-2">
+          <div class="d-flex flex-column flex-1">
+            <div class="box-top"></div>
+            <div class="flex-1 fill-width box-bottom">第二列</div>
+          </div>
+        </div>
         <!-- 第三列 -->
-        <div class="content-column content-column-3">第三列</div>
+        <div class="flex-1 ma-2">
+          <div class="d-flex flex-column flex-1">
+            <div class="box-top"></div>
+            <div class="flex-1 fill-width box-bottom">第三列</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>