✨ feat(登录页面): 已完成登陆页面UI
This commit is contained in:
xuan
parent
677ea68f27
commit
a07ca24140
@ -1,5 +1,5 @@
|
||||
{
|
||||
"symbol_url": "//at.alicdn.com/t/c/font_3619513_6bgg3mtc70o.js",
|
||||
"symbol_url": "//at.alicdn.com/t/c/font_3619513_i9fjrthdbsd.js",
|
||||
"save_dir": "./src/components/iconfont",
|
||||
"use_typescript": false,
|
||||
"platforms": ["weapp","h5"],
|
||||
|
||||
42183
package-lock.json
generated
Normal file
42183
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -8,6 +8,13 @@
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "登录页面",
|
||||
"pathName": "pages/login/index",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
"pathName": "pages/index/index",
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
|
||||
|
||||
export {LoginApi} from './login/index'
|
||||
|
||||
import { useRequest } from "@/use/useHttp"
|
||||
/**
|
||||
* 系列列表
|
||||
|
||||
1
src/api/login/index.ts
Normal file
1
src/api/login/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export {LoginApi} from './login'
|
||||
12
src/api/login/login.ts
Normal file
12
src/api/login/login.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { useRequest } from '@/use/useHttp'
|
||||
|
||||
/**
|
||||
* 登录
|
||||
* @returns
|
||||
*/
|
||||
export const LoginApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mp/login`,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
@ -11,6 +11,7 @@ export default defineAppConfig({
|
||||
'pages/orderDetails/index',
|
||||
'pages/addressManager/index',
|
||||
'pages/addAddress/index',
|
||||
'pages/login/index',
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
|
||||
.divider {
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
color: $color_font_one;
|
||||
// 垂直
|
||||
&-vertical {
|
||||
display: inline-block;
|
||||
@ -22,9 +24,9 @@
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
padding: 0 40px;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
color: currentColor;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,51 +7,39 @@
|
||||
*
|
||||
*/
|
||||
|
||||
import { View } from "@tarojs/components";
|
||||
import { FC, ReactNode } from "react";
|
||||
import styles from "./index.module.scss";
|
||||
import classnames from "classnames";
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
|
||||
type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'
|
||||
|
||||
interface DividerProps {
|
||||
direction?: "horizontal" | "vertical";
|
||||
borderStyle?: BorderStype;
|
||||
contentPosition?: "left" | "center" | "right";
|
||||
children?: ReactNode;
|
||||
direction?: 'horizontal' | 'vertical'
|
||||
borderStyle?: BorderStype
|
||||
contentPosition?: 'left' | 'center' | 'right'
|
||||
children?: ReactNode
|
||||
customClassName?: string
|
||||
}
|
||||
const Divider: FC<DividerProps> = props => {
|
||||
const {
|
||||
direction = "horizontal",
|
||||
borderStyle = "solid",
|
||||
contentPosition = "center"
|
||||
} = props;
|
||||
const Divider: FC<DividerProps> = (props) => {
|
||||
const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName='' } = props
|
||||
|
||||
const classname = classnames(
|
||||
styles["divider"],
|
||||
styles["divider-" + direction]
|
||||
);
|
||||
const contentClassname = classnames(
|
||||
styles["divider-text"],
|
||||
styles["is-" + contentPosition]
|
||||
);
|
||||
const classname = classnames(styles['divider'], styles['divider-' + direction], customClassName)
|
||||
const contentClassname = classnames(styles['divider-text'], styles['is-' + contentPosition])
|
||||
|
||||
const borderTopStyle: { borderTopStyle: BorderStype } = {
|
||||
borderTopStyle: borderStyle
|
||||
};
|
||||
borderTopStyle: borderStyle,
|
||||
}
|
||||
const borderLeftStyle: { borderLeftStyle: BorderStype } = {
|
||||
borderLeftStyle: borderStyle
|
||||
};
|
||||
borderLeftStyle: borderStyle,
|
||||
}
|
||||
|
||||
const dividerStyle =
|
||||
direction === "horizontal" ? borderTopStyle : borderLeftStyle;
|
||||
const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle
|
||||
|
||||
return (
|
||||
<View className={classname} style={dividerStyle}>
|
||||
{props.children && direction !== "vertical" && (
|
||||
<View className={contentClassname}>{props.children}</View>
|
||||
)}
|
||||
{props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
export default Divider
|
||||
|
||||
@ -1,32 +1,46 @@
|
||||
.checkbox_main {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.checkbox_item{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #707070;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c2c2c2;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
&--normal {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&--small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&--round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&--circle {
|
||||
border-radius: 10px;
|
||||
}
|
||||
// 选中
|
||||
&--selected {
|
||||
border-color: $color_main;
|
||||
}
|
||||
}
|
||||
.checkbox_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.no_checkbox_item {
|
||||
border: 0;
|
||||
background-color: #DDDDDD;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
.checkbox_item_select {
|
||||
background-color: $color_main;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
.miconfont{
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,22 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
|
||||
import styles from "./index.module.scss"
|
||||
import { View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import IconFont from '../iconfont'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type CheckboxSize = 'normal' | 'small'
|
||||
|
||||
type params = {
|
||||
onSelect?: () => void //选择触发
|
||||
onClose?: () => void //取消触发
|
||||
status?: boolean //是否选中
|
||||
disabled?: boolean //是否禁用
|
||||
circle?: boolean
|
||||
round?: boolean
|
||||
size?: CheckboxSize
|
||||
}
|
||||
export default forwardRef(({onSelect, onClose, status = false, disabled = false}: params, ref) => {
|
||||
export default forwardRef((props: params, ref) => {
|
||||
const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal' } = props
|
||||
const [selected, SetSelected] = useState(false)
|
||||
const onSelectEven = () => {
|
||||
if (disabled) return false
|
||||
@ -21,17 +28,36 @@ export default forwardRef(({onSelect, onClose, status = false, disabled = false}
|
||||
}
|
||||
SetSelected(res)
|
||||
}
|
||||
|
||||
const getMainClassName = () => {
|
||||
const classObject = {
|
||||
[styles['checkbox_main--selected']]: selected,
|
||||
[styles[`checkbox_main--${size}`]]: size,
|
||||
[styles['checkbox_main--round']]: round,
|
||||
[styles['checkbox_main--circle']]: circle,
|
||||
}
|
||||
return classObject
|
||||
}
|
||||
|
||||
const getClassName = () => {
|
||||
const classObject = {
|
||||
[styles.no_checkbox_item]: disabled,
|
||||
[styles.checkbox_item_select]: selected,
|
||||
}
|
||||
return classObject
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
onSelectEven
|
||||
onSelectEven,
|
||||
}))
|
||||
useEffect(() => {
|
||||
SetSelected(status)
|
||||
}, [status])
|
||||
return (
|
||||
<>
|
||||
<View className={styles.checkbox_main} onClick={() => onSelectEven()}>
|
||||
<View className={classnames(styles.checkbox_item, disabled&&styles.no_checkbox_item, selected&&styles.checkbox_item_select)}>
|
||||
{selected&&<View className={classnames('iconfont', 'icon-tick', styles.miconfont)}></View>}
|
||||
<View className={classnames(styles.checkbox_main, getMainClassName())} onClick={() => onSelectEven()}>
|
||||
<View className={classnames(styles.checkbox_item, getClassName())}>
|
||||
{selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $color_font_one;
|
||||
&-name{
|
||||
font-size: 26px;
|
||||
color: #333;
|
||||
color: currentColor;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@ import { FC, ReactNode } from "react"
|
||||
import IconFont from "../iconfont"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import classname from 'classnames'
|
||||
|
||||
type IconfontName = Parameters<typeof IconFont>['0']['name']
|
||||
|
||||
interface PropsType {
|
||||
@ -10,15 +12,17 @@ interface PropsType {
|
||||
title: string
|
||||
children?: ReactNode
|
||||
onClick?: Function
|
||||
customClass?: string
|
||||
iconSize?: number
|
||||
}
|
||||
const IconCard: FC<PropsType> = (props) => {
|
||||
const { iconName, title, onClick } = props
|
||||
const { iconName, title, onClick, customClass = '', iconSize=72 } = props
|
||||
const handleClick = (event) => {
|
||||
onClick && onClick(event)
|
||||
}
|
||||
return (
|
||||
<View className={styles.iconCard} onClick={handleClick}>
|
||||
<IconFont name={iconName} size={72}></IconFont>
|
||||
<View className={classname(styles.iconCard, customClass)} onClick={handleClick}>
|
||||
<IconFont name={iconName} size={iconSize}></IconFont>
|
||||
<View className={styles['iconCard-name']}>{title}</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
27
src/components/iconfont/h5/IconAJizhumima.js
Normal file
27
src/components/iconfont/h5/IconAJizhumima.js
Normal file
@ -0,0 +1,27 @@
|
||||
/* eslint-disable */
|
||||
|
||||
import React from 'react';
|
||||
import { getIconColor } from './helper';
|
||||
|
||||
const DEFAULT_STYLE = {
|
||||
display: 'block',
|
||||
};
|
||||
|
||||
const IconAJizhumima = ({ size, color, style: _style, ...rest }) => {
|
||||
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 1152 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
|
||||
<path
|
||||
d="M944.128 74.752a96 96 0 0 1 164.48 98.56l-4.736 7.936-512 768a96 96 0 0 1-140.8 20.992l-6.976-6.4-384-384a96 96 0 0 1 128.512-142.336l7.296 6.592 301.12 301.184 447.104-670.528z"
|
||||
fill={getIconColor(color, 0, '#FFFFFF')}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
IconAJizhumima.defaultProps = {
|
||||
size: 18,
|
||||
};
|
||||
|
||||
export default IconAJizhumima;
|
||||
31
src/components/iconfont/h5/IconJizhumima.js
Normal file
31
src/components/iconfont/h5/IconJizhumima.js
Normal file
@ -0,0 +1,31 @@
|
||||
/* eslint-disable */
|
||||
|
||||
import React from 'react';
|
||||
import { getIconColor } from './helper';
|
||||
|
||||
const DEFAULT_STYLE = {
|
||||
display: 'block',
|
||||
};
|
||||
|
||||
const IconJizhumima = ({ size, color, style: _style, ...rest }) => {
|
||||
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
|
||||
<path
|
||||
d="M36.571429 36.571429m146.285714 0l658.285714 0q146.285714 0 146.285714 146.285714l0 658.285714q0 146.285714-146.285714 146.285714l-658.285714 0q-146.285714 0-146.285714-146.285714l0-658.285714q0-146.285714 146.285714-146.285714Z"
|
||||
fill={getIconColor(color, 0, '#337FFF')}
|
||||
/>
|
||||
<path
|
||||
d="M722.358857 262.144a54.857143 54.857143 0 0 1 93.988572 56.32l-2.706286 4.534857-292.571429 438.857143a54.857143 54.857143 0 0 1-80.457143 11.995429l-3.986285-3.657143-219.428572-219.428572a54.857143 54.857143 0 0 1 73.435429-81.334857l4.169143 3.766857 172.068571 172.105143 255.488-383.158857z"
|
||||
fill={getIconColor(color, 1, '#FFFFFF')}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
IconJizhumima.defaultProps = {
|
||||
size: 18,
|
||||
};
|
||||
|
||||
export default IconJizhumima;
|
||||
32
src/components/iconfont/h5/IconKehuxinxi.js
Normal file
32
src/components/iconfont/h5/IconKehuxinxi.js
Normal file
@ -0,0 +1,32 @@
|
||||
/* eslint-disable */
|
||||
|
||||
import React from 'react';
|
||||
import { getIconColor } from './helper';
|
||||
|
||||
const DEFAULT_STYLE = {
|
||||
display: 'block',
|
||||
};
|
||||
|
||||
const IconKehuxinxi = ({ size, color, style: _style, ...rest }) => {
|
||||
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
|
||||
<path
|
||||
d="M611.008 136c105.744 0 191.472 86.496 191.472 193.2 0 84.128-53.296 155.696-127.68 182.208C828.192 539.68 944 667.856 944 821.76a70.24 70.24 0 0 1-70.24 70.256l-78.624 0.016a81.664 81.664 0 0 0 4.864-27.84c0-166.08-107.52-306.464-255.248-352.336l0.192-0.016-0.48-0.08a350.88 350.88 0 0 0-34.592-8.8l2.48 0.512-2.24-0.608c89.92-29.44 154.88-114.064 154.88-213.856 0-59.04-22.72-112.752-59.92-152.896 1.952-0.064 3.936-0.096 5.92-0.096z"
|
||||
fill={getIconColor(color, 0, '#4581FF')}
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
d="M440 64c124.272 0 225.008 100.736 225.008 225.008 0 99.872-65.088 184.544-155.136 213.92C675.248 536.224 800 685.28 800 864.192a81.824 81.824 0 0 1-81.824 81.824H161.824a81.824 81.824 0 0 1-81.76-78.352L80 864.16c0-178.88 124.752-327.984 290.128-361.248-90.048-29.376-155.12-114.048-155.12-213.92C215.008 164.736 315.728 64 440 64z m-0.096 442.416l-48.16 233.952c-1.072 5.184 0.208 10.592 3.488 14.752l30.528 38.8a18 18 0 0 0 28.288 0l30.544-38.8c3.264-4.16 4.544-9.568 3.472-14.752l-48.16-233.952z"
|
||||
fill={getIconColor(color, 1, '#4581FF')}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
IconKehuxinxi.defaultProps = {
|
||||
size: 18,
|
||||
};
|
||||
|
||||
export default IconKehuxinxi;
|
||||
32
src/components/iconfont/h5/IconWeixindenglu.js
Normal file
32
src/components/iconfont/h5/IconWeixindenglu.js
Normal file
@ -0,0 +1,32 @@
|
||||
/* eslint-disable */
|
||||
|
||||
import React from 'react';
|
||||
import { getIconColor } from './helper';
|
||||
|
||||
const DEFAULT_STYLE = {
|
||||
display: 'block',
|
||||
};
|
||||
|
||||
const IconWeixindenglu = ({ size, color, style: _style, ...rest }) => {
|
||||
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
|
||||
<path
|
||||
d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
|
||||
fill={getIconColor(color, 0, '#0BBD63')}
|
||||
opacity=".9"
|
||||
/>
|
||||
<path
|
||||
d="M622.677333 425.102222c7.210667 0 14.279111 0.540444 21.404445 1.336889C624.910222 336.782222 529.521778 270.222222 420.593778 270.222222 298.851556 270.222222 199.111111 353.536 199.111111 459.377778c0 61.084444 33.166222 111.246222 88.618667 150.215111l-22.129778 66.887111 77.44-38.968889c27.690667 5.461333 49.905778 11.121778 77.553778 11.121778 6.968889 0 13.852444-0.312889 20.650666-0.824889a167.409778 167.409778 0 0 1-6.840888-46.648889c0.042667-97.194667 83.114667-176.071111 188.273777-176.071111z m-119.04-60.302222c16.739556 0 27.733333 11.036444 27.733334 27.776 0 16.654222-11.008 27.804444-27.733334 27.804444-16.554667 0-33.208889-11.150222-33.208889-27.804444 0-16.782222 16.625778-27.776 33.208889-27.776z m-155.008 55.580444c-16.611556 0-33.351111-11.150222-33.351111-27.804444 0-16.739556 16.739556-27.776 33.351111-27.776 16.625778 0 27.662222 11.008 27.662223 27.776 0 16.654222-11.036444 27.804444-27.662223 27.804444zM824.888889 598.471111c0-88.917333-88.618667-161.393778-188.16-161.393778-105.415111 0-188.359111 72.504889-188.359111 161.393778 0 89.173333 82.986667 161.408 188.359111 161.408 22.044444 0 44.316444-5.546667 66.446222-11.121778L763.904 782.222222l-16.64-55.608889C791.708444 693.048889 824.888889 648.618667 824.888889 598.471111z m-249.258667-27.847111c-10.993778 0-22.129778-10.993778-22.129778-22.229333 0-11.079111 11.136-22.229333 22.129778-22.229334 16.824889 0 27.733333 11.150222 27.733334 22.229334 0 11.235556-10.908444 22.229333-27.733334 22.229333z m121.841778 0c-10.922667 0-22.030222-10.993778-22.030222-22.229333 0-11.079111 11.064889-22.229333 22.016-22.229334 16.668444 0 27.733333 11.150222 27.733333 22.229334 0 11.235556-11.064889 22.229333-27.733333 22.229333z"
|
||||
fill={getIconColor(color, 1, '#FFFFFF')}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
IconWeixindenglu.defaultProps = {
|
||||
size: 18,
|
||||
};
|
||||
|
||||
export default IconWeixindenglu;
|
||||
@ -1,6 +1,10 @@
|
||||
/* eslint-disable */
|
||||
|
||||
import React from 'react';
|
||||
import IconJizhumima from './IconJizhumima';
|
||||
import IconAJizhumima from './IconAJizhumima';
|
||||
import IconWeixindenglu from './IconWeixindenglu';
|
||||
import IconKehuxinxi from './IconKehuxinxi';
|
||||
import IconYewuyuanqizi from './IconYewuyuanqizi';
|
||||
import IconChakanquanbukehu from './IconChakanquanbukehu';
|
||||
import IconBiyan from './IconBiyan';
|
||||
@ -55,6 +59,10 @@ import IconGerenzhongxin from './IconGerenzhongxin';
|
||||
import IconDingdan from './IconDingdan';
|
||||
import IconShouye from './IconShouye';
|
||||
import IconGouwu from './IconGouwu';
|
||||
export { default as IconJizhumima } from './IconJizhumima';
|
||||
export { default as IconAJizhumima } from './IconAJizhumima';
|
||||
export { default as IconWeixindenglu } from './IconWeixindenglu';
|
||||
export { default as IconKehuxinxi } from './IconKehuxinxi';
|
||||
export { default as IconYewuyuanqizi } from './IconYewuyuanqizi';
|
||||
export { default as IconChakanquanbukehu } from './IconChakanquanbukehu';
|
||||
export { default as IconBiyan } from './IconBiyan';
|
||||
@ -112,6 +120,14 @@ export { default as IconGouwu } from './IconGouwu';
|
||||
|
||||
const IconFont = ({ name, ...rest }) => {
|
||||
switch (name) {
|
||||
case 'icon-jizhumima':
|
||||
return <IconJizhumima {...rest} />;
|
||||
case 'icon-a-jizhumima':
|
||||
return <IconAJizhumima {...rest} />;
|
||||
case 'icon-weixindenglu':
|
||||
return <IconWeixindenglu {...rest} />;
|
||||
case 'icon-kehuxinxi':
|
||||
return <IconKehuxinxi {...rest} />;
|
||||
case 'icon-yewuyuanqizi':
|
||||
return <IconYewuyuanqizi {...rest} />;
|
||||
case 'icon-chakanquanbukehu':
|
||||
|
||||
2
src/components/iconfont/index.d.ts
vendored
2
src/components/iconfont/index.d.ts
vendored
@ -2,7 +2,7 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
interface Props {
|
||||
name: 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
name: 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
size?: number;
|
||||
color?: string | string[];
|
||||
style?: React.CSSProperties;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
Component({
|
||||
properties: {
|
||||
// icon-yewuyuanqizi | icon-chakanquanbukehu | icon-biyan | icon-bianji | icon-daikuan | icon-cangku | icon-guanlidingdan | icon-mima | icon-guanbi | icon-jianshao | icon-dingwei | icon-saomiao | icon-peihuo | icon-shaixuan | icon-paiming | icon-shanchusousuoxinxi | icon-shijian | icon-sousuo | icon-shouhou | icon-sousuofanhui | icon-sousuoshanchu | icon-tuikuan | icon-tishi | icon-xianxiahuizong | icon-xinzeng | icon-yonghuming | icon-yanjing | icon-yufukuan | icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
|
||||
// icon-jizhumima | icon-a-jizhumima | icon-weixindenglu | icon-kehuxinxi | icon-yewuyuanqizi | icon-chakanquanbukehu | icon-biyan | icon-bianji | icon-daikuan | icon-cangku | icon-guanlidingdan | icon-mima | icon-guanbi | icon-jianshao | icon-dingwei | icon-saomiao | icon-peihuo | icon-shaixuan | icon-paiming | icon-shanchusousuoxinxi | icon-shijian | icon-sousuo | icon-shouhou | icon-sousuofanhui | icon-sousuoshanchu | icon-tuikuan | icon-tishi | icon-xianxiahuizong | icon-xinzeng | icon-yonghuming | icon-yanjing | icon-yufukuan | icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
|
||||
@ -1,3 +1,15 @@
|
||||
<!--icon-jizhumima-->
|
||||
<view wx:if="{{name === 'icon-jizhumima'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M36.571429 36.571429m146.285714 0l658.285714 0q146.285714 0 146.285714 146.285714l0 658.285714q0 146.285714-146.285714 146.285714l-658.285714 0q-146.285714 0-146.285714-146.285714l0-658.285714q0-146.285714 146.285714-146.285714Z' fill='{{(isStr ? colors : colors[0]) || 'rgb(51,127,255)'}}' /%3E%3Cpath d='M722.358857 262.144a54.857143 54.857143 0 0 1 93.988572 56.32l-2.706286 4.534857-292.571429 438.857143a54.857143 54.857143 0 0 1-80.457143 11.995429l-3.986285-3.657143-219.428572-219.428572a54.857143 54.857143 0 0 1 73.435429-81.334857l4.169143 3.766857 172.068571 172.105143 255.488-383.158857z' fill='{{(isStr ? colors : colors[1]) || 'rgb(255,255,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
|
||||
|
||||
<!--icon-a-jizhumima-->
|
||||
<view wx:if="{{name === 'icon-a-jizhumima'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1152 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M944.128 74.752a96 96 0 0 1 164.48 98.56l-4.736 7.936-512 768a96 96 0 0 1-140.8 20.992l-6.976-6.4-384-384a96 96 0 0 1 128.512-142.336l7.296 6.592 301.12 301.184 447.104-670.528z' fill='{{(isStr ? colors : colors[0]) || 'rgb(255,255,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
|
||||
|
||||
<!--icon-weixindenglu-->
|
||||
<view wx:if="{{name === 'icon-weixindenglu'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='{{(isStr ? colors : colors[0]) || 'rgb(11,189,99)'}}' opacity='.9' /%3E%3Cpath d='M622.677333 425.102222c7.210667 0 14.279111 0.540444 21.404445 1.336889C624.910222 336.782222 529.521778 270.222222 420.593778 270.222222 298.851556 270.222222 199.111111 353.536 199.111111 459.377778c0 61.084444 33.166222 111.246222 88.618667 150.215111l-22.129778 66.887111 77.44-38.968889c27.690667 5.461333 49.905778 11.121778 77.553778 11.121778 6.968889 0 13.852444-0.312889 20.650666-0.824889a167.409778 167.409778 0 0 1-6.840888-46.648889c0.042667-97.194667 83.114667-176.071111 188.273777-176.071111z m-119.04-60.302222c16.739556 0 27.733333 11.036444 27.733334 27.776 0 16.654222-11.008 27.804444-27.733334 27.804444-16.554667 0-33.208889-11.150222-33.208889-27.804444 0-16.782222 16.625778-27.776 33.208889-27.776z m-155.008 55.580444c-16.611556 0-33.351111-11.150222-33.351111-27.804444 0-16.739556 16.739556-27.776 33.351111-27.776 16.625778 0 27.662222 11.008 27.662223 27.776 0 16.654222-11.036444 27.804444-27.662223 27.804444zM824.888889 598.471111c0-88.917333-88.618667-161.393778-188.16-161.393778-105.415111 0-188.359111 72.504889-188.359111 161.393778 0 89.173333 82.986667 161.408 188.359111 161.408 22.044444 0 44.316444-5.546667 66.446222-11.121778L763.904 782.222222l-16.64-55.608889C791.708444 693.048889 824.888889 648.618667 824.888889 598.471111z m-249.258667-27.847111c-10.993778 0-22.129778-10.993778-22.129778-22.229333 0-11.079111 11.136-22.229333 22.129778-22.229334 16.824889 0 27.733333 11.150222 27.733334 22.229334 0 11.235556-10.908444 22.229333-27.733334 22.229333z m121.841778 0c-10.922667 0-22.030222-10.993778-22.030222-22.229333 0-11.079111 11.064889-22.229333 22.016-22.229334 16.668444 0 27.733333 11.150222 27.733333 22.229334 0 11.235556-11.064889 22.229333-27.733333 22.229333z' fill='{{(isStr ? colors : colors[1]) || 'rgb(255,255,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
|
||||
|
||||
<!--icon-kehuxinxi-->
|
||||
<view wx:if="{{name === 'icon-kehuxinxi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M611.008 136c105.744 0 191.472 86.496 191.472 193.2 0 84.128-53.296 155.696-127.68 182.208C828.192 539.68 944 667.856 944 821.76a70.24 70.24 0 0 1-70.24 70.256l-78.624 0.016a81.664 81.664 0 0 0 4.864-27.84c0-166.08-107.52-306.464-255.248-352.336l0.192-0.016-0.48-0.08a350.88 350.88 0 0 0-34.592-8.8l2.48 0.512-2.24-0.608c89.92-29.44 154.88-114.064 154.88-213.856 0-59.04-22.72-112.752-59.92-152.896 1.952-0.064 3.936-0.096 5.92-0.096z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.5' /%3E%3Cpath d='M440 64c124.272 0 225.008 100.736 225.008 225.008 0 99.872-65.088 184.544-155.136 213.92C675.248 536.224 800 685.28 800 864.192a81.824 81.824 0 0 1-81.824 81.824H161.824a81.824 81.824 0 0 1-81.76-78.352L80 864.16c0-178.88 124.752-327.984 290.128-361.248-90.048-29.376-155.12-114.048-155.12-213.92C215.008 164.736 315.728 64 440 64z m-0.096 442.416l-48.16 233.952c-1.072 5.184 0.208 10.592 3.488 14.752l30.528 38.8a18 18 0 0 0 28.288 0l30.544-38.8c3.264-4.16 4.544-9.568 3.472-14.752l-48.16-233.952z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
|
||||
|
||||
<!--icon-yewuyuanqizi-->
|
||||
<view wx:if="{{name === 'icon-yewuyuanqizi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M597.333333 256h213.333334v384h-298.666667l-42.666667-85.333333H298.666667v298.666666H213.333333V170.666667h341.333334l42.666666 85.333333z' fill='{{(isStr ? colors : colors[0]) || 'rgb(246,249,252)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
|
||||
|
||||
|
||||
@ -1,37 +1,69 @@
|
||||
.button {
|
||||
$current_color: #fff;
|
||||
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;
|
||||
padding: 0 80px;
|
||||
height: 72px;
|
||||
border: 1px solid $color_main;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
&--normal {
|
||||
height: 36PX;
|
||||
height: 72px;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
&--small {
|
||||
height: 30PX;
|
||||
height: 60px;
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
&--disabled {
|
||||
opacity: $opacity-disabled;
|
||||
}
|
||||
// 按钮类型
|
||||
&--primary {
|
||||
border: 1px solid $color_main;
|
||||
color: $color_main;
|
||||
$current_color: $color_main;
|
||||
}
|
||||
&--danger {
|
||||
border: 1px solid $color_danger;
|
||||
color: $color_danger;
|
||||
$current_color: $color_danger;
|
||||
}
|
||||
&--warning {
|
||||
border: 1px solid $color_warning;
|
||||
color: $color_warning;
|
||||
$current_color: $color_warning;
|
||||
}
|
||||
&--circle {
|
||||
&--round {
|
||||
border-radius: 50px;
|
||||
}
|
||||
&--circle {
|
||||
border-radius: 16px;
|
||||
}
|
||||
&--plain {
|
||||
background-color: currentColor;
|
||||
border-color: currentColor;
|
||||
.button--text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&--text {
|
||||
color: currentColor;
|
||||
}
|
||||
// active 伪类
|
||||
&--primary:active {
|
||||
background-color: rgba($color: $color_main, $alpha: 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
&--danger:active {
|
||||
background-color: rgba($color: $color_danger, $alpha: 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
&--warning:active {
|
||||
background-color: rgba($color: $color_warning, $alpha: 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
@ -9,18 +9,36 @@ type ButtonSize = 'normal' | 'small'
|
||||
interface PropsType {
|
||||
size?: ButtonSize
|
||||
type?: ButtonType
|
||||
circle?: boolean
|
||||
round?: boolean
|
||||
disabled?: boolean
|
||||
plain?: boolean
|
||||
circle?: boolean
|
||||
children?: ReactNode
|
||||
onClick?: Function
|
||||
customClassName?: string
|
||||
customStyles?: React.CSSProperties
|
||||
}
|
||||
|
||||
const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => {
|
||||
const NormalButton: FC<PropsType> = (props) => {
|
||||
const {
|
||||
type = 'primary',
|
||||
size = 'normal',
|
||||
round = false,
|
||||
disabled = false,
|
||||
children,
|
||||
onClick,
|
||||
plain = false,
|
||||
circle = false,
|
||||
customStyles = {},
|
||||
customClassName = '',
|
||||
} = props
|
||||
const getClassName = () => {
|
||||
const classObject = {
|
||||
[styles[`button--disabled`]]: disabled,
|
||||
[styles[`button--${size}`]]: size,
|
||||
[styles[`button--${type}`]]: type,
|
||||
[styles['button--round']]: round,
|
||||
[styles['button--plain']]: plain,
|
||||
[styles['button--circle']]: circle,
|
||||
}
|
||||
console.log('classObj==>button', classObject)
|
||||
@ -35,8 +53,8 @@ const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={classnames(styles['button'], getClassName())} onClick={handleClick}>
|
||||
{children}
|
||||
<View className={classnames(styles['button'], getClassName(), customStyles, customClassName)} onClick={handleClick}>
|
||||
<Text className={styles['button--text']}>{children}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,16 +1,93 @@
|
||||
page {
|
||||
height: 100vh;
|
||||
}
|
||||
.login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
&-panel {
|
||||
padding: 0 48px;
|
||||
}
|
||||
&-title {
|
||||
margin-left: 11px;
|
||||
Text {
|
||||
display: block;
|
||||
&:first-child {
|
||||
font-size: 70px;
|
||||
font-weight: 500;
|
||||
color: $color_font_one;
|
||||
}
|
||||
&:last-child {
|
||||
font-size: 40px;
|
||||
color: #727272;
|
||||
font-weight: 500;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-bar {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
border: 1px solid #c2c2c2;
|
||||
border-radius: 12px;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
font-size: 40px;
|
||||
@mixin inputBaseStyle {
|
||||
display: block;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 20px;
|
||||
font-size: 32px;
|
||||
padding-right: 0;
|
||||
}
|
||||
&--account {
|
||||
@include inputBaseStyle;
|
||||
}
|
||||
&--password {
|
||||
@include inputBaseStyle;
|
||||
}
|
||||
}
|
||||
&-options {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
&-option {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
font-size: 26px;
|
||||
color: #909090;
|
||||
}
|
||||
&-button {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
.isRememberPwd {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.isForgetPwd {
|
||||
margin: 0 20px;
|
||||
}
|
||||
.quick-login {
|
||||
margin-top: 85px;
|
||||
&--options {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&--divider{
|
||||
font-size: 25px;
|
||||
color: #acacac;
|
||||
}
|
||||
&--iconCard{
|
||||
color: #acacac;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,53 @@
|
||||
import Divider from '@/components/divider'
|
||||
import IconFont from '@/components/iconfont'
|
||||
import { View, Image, Text, Input } from '@tarojs/components'
|
||||
import { FC, useState } from "react"
|
||||
import { View, Image, Text, Input, CommonEventFunction } from '@tarojs/components'
|
||||
import { FC, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import MCheckbox from '@/components/checkbox'
|
||||
import NormalButton from '@/components/normalButton'
|
||||
import IconCard from '@/components/iconCard'
|
||||
import {memo} from 'react'
|
||||
import { LoginApi } from '@/api'
|
||||
|
||||
const Login: FC = () => {
|
||||
|
||||
const [isRemember, setRemember] = useState(false)
|
||||
|
||||
const [eyesStatus, setEyesStatus] = useState(false)
|
||||
|
||||
const handlePwdVisible = () => {
|
||||
setEyesStatus((value) => !value)
|
||||
}
|
||||
|
||||
const selectCallBack = () => {
|
||||
console.log('selectCallBack')
|
||||
setRemember(true)
|
||||
}
|
||||
const closeCallBack = () => {
|
||||
setRemember(false)
|
||||
console.log('closeCallBack')
|
||||
}
|
||||
|
||||
const [account, setAccount] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
|
||||
const handleInputAccount = (event: any) => {
|
||||
|
||||
}
|
||||
const handleInputPassword = () => {
|
||||
|
||||
}
|
||||
|
||||
const { fetchData , state} = LoginApi()
|
||||
const handleLogin = async () => {
|
||||
await fetchData({
|
||||
account,
|
||||
password,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.login}>
|
||||
<Image className='full-100' src='https://imgse.com/i/vqiVZF'></Image>
|
||||
<Image className='full-100' mode='widthFix' src='https://s1.ax1x.com/2022/09/08/vqiVZF.png'></Image>
|
||||
<View className={styles['login-panel']}>
|
||||
<View className={styles['login-title']}>
|
||||
<Text>您好，</Text>
|
||||
@ -23,27 +56,49 @@ const Login:FC = () => {
|
||||
<View className={styles['input-bar']}>
|
||||
<IconFont name='icon-yonghuming' size={48} color='#999999'></IconFont>
|
||||
<Divider direction='vertical'></Divider>
|
||||
<Input className='input-bar--account' placeholder='请输入用户名'></Input>
|
||||
<Input onInput={handleInputAccount} className={styles['input-bar--account']} placeholder='请输入用户名'></Input>
|
||||
</View>
|
||||
<View className={styles['input-bar']}>
|
||||
<IconFont name='icon-mima' size={48} color='#999999'></IconFont>
|
||||
<Divider direction='vertical'></Divider>
|
||||
<Input className='input-bar--password' placeholder='请输入密码'></Input>
|
||||
<Input onInput={handleInputPassword} className={styles['input-bar--password']} type='safe-password' placeholder='请输入密码'></Input>
|
||||
<View onClick={handlePwdVisible}>
|
||||
{eyesStatus ? (
|
||||
<IconFont name='icon-yanjing' size={48} color='#999999'></IconFont>
|
||||
) : (
|
||||
<IconFont name='icon-biyan' size={48} color='#999999'></IconFont>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles['login-options']}>
|
||||
<View className={styles['login-option']}>
|
||||
{/* <MCheckbox status={isRemember} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}></MCheckbox> */}
|
||||
<Text>记住密码</Text>
|
||||
<MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}></MCheckbox>
|
||||
<Text className={styles.isRememberPwd}>记住密码</Text>
|
||||
</View>
|
||||
<View className={styles['login-option']}>
|
||||
<Text>忘记密码？</Text>
|
||||
<Text className={styles.isForgetPwd}>忘记密码？</Text>
|
||||
</View>
|
||||
</View>
|
||||
<NormalButton >登录</NormalButton>
|
||||
<NormalButton circle plain onClick={handleLogin} customClassName={styles['login-button']}>
|
||||
登录
|
||||
</NormalButton>
|
||||
<QuickLogin />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const QuickLogin: FC = memo(() => {
|
||||
return (
|
||||
<View className={styles['quick-login']}>
|
||||
<Divider direction='horizontal' customClassName={styles['quick-login--divider']}>
|
||||
或通过以下方式登录
|
||||
</Divider>
|
||||
<View className={styles['quick-login--options']}>
|
||||
<IconCard iconName='icon-weixindenglu' title='微信登录' customClass={styles['quick-login--iconCard']}></IconCard>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
export default Login
|
||||
|
||||
@ -86,7 +86,7 @@ page{
|
||||
.layoutTitle {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: $color_font_one;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ const UserInfo: FC = () => {
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shoukuanliebiao',
|
||||
iconName: 'icon-kehuxinxi',
|
||||
name: '客户列表',
|
||||
path: '',
|
||||
},
|
||||
@ -124,7 +124,7 @@ const UserInfo: FC = () => {
|
||||
<Text className={styles.userno}>064</Text>
|
||||
</View>
|
||||
<View className={styles.right}>
|
||||
<NormalButton type='primary' circle size='normal' onClick={handleLogout}>
|
||||
<NormalButton type='primary' round size='normal' onClick={handleLogout}>
|
||||
退出登录
|
||||
</NormalButton>
|
||||
</View>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user