Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-platform
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
shenshaokai
jinfa-platform
Commits
33f91404
Commit
33f91404
authored
Apr 21, 2022
by
GuanHua
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style: 能力中心登录页面样式优化
parent
0a739d6c
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
116 additions
and
61 deletions
+116
-61
QR_Code.png
src/assets/imgs/QR_Code.png
+0
-0
UserLayouts.less
src/layouts/styles/UserLayouts.less
+7
-3
common.ts
src/locales/en-US/common.ts
+1
-1
common.ts
src/locales/zh-CN/common.ts
+1
-1
LoginWrap.tsx
src/pages/user/components/LoginWrap.tsx
+3
-2
index.less
src/pages/user/components/index.less
+42
-28
index.less
src/pages/user/index.less
+38
-10
index.tsx
src/pages/user/index.tsx
+24
-16
No files found.
src/assets/imgs/QR_Code.png
0 → 100644
View file @
33f91404
2.58 KB
src/layouts/styles/UserLayouts.less
View file @
33f91404
...
@@ -3,13 +3,18 @@
...
@@ -3,13 +3,18 @@
// global
// global
.@{prefix}-user-layout {
.@{prefix}-user-layout {
width: 100%;
width: 100%;
height: 100%;
position: relative;
position: relative;
display: flex;
flex-direction: column;
}
}
.@{prefix}-user-bg {
.@{prefix}-user-bg {
width: 100%;
width: 100%;
min-height: calc(100vh - 64px)
;
flex: 1
;
background: #F7F8FA;
background: #F7F8FA;
display: flex;
flex-direction: column;
}
}
.@{prefix}-logo-wrap {
.@{prefix}-logo-wrap {
...
@@ -56,4 +61,4 @@
...
@@ -56,4 +61,4 @@
bottom: 48px;
bottom: 48px;
left: 0;
left: 0;
}
}
}
}
\ No newline at end of file
src/locales/en-US/common.ts
View file @
33f91404
...
@@ -112,7 +112,7 @@
...
@@ -112,7 +112,7 @@
'common.zhengzaiqiehuanjuese'
:
'Switching roles...'
,
'common.zhengzaiqiehuanjuese'
:
'Switching roles...'
,
'common.zhaohuimima'
:
'Retrieve password'
,
'common.zhaohuimima'
:
'Retrieve password'
,
'common.huanyingzhuce'
:
'Welcome to register'
,
'common.huanyingzhuce'
:
'Welcome to register'
,
'common.huanyingdenglu'
:
'
Welcome to l
ogin'
,
'common.huanyingdenglu'
:
'
L
ogin'
,
'common.bitian'
:
'This field is required'
,
'common.bitian'
:
'This field is required'
,
'common.ruku'
:
'Warehousing'
,
'common.ruku'
:
'Warehousing'
,
'common.caigourukudan'
:
'Purchase receipt'
,
'common.caigourukudan'
:
'Purchase receipt'
,
...
...
src/locales/zh-CN/common.ts
View file @
33f91404
...
@@ -113,7 +113,7 @@ export default {
...
@@ -113,7 +113,7 @@ export default {
'common.zhengzaiqiehuanjuese'
:
'正在切换角色...'
,
'common.zhengzaiqiehuanjuese'
:
'正在切换角色...'
,
'common.zhaohuimima'
:
'找回密码'
,
'common.zhaohuimima'
:
'找回密码'
,
'common.huanyingzhuce'
:
'欢迎注册'
,
'common.huanyingzhuce'
:
'欢迎注册'
,
'common.huanyingdenglu'
:
'
欢迎
登录'
,
'common.huanyingdenglu'
:
'登录'
,
'common.bitian'
:
'该字段是必填字段'
,
'common.bitian'
:
'该字段是必填字段'
,
'common.ruku'
:
'入库'
,
'common.ruku'
:
'入库'
,
'common.caigourukudan'
:
'采购入库单'
,
'common.caigourukudan'
:
'采购入库单'
,
...
...
src/pages/user/components/LoginWrap.tsx
View file @
33f91404
...
@@ -12,6 +12,7 @@ import { encryptedByAES, Base64 } from '@/utils/cryptoAes';
...
@@ -12,6 +12,7 @@ import { encryptedByAES, Base64 } from '@/utils/cryptoAes';
import
{
setUserCookie
}
from
'@/utils/siteCookie'
;
import
{
setUserCookie
}
from
'@/utils/siteCookie'
;
import
{
omit
}
from
'@/utils'
;
import
{
omit
}
from
'@/utils'
;
import
defaultHomePath
from
'@/utils/defaultHomePath'
;
import
defaultHomePath
from
'@/utils/defaultHomePath'
;
import
styles
from
'./index.less'
const
intl
=
getIntl
();
const
intl
=
getIntl
();
const
LoginWrap
:
React
.
FC
=
()
=>
{
const
LoginWrap
:
React
.
FC
=
()
=>
{
...
@@ -80,7 +81,7 @@ const LoginWrap: React.FC = () => {
...
@@ -80,7 +81,7 @@ const LoginWrap: React.FC = () => {
]
]
}
}
>
>
<
Input
prefix=
{
<
UserOutlined
/>
}
placeholder=
{
intl
.
formatMessage
({
id
:
'user.yonghumingshoujihao'
})
}
size=
'large'
/>
<
Input
className=
{
styles
.
loginInput
}
prefix=
{
<
UserOutlined
/>
}
placeholder=
{
intl
.
formatMessage
({
id
:
'user.yonghumingshoujihao'
})
}
size=
'large'
/>
</
Form
.
Item
>
</
Form
.
Item
>
<
Form
.
Item
<
Form
.
Item
name=
'password'
name=
'password'
...
@@ -93,7 +94,7 @@ const LoginWrap: React.FC = () => {
...
@@ -93,7 +94,7 @@ const LoginWrap: React.FC = () => {
]
]
}
}
>
>
<
Input
.
Password
prefix=
{
<
LockOutlined
/>
}
placeholder=
{
intl
.
formatMessage
({
id
:
'user.qingshurumima'
})
}
size=
'large'
/>
<
Input
.
Password
className=
{
styles
.
loginInput
}
prefix=
{
<
LockOutlined
/>
}
placeholder=
{
intl
.
formatMessage
({
id
:
'user.qingshurumima'
})
}
size=
'large'
/>
</
Form
.
Item
>
</
Form
.
Item
>
{
validButton
&&
(<
Form
.
Item
{
validButton
&&
(<
Form
.
Item
className=
{
'loginVerBtn'
}
className=
{
'loginVerBtn'
}
...
...
src/pages/user/components/index.less
View file @
33f91404
.passwordInputTip {
.passwordInputTip {
color: #909399;
color: #909399;
padding: 8px 6px;
padding: 8px 6px;
// width: 320px;
// width: 320px;
.tipItem {
.tipItem {
margin-bottom: 4px;
margin-bottom: 4px;
span {
span {
font-size: 14px;
font-size: 14px;
}
}
.tiptext {
.tiptext {
padding-left: 8px;
padding-left: 8px;
font-size: 12px;
font-size: 12px;
}
}
}
}
}
}
.customInput {
.customInput {
position: relative;
position: relative;
:global {
:global {
.ant-form-item-explain {
.ant-form-item-explain {
position: absolute;
position: absolute;
top: 40px;
top: 40px;
}
}
}
}
}
}
.loginInput {
border: none;
outline: none;
box-shadow: none;
color: #C8CACD;
border-radius: 4px;
&:hover, &:active {
box-shadow: none;
border: none;
}
}
src/pages/user/index.less
View file @
33f91404
...
@@ -3,18 +3,20 @@
...
@@ -3,18 +3,20 @@
#root {
#root {
.loginItem {
.loginItem {
flex: 1
;
height: 560px
;
width:
0
;
width:
512px
;
}
}
.loginCtl {
.loginCtl {
position: relative;
position: relative;
background: @white;
//
background: @white;
}
}
.loginWrap {
.loginWrap {
padding: 141px 0 102px;
display: flex;
min-height: 560px;
flex: 1;
justify-content: center;
align-items: center;
}
}
.readyLogin {
.readyLogin {
...
@@ -27,6 +29,8 @@
...
@@ -27,6 +29,8 @@
background: @white;
background: @white;
padding: 64px 56px 0;
padding: 64px 56px 0;
color: #909399;
color: #909399;
height: 560px;
border-radius: 8px;
&>h2 {
&>h2 {
font-size: 32px;
font-size: 32px;
...
@@ -35,6 +39,13 @@
...
@@ -35,6 +39,13 @@
font-weight: 400;
font-weight: 400;
}
}
.link {
color: #91959B!important;
&:hover {
color: #00A98F!important;
}
}
.clickUsernameLogin {
.clickUsernameLogin {
.ab-position(right, top, 8, 8);
.ab-position(right, top, 8, 8);
font-size: 12px;
font-size: 12px;
...
@@ -44,14 +55,29 @@
...
@@ -44,14 +55,29 @@
.clickScanLogin {
.clickScanLogin {
// .center-text();
// .center-text();
.ab-position(right, top, 8, 8);
.ab-position(right, top, 8, 8);
width: 32px;
cursor: pointer;
height: 32px;
width: 40px;
background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
height: 40px;
background-size: cover;
background-color: #F5F6F7;
display: flex;
align-items: center;
border-radius: 4px;
justify-content: center;
&:hover {
&:hover {
background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
opacity: .8;
}
&>img {
width: 24px;
height: 24px;
}
}
// background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
// background-size: cover;
// &:hover {
// background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
// }
}
}
.scanTips {
.scanTips {
...
@@ -73,6 +99,8 @@
...
@@ -73,6 +99,8 @@
.adBox {
.adBox {
color: @white;
color: @white;
.make-center(text);
.make-center(text);
border-radius: 8px;
overflow: hidden;
& h2 {
& h2 {
margin-top: 20px;
margin-top: 20px;
...
...
src/pages/user/index.tsx
View file @
33f91404
...
@@ -16,6 +16,8 @@ import wechat from '../../../mockStatic/Wechat.png'
...
@@ -16,6 +16,8 @@ import wechat from '../../../mockStatic/Wechat.png'
import
qq
from
'../../../mockStatic/QQ.png'
import
qq
from
'../../../mockStatic/QQ.png'
import
alipay
from
'../../../mockStatic/Alipay.png'
import
alipay
from
'../../../mockStatic/Alipay.png'
import
LoginWrap
from
'./components/LoginWrap'
import
LoginWrap
from
'./components/LoginWrap'
import
qrCode
from
'@/assets/imgs/QR_Code.png'
const
intl
=
getIntl
();
const
intl
=
getIntl
();
const
User
:
React
.
FC
=
()
=>
{
const
User
:
React
.
FC
=
()
=>
{
const
[
isScanQrCode
,
setIsScanQrCode
]
=
useState
(
false
)
const
[
isScanQrCode
,
setIsScanQrCode
]
=
useState
(
false
)
...
@@ -65,17 +67,21 @@ const User: React.FC = () => {
...
@@ -65,17 +67,21 @@ const User: React.FC = () => {
<
Helmet
>
<
Helmet
>
<
title
>
{
intl
.
formatMessage
({
id
:
'user.yonghudenglu'
})
}
</
title
>
<
title
>
{
intl
.
formatMessage
({
id
:
'user.yonghudenglu'
})
}
</
title
>
</
Helmet
>
</
Helmet
>
<
Row
className=
{
cx
(
'loginWrap'
,
globalStyles
.
lingxiBusinessContent1024
)
}
>
<
div
className=
{
cx
(
'loginWrap'
,
globalStyles
.
lingxiBusinessContent1024
)
}
>
<
Col
className=
{
cx
(
'loginItem'
,
'loginDesc'
)
}
>
{
<
div
className=
{
'adBox'
}
>
(
sceneList
&&
sceneList
.
length
>
0
)
&&
(
<
Carousel
autoplay
>
<
div
className=
{
cx
(
'loginItem'
,
'loginDesc'
)
}
>
{
<
div
className=
{
'adBox'
}
>
sceneList
&&
sceneList
.
map
(
item
=>
<
ImageBox
key=
{
item
.
id
}
direction=
{
"column"
}
width=
{
512
}
height=
{
550
}
imgUrl=
{
item
.
imageUrl
}
/>)
<
Carousel
autoplay
>
}
{
</
Carousel
>
sceneList
&&
sceneList
.
map
(
item
=>
<
ImageBox
key=
{
item
.
id
}
direction=
{
"column"
}
width=
{
512
}
height=
{
560
}
imgUrl=
{
item
.
imageUrl
}
/>)
</
div
>
}
</
Col
>
</
Carousel
>
<
Col
className=
{
cx
(
'loginItem'
,
'loginCtl'
)
}
>
</
div
>
</
div
>
)
}
<
div
className=
{
cx
(
'loginItem'
,
'loginCtl'
)
}
>
<
div
className=
{
'loginMain'
}
>
<
div
className=
{
'loginMain'
}
>
{
isScanQrCode
?
(
{
isScanQrCode
?
(
<>
<>
...
@@ -88,13 +94,15 @@ const User: React.FC = () => {
...
@@ -88,13 +94,15 @@ const User: React.FC = () => {
</>
</>
)
:
(
)
:
(
<>
<>
<
a
onClick=
{
()
=>
handleGuideLogin
(
true
)
}
className=
{
'clickScanLogin'
}
/>
<
div
className=
'clickScanLogin'
onClick=
{
()
=>
handleGuideLogin
(
true
)
}
>
<
img
src=
{
qrCode
}
/>
</
div
>
<
h2
>
{
intl
.
formatMessage
({
id
:
'user.huanyingnin'
})
}
</
h2
>
<
h2
>
{
intl
.
formatMessage
({
id
:
'user.huanyingnin'
})
}
</
h2
>
<
LoginWrap
/>
<
LoginWrap
/>
<
Row
justify=
'end'
style=
{
{
marginTop
:
16
}
}
>
<
Row
justify=
'end'
style=
{
{
marginTop
:
16
}
}
>
<
Space
size=
{
32
}
>
<
Space
size=
{
32
}
>
<
TextLink
><
Link
to=
{
getRegisterUrl
()
}
style=
{
{
color
:
'#909399'
}
}
>
{
intl
.
formatMessage
({
id
:
'user.mianfeizhuce'
})
}
</
Link
></
TextLink
>
<
TextLink
><
Link
to=
{
getRegisterUrl
()
}
className=
'link'
>
{
intl
.
formatMessage
({
id
:
'user.mianfeizhuce'
})
}
</
Link
></
TextLink
>
<
TextLink
><
a
onClick=
{
forgetPassword
}
style=
{
{
color
:
'#909399'
}
}
>
{
intl
.
formatMessage
({
id
:
'user.wangjimima'
})
}
</
a
></
TextLink
>
<
TextLink
><
a
onClick=
{
forgetPassword
}
className=
'link'
>
{
intl
.
formatMessage
({
id
:
'user.wangjimima'
})
}
</
a
></
TextLink
>
</
Space
>
</
Space
>
</
Row
>
</
Row
>
</>
</>
...
@@ -108,8 +116,8 @@ const User: React.FC = () => {
...
@@ -108,8 +116,8 @@ const User: React.FC = () => {
<a title="支付宝登录"><img src={alipay} alt="支付宝登录" /></a>
<a title="支付宝登录"><img src={alipay} alt="支付宝登录" /></a>
</Col>
</Col>
</Row> */
}
</Row> */
}
</
Col
>
</
div
>
</
Row
>
</
div
>
</
Fragment
>
</
Fragment
>
)
)
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment