构建demo

docs/gif/css/common.css

@@ -2,9 +2,48 @@ html, body, .container {
     height: 100%;
 }
 
-.artplayer {
-    width: 800px;
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.part-top {
+    display: flex;
+    height: 70%;
+}
+
+.part-bottom {
+    position: relative;
+    height: 30%;
+}
+
+.part-left {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-left .artplayer {
+    width: 500px;
     height: 500px;
-    margin: 20px auto 0;
     background: #fff;
+}
+
+.part-right .preview {
+    width: 500px;
+    height: 500px;
+    background: #f3f3f3;
+}
+
+.part-right .preview img {
+    width: 100%;
+    max-width: 100%;
 }