fix(in-app): styles (#954)

leancloud · Dec 22, 2023 · 261f8be · 261f8be
1 parent fe72c07
commit 261f8be
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/in-app/v1/src/App/Home/AiClassify.tsx b/in-app/v1/src/App/Home/AiClassify.tsx
@@ -103,7 +103,7 @@ const Input = memo(({ className, ...props }: ComponentPropsWithoutRef<'div'>) =>
                   : 'text-[#888888]',
                 'transition-colors',
                 'rounded-[15px]',
-                'h-[1.875rem]',
+                'leading-[30px]',
                 'flex',
                 'items-center'
               )}

diff --git a/in-app/v1/src/App/Home/Notices.tsx b/in-app/v1/src/App/Home/Notices.tsx
@@ -22,15 +22,16 @@ export default function Notices() {
       <div className="overflow-hidden " ref={emblaRef}>
         <div className="flex flex-col h-[45px] items-stretch">
           {notices.map((notice) => (
-            <NoticeLink
-              article={notice}
-              key={notice.id}
-              className="flex items-center text-tapBlue px-4 py-3"
-            >
-              <SpeakerIcon className="text-tapBlue shrink-0" />
-              <span className="grow truncate ml-2 mr-1">{notice.title}</span>
-              <ChevronRightIcon className="shrink-0 h-4 w-4 text-tapBlue" />
-            </NoticeLink>
+            <div key={notice.id}>
+              <NoticeLink
+                article={notice}
+                className="flex h-[45px] items-center text-tapBlue px-4 py-3"
+              >
+                <SpeakerIcon className="text-tapBlue shrink-0" />
+                <span className="grow truncate ml-2 mr-1">{notice.title}</span>
+                <ChevronRightIcon className="shrink-0 h-4 w-4 text-tapBlue" />
+              </NoticeLink>
+            </div>
           ))}
         </div>
       </div>

diff --git a/in-app/v1/src/App/index.tsx b/in-app/v1/src/App/index.tsx
@@ -115,7 +115,9 @@ export default function App() {
         <ErrorBoundary>
           <Suspense fallback={<Loading fullScreen />}>
             <SDKProvider>
-              <AppRoutes />
+              <div className="main">
+                <AppRoutes />
+              </div>
             </SDKProvider>
           </Suspense>
         </ErrorBoundary>

diff --git a/in-app/v1/src/index.css b/in-app/v1/src/index.css
@@ -7,15 +7,19 @@ html {
 }
 
 body {
-  @apply flex flex-col min-h-full text-base bg-[#E5E5E5] text-[#222];
+  @apply flex flex-col min-h-full text-base bg-[#E5E5E5] text-[#222] h-[100%] overflow-hidden;
 
   &.rnd {
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 60) rotate(-45)' fill='rgba(0,0,0,.08)' font-size='16' font-family='sans-serif'>测试版</text></svg>");
   }
 }
 
 #root {
-  @apply flex flex-col grow w-full max-w-3xl mx-auto;
+  @apply flex flex-col w-full h-[100%] mb-2 overflow-y-auto;
+}
+
+.main{
+  @apply flex flex-col mx-auto max-w-3xl w-full min-h-full;
 }
 
 button:focus,