@vtx/player 0.0.14 → 0.0.17

package/lib/live-player/demo/src/components/vtxModals/lib/vtx-vehicle-modal/style/index.css

@@ -0,0 +1,245 @@
+.vehicle-base-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.vehicle-base-content .left {
+  width: 450px;
+  padding: 24px 24px 24px 28px;
+  background-color: var(--sub-bg-color);
+}
+.vehicle-base-content .right {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  padding: 24px 32px;
+}
+.vehicle-base-content .right .top {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 280px;
+}
+.vehicle-base-content .right .top .info {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 0;
+}
+.vehicle-base-content .right .top .info .ant-carousel .slick-dots-bottom {
+  bottom: -40px;
+}
+.vehicle-base-content .right .top .info .ant-carousel .slick-dots-bottom > li {
+  width: 6px;
+  height: 6px;
+}
+.vehicle-base-content .right .top .info .ant-carousel .slick-dots-bottom > li > button {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.vehicle-base-content .right .top .stat {
+  width: 380px;
+}
+.vehicle-base-content .right .top .stat .stat-item {
+  min-width: 180px;
+  margin-top: 37px;
+  margin-right: 0;
+}
+.vehicle-base-content .right .hr {
+  height: 1px;
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), color-stop(#506f6d), to(rgba(255, 255, 255, 0.09)));
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), #506f6d, rgba(255, 255, 255, 0.09));
+  -webkit-box-shadow: 0 1px 0 0 #000;
+          box-shadow: 0 1px 0 0 #000;
+  opacity: 0.2;
+}
+.vehicle-base-content .right .chart-container {
+  padding: 24px 0;
+}
+.vehicle-warning-content {
+  position: relative;
+  padding: 24px;
+}
+.vehicle-warning-content .filter {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  z-index: 10;
+}
+.vehicle-warning-content .vtx-sub-tabs .tab-pane {
+  padding: 6px 0;
+}
+.ant-space {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.vtx-vehicle-ext-btn {
+  --color: #222;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  cursor: pointer;
+}
+.vtx-vehicle-ext-btn.dark {
+  --color: #a9d5d3;
+}
+.vtx-vehicle-ext-btn img {
+  width: 38px;
+  height: 42px;
+  margin-right: 8px;
+}
+.vtx-vehicle-ext-btn span {
+  color: var(--color);
+}
+.real-time-info {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 12px;
+}
+.real-time-info.dark {
+  background: -webkit-gradient(linear, left bottom, left top, from(#d2fffc), to(#8de5df));
+  background: linear-gradient(0deg, #d2fffc 0%, #8de5df 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.real-time-info img {
+  margin-right: 10px;
+}
+.real-time-info span {
+  font-size: 12px;
+}
+.real-time-status {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.real-time-status.dark {
+  --bg-color: #30767233;
+  --text-color: #55ffe1;
+}
+.real-time-status > div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 80px;
+  height: 28px;
+  margin-left: auto;
+  background-color: var(--bg-color);
+  border-radius: 14px;
+}
+.real-time-status > div img {
+  margin-right: 4px;
+}
+.real-time-status > div span {
+  color: var(--text-color);
+  font-size: 14px;
+}
+.real-info-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 32px;
+}
+.real-info-item.dark {
+  --label-color: #cafdff;
+  --value-color: #fff;
+}
+.real-info-item .label {
+  color: var(--label-color);
+  font-size: 12px;
+}
+.real-info-item .value .number {
+  color: var(--value-color);
+  font-size: 22px;
+}
+.real-info-item .value .unit {
+  color: var(--value-color);
+  font-size: 12px;
+}
+.real-drive {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-top: 32px;
+  margin-left: 48px;
+}
+.real-drive .real-time-progress {
+  margin-right: 32px;
+}
+.real-drive .real-time-progress.dark .ant-progress-text {
+  color: white;
+}
+.real-speed {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-top: 32px;
+  margin-left: 42px;
+}
+.real-speed .img {
+  margin-right: 28px;
+}
+.real-time-vehicle {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.real-time-vehicle .vehicle {
+  width: 257px;
+}
+.real-time-vehicle .ring {
+  margin-top: -70px;
+}
+.community-throw-content {
+  padding: 24px;
+}
+.community-throw-content .top-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 32px;
+  padding-left: 28px;
+}
+.community-throw-content .top-bar .right {
+  margin-left: auto;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vtx-vehicle-modal/style/index.less

@@ -0,0 +1,218 @@
+.vehicle-base-content {
+    display: flex;
+
+    .left {
+        width: 450px;
+        padding: 24px 24px 24px 28px;
+        background-color: var(--sub-bg-color);
+    }
+
+    .right {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: 24px 32px;
+
+        .top {
+            display: flex;
+            height: 280px;
+            .info {
+                flex-grow: 1;
+                width: 0;
+                .ant-carousel {
+                    .slick-dots-bottom {
+                        bottom: -40px;
+                        > li {
+                            width: 6px;
+                            height: 6px;
+                            > button {
+                                width: 100%;
+                                height: 100%;
+                                border-radius: 50%;
+                            }
+                        }
+                    }
+                }
+            }
+            .stat {
+                width: 380px;
+                .stat-item {
+                    min-width: 180px;
+                    margin-top: 37px;
+                    margin-right: 0;
+                }
+            }
+        }
+        .hr {
+            height: 1px;
+            background: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.1),
+                #506f6d,
+                rgba(255, 255, 255, 0.09)
+            );
+            box-shadow: 0 1px 0 0 #000;
+            opacity: 0.2;
+        }
+        .chart-container {
+            padding: 24px 0;
+        }
+    }
+}
+
+.vehicle-warning-content {
+    position: relative;
+    padding: 24px;
+    .filter {
+        position: absolute;
+        top: 24px;
+        right: 24px;
+        z-index: 10;
+    }
+    .vtx-sub-tabs {
+        .tab-pane {
+            padding: 6px 0;
+        }
+    }
+}
+.ant-space {
+    display: flex;
+}
+.vtx-vehicle-ext-btn {
+    --color: #222;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &.dark {
+        --color: #a9d5d3;
+    }
+    img {
+        width: 38px;
+        height: 42px;
+        margin-right: 8px;
+    }
+    span {
+        color: var(--color);
+    }
+}
+
+.real-time-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    &.dark {
+        background: linear-gradient(0deg, #d2fffc 0%, #8de5df 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+    img {
+        margin-right: 10px;
+    }
+    span {
+        font-size: 12px;
+    }
+}
+
+.real-time-status {
+    &.dark {
+        --bg-color: #30767233;
+        --text-color: #55ffe1;
+    }
+    display: flex;
+    > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 28px;
+        margin-left: auto;
+        background-color: var(--bg-color);
+        border-radius: 14px;
+
+        img {
+            margin-right: 4px;
+        }
+        span {
+            color: var(--text-color);
+            font-size: 14px;
+        }
+    }
+}
+
+.real-info-item {
+    &.dark {
+        --label-color: #cafdff;
+        --value-color: #fff;
+    }
+    display: flex;
+    flex-direction: column;
+    margin-right: 32px;
+    .label {
+        color: var(--label-color);
+        font-size: 12px;
+    }
+    .value {
+        .number {
+            color: var(--value-color);
+            font-size: 22px;
+            // font-family: DIN-Regular, serif;
+        }
+        .unit {
+            color: var(--value-color);
+            font-size: 12px;
+        }
+    }
+}
+
+.real-drive {
+    display: flex;
+    align-items: center;
+    margin-top: 32px;
+    margin-left: 48px;
+    .real-time-progress {
+        margin-right: 32px;
+        &.dark {
+            .ant-progress-text {
+                color: white;
+            }
+        }
+    }
+}
+
+.real-speed {
+    display: flex;
+    align-items: center;
+    margin-top: 32px;
+    margin-left: 42px;
+
+    .img {
+        margin-right: 28px;
+    }
+}
+
+.real-time-vehicle {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .vehicle {
+        width: 257px;
+    }
+    .ring {
+        margin-top: -70px;
+    }
+}
+
+.community-throw-content {
+    padding: 24px;
+
+    .top-bar {
+        display: flex;
+        margin-bottom: 32px;
+        padding-left: 28px;
+
+        .right {
+            margin-left: auto;
+        }
+    }
+}

package/lib/live-player/demo/src/global.css

@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}

package/lib/live-player/demo/src/global.less

@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+    height: 100%;
+    margin: 0;
+}

package/lib/live-player/demo/src/layouts/menu/index.css

@@ -0,0 +1,31 @@
+.layout {
+  height: 100%;
+  overflow: hidden;
+}
+.layout .logo {
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px;
+}
+.layout .menu {
+  height: calc(100% - 48px);
+  overflow-y: auto;
+}
+.layout .menu::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: hsla(0, 0%, 80%, 0.08);
+}
+.layout .menu::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
+  background-color: rgba(180, 180, 180, 0.5);
+}
+.layout .trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}

package/lib/live-player/demo/src/layouts/menu/index.less

@@ -0,0 +1,30 @@
+.layout {
+    height: 100%;
+    overflow: hidden;
+    .logo {
+        height: 32px;
+        background: rgba(255, 255, 255, 0.2);
+        margin: 16px;
+    }
+    .menu {
+        height: calc(~'100% - 48px');
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+            background-color: hsla(0, 0%, 80%, 0.08);
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: 3px;
+            -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
+            background-color: rgba(180, 180, 180, 0.5);
+        }
+    }
+    .trigger {
+        font-size: 18px;
+        line-height: 64px;
+        padding: 0 24px;
+        cursor: pointer;
+        transition: color 0.3s;
+    }
+}