chore(landing): wip (#209)

groupher · Jan 10, 2024 · 35b25e6 · 35b25e6
1 parent 2e0ee39
commit 35b25e6
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 25 deletions.
diff --git a/src/app/Landing/EnjoyDev/OurWay/NodeBlock.tsx b/src/app/Landing/EnjoyDev/OurWay/NodeBlock.tsx
@@ -37,7 +37,7 @@ const METRIC = {
   },
 
   [ARTICLE_CAT.FEATURE]: {
-    title: '功能需求',
+    title: '功能请求',
     upvoteText: '支持',
     upvoteNum: 13,
     delay: 4000,
@@ -72,7 +72,7 @@ const NodeBlock: FC<TProps> = ({ cat = 'DEFAULT', index = -1 }) => {
   const colors = getNodeBlockColors(cat)
 
   return (
-    <Wrapper $color={colors.border}>
+    <Wrapper $color={colors.bg}>
       {cat === 'DEFAULT' && index === 0 && (
         <LeftInfo $bottom="39px">
           <LeftDot $bg="#888888" />
@@ -81,9 +81,9 @@ const NodeBlock: FC<TProps> = ({ cat = 'DEFAULT', index = -1 }) => {
 
       <RightDot $bg={colors.main} $middle={cat === 'DEFAULT'} />
 
-      <Header $bg={colors.headerBg}>
-        <HeadIcon $color={colors.main} />
-        <Text $color={colors.main}>{metric.title}</Text>
+      <Header>
+        <HeadIcon $color={colors.bg} />
+        <Text $color={colors.bg}>{metric.title}</Text>
       </Header>
       <Content $bg={colors.contentBg}>
         <Bar $bg={colors.barBg} />
@@ -104,7 +104,7 @@ const NodeBlock: FC<TProps> = ({ cat = 'DEFAULT', index = -1 }) => {
               num={metric.upvoteNum}
               delay={metric.delay}
               dividerColor={colors.barBg}
-              mainColor={colors.main}
+              mainColor={colors.bg}
             />
           )}
           <SpaceGrow />

diff --git a/src/app/Landing/EnjoyDev/OurWay/UpdateCounter.tsx b/src/app/Landing/EnjoyDev/OurWay/UpdateCounter.tsx
@@ -3,7 +3,7 @@ import { FC, useState } from 'react'
 import useInterval from '@/hooks/useInterval'
 import AnimatedCount from '@/widgets/AnimatedCount'
 
-import { Wrapper, UpvoteIcon, Text } from '../../styles/enjoy_dev/our_way/upvote_counter'
+import { Wrapper, UpvoteIcon, Text, Counter } from '../../styles/enjoy_dev/our_way/upvote_counter'
 
 type TProps = {
   text?: string
@@ -28,7 +28,9 @@ const UpdateCounter: FC<TProps> = ({ text = '投票', num = 13, delay, dividerCo
     <Wrapper color={dividerColor}>
       <UpvoteIcon color={mainColor} />
       <Text color={mainColor}>{text}</Text>
-      <AnimatedCount count={count} forceColor={mainColor} left={5} top={-1} />
+      <Counter>
+        <AnimatedCount count={count} forceColor={mainColor} left={5} top={-1} />
+      </Counter>
     </Wrapper>
   )
 }

diff --git a/src/app/Landing/styles/enjoy_dev/metric.ts b/src/app/Landing/styles/enjoy_dev/metric.ts
@@ -1,5 +1,7 @@
 import type { TArticleCat } from '@/spec'
+
 import { ARTICLE_CAT } from '@/constant/gtd'
+import { COLOR_NAME } from '@/constant/colors'
 
 export const getNodeBlockColors = (cat: TArticleCat | 'DEFAULT' = ARTICLE_CAT.FEATURE) => {
   switch (cat) {
@@ -10,6 +12,7 @@ export const getNodeBlockColors = (cat: TArticleCat | 'DEFAULT' = ARTICLE_CAT.FE
         border: '#EFDDED',
         contentBg: '#FCF6FB',
         main: '#AF6BAC',
+        bg: COLOR_NAME.PURPLE,
       }
     }
     case ARTICLE_CAT.OTHER: {
@@ -19,6 +22,7 @@ export const getNodeBlockColors = (cat: TArticleCat | 'DEFAULT' = ARTICLE_CAT.FE
         border: '#dee0f2',
         contentBg: '#F7F8FF',
         main: '#506db3',
+        bg: COLOR_NAME.BLUE,
       }
     }
     case ARTICLE_CAT.BUG: {
@@ -27,7 +31,7 @@ export const getNodeBlockColors = (cat: TArticleCat | 'DEFAULT' = ARTICLE_CAT.FE
         barBg: '#ffe1e1',
         boarder: '#ffe1e1',
         contentBg: '#fef9f9',
-        main: '#d87967',
+        bg: COLOR_NAME.RED,
       }
     }
     case ARTICLE_CAT.QUESTION: {
@@ -37,6 +41,7 @@ export const getNodeBlockColors = (cat: TArticleCat | 'DEFAULT' = ARTICLE_CAT.FE
         border: '#faebd7',
         contentBg: '#FFFBF4',
         main: '#C48B00',
+        bg: COLOR_NAME.BROWN,
       }
     }
 
@@ -47,6 +52,7 @@ export const getNodeBlockColors = (cat: TArticleCat | 'DEFAULT' = ARTICLE_CAT.FE
         border: '#dddddd',
         contentBg: 'white',
         main: '#888888',
+        bg: COLOR_NAME.BLACK,
       }
     }
   }

diff --git a/src/app/Landing/styles/enjoy_dev/our_way/node_block.ts b/src/app/Landing/styles/enjoy_dev/our_way/node_block.ts
@@ -1,35 +1,70 @@
 import { ARTICLE_CAT } from '@/constant/gtd'
 
-import styled, { css, theme } from '@/css'
+import type { TColor } from '@/spec'
+import styled, { css, theme, rainbow, rainbowLight } from '@/css'
+import { COLOR_NAME } from '@/constant/colors'
 
 import LightSVG from '@/icons/Light'
 import BugSVG from '@/icons/Bug'
 import QuestionSVG from '@/icons/Question'
 import DiscussSVG from '@/icons/Discuss'
 import ToolSVG from '@/icons/Tool'
 
-type TWrapper = { $color: string; $longer?: boolean }
+type TWrapper = { $longer?: boolean } & TColor
 export const Wrapper = styled.div<TWrapper>`
   position: relative;
   ${css.column()};
   width: 150px;
   height: ${({ $longer }) => ($longer ? '165px' : '140px')};
   border: 1px solid;
-  border-color: ${({ $color }) => $color || theme('divider')};
-  border-radius: 10px;
+  border-color: ${theme('divider')};
+  border-radius: 20px;
   background-color: ${theme('htmlBg')};
-  box-shadow: 0 5px 25px rgb(35 35 35 / 10%);
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 10px 50px;
+  padding: 6px;
+  padding-top: 3px;
+  padding-bottom: 6px;
+  position: relative;
+  z-index: 1;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: ${({ $color }) => rainbowLight($color)};
+
+    z-index: 0;
+    border-radius: 16px;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid;
+    border-color: ${({ $color }) => rainbow($color)};
+    border-radius: 16px;
+    opacity: ${({ $color }) => ($color === COLOR_NAME.BLACK ? 0.06 : 0.12)};
+  }
+
 `
-export const Header = styled.div<{ $bg: string }>`
+export const Header = styled.div`
   ${css.row('align-center')};
-  background: ${({ $bg }) => $bg || theme('hoverBg')};
   padding: 2px 10px;
   height: 35px;
   border-radius: 10px;
+  opacity: 0.68;
+  filter: saturate(0.8);
+  z-index: 2;
 `
 export const Text = styled.div<{ $color: string }>`
   color: ${({ $color }) => $color || theme('article.title')};
-  font-weight: 500;
   font-size: 13px;
   margin-left: 4px;
 `
@@ -41,9 +76,11 @@ const DiscussIcon = styled(DiscussSVG)<{ $color: string }>`
   fill: ${({ $color }) => $color || theme('article.title')};
   ${css.size(12)};
   margin-left: 1px;
+  margin-top: 1px;
+  opacity: 0.8;
 `
 const BugIcon = styled(BugSVG)<{ $color: string }>`
-  ${css.size(10)};
+  ${css.size(12)};
   fill: ${({ $color }) => $color || theme('article.title')};
   margin-right: 2px;
 `
@@ -70,12 +107,13 @@ export const Icon = {
 export const Content = styled.div<{ $bg: string }>`
   ${css.column()};
   width: 100%;
-  height: 100%;
-  border-radius: 10px;
+  height: 90%;
+  border-radius: 15px;
   padding: 10px;
   padding-top: 20px;
   padding-bottom: 8px;
-  background: ${({ $bg }) => $bg || 'white'};
+  background: ${theme('alphaBg2')};
+  z-index: 3;
 `
 type TBar = { $short?: boolean; $bg: string }
 export const Bar = styled.div<TBar>`

diff --git a/src/app/Landing/styles/enjoy_dev/our_way/upvote_counter.ts b/src/app/Landing/styles/enjoy_dev/our_way/upvote_counter.ts
@@ -9,17 +9,20 @@ export const Wrapper = styled.div<{ color: string }>`
   border-color: ${({ color }) => color || theme('divider')};
   border-radius: 5px;
   margin-left: -1px;
+  filter: saturate(0.6);
 `
 export const UpvoteIcon = styled(UpvoteSVG)<{ color: string }>`
-  ${css.size(12)};
+  ${css.size(14)};
   fill: ${({ color }) => color || theme('article.digest')};
-  transform: scaleY(0.85);
-  opacity: 0.8;
+  opacity: 0.4;
   margin-top: -1px;
 `
-
 export const Text = styled.div<{ color: string }>`
   color: ${({ color }) => color || theme('article.title')};
   font-size: 13px;
   margin-left: 6px;
+  opacity: 0.6;
+`
+export const Counter = styled.div`
+  opacity: 0.6;
 `