Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
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
常超
founder_vue
Commits
e17af3a8
Commit
e17af3a8
authored
Aug 31, 2021
by
liupeng
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'dev_xzeq' of
http://47.92.108.28/changchao/founder_vue
into dev_xzeq
parents
253f590f
6411f84a
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
344 additions
and
0 deletions
+344
-0
src/components/PersonInfor.vue
+253
-0
src/views/kyxs/hmxs/hmxsDetail.vue
+91
-0
No files found.
src/components/PersonInfor.vue
0 → 100644
View file @
e17af3a8
<!--
* @Author: your name
* @Date: 2021-08-31 09:51:34
* @LastEditTime: 2021-08-31 14:59:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\components\PersonInfor.vue
-->
<
template
>
<div
class=
"rightContent"
id=
"personInfor"
>
<div
class=
"Content paneDiv paneDiv2"
>
<div
class=
"header"
>
<span
class=
"title"
>
{{
title
||
"人员信息详情"
}}
</span>
<span
class=
"iconBox"
>
<slot
name=
"icon"
></slot>
</span>
</div>
<div
class=
"Boxcontent"
>
<div
class=
"content"
>
<div
class=
"imgBox"
>
<img
:src=
"item"
alt=
""
v-for=
"item in imgArr"
:key=
"item"
/>
</div>
<div
:class=
"
{
inforContent: true,
pt0: imgArr.length > 0 ? false : true,
}"
>
<div
class=
"rows"
v-for=
"(item, index) in InforProps"
:key=
"index"
>
<div
:class=
"'col' + i.col"
v-for=
"i in item"
:key=
"i.id"
>
<span
class=
"label"
:style=
"
{ width: labelWidth }">
{{
i
.
label
}}
</span>
<span
class=
"cont"
:style=
"
{ width: `calc(100% - ${labelWidth})` }"
>
{{
pageData
[
i
.
prop
]
||
"-"
}}
</span
>
</div>
</div>
</div>
</div>
<div
class=
"footer"
>
<div
class=
"rows"
>
<div
:class=
"'col' + item.col"
v-for=
"item in footerProps"
:key=
"item.prop"
>
<span
class=
"label"
>
{{
item
.
label
}}
</span>
<span
class=
"cont"
>
{{
pageData
[
item
.
prop
]
||
"-"
}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
//切割好的二维数组
InforProps
:
[],
//页脚配置
footerProps
:
this
.
pageFooterProps
,
//页面信息对象
pageData
:
this
.
pageObject
,
col
:
0
,
};
},
props
:
{
//详情配置
cxQueryField
:
{
type
:
Array
,
default
:
()
=>
[],
},
//页脚配置
pageFooterProps
:
{
type
:
Array
,
default
:
()
=>
[],
},
//接口请求的对象所有信息都包含的
pageObject
:
{
type
:
Object
,
default
:
()
=>
({}),
},
//label的宽度默认80
labelWidth
:
String
,
//页面标题
title
:
String
,
//照片集合
imgArr
:
Array
,
},
methods
:
{
//根据col切割为二维数组
getPageInfor
()
{
let
arr
=
[];
this
.
cxQueryField
.
forEach
((
item
,
index
)
=>
{
// debugger;
this
.
col
+=
item
.
col
-
0
;
if
(
this
.
col
>
10
)
{
this
.
InforProps
.
push
(
arr
);
this
.
col
=
item
.
col
-
0
;
arr
=
[];
arr
.
push
(
item
);
}
else
{
arr
.
push
(
item
);
}
if
(
index
==
this
.
cxQueryField
.
length
-
1
)
{
if
(
arr
.
length
>=
1
)
{
this
.
InforProps
.
push
(
arr
);
}
}
});
},
},
mounted
()
{
this
.
getPageInfor
();
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
@mixin
pageStyle
()
{
padding
:
13px
20px
;
}
.rightContent
{
flex
:
1
;
height
:
100%
;
overflow-y
:
auto
;
.paneDiv
{
background
:
#ffffff
;
box-shadow
:
0px
2px
4px
rgba
(
0
,
0
,
0
,
0.18
);
opacity
:
1
;
border-radius
:
4px
;
margin
:
16px
20px
50px
;
position
:
relative
;
}
.paneDiv2
{
background
:
#ffffff
;
border
:
1px
solid
#eaeaea
;
box-shadow
:
none
;
opacity
:
1
;
border-radius
:
8px
;
}
.header
{
@include
pageStyle();
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
border-bottom
:
1px
solid
#e4e4e4
;
.title
{
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
600
;
color
:
#363636
;
}
.iconBox
{
i
{
font-size
:
18px
;
color
:
#808591
;
&:not(:last-of-type)
{
margin-right
:
15px
;
}
}
}
}
.Boxcontent
{
@include
pageStyle();
.content
{
height
:
auto
;
display
:
block
;
.imgBox
{
margin
:
6px
0
10px
;
>
img
{
width
:
140px
;
height
:
140px
;
margin-left
:
20px
;
&:first-of-type
{
margin-left
:
10px
;
}
}
}
.inforContent
{
padding
:
10px
0
;
width
:
100%
;
border-bottom
:
1px
solid
#e4e4e4
;
.rows
{
box-sizing
:
border-box
;
width
:
100%
;
padding
:
5px
10px
;
&:nth-of-type(2n
+
1)
{
background-color
:
#f3f8fc
;
}
}
}
.pt0
{
padding-top
:
0
;
}
}
.footer
{
padding-top
:
13px
;
.rows
{
box-sizing
:
border-box
;
width
:
100%
;
padding
:
0
10px
;
.label
{
color
:
#808591
!important
;
font-weight
:
bold
!important
;
}
}
}
}
.col3
,
.col6
,
.col10
,
.col5
{
display
:
inline-block
;
vertical-align
:
top
;
.label
{
font-size
:
14px
;
color
:
#363636
;
font-weight
:
bold
;
display
:
inline-block
;
width
:
80px
;
text-align
:
left
;
vertical-align
:
top
;
}
.cont
{
color
:
#808591
;
font-size
:
14px
;
display
:
inline-block
;
width
:
calc
(
100%
-
80px
);
box-sizing
:
border-box
;
padding-right
:
15px
;
padding-left
:
10px
;
}
}
.col3
{
width
:
33%
;
}
.col6
{
width
:
66%
;
}
.col10
{
width
:
100%
;
}
.col5
{
width
:
50%
;
}
}
</
style
>
src/views/kyxs/hmxs/hmxsDetail.vue
View file @
e17af3a8
<!--
* @Author: your name
* @Date: 2021-08-31 09:52:33
* @LastEditTime: 2021-08-31 15:01:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\hnksh\ceshi.vue
-->
<
template
>
<div
class=
"Content"
>
<right-content
:cxQueryField=
"cxQueryField"
:pageObject=
"pageObject"
:pageFooterProps=
"pageFooterProps"
:imgArr=
"imgArr"
labelWidth=
"110px"
>
<template
slot=
"icon"
>
<i
class=
"el-icon-delete-solid"
></i>
<i
class=
"el-icon-delete-solid"
></i>
<i
class=
"el-icon-delete-solid"
></i>
</
template
>
</right-content>
</div>
</template>
<
script
>
import
rightContent
from
"@c/PersonInfor.vue"
;
import
{
get
,
post
,
postform
,
postJson
}
from
"@/utils/http.js"
;
export
default
{
name
:
"queryAj"
,
components
:
{
rightContent
,
},
data
()
{
return
{
cxQueryField
:
[
{
label
:
"联系人姓名:"
,
prop
:
"a1"
,
col
:
"3"
,
},
{
label
:
"联系人身份证:"
,
prop
:
"a2"
,
col
:
"3"
,
},
{
label
:
"被联系人姓名:"
,
prop
:
"a3"
,
col
:
"3"
,
},
{
label
:
"被联系人身份证:"
,
prop
:
"a4"
,
col
:
"3"
,
},
],
pageFooterProps
:
[
{
label
:
"填表单位的:"
,
prop
:
"b1"
,
col
:
"3"
,
},
{
label
:
"填表人:"
,
prop
:
"b2"
,
col
:
"3"
,
},
{
label
:
"填表日期:"
,
prop
:
"b3"
,
col
:
"3"
,
},
],
pageObject
:
{
a1
:
"但是大多数都是"
,
a2
:
"fawwfafwa"
,
a3
:
"但我仿佛大多数都是"
,
a4
:
"是否色"
,
},
imgArr
:
[],
};
},
mounted
()
{},
methods
:
{},
created
()
{},
};
</
script
>
<
style
scoped
lang=
"scss"
>
</
style
>
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