From 35b25e65a1745eb1389cb4bc40fef987db21eb8e Mon Sep 17 00:00:00 2001 From: xieyimian Date: Wed, 10 Jan 2024 18:47:40 +0800 Subject: [PATCH] chore(landing): wip (#209) --- src/app/Landing/EnjoyDev/OurWay/NodeBlock.tsx | 12 ++-- .../Landing/EnjoyDev/OurWay/UpdateCounter.tsx | 6 +- src/app/Landing/styles/enjoy_dev/metric.ts | 8 ++- .../styles/enjoy_dev/our_way/node_block.ts | 62 +++++++++++++++---- .../enjoy_dev/our_way/upvote_counter.ts | 11 ++-- 5 files changed, 74 insertions(+), 25 deletions(-) diff --git a/src/app/Landing/EnjoyDev/OurWay/NodeBlock.tsx b/src/app/Landing/EnjoyDev/OurWay/NodeBlock.tsx index d5fc4bad7..89f8b7055 100644 --- 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 = ({ cat = 'DEFAULT', index = -1 }) => { const colors = getNodeBlockColors(cat) return ( - + {cat === 'DEFAULT' && index === 0 && ( @@ -81,9 +81,9 @@ const NodeBlock: FC = ({ cat = 'DEFAULT', index = -1 }) => { -
- - {metric.title} +
+ + {metric.title}
@@ -104,7 +104,7 @@ const NodeBlock: FC = ({ cat = 'DEFAULT', index = -1 }) => { num={metric.upvoteNum} delay={metric.delay} dividerColor={colors.barBg} - mainColor={colors.main} + mainColor={colors.bg} /> )} diff --git a/src/app/Landing/EnjoyDev/OurWay/UpdateCounter.tsx b/src/app/Landing/EnjoyDev/OurWay/UpdateCounter.tsx index dec602da0..6a4366a83 100644 --- 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 = ({ text = '投票', num = 13, delay, dividerCo {text} - + + + ) } diff --git a/src/app/Landing/styles/enjoy_dev/metric.ts b/src/app/Landing/styles/enjoy_dev/metric.ts index 1415c3d50..2dbda3962 100644 --- 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 index 88a3432bb..a7c22f35b 100644 --- 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,6 +1,8 @@ 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' @@ -8,28 +10,61 @@ 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` 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` 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 index 1b03a17e4..b6de10ff3 100644 --- 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; `