Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
pro-blocks
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
pro-blocks
Commits
7c0550f1
Commit
7c0550f1
authored
Feb 09, 2018
by
jim
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
responsive support for user information interface
parent
3d66a584
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
102 additions
and
10 deletions
+102
-10
src/routes/Userinfo/BaseView.js
src/routes/Userinfo/BaseView.js
+31
-2
src/routes/Userinfo/BaseView.less
src/routes/Userinfo/BaseView.less
+11
-1
src/routes/Userinfo/GeographicView.js
src/routes/Userinfo/GeographicView.js
+5
-4
src/routes/Userinfo/GeographicView.less
src/routes/Userinfo/GeographicView.less
+17
-0
src/routes/Userinfo/Info.js
src/routes/Userinfo/Info.js
+1
-1
src/routes/Userinfo/Info.less
src/routes/Userinfo/Info.less
+14
-0
src/routes/Userinfo/PhoneView.js
src/routes/Userinfo/PhoneView.js
+3
-2
src/routes/Userinfo/PhoneView.less
src/routes/Userinfo/PhoneView.less
+20
-0
No files found.
src/routes/Userinfo/BaseView.js
View file @
7c0550f1
import
React
,
{
Component
,
Fragment
}
from
'
react
'
;
import
{
Form
,
Input
,
Upload
,
Select
,
Button
}
from
'
antd
'
;
import
Debounce
from
'
lodash-decorators/debounce
'
;
import
Bind
from
'
lodash-decorators/bind
'
;
import
styles
from
'
./BaseView.less
'
;
import
GeographicView
from
'
./GeographicView
'
;
import
PhoneView
from
'
./PhoneView
'
;
...
...
@@ -46,8 +48,16 @@ const validatorPhone = (rule, value, callback) => {
@
Form
.
create
()
export
default
class
BaseView
extends
Component
{
state
=
{
md
:
false
,
};
componentDidMount
()
{
this
.
setBaseInfo
();
this
.
resize
();
window
.
addEventListener
(
'
resize
'
,
this
.
resize
);
}
componentWillUnmount
()
{
window
.
removeEventListener
(
'
resize
'
,
this
.
resize
);
}
setBaseInfo
=
()
=>
{
const
{
currentUser
}
=
this
.
props
;
...
...
@@ -65,10 +75,29 @@ export default class BaseView extends Component {
'
https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png
'
;
return
url
;
}
getViewDom
=
(
ref
)
=>
{
this
.
view
=
ref
;
};
@
Bind
()
@
Debounce
(
200
)
resize
()
{
if
(
this
.
view
.
offsetWidth
>
696
)
{
this
.
setState
({
md
:
false
,
});
return
;
}
this
.
setState
({
md
:
true
,
});
}
render
()
{
const
{
getFieldDecorator
}
=
this
.
props
.
form
;
return
(
<
div
className
=
{
styles
.
baseView
}
>
<
div
className
=
{
`
${
styles
.
baseView
}
${
this
.
state
.
md
?
styles
.
md
:
''
}
`
}
ref
=
{
this
.
getViewDom
}
>
<
div
className
=
{
styles
.
left
}
>
<
Form
layout
=
"
vertical
"
onSubmit
=
{
this
.
handleSubmit
}
hideRequiredMark
>
<
FormItem
label
=
"
邮箱
"
>
...
...
@@ -98,7 +127,7 @@ export default class BaseView extends Component {
{
required
:
true
,
message
:
'
Please input your country!
'
},
],
})(
<
Select
style
=
{{
w
idth
:
220
}}
>
<
Select
style
=
{{
maxW
idth
:
220
}}
>
<
Option
value
=
"
China
"
>
中国
<
/Option
>
<
Option
value
=
"
USA
"
>
美国
<
/Option
>
<
Option
value
=
"
France
"
>
法国
<
/Option
>
...
...
src/routes/Userinfo/BaseView.less
View file @
7c0550f1
...
...
@@ -2,8 +2,18 @@
.baseView {
display: flex;
&.md {
flex-direction: column-reverse;
.right {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
}
.left {
width: 448px;
max-width: 448px;
min-width: 224px;
}
.right {
flex: 1;
...
...
src/routes/Userinfo/GeographicView.js
View file @
7c0550f1
import
React
,
{
PureComponent
}
from
'
react
'
;
import
{
Select
,
Spin
}
from
'
antd
'
;
import
{
connect
}
from
'
dva
'
;
import
styles
from
'
./GeographicView.less
'
;
const
{
Option
}
=
Select
;
...
...
@@ -17,7 +18,7 @@ const nullSlectItem = {
isLoading
,
};
})
export
default
class
ProvinceSelect
extends
PureComponent
{
export
default
class
GeographicView
extends
PureComponent
{
componentDidMount
=
()
=>
{
this
.
props
.
dispatch
({
type
:
'
geographic/fetchProvince
'
,
...
...
@@ -78,22 +79,22 @@ export default class ProvinceSelect extends PureComponent {
render
()
{
const
{
province
,
city
}
=
this
.
conversionObject
();
return
(
<
Spin
spinning
=
{
this
.
props
.
isLoading
}
>
<
Spin
spinning
=
{
this
.
props
.
isLoading
}
wrapperClassName
=
{
styles
.
row
}
>
<
Select
className
=
{
styles
.
item
}
value
=
{
province
}
labelInValue
showSearch
onSelect
=
{
this
.
selectProvinceItem
}
style
=
{{
width
:
220
,
marginRight
:
8
}}
>
{
this
.
getProvinceOption
()}
<
/Select
>
<
Select
className
=
{
styles
.
item
}
value
=
{
city
}
labelInValue
showSearch
onSelect
=
{
this
.
selectCityItem
}
style
=
{{
width
:
220
}}
>
{
this
.
getCityOption
()}
<
/Select
>
...
...
src/routes/Userinfo/GeographicView.less
0 → 100644
View file @
7c0550f1
@import '~antd/lib/style/themes/default.less';
.row {
.item {
width: 220px;
}
.item:first-child {
margin-right: 8px;
}
}
@media screen and (max-width: @screen-sm) {
.item:first-child {
margin: 0;
margin-bottom: 8px;
}
}
src/routes/Userinfo/Info.js
View file @
7c0550f1
...
...
@@ -48,7 +48,7 @@ export default class Info extends PureComponent {
<
div
className
=
{
styles
.
main
}
>
<
div
className
=
{
styles
.
leftmenu
}
>
<
Menu
mode
=
"
inline
"
mode
=
{
window
.
innerWidth
<
769
?
'
horizontal
'
:
'
inline
'
}
selectedKeys
=
{[
this
.
state
.
selectKey
]}
onClick
=
{
this
.
selectKey
}
>
...
...
src/routes/Userinfo/Info.less
View file @
7c0550f1
...
...
@@ -7,6 +7,7 @@
display: flex;
padding-top: 16px;
padding-bottom: 16px;
overflow: auto;
.leftmenu {
width: 224px;
border-right: 1px solid #e8e8e8;
...
...
@@ -69,3 +70,16 @@
color: red;
}
}
@media screen and (max-width: @screen-md) {
.main {
flex-direction: column;
.leftmenu {
width: 100%;
border: none;
}
.right {
padding: 40px;
}
}
}
src/routes/Userinfo/PhoneView.js
View file @
7c0550f1
import
React
,
{
Fragment
,
PureComponent
}
from
'
react
'
;
import
{
Input
}
from
'
antd
'
;
import
styles
from
'
./PhoneView.less
'
;
class
PhoneView
extends
PureComponent
{
render
()
{
...
...
@@ -11,18 +12,18 @@ class PhoneView extends PureComponent {
return
(
<
Fragment
>
<
Input
className
=
{
styles
.
area_code
}
value
=
{
values
[
0
]}
onChange
=
{(
e
)
=>
{
onChange
(
`
${
e
.
target
.
value
}
-
${
values
[
1
]}
`
);
}}
style
=
{{
width
:
128
,
marginRight
:
8
}}
/
>
<
Input
className
=
{
styles
.
phone_number
}
onChange
=
{(
e
)
=>
{
onChange
(
`
${
values
[
0
]}
-
${
e
.
target
.
value
}
`
);
}}
value
=
{
values
[
1
]}
style
=
{{
width
:
312
}}
/
>
<
/Fragment
>
);
...
...
src/routes/Userinfo/PhoneView.less
0 → 100644
View file @
7c0550f1
@import '~antd/lib/style/themes/default.less';
.area_code {
width: 128px;
margin-right: 8px;
}
.phone_number {
width: 312px;
}
@media screen and (max-width: @screen-sm) {
.area_code {
width: 100%;
margin: 0;
margin-bottom: 8px;
}
.phone_number {
width: 100%;
}
}
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