feat: 最近操作&推荐模板

src/views/home/components/recent-creation.vue

 <script setup lang="ts"></script>
 
 <template>
-  <div class="rounded-[16px] bg-white p-[24px]">
-    <div>最近创作</div>
+  <div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
+    <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>

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>

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>

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>

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_-]+$',
   },
 }