chore: update ui

YuzeTT · Nov 19, 2023 · 7761427 · 7761427
1 parent 433b0e7
commit 7761427
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 13 deletions.
diff --git a/public/images/big-sticker_logo.webp b/public/images/big-sticker_logo.webp
diff --git a/public/images/big-sticker_logo_2.webp b/public/images/big-sticker_logo_2.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -92,10 +92,12 @@ function App() {
         {info.name!=='用户'?
           <Login name={info.name}></Login>:''
         }
-        <Navbar></Navbar>
         <div bg='white'>
-          <div px-4 py-4 max-w-xl mx-auto>
-            <RouterRender/>
+          <Navbar></Navbar>
+          <div>
+            <div px-4 pb-4 max-w-xl mx-auto>
+              <RouterRender/>
+            </div>
           </div>
         </div>
         <Footer></Footer>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-// import { useLocation } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 // import { useLocation } from 'react-router';
 // import list from '../utils/router';
 // import { useState } from 'react'
@@ -9,6 +9,7 @@ import { motion } from "framer-motion"
 import isVip from "../utils/isVip"
 
 export default function Navbar() {
+  const navigate = useNavigate();
   // const h = 10
   // const hostname = window.location.hostname
   // const h = new Date().getHours()
@@ -35,7 +36,7 @@ export default function Navbar() {
   //   }
   // }
   // const [showText , setShowText] = useState(false)
-  // const location = useLocation()
+  const location = useLocation()
   // const tag = list.done.find((e)=> e.url === location.pathname)
 
   const [registration, setRegistration] = useState<ServiceWorkerRegistration | null>(null);
@@ -61,7 +62,8 @@ export default function Navbar() {
   };
 
   return (
-    <div bg='white' overflow-hidden style={{borderBottom :'1px solid #EFEFEF'}}>
+    // style={{borderBottom :'1px solid #EFEFEF'}}
+    <div overflow-hidden className={location.pathname==='/'?'hidden':'block bg-transparent'}>
       <div>
         <div className='h-[64px]' px-4 flex='~ items-center justify-between'>
             {/* <div className="i-ri-menu-fill text-2xl text-gray-500" /> */}
@@ -71,8 +73,9 @@ export default function Navbar() {
               <span className='px-2 py-1 bg-orange-200 text-orange-700 rounded-md text-sm font-500'>Beta</span>
             }
           </div> */}
+          <div className="i-ri-arrow-left-s-line text-2xl mr-4" onClick={()=>{navigate('/')}} />
           <a flex='~ items-center' href='/' decoration-none text-zinc-900>
-            <img src='/images/wsj.png' alt='logo' className='w-8 h-8' />
+            <img src='/images/big-sticker_logo_2.webp' alt='logo' className='w-7 h-7' />
             <span className="text-lg font-bold ml-2">大贴纸</span>
             {/* <img src='/sticker_logo.png' alt='logo' className='w-8 h-8' /> */}
             {/* <div text='lg' font='bold'>大贴纸</div> */}
@@ -104,7 +107,7 @@ export default function Navbar() {
           </motion.div>
         </div>
       </div>
-      {isVip().level==100?
+      {/* {isVip().level==100?
         <div className='px-2 pb-2'>
           <div id="toast-simple" className="flex items-center w-full p-4 space-x-3 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg card" role="alert">
               <div className="i-ri-passport-fill text-xl text-blue-500" />
@@ -114,7 +117,7 @@ export default function Navbar() {
               </div>
           </div>
         </div>:''
-      }
+      } */}
       {/* <div px-4 pb-4 text='zinc-500' flex='~ items-center justify-center' >
         <div className={getMsg()[1]} text-lg text-blue-500></div>
         <div pl-2>{getMsg()[0]}</div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -37,8 +37,20 @@ export default function index() {
     navigate(url)
   }
   return (
-    <div className='max-w-xl mx-auto'>
-      <div className='p-2 rounded-2xl mb-4 card'>
+    <div className='max-w-xl mx-auto relative z-10'>
+      <div className='w-40 h-40 rounded-full bg-blue-100 absolute -top-10 -left-10 z-0 blur-[70px]'></div>
+      <div className='w-40 h-40 rounded-full bg-green-100 absolute top-10 -right-10 z-0 blur-[70px]'></div>
+      <div className='mb-4 relative p-4'>
+        <img src='/images/big-sticker_logo_2.webp' alt='logo' className='w-12 h-12' />
+        <div className='text-3xl op90 mt-5'>早生蚝!</div>
+        <div className='text-lg op90 mt-2'>欢迎来到大贴纸的全新站点~</div>
+
+        <a href='/user' className='absolute top-0 right-0 m-4 bg-green-100 p-1 rounded-full flex items-center text-green-700'>
+          <div className="i-ri-account-circle-fill text-xl" />
+          <div className='text-sm mx-1'>我的账户</div>
+        </a>
+      </div>
+      <div className='p-2 rounded-2xl mb-4 card bg-white relative z-20'>
         <div className='mb-3 mt-1 mx-2 text-zinc-600 text-sm'>快捷跳转</div>
         <div className='grid grid-cols-2 gap-2'>
           <CopyToClipboard text='752693422'
@@ -86,7 +98,7 @@ export default function index() {
       <div text='sm' op50 mb-2>已完成</div>
       <div className='grid grid-cols-2 md:grid-cols-3 gap-3'>
         {list.done.map((item, key)=>(
-          <div p-4  cursor-pointer rounded-xl decoration-none relative overflow-hidden className='z-0 card hover:bg-zinc-50 transition' key={key} onClick={()=>{jumpBefore(item.url)}}>
+          <div p-4  cursor-pointer rounded-xl decoration-none relative overflow-hidden className='bg-white z-0 card hover:bg-zinc-50 transition' key={key} onClick={()=>{jumpBefore(item.url)}}>
             <div className='z-20'>
               <div flex='~ items-start justify-between'>
                 <div className='w-25 h-10 bg-contain bg-contain bg-left bg-no-repeat' text='center' style={{backgroundImage: `url(${item.logo})`}} />

diff --git a/src/pages/tools.tsx b/src/pages/tools.tsx
@@ -76,7 +76,7 @@ export default function Heytea() {
           }
         }} /> */}
 
-        <Tabs index={status} isFitted variant='unstyled' className='bg-zinc-100 p-1 rounded-xl' onChange={(v)=>{
+        <Tabs index={status} isFitted variant='unstyled' className='bg-zinc-50 p-1 rounded-xl' onChange={(v)=>{
           setStatus(parseInt(`${v}`))
           if (v === 0) {
             setHighLight(true)