From 6197754310ba1deae0d5651e9c5190cea726b8df Mon Sep 17 00:00:00 2001 From: xuan Date: Wed, 7 Sep 2022 19:15:01 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E6=88=91=E7=9A=84):=20?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=88=91=E7=9A=84=E9=A1=B5=E9=9D=A2UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/iconCard/index.module.scss | 5 +++ src/components/iconCard/index.tsx | 2 +- src/components/layoutBlock/index.tsx | 7 +++- src/components/tag/index.module.scss | 2 +- src/pages/user/index.module.scss | 39 ++++++++++++++++---- src/pages/user/index.tsx | 45 +++++++++++++++++++++-- src/styles/common.scss | 1 + 7 files changed, 86 insertions(+), 15 deletions(-) diff --git a/src/components/iconCard/index.module.scss b/src/components/iconCard/index.module.scss index 7641bf9..751e275 100644 --- a/src/components/iconCard/index.module.scss +++ b/src/components/iconCard/index.module.scss @@ -3,4 +3,9 @@ flex-flow: column nowrap; justify-content: center; align-items: center; + &-name{ + font-size: 28px; + color: #333; + margin-top: 16px; + } } diff --git a/src/components/iconCard/index.tsx b/src/components/iconCard/index.tsx index 1ae1ef1..14a8fee 100644 --- a/src/components/iconCard/index.tsx +++ b/src/components/iconCard/index.tsx @@ -19,7 +19,7 @@ const IconCard: FC = (props) => { return ( - {title} + {title} ) } diff --git a/src/components/layoutBlock/index.tsx b/src/components/layoutBlock/index.tsx index 49c7f87..057c0fe 100644 --- a/src/components/layoutBlock/index.tsx +++ b/src/components/layoutBlock/index.tsx @@ -11,6 +11,7 @@ interface PropsType { circle?: boolean children?: ReactNode customStyle?: React.CSSProperties + } const LayoutBlock: FC = (props) => { @@ -24,6 +25,10 @@ const LayoutBlock: FC = (props) => { return classObject } - return {children} + return + + {children} + + } export default LayoutBlock diff --git a/src/components/tag/index.module.scss b/src/components/tag/index.module.scss index d39f25b..b4ac861 100644 --- a/src/components/tag/index.module.scss +++ b/src/components/tag/index.module.scss @@ -16,7 +16,7 @@ height: 30px; } &--circle{ - border-radius: 8PX; + border-radius: 10px; } &--danger { background-color: $color_danger; diff --git a/src/pages/user/index.module.scss b/src/pages/user/index.module.scss index 7ab6540..737373a 100644 --- a/src/pages/user/index.module.scss +++ b/src/pages/user/index.module.scss @@ -1,14 +1,12 @@ .main { - width: 100%; - min-height: 100vh; background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%); padding: 24px; box-sizing: border-box; } .userAvatar { position: relative; - width: 124px; - height: 124px; + width: 122px; + height: 122px; border-radius: 50%; background-color: #fff; overflow: hidden; @@ -18,13 +16,14 @@ position: absolute; left: 0; bottom: 0; - height: 30px; + height: 31px; color: #fff; text-align: center; - line-height: 30px; - font-size: 22px; + line-height: 31px; + font-size: 20px; background-color: rgba($color: #000000, $alpha: 0.33); } + } .topBar { display: flex; @@ -44,7 +43,7 @@ display: flex; flex-flow: row nowrap; align-items: center; - border-radius: 10px; + border-radius: 16px; background-color: #f6f6f6; margin-top: 20px; padding: 15px; @@ -65,3 +64,27 @@ font-size: $font_size_medium; margin-left: 20px; } +.grid-container{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-column-gap: 32px; + grid-row-gap: 32px; +} +.layoutTabBar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} +.layoutTitle { + font-size: 32px; + font-weight: 600; + color: #333; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin-bottom: 20px; + +} +.layoutDescription { + font-size: 24px; + color: $color_main; +} diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 23a37a9..832611e 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -8,6 +8,14 @@ import Tag from '@/components/tag' import Divider from '@/components/Divider' import LayoutBlock from '@/components/layoutBlock' import IconCard from '@/components/iconCard' +import IconFont from '@/components/iconfont' + +type IconfontName = Parameters['0']['name'] +type IconCardType = { + iconName: IconfontName, + name: string, + path: string +} // 用户信息 const UserInfo: FC = () => { @@ -16,8 +24,9 @@ const UserInfo: FC = () => { username: '', userno: '', }) + - const feature = [ + const feature: IconCardType[] = [ { iconName: 'icon-lingquseka', name: '领取色卡', @@ -55,7 +64,7 @@ const UserInfo: FC = () => { }, ] - const fabric = [ + const fabric: IconCardType[] = [ { iconName: 'icon-yansequyang', name: '颜色取样', @@ -73,7 +82,7 @@ const UserInfo: FC = () => { }, ] - const statisticAnalysis = [ + const statisticAnalysis: IconCardType[] = [ { iconName: 'icon-xiaoshou', name: '销售', @@ -124,7 +133,35 @@ const UserInfo: FC = () => { - {/* */} + 功能特色 + + {feature.map((item) => { + return + })} + + + + 布料取色 + + {fabric.map((item) => { + return + })} + + + + 统计分析 + + {statisticAnalysis.map((item) => { + return + })} + + + + + 客户列表 + 查看全部客户 ▶ + + asdfasdfasdfas ) diff --git a/src/styles/common.scss b/src/styles/common.scss index 50eed22..9f2f08b 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -41,3 +41,4 @@ $customTabBarHeight: 100px; width: 100%; height: 100%; } +