@x-edu/live-player 0.0.43 → 0.0.45

package/dist/XEduLivePlayer.common.js

@@ -2410,7 +2410,7 @@ ___CSS_LOADER_EXPORT___.locals = {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".index-module_pagination_Wq7tc{padding-bottom:24px;margin-top:64px;display:flex;justify-content:center;align-items:center;width:100%}.index-module_pagination_Wq7tc .index-module_pagination-text_z\\+K9y{color:#666;margin-right:16px}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper{color:#666}.index-module_pagination_Wq7tc .fish-pagination-next button,.index-module_pagination_Wq7tc .fish-pagination-prev button{border:0}.index-module_pagination_Wq7tc .fish-pagination-item{width:32px;height:32px;line-height:32px;background:#f5f7fa;border:0;border-radius:2px;font-size:14px;font-weight:400;color:#1e62ec;margin-right:10px}.index-module_pagination_Wq7tc .fish-pagination-item a{display:flex;align-items:center;justify-content:center;padding:0}.index-module_pagination_Wq7tc .fish-pagination-item:hover{background:#f5f7fa}.index-module_pagination_Wq7tc .fish-pagination-item-active:hover{background:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-item-link{background:#f5f7fa}.index-module_pagination_Wq7tc .fish-pagination-item-link:hover{background:#f5f7fa}.index-module_pagination_Wq7tc .fish-pagination-item-active{border-color:#1e62ec;background:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-item-active a{color:#fff}.index-module_pagination_Wq7tc .fish-pagination-options,.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper{margin-left:8px}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper input{background:transparent;border-radius:0;outline:0;height:32px;padding:1px 7px;width:44px;text-align:center;border-radius:2px;border-color:#eee}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper input:focus{outline:none;box-shadow:none;border-color:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper input:hover{border-color:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper .fish-pagination-options-quick-jumper-btn{min-width:40px;line-height:32px;height:32px;margin-left:12px;background:transparent;border:0;font-weight:700;color:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper .fish-pagination-options-quick-jumper-btn:hover{border-color:#1e62ec;background:#1e62ec;color:#fff}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_pagination_Wq7tc{padding-bottom:24px;display:flex;justify-content:center;align-items:center;width:100%}.index-module_pagination_Wq7tc .index-module_pagination-text_z\\+K9y{color:#666;margin-right:16px}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper{color:#666}.index-module_pagination_Wq7tc .fish-pagination-next button,.index-module_pagination_Wq7tc .fish-pagination-prev button{border:0}.index-module_pagination_Wq7tc .fish-pagination-item{width:32px;height:32px;line-height:32px;background:#f5f7fa;border:0;border-radius:2px;font-size:14px;font-weight:400;color:#1e62ec;margin-right:10px}.index-module_pagination_Wq7tc .fish-pagination-item a{display:flex;align-items:center;justify-content:center;padding:0}.index-module_pagination_Wq7tc .fish-pagination-item:hover{background:#f5f7fa}.index-module_pagination_Wq7tc .fish-pagination-item-active:hover{background:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-item-link{background:#f5f7fa}.index-module_pagination_Wq7tc .fish-pagination-item-link:hover{background:#f5f7fa}.index-module_pagination_Wq7tc .fish-pagination-item-active{border-color:#1e62ec;background:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-item-active a{color:#fff}.index-module_pagination_Wq7tc .fish-pagination-options,.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper{margin-left:8px}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper input{background:transparent;border-radius:0;outline:0;height:32px;padding:1px 7px;width:44px;text-align:center;border-radius:2px;border-color:#eee}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper input:focus{outline:none;box-shadow:none;border-color:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper input:hover{border-color:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper .fish-pagination-options-quick-jumper-btn{min-width:40px;line-height:32px;height:32px;margin-left:12px;background:transparent;border:0;font-weight:700;color:#1e62ec}.index-module_pagination_Wq7tc .fish-pagination-options-quick-jumper .fish-pagination-options-quick-jumper-btn:hover{border-color:#1e62ec;background:#1e62ec;color:#fff}", ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"pagination": "index-module_pagination_Wq7tc",
@@ -2688,12 +2688,34 @@ ___CSS_LOADER_EXPORT___.locals = {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".index-module_action_DHsbc{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;margin-top:8px}.index-module_action_DHsbc:hover{color:#4079ef;border:1px solid #4079ef}.index-module_action-mobile_vR7Cq{width:72px;height:28px;font-size:12px;line-height:18px;border-radius:999px;margin-top:0}.index-module_action-has-subscribe_LYNor{border:1px solid #b7ccf9!important;color:#b7ccf9!important}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_action_DHsbc{font-size:12px;line-height:22px;display:inline-flex;color:#1e62ec;border-radius:144.889px;border:1px solid #1e62ec;height:24px;padding:2px 16px;display:flex;align-items:center;justify-content:center;margin-top:8px}.index-module_action_DHsbc:hover{color:#4079ef;border:1px solid #4079ef}.index-module_action_DHsbc:active{color:#0d4fd3;border:1px solid #0d4fd3}.index-module_action_DHsbc.index-module_action-live_Xh1HS{color:#fff;background:var(--Function-brand-hover,#1e62ec)}.index-module_action_DHsbc.index-module_action-live_Xh1HS:hover{background:var(--Function-brand-hover,#4079ef)}.index-module_action_DHsbc.index-module_action-live_Xh1HS:active{background:var(--Function-brand-active,#0d4fd3)}.index-module_action_DHsbc.index-module_action-has-subscribe_LYNor,.index-module_action_DHsbc.index-module_action-has-subscribe_LYNor:active,.index-module_action_DHsbc.index-module_action-has-subscribe_LYNor:hover{background:var(--Background-gray-secondary-F9F9F9,#f9f9f9);border:none;color:var(--Text-placeholder-999,#999)}.index-module_action-mobile_vR7Cq{width:72px;height:28px;font-size:12px;line-height:18px;border-radius:999px;margin-top:0}.index-module_action-has-subscribe_LYNor{background:#f9f9f9!important;color:#999!important;border:none!important}", ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"action": "index-module_action_DHsbc",
-	"action-mobile": "index-module_action-mobile_vR7Cq",
-	"action-has-subscribe": "index-module_action-has-subscribe_LYNor"
+	"action-live": "index-module_action-live_Xh1HS",
+	"action-has-subscribe": "index-module_action-has-subscribe_LYNor",
+	"action-mobile": "index-module_action-mobile_vR7Cq"
+};
+/* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 5854:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3645);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_countdown_jwexD{display:inline-flex;align-items:center;font-size:12px;font-style:normal;font-weight:400;line-height:20px;color:#333;gap:4px}.index-module_countdown_jwexD .index-module_time_fVn99{display:flex;align-items:center;font-size:16px;font-weight:600;height:24px;line-height:24px;border-radius:4px;background:rgba(169,199,255,.1);padding:4px 8px;border:1px solid #a9c7ff1a}", ""]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"countdown": "index-module_countdown_jwexD",
+	"time": "index-module_time_fVn99"
 };
 /* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
 
@@ -2710,7 +2732,7 @@ ___CSS_LOADER_EXPORT___.locals = {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".index-module_container_2HydZ{padding:24px 0;margin:0 24px;display:flex;justify-content:flex-start;cursor:pointer}.index-module_container_2HydZ:first-child{border-top:none}.index-module_container_2HydZ .index-module_left_qKfes{border-radius:8px;position:relative}.index-module_container_2HydZ .index-module_left_qKfes .index-module_avatar_kO\\+gr{width:204px;height:120px;border-radius:8px;object-fit:cover;overflow:hidden}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag_6g0Vd{position:absolute;top:0;border-radius:8px 0;font-size:12px;line-height:12px;height:20px;padding:0 8px;display:flex;align-items:center;color:#fff}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag0_L-uaW{background-color:#ff7826}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag1_1Mqse,.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag3_8NDod{background-color:#1e62ec;padding:0 5px}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag1_1Mqse img,.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag3_8NDod img{transform:rotate(180deg);height:10px;width:10px;margin-right:5px}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag2_sEPZA{background-color:rgba(0,0,0,.6)}.index-module_container_2HydZ .index-module_right_LjXan{display:flex;flex-direction:column;justify-content:space-between;width:calc(100% - 228px);margin-right:24px}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_title_\\+g0nw{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}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf{align-items:center}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf .index-module_time_sEG7-{font-size:14px;color:#999;display:flex;align-items:center}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf .index-module_time-icon_Rg1x0{width:16px;height:16px;color:#ccc;margin-right:4px}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf .index-module_like_sty_Z780C{color:#999;display:flex;align-items:center;margin-left:40px}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf .index-module_like_sty_Z780C .index-module_icon_bottom_jcWZ1{margin-right:30px;font-family:PingFang SC;font-size:14px;font-weight:400;line-height:22px;letter-spacing:0;text-align:left;display:flex;align-items:center}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf .index-module_like_sty_Z780C .index-module_icon_bottom_jcWZ1 img{width:16px;height:16px;margin-right:5px;color:#ccc}.index-module_container_2HydZ.dark .index-module_title_\\+g0nw{color:#fff}.index-module_action_MHhqt,.index-module_container_2HydZ:hover .index-module_title_\\+g0nw{color:#1e62ec}.index-module_action_MHhqt{font-size:14px;line-height:22px;border-radius:144.889px;border:1px solid #1e62ec;width:88px;height:32px;display:flex;align-items:center;justify-content:center}.index-module_action-subscribe_CvlKL{background:#1e62ec;color:#fff}.index-module_mobileContainer_LgPFb{margin:0 0 12px 0;display:flex;flex-direction:column;gap:8px}.index-module_mobileContainer_LgPFb:last-child{border-bottom:none}.index-module_mobileTitle_uEAj9{font-size:16px;line-height:22px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.index-module_mobileCoverWrap_z0EDe{position:relative;width:100%;aspect-ratio:2;padding-top:50%;overflow:hidden}.index-module_mobileCover_eKVfP{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;object-fit:cover;display:block}.index-module_mobileTag_7sgSF{position:absolute;top:8px;left:8px;border-radius:8px 0 8px 0;font-size:12px;line-height:20px;height:20px;padding:0 8px;display:flex;align-items:center;color:#fff}.index-module_mobileTag_7sgSF img{transform:rotate(180deg);height:10px;width:10px;margin-right:5px}.index-module_mobileTag0_j-\\+La{background-color:#ff7826}.index-module_mobileTag1_t66\\+f,.index-module_mobileTag3_Py0ta{background-color:#1e62ec}.index-module_mobileTag2_\\+57UZ{background-color:rgba(0,0,0,.6)}.index-module_mobileDescRow_TvOLE{display:flex;align-items:center;justify-content:space-between;gap:12px}.index-module_mobileMeta_zXJJe{flex-wrap:wrap;column-gap:12px;row-gap:4px;color:#666;font-size:12px;line-height:18px;flex:1}.index-module_mobileMeta_zXJJe,.index-module_mobileTime_ZiYD2{display:flex;align-items:center;min-width:0}.index-module_mobileTimeIcon_Z-jOL{width:14px;height:14px;margin-right:4px}.index-module_mobileTimeText_aBdDK{color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.index-module_mobileStat_kHrcC,.index-module_mobileTimeText_aBdDK{font-size:12px;line-height:18px}.index-module_mobileStat_kHrcC{display:flex;align-items:center;color:#999}.index-module_mobileStatIcon_yC\\+Ui{width:14px;height:14px;margin-right:4px}.index-module_mobileAction_sUU3p{flex-shrink:0}.index-module_mobileContainer_LgPFb.dark .index-module_mobileTitle_uEAj9{color:#fff}.index-module_mobileContainer_LgPFb.dark .index-module_mobileMeta_zXJJe,.index-module_mobileContainer_LgPFb.dark .index-module_mobileStat_kHrcC,.index-module_mobileContainer_LgPFb.dark .index-module_mobileTimeText_aBdDK{color:#ccc}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_container_2HydZ{padding:24px 0;margin:0 24px;display:flex;justify-content:flex-start;cursor:pointer}.index-module_container_2HydZ:first-child{border-top:none}.index-module_container_2HydZ .index-module_left_qKfes{border-radius:8px;position:relative}.index-module_container_2HydZ .index-module_left_qKfes .index-module_avatar_kO\\+gr{width:205px;height:120px;border-radius:8px;object-fit:cover;overflow:hidden}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag_6g0Vd{position:absolute;top:0;border-radius:8px 0;font-size:12px;line-height:12px;height:20px;padding:0 8px;display:flex;align-items:center;color:#fff}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag0_L-uaW{background-color:#ff7826}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag1_1Mqse,.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag3_8NDod{background-color:#1e62ec;padding:0 5px}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag1_1Mqse img,.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag3_8NDod img{transform:rotate(180deg);height:10px;width:10px;margin-right:5px}.index-module_container_2HydZ .index-module_left_qKfes .index-module_tag2_sEPZA{background-color:rgba(0,0,0,.6)}.index-module_container_2HydZ .index-module_right_LjXan{height:120px;display:flex;flex-direction:column;justify-content:space-between;width:calc(100% - 228px)}.index-module_container_2HydZ .index-module_right-top_4Ry90{display:flex;flex-direction:column;gap:8px}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_title_\\+g0nw{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word;line-height:24px;-webkit-line-clamp:2;font-size:16px;font-weight:600;color:#333}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_time_sEG7-{font-size:12px;color:#999;display:flex;align-items:center}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_time-icon_Rg1x0{width:16px;height:16px;color:#ccc;margin-right:4px}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_like_sty_Z780C{color:#999;display:flex;align-items:center;margin-left:20px}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_like_sty_Z780C .index-module_icon_bottom_jcWZ1{margin-right:30px;font-family:PingFang SC;font-size:12px;font-weight:400;line-height:22px;letter-spacing:0;text-align:left;display:flex;align-items:center}.index-module_container_2HydZ .index-module_right-top_4Ry90 .index-module_like_sty_Z780C .index-module_icon_bottom_jcWZ1 img{width:16px;height:16px;margin-right:5px;color:#ccc}.index-module_container_2HydZ .index-module_right-bottom_ZCIxf{display:flex;justify-content:flex-end}.index-module_container_2HydZ.dark .index-module_title_\\+g0nw{color:#fff}.index-module_container_2HydZ:hover .index-module_title_\\+g0nw{color:#1e62ec}.index-module_webListCard_9lxob{display:flex;padding:16px;border-radius:8px;align-items:center;margin:0 0 24px 0;gap:16px;align-self:stretch;border:2px solid var(--Background-gray-default-FFFFFF,#fff);background:linear-gradient(180deg,rgba(0,195,255,0) 75%,rgba(0,246,255,.08) 100%),var(--background-alpha-tertiary-80,hsla(0,0%,100%,.8))}.index-module_webListCard_9lxob:hover{background:linear-gradient(180deg,rgba(0,195,255,0) 75%,rgba(0,246,255,.08) 100%),var(--Background-gray-default-FFFFFF,#fff);box-shadow:0 0 36px 0 rgba(0,47,143,.18)}.index-module_webListCard_9lxob:hover .index-module_title_\\+g0nw{color:#1e62ec}.index-module_cardContainer_J7\\+LG{width:308px;height:345px;box-sizing:border-box;padding:16px;border-radius:8px;border:2px solid var(--Background-gray-default-FFFFFF,#fff);background:linear-gradient(180deg,rgba(0,195,255,0) 75%,rgba(0,246,255,.08) 100%),var(--background-alpha-tertiary-80,hsla(0,0%,100%,.8));display:flex;flex-direction:column;cursor:pointer}.index-module_cardContainer_J7\\+LG .index-module_cardStatusTag_yqJ2G{margin-right:4px}.index-module_cardContainer_J7\\+LG:hover{background:linear-gradient(180deg,rgba(0,195,255,0) 75%,rgba(0,246,255,.08) 100%),var(--Background-gray-default-FFFFFF,#fff);box-shadow:0 0 36px 0 rgba(0,47,143,.18)}.index-module_cardContainer_J7\\+LG:hover .index-module_cardTitle_GLbl\\+{color:#1e62ec}.index-module_cardCoverWrap_8WRP-{position:relative;width:100%;aspect-ratio:2;margin-bottom:12px;border-radius:8px;overflow:hidden}.index-module_cardCover_57pGO{width:100%;height:100%;object-fit:cover}.index-module_cardTitle_GLbl\\+{font-size:16px;font-weight:600;color:#333;line-height:24px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word}.index-module_cardActionRow_KfwBa{margin-top:auto;display:flex;justify-content:flex-end;border-top:1px solid #f0f0f0;padding:16px 0 0}.index-module_action_MHhqt{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}.index-module_action-subscribe_CvlKL{background:#1e62ec;color:#fff}.index-module_mobileContainer_LgPFb{margin:0 0 12px 0;display:flex;flex-direction:column;gap:8px}.index-module_mobileContainer_LgPFb:last-child{border-bottom:none}.index-module_mobileTitle_uEAj9{font-size:16px;line-height:22px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.index-module_mobileCoverWrap_z0EDe{position:relative;width:100%;aspect-ratio:2;padding-top:50%;overflow:hidden}.index-module_mobileCover_eKVfP{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;object-fit:cover;display:block}.index-module_mobileTag_7sgSF{position:absolute;top:8px;left:8px;border-radius:8px 0 8px 0;font-size:12px;line-height:20px;height:20px;padding:0 8px;display:flex;align-items:center;color:#fff}.index-module_mobileTag_7sgSF img{transform:rotate(180deg);height:10px;width:10px;margin-right:5px}.index-module_mobileTag0_j-\\+La{background-color:#ff7826}.index-module_mobileTag1_t66\\+f,.index-module_mobileTag3_Py0ta{background-color:#1e62ec}.index-module_mobileTag2_\\+57UZ{background-color:rgba(0,0,0,.6)}.index-module_mobileDescRow_TvOLE{display:flex;align-items:center;justify-content:space-between;gap:12px}.index-module_mobileMeta_zXJJe{flex-wrap:wrap;column-gap:12px;row-gap:4px;color:#666;font-size:12px;line-height:18px;flex:1}.index-module_mobileMeta_zXJJe,.index-module_mobileTime_ZiYD2{display:flex;align-items:center;min-width:0}.index-module_mobileTimeIcon_Z-jOL{width:14px;height:14px;margin-right:4px}.index-module_mobileTimeText_aBdDK{color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.index-module_mobileStat_kHrcC,.index-module_mobileTimeText_aBdDK{font-size:12px;line-height:18px}.index-module_mobileStat_kHrcC{display:flex;align-items:center;color:#999}.index-module_mobileStatIcon_yC\\+Ui{width:14px;height:14px;margin-right:4px}.index-module_mobileAction_sUU3p{flex-shrink:0}.index-module_mobileContainer_LgPFb.dark .index-module_mobileTitle_uEAj9{color:#fff}.index-module_mobileContainer_LgPFb.dark .index-module_mobileMeta_zXJJe,.index-module_mobileContainer_LgPFb.dark .index-module_mobileStat_kHrcC,.index-module_mobileContainer_LgPFb.dark .index-module_mobileTimeText_aBdDK{color:#ccc}", ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"container": "index-module_container_2HydZ",
@@ -2724,11 +2746,18 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"right": "index-module_right_LjXan",
 	"right-top": "index-module_right-top_4Ry90",
 	"title": "index-module_title_+g0nw",
-	"right-bottom": "index-module_right-bottom_ZCIxf",
 	"time": "index-module_time_sEG7-",
 	"time-icon": "index-module_time-icon_Rg1x0",
 	"like_sty": "index-module_like_sty_Z780C",
 	"icon_bottom": "index-module_icon_bottom_jcWZ1",
+	"right-bottom": "index-module_right-bottom_ZCIxf",
+	"webListCard": "index-module_webListCard_9lxob",
+	"cardContainer": "index-module_cardContainer_J7+LG",
+	"cardStatusTag": "index-module_cardStatusTag_yqJ2G",
+	"cardTitle": "index-module_cardTitle_GLbl+",
+	"cardCoverWrap": "index-module_cardCoverWrap_8WRP-",
+	"cardCover": "index-module_cardCover_57pGO",
+	"cardActionRow": "index-module_cardActionRow_KfwBa",
 	"action": "index-module_action_MHhqt",
 	"action-subscribe": "index-module_action-subscribe_CvlKL",
 	"mobileContainer": "index-module_mobileContainer_LgPFb",
@@ -2752,6 +2781,56 @@ ___CSS_LOADER_EXPORT___.locals = {
 /* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 8123:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3645);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_statusBadge_iHxWX{flex-shrink:0;padding:0 4px;height:20px;line-height:24px;font-size:12px;border-radius:2px;background:#eef4ff;color:#1e62ec;display:inline-flex;align-items:center;margin-right:8px;gap:2px;vertical-align:text-bottom}.index-module_statusBadge_iHxWX img{width:14px}.index-module_statusBadge_iHxWX .index-module_play-icon_Tev5x{transform:rotate(180deg)}.index-module_statusBadge0_lK3Sd{background:#1e62ec;color:#fff}.index-module_statusBadge1_AacbM,.index-module_statusBadge3_G5VxB{background:#f53f3f;color:#fff}.index-module_statusBadge2_3JbA0{background:#f1f8ec;color:#6fd037}", ""]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"statusBadge": "index-module_statusBadge_iHxWX",
+	"play-icon": "index-module_play-icon_Tev5x",
+	"statusBadge0": "index-module_statusBadge0_lK3Sd",
+	"statusBadge1": "index-module_statusBadge1_AacbM",
+	"statusBadge3": "index-module_statusBadge3_G5VxB",
+	"statusBadge2": "index-module_statusBadge2_3JbA0"
+};
+/* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 1854:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3645);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_timeBar_w1L71{display:flex;align-items:center;gap:20px}.index-module_cardTimeBar_7u8GK{justify-content:space-between}.index-module_statusText_\\+RyAK,.index-module_viewer_J8lJp{display:flex;gap:4px;font-size:12px;color:#666}.index-module_countdown_Ve6aF{display:flex}.index-module_countdownBox_Vvek-{display:flex;align-items:center;gap:4px;font-size:14px;color:#666}", ""]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"timeBar": "index-module_timeBar_w1L71",
+	"cardTimeBar": "index-module_cardTimeBar_7u8GK",
+	"statusText": "index-module_statusText_+RyAK",
+	"viewer": "index-module_viewer_J8lJp",
+	"countdown": "index-module_countdown_Ve6aF",
+	"countdownBox": "index-module_countdownBox_Vvek-"
+};
+/* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 9084:
@@ -2764,14 +2843,19 @@ ___CSS_LOADER_EXPORT___.locals = {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".index-module_container_y\\+him{max-width:1300px;margin:0 auto;padding:24px 24px 0 24px;width:956px}.index-module_container_y\\+him .fish-tabs-nav{margin-bottom:24px}.index-module_container_y\\+him .fish-tabs-nav:before{display:none}.index-module_container_y\\+him .fish-tabs-ink-bar{display:none}.index-module_container_y\\+him .fish-tabs-tab+.fish-tabs-tab{margin-left:0}.index-module_container_y\\+him .fish-tabs-tab{padding:9px 20px}.index-module_container_y\\+him .fish-tabs-tab-btn{font-size:14px;line-height:14px;color:#666}.index-module_container_y\\+him .fish-tabs-tab-active{border-radius:16px;background:var(--f-3-f-7-ff,#f3f7ff)}.index-module_container_y\\+him .fish-tabs-tab-active .fish-tabs-tab-btn{color:#1e62ec}.index-module_container_y\\+him.index-module_mobile_fjd59{width:100%;padding:12px 12px 0 12px}.index-module_list_KQnlU{min-height:500px}.index-module_mobileLoadMore_43-yu{flex:0 0 100%!important;text-align:center;color:#999;font-size:12px;line-height:18px;padding:12px 0 24px 0}.index-module_padList_YQpXl{display:flex;flex-wrap:wrap;gap:24px}.index-module_padList_YQpXl>*{flex:0 0 calc(33.33333% - 16px);box-sizing:border-box;overflow:hidden}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".index-module_container_y\\+him{max-width:1300px;margin:0 auto;width:956px}.index-module_container_y\\+him .fish-tabs-nav{margin-bottom:8px;padding:24px 32px 0 12px}.index-module_container_y\\+him .fish-tabs-nav:before{display:none}.index-module_container_y\\+him .fish-tabs-ink-bar{display:none}.index-module_container_y\\+him .fish-tabs-tab+.fish-tabs-tab{margin-left:0}.index-module_container_y\\+him .fish-tabs-tab{padding:9px 20px}.index-module_container_y\\+him .fish-tabs-tab-btn{font-size:14px;line-height:14px;color:#666}.index-module_container_y\\+him .fish-tabs-tab-active{border-radius:16px;background:var(--background-alpha-secondary-60,hsla(0,0%,100%,.6))}.index-module_container_y\\+him .fish-tabs-tab-active .fish-tabs-tab-btn{color:#1e62ec}.index-module_container_y\\+him.index-module_mobile_fjd59{width:100%;padding:12px 12px 0 12px}.index-module_list_KQnlU{min-height:500px}.index-module_toolbar_dg2Il{display:flex;justify-content:flex-end;margin:0 32px 24px 0}.index-module_toolbar_dg2Il .index-module_viewSwitchIcon_3Swxw{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.index-module_toolbar_dg2Il .index-module_viewSwitchIcon_3Swxw svg{width:18px;height:18px}.index-module_listWrapper_uB4v-{width:100%;padding:0 32px}.index-module_paginationWrapper_ieLJ1{width:100%;display:flex;justify-content:center;padding:24px 0}.index-module_mobileLoadMore_43-yu{flex:0 0 100%!important;text-align:center;color:#999;font-size:12px;line-height:18px;padding:12px 0 24px 0}.index-module_padList_YQpXl{display:flex;flex-wrap:wrap;gap:24px}.index-module_padList_YQpXl>*{flex:0 0 calc(33.33333% - 16px);box-sizing:border-box;overflow:hidden}.index-module_cardList_nVBoV{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}", ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"container": "index-module_container_y+him",
 	"mobile": "index-module_mobile_fjd59",
 	"list": "index-module_list_KQnlU",
+	"toolbar": "index-module_toolbar_dg2Il",
+	"viewSwitchIcon": "index-module_viewSwitchIcon_3Swxw",
+	"listWrapper": "index-module_listWrapper_uB4v-",
+	"paginationWrapper": "index-module_paginationWrapper_ieLJ1",
 	"mobileLoadMore": "index-module_mobileLoadMore_43-yu",
-	"padList": "index-module_padList_YQpXl"
+	"padList": "index-module_padList_YQpXl",
+	"cardList": "index-module_cardList_nVBoV"
 };
 /* harmony default export */ __webpack_exports__["Z"] = (___CSS_LOADER_EXPORT___);
 
@@ -61288,6 +61372,279 @@ function formatLikesCount(count) {
 function formatUVCount(count) {
   return liveCountUtil_formatCount(count, 8);
 }
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[4]!./src/list/ListItem/LiveCountDown/index.module.less
+var ListItem_LiveCountDown_index_module = __webpack_require__(5854);
+;// CONCATENATED MODULE: ./src/list/ListItem/LiveCountDown/index.module.less
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var LiveCountDown_index_module_options = {};
+
+LiveCountDown_index_module_options.styleTagTransform = (styleTagTransform_default());
+LiveCountDown_index_module_options.setAttributes = (setAttributesWithoutAttributes_default());
+
+      LiveCountDown_index_module_options.insert = insertBySelector_default().bind(null, "head");
+    
+LiveCountDown_index_module_options.domAPI = (styleDomAPI_default());
+LiveCountDown_index_module_options.insertStyleElement = (insertStyleElement_default());
+
+var LiveCountDown_index_module_update = injectStylesIntoStyleTag_default()(ListItem_LiveCountDown_index_module/* default */.Z, LiveCountDown_index_module_options);
+
+
+
+
+       /* harmony default export */ var list_ListItem_LiveCountDown_index_module = (ListItem_LiveCountDown_index_module/* default */.Z && ListItem_LiveCountDown_index_module/* default.locals */.Z.locals ? ListItem_LiveCountDown_index_module/* default.locals */.Z.locals : undefined);
+
+;// CONCATENATED MODULE: ./src/list/ListItem/LiveCountDown/index.jsx
+function LiveCountDown_slicedToArray(arr, i) { return LiveCountDown_arrayWithHoles(arr) || LiveCountDown_iterableToArrayLimit(arr, i) || ListItem_LiveCountDown_unsupportedIterableToArray(arr, i) || LiveCountDown_nonIterableRest(); }
+
+function LiveCountDown_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function ListItem_LiveCountDown_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return ListItem_LiveCountDown_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return ListItem_LiveCountDown_arrayLikeToArray(o, minLen); }
+
+function ListItem_LiveCountDown_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function LiveCountDown_iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function LiveCountDown_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+// 倒计时组件
+
+
+
+var Countdown = function Countdown(_ref) {
+  var endTime = _ref.endTime,
+      onLess15Minutes = _ref.onLess15Minutes,
+      onFinish = _ref.onFinish,
+      className = _ref.className;
+
+  var _useState = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)(Math.max(0, endTime - new Date().getTime())),
+      _useState2 = LiveCountDown_slicedToArray(_useState, 2),
+      remainingTime = _useState2[0],
+      setRemainingTime = _useState2[1];
+
+  (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useEffect)(function () {
+    var intervalId = setInterval(function () {
+      var now = new Date().getTime();
+      var distance = endTime - now; // 小于 15 分钟 触发事件
+
+      if (distance < 900000 && onLess15Minutes) {
+        onLess15Minutes();
+      } // 倒计时结束 触发事件
+
+
+      if (distance <= 0) {
+        if (onFinish) onFinish();
+        clearInterval(intervalId);
+        setRemainingTime(0);
+        return;
+      }
+
+      setRemainingTime(distance);
+    }, 1000);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [endTime]);
+  var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
+  var hours = Math.floor(remainingTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
+  var minutes = Math.floor(remainingTime % (1000 * 60 * 60) / (1000 * 60));
+  var seconds = Math.floor(remainingTime % (1000 * 60) / 1000);
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: "".concat(className || list_ListItem_LiveCountDown_index_module.countdown)
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: list_ListItem_LiveCountDown_index_module.time
+  }, days), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", null, "\u5929"), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: list_ListItem_LiveCountDown_index_module.time
+  }, hours), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", null, "\u65F6"), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: list_ListItem_LiveCountDown_index_module.time
+  }, minutes), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", null, "\u5206"), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: list_ListItem_LiveCountDown_index_module.time
+  }, seconds), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", null, "\u79D2"));
+};
+
+/* harmony default export */ var ListItem_LiveCountDown = (Countdown);
+;// CONCATENATED MODULE: ./src/list/ListItem/img/fire-fill.svg
+var fire_fill_path;
+function fire_fill_extends() { fire_fill_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return fire_fill_extends.apply(this, arguments); }
+
+var SvgFireFill = function SvgFireFill(props) {
+  return /*#__PURE__*/React.createElement("svg", fire_fill_extends({
+    width: 16,
+    height: 16,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), fire_fill_path || (fire_fill_path = /*#__PURE__*/React.createElement("path", {
+    d: "M5.464 14.623c.616.205.821-.36.564-.564-.82-.565-1.231-1.59-.923-2.514.308-1.027 1.129-1.437 1.129-2.976 0 0 1.026.77.82 1.95 1.027-1.18.565-2.72.36-3.438 2.617 1.385 4.874 4.412 2.257 6.978-.307.256 0 .718.462.564 7.132-4.053 1.745-10.108.821-10.826.308.718.36 1.847-.256 2.411C9.62 2.155 7.003 1.334 7.003 1.334c.308 2.104-1.18 4.361-2.565 6.106-.051-.872-.103-1.437-.513-2.207-.103 1.488-1.283 2.72-1.59 4.26-.411 2.051.307 3.54 3.13 5.13Z",
+    fill: "#F53F3F"
+  })));
+};
+
+/* harmony default export */ var fire_fill = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNDY0MDYgMTQuNjIzMUM2LjA3OTc4IDE0LjgyODMgNi4yODUwMSAxNC4yNjM5IDYuMDI4NDYgMTQuMDU4N0M1LjIwNzUxIDEzLjQ5NDMgNC43OTcwMyAxMi40NjgxIDUuMTA0OSAxMS41NDQ1QzUuNDEyNzYgMTAuNTE4NCA2LjIzMzcxIDEwLjEwNzkgNi4yMzM3MSA4LjU2ODZDNi4yMzM3MSA4LjU2ODYgNy4yNTk4OSA5LjMzODI1IDcuMDU0NjYgMTAuNTE4NEM4LjA4MDg0IDkuMzM4MjYgNy42MTkwNiA3Ljc5ODk4IDcuNDEzODMgNy4wODA2M0MxMC4wMzA2IDguNDY1OTkgMTIuMjg4MiAxMS40OTMyIDkuNjcxNDQgMTQuMDU4N0M5LjM2MzU5IDE0LjMxNTIgOS42NzE0NCAxNC43NzcgMTAuMTMzMiAxNC42MjMxQzE3LjI2NTIgMTAuNTY5NyAxMS44Nzc4IDQuNTE1MTUgMTAuOTU0MiAzLjc5NjgyQzExLjI2MiA0LjUxNTE1IDExLjMxMzQgNS42NDM5NiAxMC42OTc3IDYuMjA4MzhDOS42MjAxNCAyLjE1NDk0IDcuMDAzMzcgMS4zMzM5OCA3LjAwMzM3IDEuMzMzOThDNy4zMTEyMyAzLjQzNzY3IDUuODIzMjcgNS42OTUzIDQuNDM3ODkgNy40Mzk4MUM0LjM4NjU5IDYuNTY3NTUgNC4zMzUyOSA2LjAwMzE1IDMuOTI0NzkgNS4yMzM1QzMuODIyMTkgNi43MjE0OCAyLjY0MjA2IDcuOTUyODkgMi4zMzQyMyA5LjQ5MjE3QzEuOTIzNzUgMTEuNTQ0NSAyLjY0MjA4IDEzLjAzMjUgNS40NjQxMSAxNC42MjMxTDUuNDY0MDYgMTQuNjIzMVoiIGZpbGw9IiNGNTNGM0YiLz4KPC9zdmc+Cg==");
+;// CONCATENATED MODULE: ./src/list/ListItem/img/video.svg
+var video_path;
+function video_extends() { video_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return video_extends.apply(this, arguments); }
+
+var SvgVideo = function SvgVideo(props) {
+  return /*#__PURE__*/React.createElement("svg", video_extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), video_path || (video_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.333 3.333a.667.667 0 0 0-.666-.667H1.333a.667.667 0 0 0-.666.667v9.334c0 .368.298.666.666.666h9.334a.667.667 0 0 0 .666-.667v-2.8L14.81 12.3a.333.333 0 0 0 .524-.274V3.973a.333.333 0 0 0-.524-.273l-3.476 2.433v-2.8ZM4.672 6.1a.267.267 0 0 1 .405-.173L7.98 7.774l.042.034a.267.267 0 0 1-.042.416l-2.903 1.848-.049.024a.267.267 0 0 1-.361-.25V6.153l.005-.053Z",
+    fill: "#CCC"
+  })));
+};
+
+/* harmony default export */ var video = ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMzMzNCAzLjMzMzE3QzExLjMzMzQgMi45NjQ5OCAxMS4wMzQ5IDIuNjY2NSAxMC42NjY3IDIuNjY2NUgxLjMzMzM1QzAuOTY1MTY0IDIuNjY2NSAwLjY2NjY4NyAyLjk2NDk4IDAuNjY2Njg3IDMuMzMzMTdWMTIuNjY2NUMwLjY2NjY4NyAxMy4wMzQ3IDAuOTY1MTY0IDEzLjMzMzIgMS4zMzMzNSAxMy4zMzMySDEwLjY2NjdDMTEuMDM0OSAxMy4zMzMyIDExLjMzMzQgMTMuMDM0NyAxMS4zMzM0IDEyLjY2NjVWOS44NjY1TDE0LjgwODcgMTIuMjk5OEMxNC45MTA2IDEyLjM3MTIgMTUuMDQzNyAxMi4zOCAxNS4xNTQgMTIuMzIyNUMxNS4yNjQ0IDEyLjI2NSAxNS4zMzM1IDEyLjE1MDkgMTUuMzMzNCAxMi4wMjY1VjMuOTczMTdDMTUuMzMzNSAzLjg0ODc3IDE1LjI2NDQgMy43MzQ2NCAxNS4xNTQgMy42NzcxN0MxNS4wNDM3IDMuNjE5NjkgMTQuOTEwNiAzLjYyODQzIDE0LjgwODcgMy42OTk4NEwxMS4zMzM0IDYuMTMzMTdWMy4zMzMxN1pNNC42NzIwMiA2LjA5OTE3QzQuNjk3MzcgNS45NzQ5OSA0LjgwNjYyIDUuODg1ODEgNC45MzMzNSA1Ljg4NTg0QzQuOTgzOTYgNS44ODUzIDUuMDMzNjcgNS44OTk4NCA1LjA3NjY5IDUuOTI2NUw3Ljk4MDAyIDcuNzc0NUw4LjAyMjAyIDcuODA3ODRDOC4xNDU0NCA3LjkyNzYgOC4xMjQ4OSA4LjEzMTE1IDcuOTgwMDIgOC4yMjM4NEw1LjA3NjY5IDEwLjA3MThMNS4wMjgwMiAxMC4wOTU4QzQuODUzNTEgMTAuMTYyMSA0LjY2NjY2IDEwLjAzMzIgNC42NjY2OSA5Ljg0NjVWNi4xNTE4NEw0LjY3MjAyIDYuMDk5MTdaIiBmaWxsPSIjQ0NDQ0NDIi8+DQo8L3N2Zz4=");
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[4]!./src/list/ListItem/liveTime/index.module.less
+var liveTime_index_module = __webpack_require__(1854);
+;// CONCATENATED MODULE: ./src/list/ListItem/liveTime/index.module.less
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var liveTime_index_module_options = {};
+
+liveTime_index_module_options.styleTagTransform = (styleTagTransform_default());
+liveTime_index_module_options.setAttributes = (setAttributesWithoutAttributes_default());
+
+      liveTime_index_module_options.insert = insertBySelector_default().bind(null, "head");
+    
+liveTime_index_module_options.domAPI = (styleDomAPI_default());
+liveTime_index_module_options.insertStyleElement = (insertStyleElement_default());
+
+var liveTime_index_module_update = injectStylesIntoStyleTag_default()(liveTime_index_module/* default */.Z, liveTime_index_module_options);
+
+
+
+
+       /* harmony default export */ var ListItem_liveTime_index_module = (liveTime_index_module/* default */.Z && liveTime_index_module/* default.locals */.Z.locals ? liveTime_index_module/* default.locals */.Z.locals : undefined);
+
+;// CONCATENATED MODULE: ./src/list/ListItem/liveTime/index.jsx
+
+
+function liveTime_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function liveTime_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { liveTime_ownKeys(Object(source), true).forEach(function (key) { liveTime_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { liveTime_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function liveTime_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function liveTime_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function liveTime_asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { liveTime_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { liveTime_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function liveTime_slicedToArray(arr, i) { return liveTime_arrayWithHoles(arr) || liveTime_iterableToArrayLimit(arr, i) || liveTime_unsupportedIterableToArray(arr, i) || liveTime_nonIterableRest(); }
+
+function liveTime_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function liveTime_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return liveTime_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return liveTime_arrayLikeToArray(o, minLen); }
+
+function liveTime_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function liveTime_iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function liveTime_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+
+
+
+
+function liveTime_index(_ref) {
+  var data = _ref.data,
+      setData = _ref.setData,
+      liveExt = _ref.liveExt,
+      liveStatus = _ref.liveStatus,
+      type = _ref.type;
+  var beginTime = data.begin_time;
+  var beginAt = dayjs_min_default()(beginTime);
+
+  var _useState = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)(false),
+      _useState2 = liveTime_slicedToArray(_useState, 2),
+      countDownFinish = _useState2[0],
+      setCountDownFinish = _useState2[1]; // 倒计时是否结束
+
+
+  var handleCountDownFinish = /*#__PURE__*/function () {
+    var _ref2 = liveTime_asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
+      return regenerator_default().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setCountDownFinish(true);
+              setData(liveTime_objectSpread(liveTime_objectSpread({}, data), {}, {
+                status: 1
+              }));
+
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleCountDownFinish() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var renderStatusText = function renderStatusText() {
+    if (liveStatus === 2 || liveStatus === 3 || liveStatus === 1 || countDownFinish) {
+      var timeLabel = "".concat(beginAt.format('YYYY/MM/DD HH:mm'), " \u5F00\u64AD");
+      var viewCount = liveExt.total_uv || 0; // 直播中才显示
+
+      var viewCountLabel = viewCount ? "".concat(formatUVCount(liveExt.total_uv || 0), "\u4EBA\u89C2\u770B") : '';
+      return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+        className: "".concat(ListItem_liveTime_index_module.timeBar, " ").concat(type === 'card' ? ListItem_liveTime_index_module.cardTimeBar : '')
+      }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+        className: ListItem_liveTime_index_module.statusText
+      }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
+        src: video
+      }), timeLabel), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+        className: ListItem_liveTime_index_module.viewer
+      }, viewCountLabel ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
+        src: fire_fill,
+        alt: ""
+      }) : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement((external_commonjs_react_commonjs2_react_root_React_default()).Fragment, null), viewCountLabel));
+    }
+
+    if (liveStatus === 0) {
+      return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement((external_commonjs_react_commonjs2_react_root_React_default()).Fragment, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+        className: ListItem_liveTime_index_module.countdownBox
+      }, "\u8DDD\u5F00\u59CB", /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(ListItem_LiveCountDown, {
+        key: data.live_id,
+        endTime: dayjs_min_default()(data.begin_time).valueOf(),
+        onFinish: handleCountDownFinish
+      })), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", null));
+    }
+  };
+
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: "".concat(ListItem_liveTime_index_module.time, " ").concat(liveStatus === 0 ? ListItem_liveTime_index_module["foreshow-time"] : '', " time-box")
+  }, renderStatusText());
+}
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[4]!./node_modules/@sdp.nd/fish/es/message/style/index.less
 var es_message_style = __webpack_require__(428);
 ;// CONCATENATED MODULE: ./node_modules/@sdp.nd/fish/es/message/style/index.less
@@ -61540,7 +61897,7 @@ function Action(_ref) {
   }();
 
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: classnames_default()(ListItem_Action_index_module.action, (_classNames = {}, Action_defineProperty(_classNames, ListItem_Action_index_module["action-subscribe"], curAction === 3), Action_defineProperty(_classNames, ListItem_Action_index_module["action-has-subscribe"], curAction === 4), Action_defineProperty(_classNames, ListItem_Action_index_module["action-mobile"], isMobile), _classNames)),
+    className: classnames_default()(ListItem_Action_index_module.action, (_classNames = {}, Action_defineProperty(_classNames, ListItem_Action_index_module["action-live"], curAction === 1), Action_defineProperty(_classNames, ListItem_Action_index_module["action-subscribe"], curAction === 3), Action_defineProperty(_classNames, ListItem_Action_index_module["action-has-subscribe"], curAction === 4), Action_defineProperty(_classNames, ListItem_Action_index_module["action-mobile"], isMobile), _classNames)),
     onClick: handleBtnClick
   }, Actions[curAction]);
 }
@@ -61636,25 +61993,177 @@ var SvgViewFill = function SvgViewFill(props) {
 };
 
 /* harmony default export */ var view_fill = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Imljb25fcGxhbmFyL3dlYl9pY29uXyYjMjMwOyYjMTgxOyYjMTQzOyYjMjMyOyYjMTY3OyYjMTM2OyYjMjMzOyYjMTM1OyYjMTQzO19maWxsIj4KPGcgaWQ9IiYjMjMyOyYjMTgzOyYjMTc1OyYjMjI5OyYjMTkwOyYjMTMyOyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4wMDAyIDEzQzUuNTU1NzEgMTMgMy4zNzQ4OCAxMS40NTczIDEuNDYyNTUgOC40NDM2N0MxLjI5MDQ4IDguMTcyOTEgMS4yOTA0OCA3LjgyNzA5IDEuNDYyNTUgNy41NTYzM0MzLjM3NDg4IDQuNTQyNjcgNS41NTU3MSAzIDguMDAwMiAzQzEwLjQ0NDcgMyAxMi42MjU1IDQuNTQyNjcgMTQuNTM3OSA3LjU1NjMzQzE0LjcwOTkgNy44MjcwOSAxNC43MDk5IDguMTcyOTEgMTQuNTM3OSA4LjQ0MzY3QzEyLjYyNTUgMTEuNDU3MyAxMC40NDQ3IDEzIDguMDAwMiAxM1pNNS4zMzM1MiA4QzUuMzMzNTIgOS40NzI3NiA2LjUyNzQzIDEwLjY2NjcgOC4wMDAxOCAxMC42NjY3QzkuNDcyOTQgMTAuNjY2NyAxMC42NjY5IDkuNDcyNzYgMTAuNjY2OSA4QzEwLjY2NjkgNi41MjcyNCA5LjQ3Mjk0IDUuMzMzMzMgOC4wMDAxOCA1LjMzMzMzQzYuNTI3NDMgNS4zMzMzMyA1LjMzMzUyIDYuNTI3MjQgNS4zMzM1MiA4WiIgZmlsbD0iI0NDQ0NDQyIvPgo8cGF0aCBkPSJNOS4zNDU1MyA4QzkuMzQ1NTMgOC43MzYzMyA4Ljc0MzIgOS4zMzMzMyA4LjAwMDIgOS4zMzMzM0M3LjI1NzIgOS4zMzMzMyA2LjY1NDg3IDguNzM2MzMgNi42NTQ4NyA4QzYuNjU0ODcgNy4yNjM2NyA3LjI1NzIgNi42NjY2NyA4LjAwMDIgNi42NjY2N0M4Ljc0MzIgNi42NjY2NyA5LjM0NTUzIDcuMjYzNjcgOS4zNDU1MyA4WiIgZmlsbD0iI0NDQ0NDQyIvPgo8L2c+CjwvZz4KPC9zdmc+Cg==");
-;// CONCATENATED MODULE: ./src/list/ListItem/img/video.svg
-var video_path;
-function video_extends() { video_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return video_extends.apply(this, arguments); }
+;// CONCATENATED MODULE: ./src/list/ListItem/liveStatus/img/progress.svg
+var progress_path, progress_path2, progress_path3;
+function progress_extends() { progress_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return progress_extends.apply(this, arguments); }
 
-var SvgVideo = function SvgVideo(props) {
-  return /*#__PURE__*/React.createElement("svg", video_extends({
+var SvgProgress = function SvgProgress(props) {
+  return /*#__PURE__*/React.createElement("svg", progress_extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    fill: "none"
-  }, props), video_path || (video_path = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11.333 3.333a.667.667 0 0 0-.666-.667H1.333a.667.667 0 0 0-.666.667v9.334c0 .368.298.666.666.666h9.334a.667.667 0 0 0 .666-.667v-2.8L14.81 12.3a.333.333 0 0 0 .524-.274V3.973a.333.333 0 0 0-.524-.273l-3.476 2.433v-2.8ZM4.672 6.1a.267.267 0 0 1 .405-.173L7.98 7.774l.042.034a.267.267 0 0 1-.042.416l-2.903 1.848-.049.024a.267.267 0 0 1-.361-.25V6.153l.005-.053Z",
-    fill: "#CCC"
+    style: {
+      enableBackground: "new 0 0 50 50"
+    },
+    xmlSpace: "preserve"
+  }, props), progress_path || (progress_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h3v6H0z"
+  }, /*#__PURE__*/React.createElement("animateTransform", {
+    attributeType: "xml",
+    attributeName: "transform",
+    type: "scale",
+    values: "1,1; 1,3; 1,1",
+    begin: "0s",
+    dur: "0.6s",
+    repeatCount: "indefinite"
+  }))), progress_path2 || (progress_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M6 0h3v6H6z"
+  }, /*#__PURE__*/React.createElement("animateTransform", {
+    attributeType: "xml",
+    attributeName: "transform",
+    type: "scale",
+    values: "1,1; 1,3; 1,1",
+    begin: "0.2s",
+    dur: "0.6s",
+    repeatCount: "indefinite"
+  }))), progress_path3 || (progress_path3 = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M12 0h3v6h-3z"
+  }, /*#__PURE__*/React.createElement("animateTransform", {
+    attributeType: "xml",
+    attributeName: "transform",
+    type: "scale",
+    values: "1,1; 1,3; 1,1",
+    begin: "0.4s",
+    dur: "0.6s",
+    repeatCount: "indefinite"
+  }))));
+};
+
+/* harmony default export */ var progress = ("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCiAgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwIDUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iNiIgZmlsbD0iI2ZmZiI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIHZhbHVlcz0iMSwxOyAxLDM7IDEsMSIgYmVnaW49IjBzIgogICAgICBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvcmVjdD4KCiAgPHJlY3QgeD0iNiIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iNiIgZmlsbD0iI2ZmZiI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIHZhbHVlcz0iMSwxOyAxLDM7IDEsMSIgYmVnaW49IjAuMnMiCiAgICAgIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjEyIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSI2IiBmaWxsPSIjZmZmIj4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgdmFsdWVzPSIxLDE7IDEsMzsgMSwxIiBiZWdpbj0iMC40cyIKICAgICAgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L3JlY3Q+Cjwvc3ZnPg==");
+;// CONCATENATED MODULE: ./src/list/ListItem/liveStatus/img/clock.svg
+var clock_path;
+function clock_extends() { clock_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return clock_extends.apply(this, arguments); }
+
+var SvgClock = function SvgClock(props) {
+  return /*#__PURE__*/React.createElement("svg", clock_extends({
+    width: 14,
+    height: 14,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), clock_path || (clock_path = /*#__PURE__*/React.createElement("path", {
+    d: "M11.666 9.916h1.167v1.167H1.166V9.916h1.167V5.833a4.667 4.667 0 0 1 9.333 0v4.083Zm-1.167 0V5.833a3.5 3.5 0 1 0-7 0v4.083h7Zm-5.25 2.333h3.5v1.167h-3.5v-1.167Z",
+    fill: "#fff"
   })));
 };
 
-/* harmony default export */ var video = ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMzMzNCAzLjMzMzE3QzExLjMzMzQgMi45NjQ5OCAxMS4wMzQ5IDIuNjY2NSAxMC42NjY3IDIuNjY2NUgxLjMzMzM1QzAuOTY1MTY0IDIuNjY2NSAwLjY2NjY4NyAyLjk2NDk4IDAuNjY2Njg3IDMuMzMzMTdWMTIuNjY2NUMwLjY2NjY4NyAxMy4wMzQ3IDAuOTY1MTY0IDEzLjMzMzIgMS4zMzMzNSAxMy4zMzMySDEwLjY2NjdDMTEuMDM0OSAxMy4zMzMyIDExLjMzMzQgMTMuMDM0NyAxMS4zMzM0IDEyLjY2NjVWOS44NjY1TDE0LjgwODcgMTIuMjk5OEMxNC45MTA2IDEyLjM3MTIgMTUuMDQzNyAxMi4zOCAxNS4xNTQgMTIuMzIyNUMxNS4yNjQ0IDEyLjI2NSAxNS4zMzM1IDEyLjE1MDkgMTUuMzMzNCAxMi4wMjY1VjMuOTczMTdDMTUuMzMzNSAzLjg0ODc3IDE1LjI2NDQgMy43MzQ2NCAxNS4xNTQgMy42NzcxN0MxNS4wNDM3IDMuNjE5NjkgMTQuOTEwNiAzLjYyODQzIDE0LjgwODcgMy42OTk4NEwxMS4zMzM0IDYuMTMzMTdWMy4zMzMxN1pNNC42NzIwMiA2LjA5OTE3QzQuNjk3MzcgNS45NzQ5OSA0LjgwNjYyIDUuODg1ODEgNC45MzMzNSA1Ljg4NTg0QzQuOTgzOTYgNS44ODUzIDUuMDMzNjcgNS44OTk4NCA1LjA3NjY5IDUuOTI2NUw3Ljk4MDAyIDcuNzc0NUw4LjAyMjAyIDcuODA3ODRDOC4xNDU0NCA3LjkyNzYgOC4xMjQ4OSA4LjEzMTE1IDcuOTgwMDIgOC4yMjM4NEw1LjA3NjY5IDEwLjA3MThMNS4wMjgwMiAxMC4wOTU4QzQuODUzNTEgMTAuMTYyMSA0LjY2NjY2IDEwLjAzMzIgNC42NjY2OSA5Ljg0NjVWNi4xNTE4NEw0LjY3MjAyIDYuMDk5MTdaIiBmaWxsPSIjQ0NDQ0NDIi8+DQo8L3N2Zz4=");
+/* harmony default export */ var clock = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjY2NiA5LjkxNjAySDEyLjgzMjdWMTEuMDgyN0gxLjE2NjAyVjkuOTE2MDJIMi4zMzI2OFY1LjgzMjY4QzIuMzMyNjggMy4yNTUzNSA0LjQyMjAyIDEuMTY2MDIgNi45OTkzNSAxLjE2NjAyQzkuNTc2NjkgMS4xNjYwMiAxMS42NjYgMy4yNTUzNSAxMS42NjYgNS44MzI2OFY5LjkxNjAyWk0xMC40OTkzIDkuOTE2MDJWNS44MzI2OEMxMC40OTkzIDMuODk5NjggOC45MzIzNCAyLjMzMjY4IDYuOTk5MzUgMi4zMzI2OEM1LjA2NjM1IDIuMzMyNjggMy40OTkzNSAzLjg5OTY4IDMuNDk5MzUgNS44MzI2OFY5LjkxNjAySDEwLjQ5OTNaTTUuMjQ5MzUgMTIuMjQ5M0g4Ljc0OTM1VjEzLjQxNkg1LjI0OTM1VjEyLjI0OTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+;// CONCATENATED MODULE: ./src/list/ListItem/liveStatus/img/replay.svg
+var replay_path, replay_path2;
+function replay_extends() { replay_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return replay_extends.apply(this, arguments); }
+
+var SvgReplay = function SvgReplay(props) {
+  return /*#__PURE__*/React.createElement("svg", replay_extends({
+    width: 14,
+    height: 14,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), replay_path || (replay_path = /*#__PURE__*/React.createElement("path", {
+    d: "M7 1.166a5.833 5.833 0 1 0 5.833 5.833h-1.167a4.667 4.667 0 1 1-.808-2.625H9.333v1.167h3.5v-3.5h-1.167v1.458A5.825 5.825 0 0 0 7 1.166Z",
+    fill: "#6FD037"
+  })), replay_path2 || (replay_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "m5.862 5.384 2.74 1.618a.133.133 0 0 1 0 .228l-2.74 1.618a.13.13 0 0 1-.178-.047.133.133 0 0 1-.018-.067V5.498c0-.073.058-.132.13-.132a.13.13 0 0 1 .066.018Z",
+    fill: "#6FD037"
+  })));
+};
+
+/* harmony default export */ var replay = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTk5MzUgMS4xNjYwMkMzLjc3NzY5IDEuMTY2MDIgMS4xNjYwMiAzLjc3NzY5IDEuMTY2MDIgNi45OTkzNUMxLjE2NjAyIDEwLjIyMSAzLjc3NzY5IDEyLjgzMjcgNi45OTkzNSAxMi44MzI3QzEwLjIyMSAxMi44MzI3IDEyLjgzMjcgMTAuMjIxIDEyLjgzMjcgNi45OTkzNUgxMS42NjZDMTEuNjY2IDkuNTc2NjkgOS41NzY2OSAxMS42NjYgNi45OTkzNSAxMS42NjZDNC40MjIwMiAxMS42NjYgMi4zMzI2OCA5LjU3NjY5IDIuMzMyNjggNi45OTkzNUMyLjMzMjY4IDQuNDIyMDIgNC40MjIwMiAyLjMzMjY4IDYuOTk5MzUgMi4zMzI2OEM4LjYwMzQgMi4zMzI2OCAxMC4wMTg0IDMuMTQxOTYgMTAuODU4NCA0LjM3NDQ5TDkuMzMyNjggNC4zNzQzNVY1LjU0MTAySDEyLjgzMjdWMi4wNDEwMkgxMS42NjZMMTEuNjY2MSAzLjQ5ODg3QzEwLjYwMTggMi4wODIyOSA4LjkwNzYxIDEuMTY2MDIgNi45OTkzNSAxLjE2NjAyWiIgZmlsbD0iIzZGRDAzNyIvPgo8cGF0aCBkPSJNNS44NjIgNS4zODM5OUw4LjYwMTI4IDcuMDAyQzguNjYzNDYgNy4wMzg3MSA4LjY4NDQ3IDcuMTE5NTQgOC42NDgyMSA3LjE4MjVDOC42MzY4NyA3LjIwMjE2IDguNjIwNyA3LjIxODUzIDguNjAxMjggNy4yMzAwMUw1Ljg2MiA4Ljg0ODAyQzUuNzk5ODIgOC44ODQ3NCA1LjcyIDguODYzNDYgNS42ODM3MyA4LjgwMDUxQzUuNjcyMSA4Ljc4MDMxIDUuNjY1OTggOC43NTczOCA1LjY2NTk4IDguNzM0MDFWNS40OThDNS42NjU5OCA1LjQyNTEgNS43MjQzMyA1LjM2NjAxIDUuNzk2MzIgNS4zNjYwMUM1LjgxOTQgNS4zNjYwMSA1Ljg0MjA3IDUuMzcyMjIgNS44NjIgNS4zODM5OVoiIGZpbGw9IiM2RkQwMzciLz4KPC9zdmc+Cg==");
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[4]!./src/list/ListItem/liveStatus/index.module.less
+var liveStatus_index_module = __webpack_require__(8123);
+;// CONCATENATED MODULE: ./src/list/ListItem/liveStatus/index.module.less
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var liveStatus_index_module_options = {};
+
+liveStatus_index_module_options.styleTagTransform = (styleTagTransform_default());
+liveStatus_index_module_options.setAttributes = (setAttributesWithoutAttributes_default());
+
+      liveStatus_index_module_options.insert = insertBySelector_default().bind(null, "head");
+    
+liveStatus_index_module_options.domAPI = (styleDomAPI_default());
+liveStatus_index_module_options.insertStyleElement = (insertStyleElement_default());
+
+var liveStatus_index_module_update = injectStylesIntoStyleTag_default()(liveStatus_index_module/* default */.Z, liveStatus_index_module_options);
+
+
+
+
+       /* harmony default export */ var ListItem_liveStatus_index_module = (liveStatus_index_module/* default */.Z && liveStatus_index_module/* default.locals */.Z.locals ? liveStatus_index_module/* default.locals */.Z.locals : undefined);
+
+;// CONCATENATED MODULE: ./src/list/ListItem/liveStatus/index.jsx
+/**
+ * 直播状态标签组件
+ */
+
+
+
+
+
+
+var TagName = {
+  0: '预告',
+  1: '直播中',
+  2: '回放',
+  3: '直播中' // 实际是暂停
+
+};
+function liveStatus_LiveStatus(_ref) {
+  var status = _ref.status,
+      className = _ref.className;
+
+  var renderStatusIcon = function renderStatusIcon() {
+    if (status === 0) {
+      return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
+        src: clock,
+        alt: "",
+        className: ListItem_liveStatus_index_module.statusIcon
+      });
+    }
+
+    if (status === 1 || status === 3) {
+      return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
+        src: progress,
+        alt: "",
+        className: classnames_default()(ListItem_liveStatus_index_module.statusIcon, ListItem_liveStatus_index_module["play-icon"])
+      });
+    }
+
+    if (status === 2) {
+      return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
+        src: replay,
+        alt: "",
+        className: ListItem_liveStatus_index_module.statusIcon
+      });
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("span", {
+    className: classnames_default()(ListItem_liveStatus_index_module.statusBadge, ListItem_liveStatus_index_module["statusBadge".concat(status)], className || '')
+  }, renderStatusIcon(), TagName[status]);
+}
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[4]!./src/list/ListItem/index.module.less
 var ListItem_index_module = __webpack_require__(1631);
 ;// CONCATENATED MODULE: ./src/list/ListItem/index.module.less
@@ -61687,6 +62196,8 @@ var ListItem_index_module_update = injectStylesIntoStyleTag_default()(ListItem_i
        /* harmony default export */ var list_ListItem_index_module = (ListItem_index_module/* default */.Z && ListItem_index_module/* default.locals */.Z.locals ? ListItem_index_module/* default.locals */.Z.locals : undefined);
 
 ;// CONCATENATED MODULE: ./src/list/ListItem/index.jsx
+function ListItem_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 
 
 function ListItem_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -61720,7 +62231,9 @@ function ListItem_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
-var TagName = {
+
+
+var ListItem_TagName = {
   0: '直播预告',
   1: '直播中',
   2: '直播回放',
@@ -61744,27 +62257,37 @@ var getLiveStatus = function getLiveStatus(item) {
   return 1;
 };
 function ListItem(_ref2) {
-  var data = _ref2.data,
+  var propData = _ref2.data,
       isMobile = _ref2.isMobile,
+      isPad = _ref2.isPad,
       themeName = _ref2.themeName,
       subscription = _ref2.subscription,
       onDetailClick = _ref2.onDetailClick,
       handleLogin = _ref2.handleLogin,
       isLogin = _ref2.isLogin,
-      onSubscribe = _ref2.onSubscribe;
+      onSubscribe = _ref2.onSubscribe,
+      _ref2$viewMode = _ref2.viewMode,
+      viewMode = _ref2$viewMode === void 0 ? 'list' : _ref2$viewMode,
+      cardStyle = _ref2.cardStyle;
+
+  var _useState = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)(propData || {}),
+      _useState2 = ListItem_slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
   var liveId = data.live_id,
       liveName = data.live_name,
       beginTime = data.begin_time,
       coverUrl = data.cover_url;
   var liveStatus = getLiveStatus(data);
-  var timeLabel = liveStatus === 2 ? "".concat(dayjs_min_default()(beginTime).format('YYYY/MM/DD HH:mm')) : "".concat(dayjs_min_default()(beginTime).format('YYYY/MM/DD HH:mm'), " \u5F00\u59CB");
+  var timeLabel = liveStatus === 2 ? "".concat(dayjs_min_default()(beginTime).format('YYYY/MM/DD HH:mm')) : "".concat(dayjs_min_default()(beginTime).format('YYYY/MM/DD HH:mm'), " \u5F00\u64AD");
 
-  var _useState = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)({}),
-      _useState2 = ListItem_slicedToArray(_useState, 2),
-      liveExt = _useState2[0],
-      setLiveExt = _useState2[1];
+  var _useState3 = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)({}),
+      _useState4 = ListItem_slicedToArray(_useState3, 2),
+      liveExt = _useState4[0],
+      setLiveExt = _useState4[1];
 
-  var _useState3 = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)(function () {
+  var _useState5 = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)(function () {
     if (liveStatus === 0) {
       // 开播前15分钟之外
       var subscriptionItem = (0,lodash.find)(subscription, {
@@ -61782,9 +62305,9 @@ function ListItem(_ref2) {
       return false;
     }
   }),
-      _useState4 = ListItem_slicedToArray(_useState3, 2),
-      isSubscribe = _useState4[0],
-      setIsSubscribe = _useState4[1];
+      _useState6 = ListItem_slicedToArray(_useState5, 2),
+      isSubscribe = _useState6[0],
+      setIsSubscribe = _useState6[1];
 
   (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useEffect)(function () {
     ListItem_asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
@@ -61861,7 +62384,7 @@ function ListItem(_ref2) {
     }, liveStatus === 1 || liveStatus === 3 ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
       src: play,
       alt: ""
-    }) : null, TagName[liveStatus])), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    }) : null, ListItem_TagName[liveStatus])), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
       className: list_ListItem_index_module.mobileDescRow
     }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
       className: list_ListItem_index_module.mobileMeta
@@ -61893,37 +62416,73 @@ function ListItem(_ref2) {
     })));
   }
 
+  if (viewMode === 'card') {
+    return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: classnames_default()(list_ListItem_index_module.cardContainer, themeName),
+      onClick: handleDetailClick,
+      style: cardStyle
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: list_ListItem_index_module.cardCoverWrap
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(component_Avatar, {
+      src: coverUrl || live,
+      errorImg: live,
+      className: list_ListItem_index_module.cardCover
+    })), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: list_ListItem_index_module.cardTitle,
+      title: liveName
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(liveStatus_LiveStatus, {
+      status: liveStatus,
+      name: ListItem_TagName[liveStatus],
+      className: list_ListItem_index_module.cardStatusTag
+    }), liveName), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: list_ListItem_index_module.cardMeta
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(liveTime_index, {
+      type: "card",
+      data: data,
+      setData: setData,
+      liveExt: liveExt,
+      liveStatus: liveStatus
+    })), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: list_ListItem_index_module.cardActionRow
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Action, {
+      data: data,
+      subscription: subscription,
+      onActionDetailClick: handleDetailClick,
+      handleLogin: handleLogin,
+      isLogin: isLogin,
+      onSubscribe: onSubscribe,
+      setIsSubscribe: setIsSubscribe,
+      status: liveStatus
+    })));
+  } // list模式
+
+
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: classnames_default()(list_ListItem_index_module.container, themeName),
+    className: classnames_default()(list_ListItem_index_module.container, themeName, ListItem_defineProperty({}, list_ListItem_index_module.webListCard, !isMobile && !isPad)),
     onClick: handleDetailClick
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    className: list_ListItem_index_module.left
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(component_Avatar, {
+    src: coverUrl || live,
+    errorImg: live,
+    className: list_ListItem_index_module.avatar
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
     className: list_ListItem_index_module.right
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
     className: list_ListItem_index_module["right-top"]
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
     className: list_ListItem_index_module.title
-  }, liveName)), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(liveStatus_LiveStatus, {
+    status: liveStatus,
+    name: ListItem_TagName[liveStatus]
+  }), liveName), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(liveTime_index, {
+    data: data,
+    setData: setData,
+    liveExt: liveExt,
+    liveStatus: liveStatus
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
     className: list_ListItem_index_module["right-bottom"]
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: "".concat(list_ListItem_index_module.time, " ").concat(liveStatus === 0 ? list_ListItem_index_module["foreshow-time"] : '', " time-box")
-  }, isSubscribe ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(component_Icon_Icon, {
-    type: "web_icon_shijian_fill",
-    className: "".concat(list_ListItem_index_module["time-icon"], " checked-icon")
-  }) : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
-    src: video,
-    className: list_ListItem_index_module["time-icon"]
-  }), timeLabel, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: list_ListItem_index_module.like_sty
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: list_ListItem_index_module.icon_bottom
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
-    src: view_fill
-  }), formatUVCount(liveExt.total_uv || 0)), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: list_ListItem_index_module.icon_bottom
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
-    src: like_fill,
-    alt: ""
-  }), formatLikesCount(liveExt.like_count || 0)))), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Action, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Action, {
     data: data,
     subscription: subscription,
     onActionDetailClick: handleDetailClick,
@@ -61932,18 +62491,7 @@ function ListItem(_ref2) {
     onSubscribe: onSubscribe,
     setIsSubscribe: setIsSubscribe,
     status: liveStatus
-  }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: list_ListItem_index_module.left
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-    className: classnames_default()(list_ListItem_index_module.tag, list_ListItem_index_module["tag".concat(liveStatus)])
-  }, liveStatus === 1 || liveStatus === 3 ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("img", {
-    src: play,
-    alt: ""
-  }) : null, TagName[liveStatus]), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(component_Avatar, {
-    src: coverUrl || live,
-    errorImg: live,
-    className: list_ListItem_index_module.avatar
-  })));
+  }))));
 }
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[4]!./src/list/index.module.less
 var list_index_module = __webpack_require__(9084);
@@ -61976,6 +62524,42 @@ var list_index_module_update = injectStylesIntoStyleTag_default()(list_index_mod
 
        /* harmony default export */ var src_list_index_module = (list_index_module/* default */.Z && list_index_module/* default.locals */.Z.locals ? list_index_module/* default.locals */.Z.locals : undefined);
 
+;// CONCATENATED MODULE: ./src/list/img/list.svg
+var list_path;
+function list_extends() { list_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return list_extends.apply(this, arguments); }
+
+var SvgList = function SvgList(props) {
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_namespaceObject.createElement("svg", list_extends({
+    width: 20,
+    height: 20,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), list_path || (list_path = /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_namespaceObject.createElement("path", {
+    d: "M3.75 14.499a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm13.75 2.167H6.667v-1.667H17.5v1.667ZM3.75 8.749a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm13.75 2.084H6.667V9.166H17.5v1.667ZM3.75 2.916a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM17.5 4.999H6.667V3.333H17.5v1.666Z",
+    fill: "#999"
+  })));
+};
+
+/* harmony default export */ var list = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTQuNDk5QzQuNDQwMjUgMTQuNDk5IDQuOTk5ODIgMTUuMDU4OCA1IDE1Ljc0OUM1IDE2LjQzOTQgNC40NDAzNiAxNi45OTkgMy43NSAxNi45OTlDMy4wNTk2NCAxNi45OTkgMi41IDE2LjQzOTQgMi41IDE1Ljc0OUMyLjUwMDE4IDE1LjA1ODggMy4wNTk3NSAxNC40OTkgMy43NSAxNC40OTlaTTE3LjUgMTYuNjY2SDYuNjY2OTlWMTQuOTk5SDE3LjVWMTYuNjY2Wk0zLjc1IDguNzQ5MDJDNC40NDAyNSA4Ljc0OTAyIDQuOTk5ODIgOS4zMDg4MiA1IDkuOTk5MDJDNSAxMC42ODk0IDQuNDQwMzYgMTEuMjQ5IDMuNzUgMTEuMjQ5QzMuMDU5NjQgMTEuMjQ5IDIuNSAxMC42ODk0IDIuNSA5Ljk5OTAyQzIuNTAwMTggOS4zMDg4MiAzLjA1OTc1IDguNzQ5MDIgMy43NSA4Ljc0OTAyWk0xNy41IDEwLjgzM0g2LjY2Njk5VjkuMTY2MDJIMTcuNVYxMC44MzNaTTMuNzUgMi45MTYwMkM0LjQ0MDM2IDIuOTE2MDIgNSAzLjQ3NTY2IDUgNC4xNjYwMkM1IDQuODU2MzcgNC40NDAzNiA1LjQxNjAyIDMuNzUgNS40MTYwMkMzLjA1OTY0IDUuNDE2MDIgMi41IDQuODU2MzcgMi41IDQuMTY2MDJDMi41IDMuNDc1NjYgMy4wNTk2NCAyLjkxNjAyIDMuNzUgMi45MTYwMlpNMTcuNSA0Ljk5OTAySDYuNjY2OTlWMy4zMzMwMUgxNy41VjQuOTk5MDJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
+;// CONCATENATED MODULE: ./src/list/img/grid.svg
+var grid_path;
+function grid_extends() { grid_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return grid_extends.apply(this, arguments); }
+
+var SvgGrid = function SvgGrid(props) {
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_namespaceObject.createElement("svg", grid_extends({
+    width: 20,
+    height: 20,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), grid_path || (grid_path = /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_namespaceObject.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.583 3.583v4.5h4.5v-4.5h-4.5Zm5.71-.935a.833.833 0 0 0-.71-.398h-5.5a.833.833 0 0 0-.833.833v5.5a.833.833 0 0 0 .833.834h5.5a.83.83 0 0 0 .71-.398.83.83 0 0 0 .124-.436v-5.5a.83.83 0 0 0-.123-.435Zm-.274 8.058a.83.83 0 0 0-.436-.123h-5.5a.833.833 0 0 0-.833.833v5.5c0 .46.373.834.833.834h5.5a.833.833 0 0 0 .834-.833v-5.5a.83.83 0 0 0-.398-.71Zm1.687 6.646c.147.239.41.398.71.398h5.5c.46 0 .834-.373.834-.833v-5.5a.833.833 0 0 0-.833-.834h-5.5a.83.83 0 0 0-.71.398.83.83 0 0 0-.124.436v5.5c0 .16.045.309.123.435Zm.275-8.058a.83.83 0 0 0 .436.123h5.5a.833.833 0 0 0 .833-.833v-5.5a.833.833 0 0 0-.833-.834h-5.5a.833.833 0 0 0-.834.833v5.5a.83.83 0 0 0 .398.71Zm.936-5.71v4.5h4.5v-4.5h-4.5Zm0 8.333v4.5h4.5v-4.5h-4.5Zm-8.334 0v4.5h4.5v-4.5h-4.5Z",
+    fill: "#999"
+  })));
+};
+
+/* harmony default export */ var grid = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjU4MzMzIDMuNTgzMzNWOC4wODMzM0g4LjA4MzMzVjMuNTgzMzNIMy41ODMzM1pNOS4yOTM4MiAyLjY0NzYzQzkuMTQ3MjIgMi40MDkwOCA4Ljg4Mzg2IDIuMjUgOC41ODMzMyAyLjI1SDMuMDgzMzNDMi42MjMxIDIuMjUgMi4yNSAyLjYyMzEgMi4yNSAzLjA4MzMzVjguNTgzMzNDMi4yNSA4Ljg4Mzg2IDIuNDA5MDggOS4xNDcyMiAyLjY0NzYzIDkuMjkzODJDMi43NzQ0IDkuMzcxNzMgMi45MjM2MiA5LjQxNjY3IDMuMDgzMzMgOS40MTY2N0g4LjU4MzMzQzguNzQzMDUgOS40MTY2NyA4Ljg5MjI3IDkuMzcxNzMgOS4wMTkwNCA5LjI5MzgyQzkuMTMwODEgOS4yMjUxMyA5LjIyNTE0IDkuMTMwODEgOS4yOTM4MiA5LjAxOTA0QzkuMzcxNzQgOC44OTIyNyA5LjQxNjY3IDguNzQzMDUgOS40MTY2NyA4LjU4MzMzVjMuMDgzMzNDOS40MTY2NyAyLjkyMzYyIDkuMzcxNzQgMi43NzQ0IDkuMjkzODIgMi42NDc2M1pNOS4wMTkwNCAxMC43MDYyQzguODkyMjcgMTAuNjI4MyA4Ljc0MzA1IDEwLjU4MzMgOC41ODMzMyAxMC41ODMzSDMuMDgzMzNDMi45MjM2MiAxMC41ODMzIDIuNzc0NCAxMC42MjgzIDIuNjQ3NjMgMTAuNzA2MkMyLjQwOTA4IDEwLjg1MjggMi4yNSAxMS4xMTYxIDIuMjUgMTEuNDE2N1YxNi45MTY3QzIuMjUgMTcuMzc2OSAyLjYyMzEgMTcuNzUgMy4wODMzMyAxNy43NUg4LjU4MzMzQzguODgzODYgMTcuNzUgOS4xNDcyMiAxNy41OTA5IDkuMjkzODIgMTcuMzUyNEM5LjM3MTc0IDE3LjIyNTYgOS40MTY2NyAxNy4wNzY0IDkuNDE2NjcgMTYuOTE2N1YxMS40MTY3QzkuNDE2NjcgMTEuMjU3IDkuMzcxNzQgMTEuMTA3NyA5LjI5MzgyIDEwLjk4MUM5LjIyNTE0IDEwLjg2OTIgOS4xMzA4MSAxMC43NzQ5IDkuMDE5MDQgMTAuNzA2MlpNMTAuNzA2MiAxNy4zNTI0QzEwLjg1MjggMTcuNTkwOSAxMS4xMTYxIDE3Ljc1IDExLjQxNjcgMTcuNzVIMTYuOTE2N0MxNy4zNzY5IDE3Ljc1IDE3Ljc1IDE3LjM3NjkgMTcuNzUgMTYuOTE2N1YxMS40MTY3QzE3Ljc1IDExLjExNjEgMTcuNTkwOSAxMC44NTI4IDE3LjM1MjQgMTAuNzA2MkMxNy4yMjU2IDEwLjYyODMgMTcuMDc2NCAxMC41ODMzIDE2LjkxNjcgMTAuNTgzM0gxMS40MTY3QzExLjI1NyAxMC41ODMzIDExLjEwNzcgMTAuNjI4MyAxMC45ODEgMTAuNzA2MkMxMC44NjkyIDEwLjc3NDkgMTAuNzc0OSAxMC44NjkyIDEwLjcwNjIgMTAuOTgxQzEwLjYyODMgMTEuMTA3NyAxMC41ODMzIDExLjI1NyAxMC41ODMzIDExLjQxNjdWMTYuOTE2N0MxMC41ODMzIDE3LjA3NjQgMTAuNjI4MyAxNy4yMjU2IDEwLjcwNjIgMTcuMzUyNFpNMTAuOTgxIDkuMjkzODJDMTEuMTA3NyA5LjM3MTczIDExLjI1NyA5LjQxNjY3IDExLjQxNjcgOS40MTY2N0gxNi45MTY3QzE3LjA3NjQgOS40MTY2NyAxNy4yMjU2IDkuMzcxNzMgMTcuMzUyNCA5LjI5MzgyQzE3LjU5MDkgOS4xNDcyMiAxNy43NSA4Ljg4Mzg2IDE3Ljc1IDguNTgzMzNWMy4wODMzM0MxNy43NSAyLjYyMzEgMTcuMzc2OSAyLjI1IDE2LjkxNjcgMi4yNUgxMS40MTY3QzExLjExNjEgMi4yNSAxMC44NTI4IDIuNDA5MDggMTAuNzA2MiAyLjY0NzYzQzEwLjYyODMgMi43NzQ0IDEwLjU4MzMgMi45MjM2MiAxMC41ODMzIDMuMDgzMzNWOC41ODMzM0MxMC41ODMzIDguNzQzMDUgMTAuNjI4MyA4Ljg5MjI3IDEwLjcwNjIgOS4wMTkwNEMxMC43NzQ5IDkuMTMwODEgMTAuODY5MiA5LjIyNTEzIDEwLjk4MSA5LjI5MzgyWk0xMS45MTY3IDMuNTgzMzNWOC4wODMzM0gxNi40MTY3VjMuNTgzMzNIMTEuOTE2N1pNMTEuOTE2NyAxMS45MTY3VjE2LjQxNjdIMTYuNDE2N1YxMS45MTY3SDExLjkxNjdaTTMuNTgzMzMgMTEuOTE2N1YxNi40MTY3SDguMDgzMzNWMTEuOTE2N0gzLjU4MzMzWiIgZmlsbD0iIzk5OTk5OSIvPgo8L3N2Zz4K");
 ;// CONCATENATED MODULE: ./src/list/index.jsx
 
 
@@ -62021,7 +62605,13 @@ function list_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
-var PageSize = 7;
+
+
+var PageSize = 12;
+var ViewModes = {
+  LIST: 'list',
+  CARD: 'card'
+};
 var StatusEnum = [{
   label: '全部',
   value: 'all'
@@ -62099,6 +62689,14 @@ function PublicLiveList(_ref) {
       isLogin = _useState16[0],
       setIsLogin = _useState16[1];
 
+  var _useState17 = (0,external_commonjs_react_commonjs2_react_root_React_namespaceObject.useState)(ViewModes.LIST),
+      _useState18 = list_slicedToArray(_useState17, 2),
+      viewMode = _useState18[0],
+      setViewMode = _useState18[1];
+
+  var canSwitchView = !isMobile && !isPad;
+  var effectiveViewMode = canSwitchView ? viewMode : ViewModes.LIST;
+
   var handleTabChange = function handleTabChange(value) {
     setStatus(value);
     setPage(1);
@@ -62108,6 +62706,16 @@ function PublicLiveList(_ref) {
 
   var handlePageChange = function handlePageChange(value) {
     setPage(value);
+  };
+
+  var toggleViewMode = function toggleViewMode() {
+    if (!canSwitchView) {
+      return;
+    }
+
+    setViewMode(function (prev) {
+      return prev === ViewModes.LIST ? ViewModes.CARD : ViewModes.LIST;
+    });
   }; // 分页获取直播列表
 
 
@@ -62295,43 +62903,74 @@ function PublicLiveList(_ref) {
       window.removeEventListener('scroll', handleScroll);
     };
   }, [isMobile, loading, loadingMore, hasMore]);
+
+  var calcCardStyle = function calcCardStyle() {
+    var cardStyle = {};
+    cardStyle.width = effectiveViewMode === ViewModes.CARD ? 308 : '100%';
+    cardStyle.height = effectiveViewMode === ViewModes.CARD ? 345 : 152;
+    return cardStyle;
+  };
+
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
     className: classnames_default()(containerClassName, src_list_index_module.container, themeName, list_defineProperty({}, src_list_index_module.mobile, isMobile))
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(tabs, {
     accessKey: status,
     onChange: handleTabChange
   }, StatusEnum.map(function (item) {
+    var _classNames2;
+
     return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(tabs.TabPane, {
       key: item.value,
       tab: item.label
-    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Loading_Loading, {
+    }, canSwitchView && /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: src_list_index_module.toolbar
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: src_list_index_module.viewSwitchIcon,
+      onClick: toggleViewMode,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "\u5207\u6362\u4E3A".concat(effectiveViewMode === ViewModes.LIST ? '卡片' : '列表', "\u89C6\u56FE"),
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          toggleViewMode();
+        }
+      }
+    }, effectiveViewMode === ViewModes.LIST ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(SvgGrid, null) : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(SvgList, null))), /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Loading_Loading, {
       loading: loading,
       delay: 500
+    }, loading ? null : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement((external_commonjs_react_commonjs2_react_root_React_default()).Fragment, null, list.length ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement((external_commonjs_react_commonjs2_react_root_React_default()).Fragment, null, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: src_list_index_module.listWrapper
     }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
-      className: classnames_default()(src_list_index_module.list, list_defineProperty({}, src_list_index_module.padList, isPad))
-    }, loading ? null : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement((external_commonjs_react_commonjs2_react_root_React_default()).Fragment, null, !loading && list.length ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement((external_commonjs_react_commonjs2_react_root_React_default()).Fragment, null, list.map(function (listItem) {
+      className: classnames_default()(src_list_index_module.list, (_classNames2 = {}, list_defineProperty(_classNames2, src_list_index_module.padList, isPad), list_defineProperty(_classNames2, src_list_index_module.cardList, canSwitchView && effectiveViewMode === ViewModes.CARD), _classNames2))
+    }, list.map(function (listItem) {
       return /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(ListItem, {
         themeName: themeName,
         isMobile: isMobile,
+        isPad: isPad,
         data: listItem,
         key: listItem.live_id,
         subscription: subscription,
         onDetailClick: onDetailClick,
         handleLogin: handleLogin,
         isLogin: isLogin,
-        onSubscribe: onSubscribe
+        onSubscribe: onSubscribe,
+        viewMode: effectiveViewMode,
+        cardStyle: effectiveViewMode === ViewModes.CARD ? calcCardStyle() : {}
       });
-    }), isMobile ? /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+    })), isMobile && /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
       className: src_list_index_module.mobileLoadMore
-    }, loadingMore ? '加载中...' : hasMore ? '下拉加载更多' : '没有更多了') : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(component_Pagination_Pagination, {
+    }, loadingMore ? '加载中...' : hasMore ? '下拉加载更多' : '没有更多了')), !isMobile && /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement("div", {
+      className: src_list_index_module.paginationWrapper
+    }, /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(component_Pagination_Pagination, {
       total: total,
       pageSize: PageSize,
       current: page,
       onChange: handlePageChange
-    })) : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Empty_Empty, {
+    }))) : /*#__PURE__*/external_commonjs_react_commonjs2_react_root_React_default().createElement(Empty_Empty, {
       tip: "\u6682\u65E0\u5185\u5BB9",
       className: emptyClassName
-    })))));
+    }))));
   })));
 }
 ;// CONCATENATED MODULE: ./src/App.jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-edu/live-player",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "main": "dist/XEduLivePlayer.common.js",
   "files": [
     "dist/*"