@vtx/player 0.0.15 → 0.0.16

package/lib/live-player/demo/src/pages/carHistory/components/Cover/index.css

@@ -0,0 +1,370 @@
+.page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: rgba(7, 27, 68, 0.8);
+}
+.earthTxt {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.earthTxt .label {
+  position: absolute;
+  color: #13ffea;
+  z-index: 2001;
+}
+.earthTxt .label1 {
+  -webkit-animation: move1 5s forwards;
+          animation: move1 5s forwards;
+  text-align: center;
+  margin: auto;
+  left: 0;
+  right: 0;
+}
+@-webkit-keyframes move1 {
+  from {
+    top: 20%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    top: 5%;
+    opacity: 1;
+    font-size: 42px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+@keyframes move1 {
+  from {
+    top: 20%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    top: 5%;
+    opacity: 1;
+    font-size: 42px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+.earthTxt .label2 {
+  -webkit-animation: move2 5s forwards;
+          animation: move2 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move2 {
+  from {
+    left: 20%;
+    bottom: 30%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    left: 10%;
+    bottom: 10%;
+    opacity: 0.4;
+    font-size: 24px;
+  }
+}
+@keyframes move2 {
+  from {
+    left: 20%;
+    bottom: 30%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    left: 10%;
+    bottom: 10%;
+    opacity: 0.4;
+    font-size: 24px;
+  }
+}
+.earthTxt .label3 {
+  -webkit-animation: move3 5s forwards;
+          animation: move3 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move3 {
+  from {
+    right: 20%;
+    bottom: 30%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    right: 10%;
+    bottom: 14%;
+    opacity: 0.6;
+    font-size: 28px;
+  }
+}
+@keyframes move3 {
+  from {
+    right: 20%;
+    bottom: 30%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    right: 10%;
+    bottom: 14%;
+    opacity: 0.6;
+    font-size: 28px;
+  }
+}
+.earthTxt .label4 {
+  -webkit-animation: move4 5s forwards;
+          animation: move4 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move4 {
+  from {
+    left: 20%;
+    top: 20%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    left: 3%;
+    top: 26%;
+    opacity: 0.6;
+    font-size: 26px;
+  }
+}
+@keyframes move4 {
+  from {
+    left: 20%;
+    top: 20%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    left: 3%;
+    top: 26%;
+    opacity: 0.6;
+    font-size: 26px;
+  }
+}
+.earthTxt .label5 {
+  -webkit-animation: move5 5s forwards;
+          animation: move5 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move5 {
+  from {
+    right: 20%;
+    top: 14%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    right: 10%;
+    top: 25%;
+    opacity: 0.6;
+    font-size: 32px;
+  }
+}
+@keyframes move5 {
+  from {
+    right: 20%;
+    top: 14%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    right: 10%;
+    top: 25%;
+    opacity: 0.6;
+    font-size: 32px;
+  }
+}
+.earthTxt .label6 {
+  -webkit-animation: move6 5s forwards;
+          animation: move6 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move6 {
+  from {
+    left: 20%;
+    bottom: 34%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    left: 12%;
+    bottom: 22%;
+    opacity: 0.8;
+    font-size: 24px;
+  }
+}
+@keyframes move6 {
+  from {
+    left: 20%;
+    bottom: 34%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    left: 12%;
+    bottom: 22%;
+    opacity: 0.8;
+    font-size: 24px;
+  }
+}
+.earthTxt .label7 {
+  -webkit-animation: move7 5s forwards;
+          animation: move7 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move7 {
+  from {
+    right: 20%;
+    bottom: 30%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    right: 12%;
+    bottom: 25%;
+    opacity: 0.2;
+    font-size: 18px;
+  }
+}
+@keyframes move7 {
+  from {
+    right: 20%;
+    bottom: 30%;
+    opacity: 0;
+    font-size: 16px;
+  }
+  to {
+    right: 12%;
+    bottom: 25%;
+    opacity: 0.2;
+    font-size: 18px;
+  }
+}
+.earthTxt .label8 {
+  -webkit-animation: move8 5s forwards;
+          animation: move8 5s forwards;
+  text-align: center;
+  margin: auto;
+  left: 0;
+  right: 0;
+}
+@-webkit-keyframes move8 {
+  from {
+    bottom: 20%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    bottom: 5%;
+    opacity: 0.5;
+    font-size: 24px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+@keyframes move8 {
+  from {
+    bottom: 20%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    bottom: 5%;
+    opacity: 0.5;
+    font-size: 24px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+.earthTxt .label9 {
+  -webkit-animation: move9 5s forwards;
+          animation: move9 5s forwards;
+}
+@-webkit-keyframes move9 {
+  from {
+    left: 20%;
+    top: 30%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    left: 8%;
+    top: 50%;
+    opacity: 0.5;
+    font-size: 24px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+@keyframes move9 {
+  from {
+    left: 20%;
+    top: 30%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    left: 8%;
+    top: 50%;
+    opacity: 0.5;
+    font-size: 24px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+.earthTxt .label10 {
+  -webkit-animation: move10 5s forwards;
+          animation: move10 5s forwards;
+  text-align: center;
+}
+@-webkit-keyframes move10 {
+  from {
+    right: 20%;
+    top: 50%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    right: 5%;
+    opacity: 0.5;
+    top: 55%;
+    font-size: 24px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}
+@keyframes move10 {
+  from {
+    right: 20%;
+    top: 50%;
+    opacity: 0;
+    -webkit-transform: scaleZ(1);
+            transform: scaleZ(1);
+  }
+  to {
+    right: 5%;
+    opacity: 0.5;
+    top: 55%;
+    font-size: 24px;
+    -webkit-transform: scaleZ(3);
+            transform: scaleZ(3);
+  }
+}

package/lib/live-player/demo/src/pages/carHistory/components/Cover/index.less

@@ -0,0 +1,235 @@
+.page {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background: rgba(7, 27, 68, 0.8);
+}
+.earthTxt {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .label {
+        position: absolute;
+        color: rgba(19, 266, 234, 1);
+        z-index: 2001;
+    }
+
+    .label1 {
+        animation: move1 5s forwards;
+        text-align: center;
+        margin: auto;
+        left: 0;
+        right: 0;
+    }
+
+    @keyframes move1 {
+        from {
+            top: 20%;
+            opacity: 0;
+            transform: scaleZ(1);
+        }
+
+        to {
+            top: 5%;
+            opacity: 1;
+            font-size: 42px;
+            transform: scaleZ(3);
+        }
+    }
+
+    .label2 {
+        animation: move2 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move2 {
+        from {
+            left: 20%;
+            bottom: 30%;
+            opacity: 0;
+            font-size: 16px;
+        }
+
+        to {
+            left: 10%;
+            bottom: 10%;
+            opacity: 0.4;
+            font-size: 24px;
+        }
+    }
+
+    .label3 {
+        animation: move3 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move3 {
+        from {
+            right: 20%;
+            bottom: 30%;
+            opacity: 0;
+            font-size: 16px;
+        }
+
+        to {
+            right: 10%;
+            bottom: 14%;
+            opacity: 0.6;
+            font-size: 28px;
+        }
+    }
+
+    .label4 {
+        animation: move4 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move4 {
+        from {
+            left: 20%;
+            top: 20%;
+            opacity: 0;
+            font-size: 16px;
+        }
+
+        to {
+            left: 3%;
+            top: 26%;
+            opacity: 0.6;
+            font-size: 26px;
+        }
+    }
+
+    .label5 {
+        animation: move5 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move5 {
+        from {
+            right: 20%;
+            top: 14%;
+            opacity: 0;
+            font-size: 16px;
+        }
+
+        to {
+            right: 10%;
+            top: 25%;
+            opacity: 0.6;
+            font-size: 32px;
+        }
+    }
+
+    .label6 {
+        animation: move6 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move6 {
+        from {
+            left: 20%;
+            bottom: 34%;
+            opacity: 0;
+            font-size: 16px;
+        }
+
+        to {
+            left: 12%;
+            bottom: 22%;
+            opacity: 0.8;
+            font-size: 24px;
+        }
+    }
+
+    .label7 {
+        animation: move7 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move7 {
+        from {
+            right: 20%;
+            bottom: 30%;
+            opacity: 0;
+            font-size: 16px;
+        }
+
+        to {
+            right: 12%;
+            bottom: 25%;
+            opacity: 0.2;
+            font-size: 18px;
+        }
+    }
+
+    .label8 {
+        animation: move8 5s forwards;
+        text-align: center;
+        margin: auto;
+        left: 0;
+        right: 0;
+    }
+
+    @keyframes move8 {
+        from {
+            bottom: 20%;
+            opacity: 0;
+            transform: scaleZ(1);
+        }
+
+        to {
+            bottom: 5%;
+            opacity: 0.5;
+            font-size: 24px;
+            transform: scaleZ(3);
+        }
+    }
+
+    .label9 {
+        animation: move9 5s forwards;
+    }
+
+    @keyframes move9 {
+        from {
+            left: 20%;
+            top: 30%;
+            opacity: 0;
+            transform: scaleZ(1);
+        }
+
+        to {
+            left: 8%;
+            top: 50%;
+            opacity: 0.5;
+            font-size: 24px;
+            transform: scaleZ(3);
+        }
+    }
+
+    .label10 {
+        animation: move10 5s forwards;
+        text-align: center;
+    }
+
+    @keyframes move10 {
+        from {
+            right: 20%;
+            top: 50%;
+            opacity: 0;
+            transform: scaleZ(1);
+        }
+
+        to {
+            right: 5%;
+            opacity: 0.5;
+            top: 55%;
+            font-size: 24px;
+            transform: scaleZ(3);
+        }
+    }
+}

package/lib/live-player/demo/src/pages/carHistory/components/Earth/index.css

@@ -0,0 +1,10 @@
+.earth {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
+  z-index: 2000;
+}

package/lib/live-player/demo/src/pages/carHistory/components/Earth/index.less

@@ -0,0 +1,10 @@
+.earth {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #000;
+    z-index: 2000;
+}