Merge branch 'shirlyn' of https://gitlab.gsstcloud.com/digitalperson/digitalperson-fe

f34da68a · nick zheng · 1ae64fce · cec1ba77 · f34da68a · f34da68a
Commit f34da68a authored Sep 24, 2024 by nick zheng
7 changed files
--- a/src/assets/close-2.png
+++ b/src/assets/close-2.png
--- a/src/views/home/components/recent-creation.vue
+++ b/src/views/home/components/recent-creation.vue
 <script setup lang="ts"></script>
 <template>
-  <div class="rounded-[16px] bg-white p-[24px]">
+  <div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
-    <div>最近创作</div>
+    <div class="flex justify-between text-[18px] text-[#000]">
+      最近創作
+      <div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]">
+        <div class="">查看全部</div>
+        <CustomIcon class="h-[16px] w-[16px]" icon="ic:sharp-keyboard-arrow-right"></CustomIcon>
+      </div>
+    </div>
+    <div class="flex flex-wrap justify-between">
+      <div v-for="item in 7" :key="item">
+        <n-card class="mt-[16px] rounded-[10px]">
+          <template #cover>
+            <div class="relative flex h-[145px] w-[145px] items-center justify-center bg-[#f0f0f0]">
+              <img
+                src="https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90"
+                class="absolute h-full w-full scale-100 cursor-pointer rounded-[12px] object-cover blur-[32px] filter transition-transform duration-300 ease-in-out"
+              />
+              <img
+                src="https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90"
+                class="hover:scale-104 absolute inset-0 aspect-[1] cursor-pointer object-contain transition-transform duration-300 ease-in-out"
+              />
+              <div
+                class="absolute bottom-[8px] left-[8px] cursor-default rounded-[4px] bg-[#000000]/[.5] px-[6px] py-[2px] text-[12px] text-[#FFFFFF]"
+              >
+                精编视频
+              </div>
+            </div>
+          </template>
+        </n-card>
+        <n-ellipsis class="mt-[12px] cursor-default text-[#151b26]" style="max-width: 150px">
+          金融课程2024-09-11 09:48:41
+        </n-ellipsis>
+      </div>
+    </div>
  </div>
 </template>
+<style lang="scss">
+.n-card {
+  max-width: 146px;
+}
+.n-card .n-card-cover {
+  border-radius: 12px !important;
+}
+.n-popover__content {
+  font-size: 12px;
+}
+.n-popover:not(.n-popover--raw) {
+  color: #000;
+  background-color: #fff !important;
+}
+.n-card.n-card--bordered {
+  border: none !important;
+}
+.n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow {
+  background-color: #fff !important ;
+}
+</style>
--- a/src/views/home/components/recommend-template.vue
+++ b/src/views/home/components/recommend-template.vue
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import TemplatePreview from './template-preview.vue'
+import { useInfiniteScroll } from '@vueuse/core'
+const PreviewModalVisible = ref(false)
+const selectedImageUrl = ref('')
+const checkedValue = ref('Trending')
+const loading = ref(false)
+const itemsToShow = ref(30)
+const el = ref<HTMLElement | null>(null)
+const templateClassify = [
+  { value: 'Trending', label: '热门' },
+  {
+    value: 'Shakermaker',
+    label: '产品营销',
+  },
+  {
+    value: 'NewsInformatio',
+    label: '新闻资讯',
+  },
+  {
+    value: 'BusinessCard',
+    label: '名片',
+  },
+  {
+    value: 'Health',
+    label: '医疗健康',
+  },
+  {
+    value: 'Education',
+    label: '教育培训',
+  },
+  {
+    value: 'Invite',
+    label: '邀请函',
+  },
+]
+const templateData = ref([
+  {
+    id: 1,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 2,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 3,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 4,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 5,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 6,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 7,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 8,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 9,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 10,
+    templateType: 'Shakermaker',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 11,
+    templateType: 'Shakermaker',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 12,
+    templateType: 'Shakermaker',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 13,
+    templateType: 'Shakermaker',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 14,
+    templateType: 'Shakermaker',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 15,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 16,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 17,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 18,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 19,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 20,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 21,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 22,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 23,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 24,
+    templateType: 'NewsInformatio',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 25,
+    templateType: 'BusinessCard',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 26,
+    templateType: 'BusinessCard',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 27,
+    templateType: 'BusinessCard',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 28,
+    templateType: 'BusinessCard',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 29,
+    templateType: 'BusinessCard',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 30,
+    templateType: 'Health',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 31,
+    templateType: 'Health',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 32,
+    templateType: 'Health',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 33,
+    templateType: 'Health',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 34,
+    templateType: 'Education',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 35,
+    templateType: 'Education',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 36,
+    templateType: 'Education',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 37,
+    templateType: 'Education',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 38,
+    templateType: 'Invite',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 39,
+    templateType: 'Invite',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 40,
+    templateType: 'Invite',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 41,
+    templateType: 'Invite',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 42,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 43,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 44,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 45,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 46,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 47,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 48,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 49,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 50,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 51,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 52,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 53,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 54,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 55,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 56,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 57,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 58,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 59,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 60,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 61,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 62,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 63,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 64,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 65,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 66,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 67,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/f05deda3-e703-451c-b53c-c27c76a5e009/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 68,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 69,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 70,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/2610e9c0-8300-4573-9666-2e373bace355/%E5%A4%A7%E6%A9%98%E5%A4%A7%E5%88%A9-%E7%AB%96%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 71,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-test.cdn.bcebos.com/2023-12-07T16:26:20.884065/sd-pmdxs1aaa7r199jxz_1701937580447.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 72,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+  {
+    id: 73,
+    templateType: 'Trending',
+    imageUrl:
+      'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/20bdd8ff-14cd-47be-b77e-9d16296e33cc/%E7%82%AB%E5%BD%A9%E8%88%9E%E9%BE%99-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+  },
+])
+const filteredTemplateData = computed(() => {
+  if (!checkedValue.value) {
+    return templateData.value
+  }
+  return templateData.value.filter((item) => item.templateType === checkedValue.value)
+})
+const displayedData = computed(() => {
+  return filteredTemplateData.value.slice(0, itemsToShow.value)
+})
+const canLoadMore = computed(() => {
+  return itemsToShow.value < filteredTemplateData.value.length
+})
+useInfiniteScroll(
+  el,
+  () => {
+    if (!canLoadMore.value) return
+    loading.value = true
+    if (canLoadMore.value) {
+      setTimeout(() => {
+        itemsToShow.value += 10
+      }, 1000)
+    }
+    loading.value = false
+  },
+  { distance: 10 },
+)
+function handleOpenModal(imageUrl: string) {
+  selectedImageUrl.value = imageUrl
+  PreviewModalVisible.value = true
+}
+</script>
+<template>
+  <div class="mt-[16px] h-full min-w-[1160px] overscroll-none rounded-[16px] bg-white px-[24px] pb-[16px]">
+    <div class="sticky top-0 z-10 bg-white pt-[24px]">
+      <div class="mb-[24px] cursor-default text-[18px] text-[#000]">推荐模板</div>
+      <div class="pb-[16px]">
+        <n-radio-group v-model:value="checkedValue">
+          <n-radio-button
+            v-for="classify in templateClassify"
+            :key="classify.value"
+            class="!h-[28px] !px-[12px] !leading-[28px] hover:text-[#5b647a]"
+            :value="classify.value"
+            :label="classify.label"
+          />
+        </n-radio-group>
+      </div>
+    </div>
+    <div class="columns-6 gap-5">
+      <n-card v-for="item in displayedData" :key="item.id" class="relative mb-[20px] w-full">
+        <template #cover>
+          <div class="relative flex items-center justify-center bg-[#f0f0f0]">
+            <img
+              :src="item.imageUrl"
+              class="hover:scale-104 inset-0 h-full w-full cursor-pointer object-cover transition-transform duration-300 ease-in-out"
+              @click="handleOpenModal(item.imageUrl)"
+            />
+            <div
+              class="overlay pointer-events-none absolute hidden h-full w-full cursor-pointer bg-[#000000]/[.1]"
+            ></div>
+            <div
+              class="overlay absolute bottom-2 left-2 right-2 hidden h-8 cursor-pointer rounded-[6px] border border-gray-300 bg-white/90 px-2 text-center text-[14px] leading-[30px] text-[#000000]"
+            >
+              做同款
+            </div>
+          </div>
+        </template>
+      </n-card>
+      <div ref="el" class="h-[50px]"></div>
+    </div>
+    <div v-if="!canLoadMore" class="mt-[80px] flex justify-center text-center text-[14px] text-[#a9b4cc]">
+      <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
+      <div class="mb-[8px] w-[80px]">已经到底啦</div>
+      <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
+    </div>
+    <TemplatePreview v-model="PreviewModalVisible" :image-url="selectedImageUrl" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.n-card {
+  width: 170px !important;
+  max-width: 170px;
+  &:hover {
+    .overlay {
+      display: block !important;
+    }
+  }
+  .overlay {
+    &:first-child {
+      &:hover + img {
+        transform: scale(1.04);
+      }
+    }
+  }
+}
+.n-radio-group {
+  --n-button-box-shadow-focus: none !important;
+  .n-radio-button {
+    border: none;
+    border-radius: 15px !important;
+    &:first-child {
+      border-left: 1px solid #fff !important;
+    }
+    &:last-child {
+      border-right: 1px solid #fff !important;
+    }
+    &.n-radio-button--checked {
+      color: #091221 !important;
+      background-color: #edeef7 !important;
+      border: none !important;
+    }
+    &:not(.n-radio-button--disabled):hover:not(.n-radio-button--checked) {
+      color: #5b647a !important;
+    }
+  }
+  :deep(.n-radio-group__splitor) {
+    width: 0 !important;
+    background-color: #fff !important;
+  }
+}
+</style>
--- a/src/views/home/components/template-preview.vue
+++ b/src/views/home/components/template-preview.vue
+<script setup lang="ts">
+const visible = defineModel<boolean>()
+const props = defineProps<{
+  imageUrl: string
+}>()
+function handleClose() {
+  visible.value = false
+}
+</script>
+<template>
+  <n-modal v-model:show="visible">
+    <div class="flex flex-col items-center justify-center">
+      <div class="h-[603px] w-[800px] rounded-lg bg-white">
+        <div class="flex justify-between px-[24px] pt-[24px] text-[16px]">
+          <span>企业宣传</span>
+          <CustomIcon
+            class="h-[20px] w-[20px] cursor-pointer text-[#000000]/[0.45]"
+            icon="ic:sharp-close"
+            @click="handleClose"
+          ></CustomIcon>
+        </div>
+        <div class="px-[24px] pb-[24px] pt-[16px]">
+          <div class="flex justify-center rounded-[16px] bg-[#f3f4fb]">
+            <div class="relative flex h-[448px] w-[752px] items-center justify-center rounded-[16px] bg-[#f3f4fb]">
+              <img
+                :src="props.imageUrl"
+                class="absolute inset-0 aspect-[1] h-[448px] w-[752px] cursor-pointer object-contain transition-transform duration-300 ease-in-out"
+              />
+            </div>
+          </div>
+          <div class="mt-[24px] flex justify-end">
+            <button
+              class="!mr-[12px] box-content !h-[38px] !w-[74px] rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none hover:border-[#2468f2] hover:text-[#2468f2]"
+              @click="handleClose"
+            >
+              取消
+            </button>
+            <button
+              class="same-btn !box-content !h-[38px] !w-[74px] rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-gradient-to-r from-[#30b5f2] to-[#2468f2] px-[10px] text-[#ffffff]"
+            >
+              做同款
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+<style lang="scss" scoped>
+.same-btn:hover {
+  background-image: linear-gradient(270deg, #30b5f2, #528eff);
+}
+</style>
--- a/src/views/home/layout/index.vue
+++ b/src/views/home/layout/index.vue
@@ -17,7 +17,7 @@ import MainContent from './main-content.vue'
            <SideBar />
          </n-layout-sider>
-          <n-layout-content class="rounded-[16px] !bg-transparent">
+          <n-layout-content class="overscroll-contain rounded-[16px] !bg-transparent">
            <MainContent />
          </n-layout-content>
        </n-layout>
@@ -30,4 +30,9 @@ import MainContent from './main-content.vue'
 :deep(.layout-wrapper-content) {
  @apply flex flex-col;
 }
+:deep(.n-layout .n-layout-scroll-container::-webkit-scrollbar) {
+  width: 0;
+  background: transparent;
+}
 </style>
--- a/src/views/home/layout/main-content.vue
+++ b/src/views/home/layout/main-content.vue
 <script setup lang="ts">
 import RecentCreation from '../components/recent-creation.vue'
+import RecommendTemplate from '../components/recommend-template.vue'
 </script>
 <template>
  <main>
    <RecentCreation />
+    <RecommendTemplate />
  </main>
 </template>
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -30,5 +30,6 @@ export default {
    'font-family-no-missing-generic-family-keyword': null,
    'scss/at-import-partial-extension': 'always',
    'alpha-value-notation': 'number',
+    'selector-class-pattern': '^[A-z_-]+$',
  },
 }