移动端适配；自定义工具类：字体大小，行高，颜色

README.md

@@ -192,3 +192,7 @@ https://next-auth.js.org/getting-started/introduction
 
 ## 关于.env
 .env中NEXT_PUBLIC_NEXT_AUTH_SECRET字段的值是openssl rand -base64 32 生成的，应该是生成token时或者session签名时用到
+
+## 关于dangerouslySetInnerHTML和JSON-LD
+1. [dangerouslySetInnerHTML](https://blog.csdn.net/weixin_43172311/article/details/154724433)
+2. [JSON-LD](https://www.cnblogs.com/swizard/p/19476232)

src/app/globals.css

@@ -31,30 +31,18 @@ body::-webkit-scrollbar-thumb {
   background-color: #d4d4d4;
 }
 
-@theme {
-  /* Custom breakpoints */
-  --breakpoint-xxs: 375px;
-  --breakpoint-xs: 425px;
-  --breakpoint-xss: 525px;
-  --breakpoint-400: 400px;
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1610px;
-  --breakpoint-3xl: 1640px;
-  --breakpoint-1366: 1366px;
-  /* Custom spacing */
-  --spacing-7_5: 30px;
-  --spacing-30: 120px;
-  --spacing-92_5: 23.125rem;
-  /* Font sizes */
-  --font-size-xxs: 13px;
-  /* Font family */
-  --font-family-outfit: var(--font-outfit), system-ui, sans-serif;
+/**
+ * 移动端适配核心：clamp() 根字号  在390px设计稿下 16px ≈ 4.1025641vw = 1rem
+ * 比如 390px设计稿，有一个div宽度是120px，那么可以写 w-30，下面是换算原理：
+ * tailwindcss中单位用的是rem， 默认根字号为16px，也就是在tailwindcss中，0.25rem = 4px，
+ * 而对于类名 w-1 来说，这里的1就是0.25rem，即4px，那么w-1就是4px，w-2就是8px，以此类推
+ * 
+ * */
+html {
+  font-size: clamp(10px, 4.1025641vw, 40px);
 }
 
-/* GLOBAL VARIABLES */
+/* GLOBAL VARIABLES :root中定义常规变量，不被映射到工具类*/
 :root {
   /* Font families */
   font-family: var(--font-outfit), system-ui, sans-serif;
@@ -70,27 +58,57 @@ body::-webkit-scrollbar-thumb {
   --selected-bottom-dark: #95b6ff;
   --selected-bg-bottom-dark: #314779;
   --input-color: #b3b3b3;
-  /* font size  */
+
+  /* 字体尺寸 */
   --font-size-xxs: 13px;
-  /* Spacing */
+
+  /* 间距变量（供自定义类使用） */
   --space-30: 120px;
   --space-7_5: 30px;
   --space-92_5: 23.125rem;
+}
+
+/*theme中定义的变量可以被映射到实用程序类(需要注意映射规则，不是所有变量都能映射)*/
+@theme {
+  /* 仅保留字体族定义，其他通过 :root 变量注入 */
+  --font-family-outfit: var(--font-outfit), system-ui, sans-serif;
 
-  /* Screens (breakpoints) */
-  --screen-xxs: 360px;
-  --screen-xs: 425px;
-  --screen-xss: 525px;
-  --screen-400: 400px;
-  --screen-sm: 640px;
-  --screen-md: 768px;
-  --screen-lg: 1024px;
-  --screen-xl: 1280px;
-  --screen-2xl: 1610px;
-  --screen-3xl: 1640px;
-  --screen-1366: 1366px;
+  /*自定义颜色*/
+  --color-ly-lightgray: #f2f2f2;
+  --color-ly-gray: #d3d3d3; /*可被映射为text-ly-gray，bg-ly-gray等相关的颜色类目*/
+  --color-ly-gold: #ffd700;
+  --color-ly-green: #01754a;
+  --color-ly-middlegreen: #036141;
+  --color-ly-deepgreen: #1e3932;
+  /*自定义字体大小 前缀 ly*/
+  --text-ly-12: 0.75rem;
+  --text-ly-14: 0.875rem;
+  --text-ly-16: 1rem;
+  --text-ly-18: 1.125rem;
+  --text-ly-20: 1.25rem;
+  --text-ly-22: 1.375rem;
+  --text-ly-24: 1.5rem;
+  --text-ly-30: 1.875rem; /* 1.875rem (30px) */ 
+	--text-ly-36: 2.25rem; /* 2.25rem (36px) */ 	
+  --text-ly-48: 3rem; /* 3rem (48px) */ 
+
+  /*自定义行高 前缀 ly*/
+  --leading-ly-16: 1rem;
+  --leading-ly-18: 1.125rem;
+  --leading-ly-20: 1.25rem;
+  --leading-ly-22: 1.375rem;
+  --leading-ly-24: 1.5rem;
+  --leading-ly-26: 1.625rem;
+  --leading-ly-28: 1.75rem;
+  --leading-ly-36: 2.25rem;
 }
 
+@utility h-ly-46 {
+  height: 2.875rem;
+}
+@utility strokeline-bg-disabled {
+  background-image:linear-gradient(to bottom right,transparent,transparent calc(50% - 1px),#acacac 50%,#acacac 0,transparent calc(50% + 1px));
+}
 .dark {
   --background: #171717;
   --foreground: #ffffff;
@@ -120,18 +138,13 @@ body {
 }
 
 @layer components {
-
   /* Hide scrollbar for drawer content */
   .drawer-scrollbar-hidden {
     scrollbar-width: none;
-    /* Firefox */
     -ms-overflow-style: none;
-    /* IE and Edge */
   }
-
   .drawer-scrollbar-hidden::-webkit-scrollbar {
     display: none;
-    /* Chrome, Safari, Opera */
   }
 
   .placeholder-input-color::placeholder {
@@ -171,7 +184,6 @@ body {
     0% {
       transform: translateX(-100%);
     }
-
     100% {
       transform: translateX(100%);
     }
@@ -181,11 +193,6 @@ body {
     aspect-ratio: 1.72;
   }
 
-  @media (min-width: 768px) {
-    .image-carousel-aspect {
-      aspect-ratio: 1.98;
-    }
-  }
 
   /* Prevent body scrolling when drawer is open */
   .scroll-locked {

src/app/layout.tsx

@@ -42,6 +42,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
       </head>
       <body className={clsx(
         "min-h-screen font-outfit text-foreground bg-background antialiased",