luma page video list component is ready

web/src/assets/css/home.styl

@@ -23,6 +23,8 @@
         .el-image {
           width 48px
           height 48px
+          background-color #ffffff
+          border-radius 50%
         }
       }
 

web/src/assets/css/index.styl

@@ -56,6 +56,7 @@
 
         .el-image {
           height 50px
+          background-color #ffffff
         }
 
         .el-button {
@@ -72,6 +73,9 @@
   .content {
     text-align: center;
     position relative
+    display flex
+    flex-flow: column;
+    align-items: center;
 
     h1 {
       font-size: 5rem;
@@ -88,6 +92,10 @@
       max-width 900px
       padding 20px
 
+      .el-space--horizontal {
+        justify-content center
+      }
+
       .nav-item {
         width 200px
         .el-button {

web/src/assets/css/login.styl

@@ -30,6 +30,8 @@
       .el-image {
         width 120px;
         cursor pointer
+        background-color #ffffff
+        border-radius 50%
       }
     }
 

web/src/assets/css/luma.styl

@@ -95,12 +95,49 @@
 
   }
 
-  .h-title {
-    color #ffffff
-    max-width 56rem
+
+  .video-container {
+    display flex
+    flex-flow column
     width 100%
-    padding 40px 20
-    font-size 36px
-    text-align left
+    padding 0 40px
+
+    .h-title {
+      color #ffffff
+      width 100%
+      font-size 36px
+      text-align left
+    }
+
+    .videos {
+      display flex
+      flex-flow row
+
+      .item {
+
+        .video-box {
+          width 100%
+          border-radius 10px
+          video,img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius 10px
+            cursor pointer
+          }
+        }
+
+        .video-name {
+          color #e1e1e1
+          font-size 16px
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
+          padding 6px 0
+          text-align center
+        }
+      }
+    }
   }
+
 }