@cmstops/pro-compo 0.1.46 → 0.1.48

package/es/contentModal/style/index.css

@@ -109,6 +109,8 @@
 .view-all-column-container .content-table-view .pic-thumb-img {
   width: 60px;
   height: 45px;
+  vertical-align: middle;
+  border-radius: 3px;
 }
 .view-all-column-container .content-table-view .title-span,
 .view-all-column-container .content-table-view .mp_title-span {
@@ -126,6 +128,7 @@
   margin-right: 8px;
   padding-left: 0;
   font-size: 18px;
+  line-height: 28px;
   text-align: center;
   vertical-align: middle;
 }

package/es/index.css

@@ -436,6 +436,8 @@
 .view-all-column-container .content-table-view .pic-thumb-img {
   width: 60px;
   height: 45px;
+  vertical-align: middle;
+  border-radius: 3px;
 }
 .view-all-column-container .content-table-view .title-span,
 .view-all-column-container .content-table-view .mp_title-span {
@@ -453,6 +455,7 @@
   margin-right: 8px;
   padding-left: 0;
   font-size: 18px;
+  line-height: 28px;
   text-align: center;
   vertical-align: middle;
 }
@@ -2730,6 +2733,190 @@
 .medialist-mpdoc-item-view .info-view .abttrite-v .right {
   margin-right: 20px;
 }
+.medialist-course-item-view {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.medialist-course-item-view:hover {
+  background: #fafafa;
+}
+.medialist-course-item-view .cover-view {
+  position: relative;
+  flex-shrink: 0;
+  width: 110px;
+  height: 70px;
+  margin-right: 20px;
+  background: #edf3ff;
+}
+.medialist-course-item-view .cover-view .image {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.medialist-course-item-view .cover-view .image img {
+  width: 100%;
+  height: 100%;
+}
+.medialist-course-item-view .cover-view .no-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 30px;
+}
+.medialist-course-item-view .info-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 2px 0;
+}
+.medialist-course-item-view .info-view .title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  overflow: hidden;
+  color: #1d2129;
+  font-weight: 400;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 22px;
+  cursor: pointer;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.medialist-course-item-view .info-view .abttrite-v {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.medialist-course-item-view .info-view .abttrite-v .left {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  color: #808692;
+  font-size: 12px;
+}
+.medialist-course-item-view .info-view .abttrite-v .left .icon {
+  margin-right: 8px;
+}
+.medialist-course-item-view .info-view .abttrite-v .left .abttr {
+  display: inline-block;
+  width: 20%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.medialist-course-item-view .info-view .abttrite-v .left .abttr.time {
+  width: 250px;
+}
+.medialist-course-item-view .info-view .abttrite-v .left .abttr.tags {
+  display: flex;
+  align-items: center;
+  width: 190px;
+}
+.medialist-course-item-view .info-view .abttrite-v .left .abttr.type {
+  display: inline-block;
+  width: 160px;
+}
+.medialist-course-item-view .info-view .abttrite-v .right {
+  margin-right: 20px;
+}
+.medialist-funhd-item-view {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.medialist-funhd-item-view:hover {
+  background: #fafafa;
+}
+.medialist-funhd-item-view .cover-view {
+  position: relative;
+  flex-shrink: 0;
+  width: 110px;
+  height: 70px;
+  margin-right: 20px;
+  background: #edf3ff;
+}
+.medialist-funhd-item-view .cover-view .image {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.medialist-funhd-item-view .cover-view .image img {
+  width: 100%;
+  height: 100%;
+}
+.medialist-funhd-item-view .cover-view .no-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 30px;
+}
+.medialist-funhd-item-view .info-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 2px 0;
+}
+.medialist-funhd-item-view .info-view .title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  overflow: hidden;
+  color: #1d2129;
+  font-weight: 400;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 22px;
+  cursor: pointer;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.medialist-funhd-item-view .info-view .abttrite-v {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .left {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  color: #808692;
+  font-size: 12px;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .left .icon {
+  margin-right: 8px;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .left .abttr {
+  display: inline-block;
+  width: 20%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .left .abttr.time {
+  width: 250px;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .left .abttr.tags {
+  display: flex;
+  align-items: center;
+  width: 190px;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .left .abttr.type {
+  display: inline-block;
+  width: 160px;
+}
+.medialist-funhd-item-view .info-view .abttrite-v .right {
+  margin-right: 20px;
+}
 .gray-for-state-hide {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);

package/es/typeIcons/component.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createCommentVNode, createBlock, unref, Fragment, createVNode } from "vue";
-import { IconXinwen, IconShipin, IconYinyue, IconTuji, IconXiaoshipin, IconZhuanti, IconYinpinji, IconShipinji, IconMiniprogram, IconH5, IconZhibo, IconPicture, IconGongzhonghao, IconGaojian } from "@arco-iconbox/vue-cmstop-icons";
+import { IconXinwen, IconShipin, IconYinyue, IconTuji, IconXiaoshipin, IconZhuanti, IconYinpinji, IconShipinji, IconMiniprogram, IconH5, IconZhibo, IconPicture, IconGongzhonghao, IconSelectGroupoverview, IconSelectVersion, IconBook, IconEvent, IconGaojian } from "@arco-iconbox/vue-cmstop-icons";
 const _hoisted_1 = { class: "type-icons-container" };
 const _sfc_main = defineComponent({
   ...{ name: "typeIcons" },
@@ -43,7 +43,7 @@ const _sfc_main = defineComponent({
           createCommentVNode(" h5 "),
           createVNode(unref(IconH5))
         ], 2112)) : props.doc && props.type === "live" ? (openBlock(), createElementBlock(Fragment, { key: 10 }, [
-          createCommentVNode(" \u76F4\u64AD "),
+          createCommentVNode(" \u672C\u5730\u76F4\u64AD "),
           createVNode(unref(IconZhibo))
         ], 2112)) : props.resource && props.type === "image" ? (openBlock(), createElementBlock(Fragment, { key: 11 }, [
           createCommentVNode("------------------------------- \u7D20\u6750\u7C7B\u578B --------------------------------------"),
@@ -53,7 +53,22 @@ const _sfc_main = defineComponent({
           createCommentVNode("------------------------------- \u5176\u4ED6\u7C7B\u578B --------------------------------------"),
           createCommentVNode(" \u516C\u4F17\u53F7\u7A3F\u4EF6 "),
           createVNode(unref(IconGongzhonghao))
-        ], 2112)) : (openBlock(), createElementBlock(Fragment, { key: 13 }, [
+        ], 2112)) : props.type === "ilive" ? (openBlock(), createElementBlock(Fragment, { key: 13 }, [
+          createCommentVNode(" \u4E91\u76F4\u64AD "),
+          createVNode(unref(IconZhibo))
+        ], 2112)) : props.type === "group" ? (openBlock(), createElementBlock(Fragment, { key: 14 }, [
+          createCommentVNode(" \u9891\u9053/\u7EC4\u4EF6 "),
+          createVNode(unref(IconSelectGroupoverview))
+        ], 2112)) : props.type === "nav" ? (openBlock(), createElementBlock(Fragment, { key: 15 }, [
+          createCommentVNode(" \u529F\u80FD\u5BFC\u822A "),
+          createVNode(unref(IconSelectVersion))
+        ], 2112)) : props.type === "course" ? (openBlock(), createElementBlock(Fragment, { key: 16 }, [
+          createCommentVNode(" \u8BFE\u7A0B "),
+          createVNode(unref(IconBook))
+        ], 2112)) : props.type === "funhd" ? (openBlock(), createElementBlock(Fragment, { key: 17 }, [
+          createCommentVNode(" \u4E92\u52A8\u8FD0\u8425 "),
+          createVNode(unref(IconEvent))
+        ], 2112)) : (openBlock(), createElementBlock(Fragment, { key: 18 }, [
           createCommentVNode(" \u5FAE\u4FE1\u7A3F\u4EF6 "),
           createCommentVNode(" <icon-weixingaojian /> "),
           createCommentVNode(" \u8F6E\u535A\u56FE\u96C6 "),

package/es/utils/request.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { Message } from "@arco-design/web-vue";
 import { getToken } from "./auth.js";
 function request(BASE_API, options) {
   const service = axios.create({
@@ -20,7 +21,10 @@ function request(BASE_API, options) {
   service.interceptors.response.use(
     (response) => {
       const res = response.data;
-      if (res.code !== 0) {
+      if ((res == null ? void 0 : res.code) !== 0) {
+        if (res == null ? void 0 : res.real_error) {
+          Message.warning({ content: res.real_error });
+        }
         return Promise.reject(new Error(res.message || "Error"));
       }
       return res;

package/es/utils/typeMap.d.ts

@@ -59,6 +59,8 @@ export declare const target_type_map: {
     14: any;
     15: string;
     16: string;
+    17: string;
+    18: string;
 };
 export declare const key_target_type_map: any;
 export declare const approveFlowStatusMap: {

package/es/utils/typeMap.js

@@ -13,7 +13,9 @@ const key_target_type_map = {
   13: "ilive",
   14: "mp_account",
   15: "kongo",
-  16: "mp_content"
+  16: "mp_content",
+  17: "funhd",
+  18: "course"
 };
 const approveFlowStatusMap = {
   1: "\u5BA1\u6838\u4E2D",

package/lib/contentDetailList/components/Content/LiveItem/index.js

@@ -68,9 +68,8 @@ const _sfc_main = vue.defineComponent({
             vue.createElementVNode("div", _hoisted_6, [
               vue.createVNode(component, {
                 class: "icon",
-                doc: _ctx.item.catalog === "doc",
                 type: _ctx.item.series
-              }, null, 8, ["doc", "type"]),
+              }, null, 8, ["type"]),
               vue.renderSlot(_ctx.$slots, "tip"),
               _hoisted_7,
               vue.createElementVNode("span", _hoisted_8, "\u53D1\u5E03\u65F6\u95F4: " + vue.toDisplayString(vue.unref(index.timeFormat)(_ctx.item.pub_time)), 1)

package/lib/contentDetailList/components/Content/courseItem/index.js

@@ -0,0 +1,96 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var component = require("../../../../typeIcons/component.js");
+var index = require("../../../../utils/index.js");
+const _hoisted_1 = { class: "cover-view" };
+const _hoisted_2 = {
+  key: 1,
+  class: "no-img"
+};
+const _hoisted_3 = { class: "info-view" };
+const _hoisted_4 = { class: "title_i" };
+const _hoisted_5 = { class: "abttrite-v" };
+const _hoisted_6 = { class: "left" };
+const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "abttr tags" }, "\u8BFE\u7A0B", -1);
+const _hoisted_8 = { class: "abttr tags" };
+const _hoisted_9 = { class: "abttr time" };
+const _hoisted_10 = { class: "right" };
+const _sfc_main = vue.defineComponent({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  emits: ["clickTitle"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const hide = vue.computed(() => {
+      const { hide: hide2 } = props.item;
+      return hide2 === 7 || hide2 === 6;
+    });
+    const silent = vue.computed(() => {
+      return props.item && props.item.mourn_style === 1;
+    });
+    const pc_banner = vue.computed(() => {
+      if (props.item.preview_url || props.item.cover || props.item.pc_cover)
+        return props.item.preview_url || props.item.cover || props.item.pc_cover;
+      if (!props.item.style)
+        return null;
+      const ret = JSON.parse(props.item.style);
+      if (!ret.pc_banner_url)
+        return null;
+      return ret.pc_banner_url;
+    });
+    const clickTitle = () => {
+      emit("clickTitle", props.item);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["medialist-course-item-view", { "gray-forbidden": hide.value, "gray-for-state-hide": silent.value }])
+      }, [
+        vue.createElementVNode("div", _hoisted_1, [
+          pc_banner.value ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), {
+            key: 0,
+            src: pc_banner.value,
+            class: "image",
+            fit: "cover"
+          }, null, 8, ["src"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(vue.unref(index.noCoverText)(_ctx.item)), 1))
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("div", {
+            class: "title",
+            onClick: clickTitle
+          }, [
+            vue.renderSlot(_ctx.$slots, "index"),
+            vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(_ctx.item.alias || _ctx.item.title), 1)
+          ]),
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createVNode(component, {
+                class: "icon",
+                type: "course"
+              }),
+              vue.renderSlot(_ctx.$slots, "tip"),
+              _hoisted_7,
+              vue.createVNode(vue.unref(webVue.Tooltip), {
+                content: `\u8BFE\u7A0B\u521B\u5EFA\u4EBA: ${_ctx.item.pub_user_alias}`,
+                position: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(_ctx.item.pub_user_alias), 1)
+                ]),
+                _: 1
+              }, 8, ["content"]),
+              vue.createElementVNode("span", _hoisted_9, "\u53D1\u5E03\u65F6\u95F4: " + vue.toDisplayString(vue.unref(index.timeFormat)(_ctx.item.pub_time)), 1)
+            ]),
+            vue.createElementVNode("div", _hoisted_10, [
+              vue.renderSlot(_ctx.$slots, "option", { row: _ctx.item })
+            ])
+          ])
+        ])
+      ], 2);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/contentDetailList/components/Content/funhdItem/index.js

@@ -0,0 +1,96 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var component = require("../../../../typeIcons/component.js");
+var index = require("../../../../utils/index.js");
+const _hoisted_1 = { class: "cover-view" };
+const _hoisted_2 = {
+  key: 1,
+  class: "no-img"
+};
+const _hoisted_3 = { class: "info-view" };
+const _hoisted_4 = { class: "title_i" };
+const _hoisted_5 = { class: "abttrite-v" };
+const _hoisted_6 = { class: "left" };
+const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "abttr tags" }, "\u6D3B\u52A8", -1);
+const _hoisted_8 = { class: "abttr tags" };
+const _hoisted_9 = { class: "abttr time" };
+const _hoisted_10 = { class: "right" };
+const _sfc_main = vue.defineComponent({
+  __name: "index",
+  props: {
+    item: {}
+  },
+  emits: ["clickTitle"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const hide = vue.computed(() => {
+      const { hide: hide2 } = props.item;
+      return hide2 === 7 || hide2 === 6;
+    });
+    const silent = vue.computed(() => {
+      return props.item && props.item.mourn_style === 1;
+    });
+    const pc_banner = vue.computed(() => {
+      if (props.item.preview_url || props.item.cover || props.item.pc_cover)
+        return props.item.preview_url || props.item.cover || props.item.pc_cover;
+      if (!props.item.style)
+        return null;
+      const ret = JSON.parse(props.item.style);
+      if (!ret.pc_banner_url)
+        return null;
+      return ret.pc_banner_url;
+    });
+    const clickTitle = () => {
+      emit("clickTitle", props.item);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["medialist-funhd-item-view", { "gray-forbidden": hide.value, "gray-for-state-hide": silent.value }])
+      }, [
+        vue.createElementVNode("div", _hoisted_1, [
+          pc_banner.value ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), {
+            key: 0,
+            src: pc_banner.value,
+            class: "image",
+            fit: "cover"
+          }, null, 8, ["src"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(vue.unref(index.noCoverText)(_ctx.item)), 1))
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("div", {
+            class: "title",
+            onClick: clickTitle
+          }, [
+            vue.renderSlot(_ctx.$slots, "index"),
+            vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(_ctx.item.alias || _ctx.item.title), 1)
+          ]),
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createVNode(component, {
+                class: "icon",
+                type: "funhd"
+              }),
+              vue.renderSlot(_ctx.$slots, "tip"),
+              _hoisted_7,
+              vue.createVNode(vue.unref(webVue.Tooltip), {
+                content: `\u6D3B\u52A8\u521B\u5EFA\u4EBA: ${_ctx.item.pub_user_alias}`,
+                position: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(_ctx.item.pub_user_alias), 1)
+                ]),
+                _: 1
+              }, 8, ["content"]),
+              vue.createElementVNode("span", _hoisted_9, "\u53D1\u5E03\u65F6\u95F4: " + vue.toDisplayString(vue.unref(index.timeFormat)(_ctx.item.pub_time)), 1)
+            ]),
+            vue.createElementVNode("div", _hoisted_10, [
+              vue.renderSlot(_ctx.$slots, "option", { row: _ctx.item })
+            ])
+          ])
+        ])
+      ], 2);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/contentDetailList/components/Content/index.js

@@ -8,6 +8,8 @@ var index$5 = require("./KongoNavItem/index.js");
 var index$4 = require("./LiveItem/index.js");
 var index$3 = require("./MaccountItem/index.js");
 var index$6 = require("./DocMpItem/index.js");
+var index$8 = require("./courseItem/index.js");
+var index$7 = require("./funhdItem/index.js");
 const _hoisted_1 = { class: "index" };
 const _hoisted_2 = {
   key: 0,
@@ -87,6 +89,8 @@ const _hoisted_32 = {
 };
 const _hoisted_33 = { class: "doc-fixed-icon" };
 const _hoisted_34 = { class: "doc-fixed-num" };
+const _hoisted_35 = { class: "index" };
+const _hoisted_36 = { class: "index" };
 const _sfc_main = vue.defineComponent({
   __name: "index",
   props: {
@@ -295,7 +299,7 @@ const _sfc_main = vue.defineComponent({
             _: 3
           }, 8, ["item"]))
         ], 2112)) : _ctx.item.catalog === "mp_content" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 6 }, [
-          vue.createCommentVNode(" \u7A3F\u4EF6\uFF08\u516C\u4F17\u53F7\u7A3F\u4EF6\uFF09 "),
+          vue.createCommentVNode(" \u516C\u4F17\u53F7\u5185\u5BB9 "),
           (vue.openBlock(), vue.createBlock(index$6, {
             key: `doc-mp-${_ctx.item.post_id}`,
             abttrites: _ctx.abttrites,
@@ -325,6 +329,42 @@ const _sfc_main = vue.defineComponent({
             ]),
             _: 3
           }, 8, ["abttrites", "item"]))
+        ], 2112)) : _ctx.item.catalog === "funhd" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 7 }, [
+          vue.createCommentVNode(" \u4E92\u52A8\u8FD0\u8425\uFF08\u6613\u4F01\u79C0\uFF09 "),
+          (vue.openBlock(), vue.createBlock(index$7, {
+            key: `funhd-${_ctx.item.post_id}`,
+            item: { ..._ctx.item, index: _ctx.index },
+            onClickTitle: clickTitle
+          }, {
+            index: vue.withCtx(() => [
+              vue.createElementVNode("span", _hoisted_35, vue.toDisplayString(_ctx.index + 1), 1)
+            ]),
+            option: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "option", {
+                row: _ctx.item,
+                index: _ctx.index
+              })
+            ]),
+            _: 3
+          }, 8, ["item"]))
+        ], 2112)) : _ctx.item.catalog === "course" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 8 }, [
+          vue.createCommentVNode(" \u8BFE\u7A0B "),
+          (vue.openBlock(), vue.createBlock(index$8, {
+            key: `course-${_ctx.item.post_id}`,
+            item: { ..._ctx.item, index: _ctx.index },
+            onClickTitle: clickTitle
+          }, {
+            index: vue.withCtx(() => [
+              vue.createElementVNode("span", _hoisted_36, vue.toDisplayString(_ctx.index + 1), 1)
+            ]),
+            option: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "option", {
+                row: _ctx.item,
+                index: _ctx.index
+              })
+            ]),
+            _: 3
+          }, 8, ["item"]))
         ], 2112)) : vue.createCommentVNode("v-if", true)
       ], 2112);
     };

package/lib/contentDetailList/style/courseItem.less

@@ -0,0 +1,108 @@
+.medialist-course-item-view {
+  display: flex;
+  // width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  .cover-view {
+    position: relative;
+    flex-shrink: 0;
+    width: 110px;
+    height: 70px;
+    margin-right: 20px;
+    background: #edf3ff;
+
+    .image {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .no-img {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: white;
+      font-size: 30px;
+    }
+  }
+
+  .info-view {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 2px 0;
+
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      overflow: hidden;
+      color: #1d2129;
+      font-weight: 400;
+      font-size: 14px;
+      font-style: normal;
+      line-height: 22px;
+      cursor: pointer;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .abttrite-v {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        color: #808692;
+        font-size: 12px;
+
+        .icon {
+          margin-right: 8px;
+        }
+
+        .abttr {
+          display: inline-block;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          &.time {
+            width: 250px;
+          }
+
+          &.tags {
+            display: flex;
+            align-items: center;
+            width: 190px;
+          }
+
+          &.type {
+            display: inline-block;
+            width: 160px;
+          }
+        }
+      }
+
+      .right {
+        margin-right: 20px;
+      }
+    }
+  }
+}