@x-edu/live-player 0.0.28 → 0.0.30

package/src/list/ListItem/index.module.less

@@ -1,152 +1,158 @@
-.container {
-  padding: 24px 0;
-  margin: 0 24px;
-  display: flex;
-  justify-content: flex-start;
-  // border-top: 1px solid #eee;
-  cursor: pointer;
-
-  &:first-child {
-    border-top: none;
-  }
-
-  .left {
-   
-    border-radius: 8px;
-    position: relative;
-
-    .avatar {
-      width: 204px;
-      height: 120px;
-      border-radius: 8px;
-      object-fit: cover;
-      overflow: hidden;
-    }
-
-    .tag {
-      position: absolute;
-      top: 0px;
-      border-radius: 8px 0px;
-      font-size: 12px;
-      line-height: 12px;
-      height: 20px;
-      padding: 0 8px;
-      display: flex;
-      align-items: center;
-      color: #fff;
-    }
-
-    .tag0 { // 预告
-      background-color: #FF7826;
-    }
-
-    .tag1, .tag3 { // 直播中
-      background-color: #1E62EC;
-      padding: 0 5px;
-
-      img {
-        transform: rotate(180deg);
-        height: 10px;
-        width: 10px;
-        margin-right: 5px;
-      }
-    }
-
-    .tag2 { // 回放
-      background-color: rgba(0, 0, 0, 0.60);
-    }
-  }
-
-  .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: calc(100% - 228px);
-    margin-right: 24px;
-    &-top {
-      .title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        word-wrap: break-word;
-        line-height: 28px;
-        -webkit-line-clamp: 2;
-        font-size: 20px;
-        font-weight: 600;
-        color: #333;
-      }
-    }
-
-    &-bottom {
-      // display: flex;
-      // justify-content: space-between;
-      align-items: center;
-
-      .time {
-        font-size: 14px;
-        color: #999;
-        display: flex;
-        align-items: center;
-        &-icon {
-          width: 16px;
-          height: 16px;
-          color: #ccc;
-          margin-right: 4px;
-        }
-      }
-      .foreshow-time {
-
-      }
-      .like_sty {
-        color: #999;
-        display: flex;
-        align-items: center;
-        margin-left: 40px;
-        .icon_bottom {
-          margin-right: 30px;
-          //styleName: web正文-常规14px;
-          font-family: PingFang SC;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 22px;
-          letter-spacing: 0px;
-          text-align: left;
-          display: flex;
-          align-items: center;
-
-          img {
-            width: 16px;
-            height: 16px;
-            margin-right: 5px;
-            color: rgba(204, 204, 204, 1);
-          }
-        }
-      }
-    }
-  }
-}
-
-.container:hover {
-  .title {
-    color: #1E62EC;
-  }
-}
-
-.action {
-  font-size: 14px;
-  line-height: 22px;
-  color: #1E62EC;
-  border-radius: 144.889px;
-  border: 1px solid #1E62EC;
-  width: 88px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.action-subscribe {
-  background: #1E62EC;
-  color: #fff;
-}
+.container {
+  padding: 24px 0;
+  margin: 0 24px;
+  display: flex;
+  justify-content: flex-start;
+  // border-top: 1px solid #eee;
+  cursor: pointer;
+
+  &:first-child {
+    border-top: none;
+  }
+
+  .left {
+   
+    border-radius: 8px;
+    position: relative;
+
+    .avatar {
+      width: 204px;
+      height: 120px;
+      border-radius: 8px;
+      object-fit: cover;
+      overflow: hidden;
+    }
+
+    .tag {
+      position: absolute;
+      top: 0px;
+      border-radius: 8px 0px;
+      font-size: 12px;
+      line-height: 12px;
+      height: 20px;
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+    }
+
+    .tag0 { // 预告
+      background-color: #FF7826;
+    }
+
+    .tag1, .tag3 { // 直播中
+      background-color: #1E62EC;
+      padding: 0 5px;
+
+      img {
+        transform: rotate(180deg);
+        height: 10px;
+        width: 10px;
+        margin-right: 5px;
+      }
+    }
+
+    .tag2 { // 回放
+      background-color: rgba(0, 0, 0, 0.60);
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: calc(100% - 228px);
+    margin-right: 24px;
+    &-top {
+      .title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        line-height: 28px;
+        -webkit-line-clamp: 2;
+        font-size: 20px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+
+    &-bottom {
+      // display: flex;
+      // justify-content: space-between;
+      align-items: center;
+
+      .time {
+        font-size: 14px;
+        color: #999;
+        display: flex;
+        align-items: center;
+        &-icon {
+          width: 16px;
+          height: 16px;
+          color: #ccc;
+          margin-right: 4px;
+        }
+      }
+      .foreshow-time {
+
+      }
+      .like_sty {
+        color: #999;
+        display: flex;
+        align-items: center;
+        margin-left: 40px;
+        .icon_bottom {
+          margin-right: 30px;
+          //styleName: web正文-常规14px;
+          font-family: PingFang SC;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 22px;
+          letter-spacing: 0px;
+          text-align: left;
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 16px;
+            height: 16px;
+            margin-right: 5px;
+            color: rgba(204, 204, 204, 1);
+          }
+        }
+      }
+    }
+  }
+
+  &:global(.dark) {
+    .title {
+      color: #fff;
+    }
+  }
+}
+
+.container:hover {
+  .title {
+    color: #1E62EC;
+  }
+}
+
+.action {
+  font-size: 14px;
+  line-height: 22px;
+  color: #1E62EC;
+  border-radius: 144.889px;
+  border: 1px solid #1E62EC;
+  width: 88px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-subscribe {
+  background: #1E62EC;
+  color: #fff;
+}