@cmstops/pro-compo 0.1.31 → 0.1.33

package/es/resourceModal/components/MediaSelection/MainContent/index.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createCommentVNode, withDirectives, createElementBlock, Fragment, renderList, createVNode, toDisplayString, createTextVNode, vShow, normalizeClass } from "vue";
 import _imports_0 from "../../../assets/selection/null.js";
 import { Scrollbar, Tooltip, Button } from "@arco-design/web-vue";
-import { IconDoubleDown, IconDoubleUp } from "@arco-design/web-vue/es/icon";
+import { IconDoubleDown, IconDoubleUp } from "@arco-iconbox/vue-cmstop-icons";
 import _sfc_main$2 from "../../../../typeIcons/component.js";
 import _sfc_main$1 from "./FileTypeThumb/index.js";
 import { timeFormat } from "../../../script/filter.js";

package/es/resourceModal/components/MediaSelection/SystemResourceSelected/components/SystemResourceFilter.js

@@ -0,0 +1,139 @@
+import { defineComponent, inject, ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, renderSlot, createVNode, unref, withCtx, Fragment, renderList, createBlock, withDirectives, createTextVNode, vShow } from "vue";
+import { Input, Select, Option, Button } from "@arco-design/web-vue";
+import { IconRefresh } from "@arco-design/web-vue/es/icon";
+import { rateOptions } from "../../../../script/filter.js";
+import { getSysRsClassifyList } from "../../../../script/api.js";
+const _hoisted_1 = { class: "toolbar-search-container sysfile-filter-container" };
+const _hoisted_2 = { class: "top-container" };
+const _hoisted_3 = { class: "filter-content" };
+const _hoisted_4 = { class: "filter-left" };
+const _sfc_main = defineComponent({
+  ...{ name: "ToolbarSearch" },
+  __name: "SystemResourceFilter",
+  emits: ["search", "changeScen"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const mediaUseType = inject("mediaUseType");
+    const baseApi = inject("baseAPI");
+    const filter = ref({
+      keyword: "",
+      wh_rate: "",
+      limit: 9
+    });
+    const classify_id = ref("");
+    const classifyIdOptions = ref([]);
+    const loadClassify = async () => {
+      const res = await getSysRsClassifyList(baseApi, mediaUseType);
+      if (res.code !== 0)
+        return;
+      classifyIdOptions.value = res.message.classifies;
+    };
+    const emit = __emit;
+    const contentSearch = () => {
+      const params = { ...filter.value, sys_tag: mediaUseType };
+      emit("search", params);
+    };
+    const changeScen = () => emit("changeScen", classify_id.value);
+    const clearKeyword = () => {
+      filter.value.keyword = "";
+    };
+    const showReset = computed(
+      () => filter.value.keyword || filter.value.wh_rate || classify_id.value
+    );
+    const reset = () => {
+      filter.value = {
+        keyword: "",
+        wh_rate: "",
+        limit: 9
+      };
+      classify_id.value = "";
+      changeScen();
+      contentSearch();
+    };
+    watch(
+      () => filter.value,
+      () => contentSearch(),
+      { deep: true }
+    );
+    watch(
+      () => classify_id.value,
+      () => changeScen()
+    );
+    onMounted(() => {
+      loadClassify();
+    });
+    __expose({ reset });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "other"),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              createVNode(unref(Input), {
+                modelValue: filter.value.keyword,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filter.value.keyword = $event),
+                class: "filter-item",
+                "allow-clear": "",
+                placeholder: "\u8F93\u5165\u7D20\u6750\u6807\u9898\u641C\u7D22",
+                onClear: clearKeyword
+              }, null, 8, ["modelValue"]),
+              createVNode(unref(Select), {
+                modelValue: classify_id.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => classify_id.value = $event),
+                class: "filter-item",
+                placeholder: "\u573A\u666F\u5206\u7C7B"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Option), {
+                    label: "\u5168\u90E8\u573A\u666F",
+                    value: ""
+                  }),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(classifyIdOptions.value, (item) => {
+                    return openBlock(), createBlock(unref(Option), {
+                      key: item.classify_id,
+                      label: item.scenario_name,
+                      value: item.classify_id
+                    }, null, 8, ["label", "value"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"]),
+              createVNode(unref(Select), {
+                modelValue: filter.value.wh_rate,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filter.value.wh_rate = $event),
+                class: "filter-item",
+                placeholder: "\u56FE\u7247\u6BD4\u4F8B"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rateOptions), (item) => {
+                    return openBlock(), createBlock(unref(Option), {
+                      key: item.value,
+                      label: item.label,
+                      value: item.value
+                    }, null, 8, ["label", "value"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"]),
+              withDirectives(createVNode(unref(Button), {
+                type: "text",
+                size: "medium",
+                onClick: reset
+              }, {
+                icon: withCtx(() => [
+                  createVNode(unref(IconRefresh))
+                ]),
+                default: withCtx(() => [
+                  createTextVNode("\u91CD\u7F6E\u7B5B\u9009")
+                ]),
+                _: 1
+              }, 512), [
+                [vShow, showReset.value]
+              ])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/resourceModal/components/MediaSelection/SystemResourceSelected/components/SystemResourceList.js

@@ -0,0 +1,103 @@
+import { defineComponent, inject, ref, computed, watch, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, renderList, normalizeClass, createVNode, unref, withCtx, toDisplayString, normalizeStyle, createTextVNode } from "vue";
+import _imports_0 from "../../../../assets/images/sys_load_more.js";
+import { Tooltip } from "@arco-design/web-vue";
+import _sfc_main$1 from "../../MainContent/FileTypeThumb/index.js";
+import { getSysRsPage } from "../../../../script/api.js";
+const _hoisted_1 = { class: "sys-res-file-list clearfix" };
+const _hoisted_2 = { class: "thumb-wrap" };
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("img", { src: _imports_0 }, null, -1);
+const _sfc_main = defineComponent({
+  __name: "SystemResourceList",
+  props: {
+    sceniro: {},
+    outsideFilter: {}
+  },
+  emits: ["confirm"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const baseApi = inject("baseAPI");
+    const fileList = ref([]);
+    const fileCount = ref(0);
+    const showMore = computed(
+      () => fileList.value.length < props.sceniro.count
+    );
+    watch(
+      () => props.sceniro,
+      () => {
+        fileList.value = props.sceniro.data;
+        fileCount.value = props.sceniro.count;
+      },
+      { deep: true, immediate: true }
+    );
+    const selectedData = ref([]);
+    const confirm = (itemData) => {
+      selectedData.value = [itemData];
+      emits("confirm", selectedData.value);
+    };
+    const loadMore = async () => {
+      const { sceniro } = props;
+      const { outsideFilter } = props;
+      const res = await getSysRsPage(baseApi, {
+        sys_classify: sceniro.classify_id,
+        sys_tag: sceniro.sys_tag,
+        keyword: outsideFilter.keyword || "",
+        wh_rate: outsideFilter.wh_rate || "",
+        limit: 10,
+        offset: fileList.value.length
+      });
+      if (res.code !== 0)
+        return;
+      fileCount.value = res.message.count;
+      fileList.value = fileList.value.concat(res.message.data);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createCommentVNode(" \u6587\u4EF6 "),
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.classify_id,
+              class: "item"
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"])
+              }, [
+                createElementVNode("div", _hoisted_2, [
+                  createVNode(_sfc_main$1, {
+                    "item-data": item,
+                    preview: true,
+                    onConfirm: confirm
+                  }, null, 8, ["item-data"])
+                ]),
+                createElementVNode("h4", null, [
+                  createVNode(unref(Tooltip), {
+                    content: item.alias,
+                    "open-delay": 500,
+                    effect: "dark",
+                    placement: "top"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", null, toDisplayString(item.alias), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"])
+                ])
+              ], 2)
+            ]);
+          }), 128)),
+          showMore.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "item-load-more",
+            style: normalizeStyle({ width: "calc(20% - 20px)" }),
+            onClick: loadMore
+          }, [
+            _hoisted_3,
+            createTextVNode(" \u70B9\u51FB\u52A0\u8F7D\u66F4\u591A ")
+          ], 4)) : createCommentVNode("v-if", true)
+        ])
+      ], 2112);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/resourceModal/components/MediaSelection/SystemResourceSelected/index.js

@@ -0,0 +1,103 @@
+import { defineComponent, inject, ref, computed, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, unref, withCtx, Fragment, renderList, withDirectives, createTextVNode, toDisplayString, vShow, createCommentVNode } from "vue";
+import _imports_0 from "../../../assets/selection/null.js";
+import { Scrollbar } from "@arco-design/web-vue";
+import _sfc_main$1 from "./components/SystemResourceFilter.js";
+import _sfc_main$2 from "./components/SystemResourceList.js";
+import { getSysRsByTag } from "../../../script/api.js";
+const _hoisted_1 = { class: "sys-resource-dialog" };
+const _hoisted_2 = { class: "sys-resource-cards" };
+const _hoisted_3 = {
+  key: 0,
+  class: "scen-module"
+};
+const _hoisted_4 = { class: "title" };
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "line" }, null, -1);
+const _hoisted_6 = {
+  key: 0,
+  class: "null-file"
+};
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("img", {
+  class: "null-pic",
+  src: _imports_0
+}, null, -1);
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1);
+const _hoisted_9 = [
+  _hoisted_7,
+  _hoisted_8
+];
+const _sfc_main = defineComponent({
+  __name: "index",
+  emits: ["confirm"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const mediaUseType = inject("mediaUseType");
+    const baseApi = inject("baseAPI");
+    const scenList = ref([]);
+    const choseScen = ref("");
+    const outsideFilter = ref(null);
+    const handleSearch = async (filter) => {
+      outsideFilter.value = filter;
+      const res = await getSysRsByTag(baseApi, filter);
+      if (res.code !== 0)
+        return;
+      scenList.value = res.message.Results;
+    };
+    const handleChangeScen = (scen) => {
+      choseScen.value = scen;
+    };
+    const handleConfirm = (data) => {
+      data[0].realUrl = data[0].url;
+      emits("confirm", data);
+    };
+    const isEmpty = computed(() => {
+      if (!scenList.value.length)
+        return true;
+      if (choseScen.value !== "") {
+        const scen = scenList.value.find(
+          (item) => item.classify_id === choseScen.value
+        );
+        return scen.data === null;
+      }
+      return !scenList.value.some((item) => item.data && item.data.length > 0);
+    });
+    onMounted(() => {
+      handleSearch({ sys_tag: mediaUseType, limit: 9 });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          onSearch: handleSearch,
+          onChangeScen: handleChangeScen
+        }),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(Scrollbar), { class: "sys-resource-scroll" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(scenList.value, (sceniro) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: sceniro.classify_id
+                }, [
+                  sceniro.data && sceniro.data.length > 0 ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
+                    createElementVNode("div", _hoisted_4, [
+                      _hoisted_5,
+                      createTextVNode(" " + toDisplayString(sceniro.scenario_name), 1)
+                    ]),
+                    createVNode(_sfc_main$2, {
+                      "outside-filter": outsideFilter.value,
+                      sceniro,
+                      onConfirm: handleConfirm
+                    }, null, 8, ["outside-filter", "sceniro"])
+                  ], 512)), [
+                    [vShow, [sceniro.classify_id, ""].includes(choseScen.value)]
+                  ]) : createCommentVNode("v-if", true)
+                ], 64);
+              }), 128)),
+              isEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_6, _hoisted_9)) : createCommentVNode("v-if", true)
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/resourceModal/components/MediaSelection/index.js

@@ -1,10 +1,11 @@
-import { defineComponent, ref, onMounted, computed, openBlock, createElementBlock, createElementVNode, createCommentVNode, createVNode, unref, withCtx, createBlock, normalizeStyle, withDirectives, Fragment, renderList, createTextVNode, toDisplayString, vShow } from "vue";
+import { defineComponent, inject, ref, onMounted, computed, openBlock, createElementBlock, createElementVNode, createCommentVNode, createVNode, unref, withCtx, createBlock, normalizeStyle, Fragment, withDirectives, renderList, createTextVNode, toDisplayString, vShow } from "vue";
 import { Tabs, TabPane, Button, Breadcrumb, BreadcrumbItem } from "@arco-design/web-vue";
 import { IconArrowLeft } from "@arco-design/web-vue/es/icon";
 import { getAttachmentsAll, getAttachmentsMy, getDirectories } from "../../script/api.js";
 import _sfc_main$1 from "./DocAiMediaSelected/index.js";
-import _sfc_main$2 from "./ToolbarSearch/index.js";
-import _sfc_main$3 from "./MainContent/index.js";
+import _sfc_main$2 from "./SystemResourceSelected/index.js";
+import _sfc_main$3 from "./ToolbarSearch/index.js";
+import _sfc_main$4 from "./MainContent/index.js";
 const _hoisted_1 = {
   class: "media-selection",
   unselectable: "on"
@@ -27,6 +28,7 @@ const _sfc_main = defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const mediaUseType = inject("mediaUseType");
     const confirm = (itemData) => {
       emit("confirm", itemData);
     };
@@ -44,7 +46,7 @@ const _sfc_main = defineComponent({
     });
     const filter = ref(null);
     const activeMediaType = ref(
-      props.ai_static_covers && props.ai_static_covers.length ? "ai" : "all"
+      props.ai_static_covers && props.ai_static_covers.length ? "ai" : mediaUseType ? "system" : "all"
     );
     const api = ref({ getAttachmentsAll, getAttachmentsMy });
     const currentDirectory = ref({
@@ -172,6 +174,10 @@ const _sfc_main = defineComponent({
                   key: "ai",
                   title: "AI\u4F18\u9009"
                 })) : createCommentVNode("v-if", true),
+                unref(mediaUseType) ? (openBlock(), createBlock(unref(TabPane), {
+                  key: "system",
+                  title: "\u5185\u7F6E\u7D20\u6750"
+                })) : createCommentVNode("v-if", true),
                 createVNode(unref(TabPane), {
                   key: "all",
                   title: "\u5168\u90E8\u7D20\u6750"
@@ -196,12 +202,15 @@ const _sfc_main = defineComponent({
               "selected-max": _ctx.selectedMax,
               preview: _ctx.preview,
               onConfirm: confirm
-            }, null, 8, ["ai_static_covers", "ai_gif_covers", "selected-max", "preview"])) : createCommentVNode("v-if", true),
+            }, null, 8, ["ai_static_covers", "ai_gif_covers", "selected-max", "preview"])) : activeMediaType.value === "system" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createCommentVNode(" \u5185\u7F6E\u7D20\u6750 "),
+              createVNode(_sfc_main$2, { onConfirm: confirm })
+            ], 2112)) : createCommentVNode("v-if", true),
             createCommentVNode(" \u7D20\u6750\u5E93\u7D20\u6750 "),
             createCommentVNode(" \u7EC4\u7EC7\u3001\u6587\u4EF6\u5939\u9762\u5305\u5C51 "),
             withDirectives(createElementVNode("div", _hoisted_4, [
               createElementVNode("div", _hoisted_5, [
-                createVNode(_sfc_main$2, {
+                createVNode(_sfc_main$3, {
                   ref_key: "getMoreData",
                   ref: getMoreData,
                   class: "tool-search-box",
@@ -248,7 +257,7 @@ const _sfc_main = defineComponent({
                 _: 1
               })) : createCommentVNode("v-if", true),
               createCommentVNode(" \u6211\u7684\u5DE5\u7A0B\u3001\u89C6\u9891\u5217\u8868 "),
-              createVNode(_sfc_main$3, {
+              createVNode(_sfc_main$4, {
                 "folder-list": folderList.value,
                 "file-list": fileList.value,
                 "file-list-count": fileListCount.value,

package/es/resourceModal/script/api.d.ts

@@ -5,4 +5,21 @@ export declare function getAttachmentsAll(BASE_API: string, query?: Params): imp
 export declare function getAttachmentsMy(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
 export declare function getDirectories(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
 export declare function getAccountList(BASE_API: string, id: number, query: Params): import("axios").AxiosPromise<any>;
+/** @description 系统内置素材部分接口 --- */
+/**
+ * ps：
+ * 1. 内置素材分类 type：
+ *    thumb：稿件素材
+ *    compoIcon：组件 icon
+ *    pushIcon：品宣 icon
+ *    navBg：导航背景
+ *    navIcon：导航 icon
+ */
+export declare function addSysRs(BASE_API: string, data: any, params: any): import("axios").AxiosPromise<any>;
+export declare function setSysRsClassifyName(BASE_API: string, params: any): import("axios").AxiosPromise<any>;
+export declare function getSysRsClassifyList(BASE_API: string, sys_tag: number): import("axios").AxiosPromise<any>;
+export declare function addSysRsClassify(BASE_API: string, params: any): import("axios").AxiosPromise<any>;
+export declare function delSySRsClassify(BASE_API: string, params: any): import("axios").AxiosPromise<any>;
+export declare function getSysRsByTag(BASE_API: string, params: any): import("axios").AxiosPromise<any>;
+export declare function getSysRsPage(BASE_API: string, params: any): import("axios").AxiosPromise<any>;
 export {};

package/es/resourceModal/script/api.js

@@ -27,4 +27,24 @@ function getAccountList(BASE_API, id, query) {
     params: query
   });
 }
-export { getAccountList, getAttachmentsAll, getAttachmentsMy, getDirectories };
+function getSysRsClassifyList(BASE_API, sys_tag) {
+  return request(BASE_API, {
+    url: `/poplar/v3/sys_attachment/scenario_classifies?sys_tag=${sys_tag}`,
+    method: "get"
+  });
+}
+function getSysRsByTag(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v3/classified/sys_attachments",
+    method: "get",
+    params
+  });
+}
+function getSysRsPage(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v3/sys_attachments",
+    method: "get",
+    params
+  });
+}
+export { getAccountList, getAttachmentsAll, getAttachmentsMy, getDirectories, getSysRsByTag, getSysRsClassifyList, getSysRsPage };

package/es/resourceModal/script/mediaSelection.d.ts

@@ -8,3 +8,7 @@ export declare type FilesQueryParamType = {
     offset: number;
     catalog: string;
 };
+export declare type MediaUseType = 0 | 1 | 2 | 3 | 4 | 5;
+export declare const mediaUseEnum: {
+    [key: string]: MediaUseType;
+};

package/es/resourceModal/script/mediaSelection.js

@@ -0,0 +1,8 @@
+const mediaUseEnum = {
+  THUMB: 1,
+  COMPOICON: 2,
+  PUSHICON: 3,
+  NAVBG: 4,
+  NAVICON: 5
+};
+export { mediaUseEnum };

package/es/resourceModal/style/DocAiMediaSelected.less

@@ -32,12 +32,11 @@
               width: 100%;
               height: 100%;
               overflow: hidden;
-              overflow: hidden;
-              border: solid 3px transparent;
+              border: solid 1px transparent;
               border-radius: 4px;
 
               &.active {
-                border: solid 3px #4886ff;
+                border: solid 1px #4886ff;
                 border-radius: 4px;
               }
 

package/es/resourceModal/style/MainContent.less

@@ -43,7 +43,7 @@
                 background: url('../assets/selection/folder.png') no-repeat 13px
                   center;
                 background-size: 17px auto;
-                border: solid 2px transparent;
+                border: solid 1px transparent;
                 border-radius: 4px;
               }
 
@@ -74,13 +74,15 @@
               padding: 14px 16px;
               line-height: 24px;
               background: #f7f8fa;
-              border: 1px solid #ebeef5;
+              //border: 1px solid #ebeef5;
+              border: 1px solid transparent;
               border-radius: 4px;
 
               &:hover {
                 color: #165dff;
                 background: #f2f3f5;
-                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+                border: 1px solid #4886ff;
+                box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
                 cursor: pointer;
               }
             }

package/es/resourceModal/style/SystemResourceSelected.less

@@ -0,0 +1,138 @@
+.sys-resource-dialog {
+  padding: 10px 20px;
+
+  .scen-module {
+    margin-bottom: 20px;
+
+    .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 14px;
+
+      .line {
+        width: 2px;
+        height: 14px;
+        background-color: #4886ff;
+      }
+    }
+  }
+
+  .null-file {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 300px;
+
+    .null-pic {
+      display: block;
+      width: 10%;
+      margin: 20px auto;
+    }
+
+    p {
+      color: #a2a3a7;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}
+
+.sysfile-filter-container {
+  padding: 12px 0;
+}
+
+.sys-res-file-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  .item-load-more {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    color: #9a9a9a;
+    font-size: 12px;
+    cursor: pointer;
+
+    img {
+      width: 72px;
+    }
+  }
+
+  .item {
+    position: relative;
+    width: calc(20% - 20px);
+    overflow: hidden;
+    cursor: pointer;
+
+    .move-action {
+      opacity: 0.5;
+    }
+
+    .shadow-wrap {
+      position: relative;
+      overflow: hidden;
+      background: #fff;
+      border: 1px solid #ebeef5;
+      border-radius: 4px;
+
+      &:hover {
+        border: 1px solid #4886ff;
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      .thumb-wrap {
+        position: relative;
+        width: 100%;
+        background: url('../assets/selection/picBg.png');
+      }
+
+      h4,
+      p {
+        margin-top: 4px;
+        margin-bottom: 2px;
+        padding: 0 10px;
+        overflow: hidden;
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        word-wrap: normal;
+
+        i,
+        svg {
+          margin-right: 4px;
+          color: #e75258;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+
+        svg {
+          margin-right: 4px;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+
+        span {
+          vertical-align: middle;
+        }
+      }
+
+      p {
+        margin-bottom: 4px;
+        font-weight: normal;
+        font-size: 12px;
+        line-height: 1em;
+        opacity: 0.65;
+      }
+    }
+  }
+
+  &::after {
+    height: 50px;
+  }
+}