mm

src/views/dashboard-screen/index.vue

@@ -3,7 +3,13 @@
     <div class="header"></div>
     <div class="content-wrap">
       <div class="coner left">
-        <div></div>
+        <div class="o-item map">
+          1
+        </div>
+        <div class="o-item">2</div>
+        <div class="o-item">3</div>
+        <div class="o-item">4</div>
+        <div class="o-item">5</div>
       </div>
       <div class="coner right"></div>
     </div>
@@ -57,18 +63,34 @@ export default {
     width: 100%;
     height: 100%;
     flex-grow: 1;
-    display: grid;
-    grid-template-columns: 4fr 1fr;
-    grid-template-rows: 100%;
-    grid-auto-flow: row;
+    display: flex;
 
     .coner {
       &.left {
-        //background: teal;
+        flex-grow: 1;
+        height: 100%;
+        background: teal;
+        display: grid;
+        grid-template-rows: 4fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-auto-flow: row;
+
+        .o-item {
+          font-size: 4em;
+          text-align: center;
+          border: 1px solid #e5e4e9;
+          &.map {
+            grid-column-start: 1;
+            grid-column-end: 5;
+          }
+        }
       }
 
       &.right {
-        //background: snow;
+        width: 450px;
+        height: 100%;
+        flex-shrink: 0;
+        background: snow;
       }
     }
   }