From 2f92304257c94302f06ae30667cdf8982d8ce0ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E8=8F=9C=E9=85=B1?= <wwg_c710@163.com>
Date: Fri, 12 Sep 2025 11:49:51 +0800
Subject: [PATCH] style(home): css

---
 src/app.config.ts                     |  4 +--
 src/components/TemplateCard/index.css | 36 ++++++++++++++++-----------
 src/components/TemplateCard/index.tsx |  7 +++++-
 src/pages/home/index.config.ts        |  2 +-
 src/pages/home/index.css              |  7 +++---
 5 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/app.config.ts b/src/app.config.ts
index c6c725e..f18d723 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -12,13 +12,13 @@ export default defineAppConfig({
     list: [
       {
         pagePath: 'pages/home/index',
-        text: '首页',
+        text: '游乐场',
         iconPath: 'assets/icons/playground.png',
         selectedIconPath: 'assets/icons/playground-selected.png',
       },
       {
         pagePath: 'pages/history/index',
-        text: '历史记录',
+        text: '我的',
         iconPath: 'assets/icons/user.png',
         selectedIconPath: 'assets/icons/user-selected.png',
       },
diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index a5c3280..ff7b0ef 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -1,6 +1,6 @@
 .template-card {
   background: #fff;
-  border-radius: 32px;
+  border-radius: 16px;
   padding: 0;
   box-shadow: 0 4px 24px rgb(0 0 0 / 8%);
   cursor: pointer;
@@ -122,28 +122,36 @@
   justify-content: center;
   align-items: center;
 }
-
+/* 水印 */
+.watermark {
+  position: absolute;
+  top: 12px;
+  left: 14px;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 .name-badge {
-  background: rgb(0 0 0 / 70%);
-  backdrop-filter: blur(20px);
+  background: #0000004D;
+  backdrop-filter: blur(5px);
   color: #fff;
   font-size: 24px;
-  font-weight: 600;
-  padding: 8px 20px;
-  border-radius: 20px;
-  text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
-  text-align: center;
-  max-width: 90%;
+  font-weight: 500;
+  border-radius: 100px;
+  border: 1px solid #FFFFFF4D;
+  height: 30px;
   width: fit-content;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding: 12px 16px;
 }
-
 /* 单视频容器样式 */
 .single-video-container {
   position: relative;
-  border-radius: 32px;
+  border-radius: 16px;
   overflow: hidden;
   width: 100%;
   min-height: 480px;
@@ -156,7 +164,7 @@
   min-height: 480px;
   object-fit: cover;
   display: block;
-  border-radius: 32px;
+  border-radius: 16px;
   position: relative;
   z-index: 2;
   transform: translateZ(0);
@@ -172,7 +180,7 @@
   height: 100%;
   z-index: 1;
   object-fit: cover;
-  border-radius: 32px;
+  border-radius: 16px;
 }
 
 /* 视频样式 */
diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index ef5915b..3b14181 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -101,7 +101,12 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
           />
           {/* 模板名称悬浮 - 视频底部 */}
           <View className="name-overlay">
-            <Text className="name-badge">{template.name}</Text>
+            <Text className="name-badge">
+              ✨
+              {template.name}
+            </Text>
+          </View>
+          <View className='watermark'>
             <Text className="watermark-text">内容由AI生成</Text>
           </View>
         </View>
diff --git a/src/pages/home/index.config.ts b/src/pages/home/index.config.ts
index de6b790..12bdd3a 100644
--- a/src/pages/home/index.config.ts
+++ b/src/pages/home/index.config.ts
@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页',
+  navigationBarTitleText: '游乐场',
   navigationBarBackgroundColor: '#ffffff',
   navigationBarTextStyle: 'black',
   backgroundColorTop: '#ffffff',
diff --git a/src/pages/home/index.css b/src/pages/home/index.css
index f880909..bc250a0 100644
--- a/src/pages/home/index.css
+++ b/src/pages/home/index.css
@@ -1,5 +1,6 @@
 .home {
-  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
+  /* background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); */
+  background: #F5F6F8;
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -39,9 +40,9 @@
 .template-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: 14px;
   max-width: 100%;
   margin: 0 auto;
-  padding: 8px 12px;
+  padding: 8px 28px;
   min-height: 100%;
 }