From 908bd653b301948c6752cadd7204cc93b586fa9c Mon Sep 17 00:00:00 2001 From: xuan Date: Mon, 5 Sep 2022 16:32:20 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6):=20=E6=B7=BB=E5=8A=A0=20Tag=20=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/normalButton/index.module.scss | 37 +++++++++ src/components/normalButton/index.tsx | 43 +++++++++++ src/components/tag/index.module.scss | 33 ++++++++ src/components/tag/index.tsx | 43 +++++++++++ src/pages/user/index.module.scss | 72 ++++++++++++++++- src/pages/user/index.tsx | 73 ++++++++++++------ src/styles/common.scss | 45 ++++++----- src/styles/image/defaultAvatar.png | Bin 0 -> 5504 bytes 8 files changed, 301 insertions(+), 45 deletions(-) create mode 100644 src/components/normalButton/index.module.scss create mode 100644 src/components/normalButton/index.tsx create mode 100644 src/components/tag/index.module.scss create mode 100644 src/components/tag/index.tsx create mode 100644 src/styles/image/defaultAvatar.png diff --git a/src/components/normalButton/index.module.scss b/src/components/normalButton/index.module.scss new file mode 100644 index 0000000..f5beb07 --- /dev/null +++ b/src/components/normalButton/index.module.scss @@ -0,0 +1,37 @@ +.button { + display: flex; + padding: 0 40px; + height: 36PX; + border: 1px solid $color_main; + background-color: #fff; + text-align: center; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + &--normal { + height: 36PX; + font-size: $font_size_medium; + } + &--small { + height: 30PX; + font-size: $font_size_min; + } + &--disabled { + opacity: $opacity-disabled; + } + &--primary { + border: 1px solid $color_main; + color: $color_main; + } + &--danger { + border: 1px solid $color_danger; + color: $color_danger; + } + &--warning { + border: 1px solid $color_warning; + color: $color_warning; + } + &--circle { + border-radius: 50px; + } +} diff --git a/src/components/normalButton/index.tsx b/src/components/normalButton/index.tsx new file mode 100644 index 0000000..89a22a3 --- /dev/null +++ b/src/components/normalButton/index.tsx @@ -0,0 +1,43 @@ +import { View } from '@tarojs/components' +import { FC, ReactNode } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' + +type ButtonType = 'primary' | 'danger' | 'warning' +type ButtonSize = 'normal' | 'small' + +interface PropsType { + size?: ButtonSize + type?: ButtonType + circle?: boolean + disabled?: boolean + children?: ReactNode + onClick?: Function +} + +const NormalButton: FC = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => { + const getClassName = () => { + const classObject = { + [styles[`button--disabled`]]: disabled, + [styles[`button--${size}`]]: size, + [styles[`button--${type}`]]: type, + [styles['button--circle']]: circle, + } + console.log('classObj==>button', classObject) + return classObject + } + + const handleClick = (event) => { + if (disabled) { + return + } + onClick && onClick(event) + } + + return ( + + {children} + + ) +} +export default NormalButton diff --git a/src/components/tag/index.module.scss b/src/components/tag/index.module.scss new file mode 100644 index 0000000..d39f25b --- /dev/null +++ b/src/components/tag/index.module.scss @@ -0,0 +1,33 @@ +.tag { + display: inline-flex; + flex-flow: row nowrap; + padding: 0 20px; + height: 60px; + color: #fff; + text-align: center; + justify-content: center; + align-items: center; + &--normal { + font-size: $font_size_medium; + height: 40px; + } + &--small{ + font-size: $font_size_min; + height: 30px; + } + &--circle{ + border-radius: 8PX; + } + &--danger { + background-color: $color_danger; + } + &--primary{ + background-color: $color_main; + } + &--warning{ + background-color: $color_warning; + } + &--disabled { + opacity: $opacity-disabled; + } +} diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx new file mode 100644 index 0000000..3b9485b --- /dev/null +++ b/src/components/tag/index.tsx @@ -0,0 +1,43 @@ +import { View } from '@tarojs/components' +import { FC, ReactNode } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' + +type TagSize = 'small' | 'normal' +type TagType = 'primary' | 'danger' | 'warning' + +interface PropsType { + type?: TagType + disabled?: boolean + size?: TagSize + children?: ReactNode + onClick?: Function + circle?: boolean + customStyle?: React.CSSProperties +} + +const Tag: FC = ({ type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {} }) => { + const handleClick = (event) => { + if (disabled) { + return + } + onClick && onClick(event) + } + + const getClassName = () => { + const classObject = { + [styles['tag--disabled']]: disabled, + [styles[`tag--${size}`]]: size, + [styles[`tag--${type}`]]: type, + [styles['tag--circle']]: circle, + } + console.log('classObj==>', classObject) + return classObject + } + return ( + + {children} + + ) +} +export default Tag diff --git a/src/pages/user/index.module.scss b/src/pages/user/index.module.scss index c4c3e5e..24e5279 100644 --- a/src/pages/user/index.module.scss +++ b/src/pages/user/index.module.scss @@ -1,5 +1,75 @@ -.main{ +.main { width: 100%; min-height: 100vh; background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%); + padding: 12PX; + box-sizing: border-box; +} +.userAvatar { + position: relative; + width: 62PX; + height: 62PX; + border-radius: 50%; + background-color: #fff; + overflow: hidden; + &-text { + display: block; + width: 100%; + position: absolute; + left: 0; + bottom: 0; + height: 15PX; + color: #fff; + text-align: center; + line-height: 15PX; + font-size: 22px; + background-color: rgba($color: #000000, $alpha: 0.33); + } +} +.userInfo { + background-color: #fff; + border-radius: 20px; + padding: 32px; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + .topBar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + .left { + } + .middle { + margin: 0 40px; + flex: 1 1 auto; + } + .right { + } + } + .bottomBar { + display: flex; + flex-flow: row nowrap; + align-items: center; + border-radius: 10PX; + background-color: #f6f6f6; + margin-top: 20px; + padding: 15px; + } +} +.username { + display: block; + font-size: 36px; + font-weight: 600; +} +.userno { + display: block; + font-size: 28px; + color: $color_font_two; +} +.userTitle{ + color: #626262; + font-weight: 600; + font-size: $font_size_medium; + margin-left: 20px; } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 3efd58b..ab77c56 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -1,41 +1,64 @@ import { isEmptyObject } from '@/common/common' -import { Button, View } from '@tarojs/components' +import { Button, View, Image, Text } from '@tarojs/components' import { FC, memo, useMemo, useState } from 'react' import styles from './index.module.scss' -const SonComp: FC = memo(() => { - return 我改变了吗{new Date().getTime()} -}) +import defaultAvatar from '../../styles/image/defaultAvatar.png' +import NormalButton from '@/components/normalButton' +import Tag from '@/components/tag' +import Divider from '@/components/Divider' // 用户信息 const UserInfo: FC = () => { - return sdfasdf + const [userInfo, setUserInfo] = useState({ + avatarUrl: '', + username: '', + userno: '', + }) + + const handleLogout = () => {} + + return ( + + + + + + + 杨子杰 + 064 + + + + 退出登录 + + + + + + IT部门 + + + IT-开发总监 + + + ) +} +// 用户头像 +const UserAvatar = ({ src }) => { + return ( + + + {src ? null : 编辑} + + ) } // 我的 const User = () => { - const obj = {} - console.log(isEmptyObject(obj)) - const [count, setCount] = useState(0) - const handleCount = () => { - setCount((prev) => { - return prev + 1 - }) - } - - // const page = useMemo(() => Taro.getCurrentInstance().page, []) - // console.log('page', page) - // useDidShow(async () => { - // const tabbar = await Taro.getTabBar(page) - // console.log('tabbar==>', tabbar) - // tabbar?.setSelected(4) - // }) return ( <> - + - sdfasdfasdf {count} - - ) diff --git a/src/styles/common.scss b/src/styles/common.scss index 11655cf..5549c46 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -1,9 +1,15 @@ - -$color_bg_one: #F8F8F8; -$color_font_one: #3C3C3C; -$color_font_two: #ABABAB; +$color_bg_one: #f8f8f8; +$color_font_one: #3c3c3c; +$color_font_two: #ababab; $color_font_three: #707070; -$color_main: #4581FF; +$color_main: #4581ff; + +$color_danger: #e64340; +$color_warning: #e6a23c; + +$opacity-disabled: 0.3; +$borderStyle: solid; +$borderColor: #ebebeb; $font_size_big: 32px; $font_size: 28px; @@ -12,22 +18,23 @@ $font_size_min: 22px; //安全底部距离 .common_safe_area_y { - width: 100%; - height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ - height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ + width: 100%; + height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ + height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } //省略号 -@mixin common_ellipsis($params:1) { - overflow: hidden; - display: -webkit-box; - white-space:normal; - text-overflow:ellipsis; - word-break:break-all; - -webkit-box-orient: vertical; - -webkit-line-clamp: $params; - - +@mixin common_ellipsis($params: 1) { + overflow: hidden; + display: -webkit-box; + white-space: normal; + text-overflow: ellipsis; + word-break: break-all; + -webkit-box-orient: vertical; + -webkit-line-clamp: $params; } - +.full-100 { + width: 100%; + height: 100%; +} diff --git a/src/styles/image/defaultAvatar.png b/src/styles/image/defaultAvatar.png new file mode 100644 index 0000000000000000000000000000000000000000..d55d148d8655cc095c68de6da0c9c13a8fcf5c86 GIT binary patch literal 5504 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