Skip to content

F
founder_vue
Commit da2b3c49 by 米嘉伟
Options

信息卡

parent 20a771f8
Showing with 568 additions and 15 deletions
src/assets/img/qbryk/qxgz.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 64 (93537) - https://sketch.com -->
<title>ic_收藏备份</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="16" height="16"></rect>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="人员关注列表" transform="translate(-1777.000000, -450.000000)">
<g id="ic_收藏备份" transform="translate(1777.000000, 450.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="矩形" fill="#055FE7" opacity="0" xlink:href="#path-1"></use>
<path d="M13.3430196,5.475 L16.0839804,5.87335555 L12.0419902,9.81332223 L12.9961746,15.3766445 L8,12.75 L3.00382536,15.3766445 L3.41801961,12.953 L13.3430196,5.475 Z M8,-1.89182003e-13 L10.0660196,4.187 L3.36601961,9.237 L-0.0839803885,5.87335555 L5.50191268,5.06167777 L8,-1.89182003e-13 Z" id="形状结合" fill="#055FE7" fill-rule="nonzero" mask="url(#mask-2)"></path>
<rect id="矩形" fill="#055FE7" mask="url(#mask-2)" transform="translate(7.500000, 8.000000) rotate(-307.000000) translate(-7.500000, -8.000000) " x="7" y="-1" width="1" height="18" rx="0.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/views/AllPersonnelBase/gzlb.vue
...@@ -154,10 +154,10 @@ ...@@ -154,10 +154,10 @@
class="btn" class="btn"
@click="showType==1?isShowDcftpxBtn:dcFptx" @click="showType==1?isShowDcftpxBtn:dcFptx"
>FPTX导出</div> >FPTX导出</div>
<div <!-- <div
class="btn" class="btn"
@click="showType==1?delMore:dcFptx" @click="showType==1?delMore:dcFptx"
>删除</div> >删除</div> -->
<div <div
class="btn send" class="btn send"
@click="isShowFcxBtn" @click="isShowFcxBtn"
...@@ -208,7 +208,7 @@ ...@@ -208,7 +208,7 @@
<el-table-column <el-table-column
prop="followPerson.barcode" prop="followPerson.barcode"
label="人员编号" label="人员编号"
width="220" width="400"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -322,11 +322,11 @@ ...@@ -322,11 +322,11 @@
confirm-button-text="确认" confirm-button-text="确认"
@onConfirm="delOne(scope.row.followPerson.id)" @onConfirm="delOne(scope.row.followPerson.id)"
class="icon del" class="icon del"
title="确认要删除该数据吗？该操作无法撤消！" title="确认要取消关注吗？该操作无法撤消！"
> >
<div slot="reference"> <div slot="reference">
<img <img
src="../../assets/img/qbryk/del.svg" src="../../assets/img/qbryk/qxgz.svg"
alt="" alt=""
/> />
</div> </div>
...@@ -368,7 +368,7 @@ ...@@ -368,7 +368,7 @@
<el-table-column <el-table-column
prop="followCase.caseType" prop="followCase.caseType"
label="案件类型" label="案件类型"
width="300" width="200"
show-overflow-tooltip show-overflow-tooltip
> >
</el-table-column> </el-table-column>
...@@ -381,7 +381,7 @@ ...@@ -381,7 +381,7 @@
<el-table-column <el-table-column
prop="followCase.briefCase" prop="followCase.briefCase"
label="简要案情" label="简要案情"
width="500" width="600"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
...@@ -461,7 +461,7 @@ ...@@ -461,7 +461,7 @@
<el-tooltip <el-tooltip
class="item" class="item"
effect="dark" effect="dark"
content="删除" content="取消关注"
placement="top" placement="top"
:open-delay="500" :open-delay="500"
> >
...@@ -475,11 +475,11 @@ ...@@ -475,11 +475,11 @@
confirm-button-text="确认" confirm-button-text="确认"
@onConfirm="delOne(scope.row.followCase.id)" @onConfirm="delOne(scope.row.followCase.id)"
class="icon del" class="icon del"
title="确认要删除该数据吗？该操作无法撤消！" title="确认要取消关注该数据吗？该操作无法撤消！"
> >
<div slot="reference"> <div slot="reference">
<img <img
src="../../assets/img/qbryk/del.svg" src="../../assets/img/qbryk/qxgz.svg"
alt="" alt=""
/> />
</div> </div>
......
src/views/AllPersonnelBase/modules/ryxxk.vue
...@@ -25,7 +25,251 @@ ...@@ -25,7 +25,251 @@
</svg> </svg>
</div> </div>
</div> </div>
<div class='jbxx'>
<div class='jbxxLeft'>
<div class='sjx l1'>
<span class="span1">人员编号：</span>
<span class="span2">R111111111111</span>
<span class="span3">比中</span>
</div>
<div class='sjx l2'>
<span class="span1">姓名：</span>
<span class="span2">张三李四</span>
</div>
<div class='sjx l3'>
<span class="span1">性别：</span>
<span class="span2">男</span>
</div>
</div>
<div class='jbxxCenter'>
<div class="sjx l1">
<div class='sjxLeft'>
</div>
<div class='sjxRight'>
<div>
<span>2</span>/次
</div>
<div>
发查询历史次数
</div>
</div>
</div>
<div class="sjx l2">
<div class='sjxLeft'>
</div>
<div class='sjxRight'>
<div>
<span>2021-02-21</span>
</div>
<div>
最后一次发查询时间
</div>
</div>
</div>
</div>
<div class='jbxxRight'>
</div>
</div>
<div class="cz">
<div class='czLeft'>
<el-radio-group v-model="radio1">
<el-radio-button label="1">指纹（8）</el-radio-button>
<el-radio-button label="2">掌纹（4）</el-radio-button>
<el-radio-button label="3">人像（3）</el-radio-button>
</el-radio-group>
</div>
<div class='czRight'>
<el-button type="text">全选</el-button>
<el-button
plain
class="sc"
>删除</el-button>
</div>
</div>
<!-- 指纹 -->
<div
class="label1"
v-if="radio1==1"
>
<!-- 滚动 -->
<div class='zwDiv gd'>
<div class='zwDivHead'>
<div class="blueDiv"></div>滚动<div class="Num"><span>8</span>/10</div>
</div>
<div class='zwDivBody'>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右拇</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右食</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右中</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右环</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右小</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左拇</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左食</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左中</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左环</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左小</div>
</div>
</div>
</div>
<!-- 平面 -->
<div class='zwDiv pm'>
<div class='zwDivHead'>
<div class="blueDiv"></div>平面<div class="Num"><span>8</span>/10</div>
</div>
<div class='zwDivBody'>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右拇</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右食</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右中</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右环</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>右小</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左拇</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左食</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左中</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左环</div>
</div>
<div class='zw'>
<div class='zwImg'></div>
<div class='zwName'>左小</div>
</div>
</div>
</div>
</div>
<!-- 掌纹 -->
<div
class="label2"
v-if="radio1==2"
>
<div class='zhangwen'>
<div class="zhangwenHead">
<div class="blueDiv"></div>掌纹<div class="Num"><span>0</span>/4</div>
</div>
<div class='zhangwenBody'>
<div class="zhangwenOlny">
<div class="zhangwenImg">
</div>
<div class='zhangwenName'>
右半掌
</div>
</div>
<div class="zhangwenOlny">
<div class="zhangwenImg">
</div>
<div class='zhangwenName'>
左半掌
</div>
</div>
<div class="zhangwenOlny">
<div class="zhangwenImg">
</div>
<div class='zhangwenName'>
右侧掌
</div>
</div>
<div class="zhangwenOlny">
<div class="zhangwenImg">
</div>
<div class='zhangwenName'>
左侧掌
</div>
</div>
</div>
</div>
</div>
<!-- 人像 -->
<div
class="label3"
v-if="radio1==3"
>
<div class="rx">
<div class="rxHead">
<div class="blueDiv"></div>人像<div class="Num"><span>0</span>/4</div>
</div>
<div class="rxBody">
<div class="rxOlny">
<div class="rxImg"></div>
<div class="rxName">正面</div>
</div>
<div class="rxOlny">
<div class="rxImg"></div>
<div class="rxName">左侧面</div>
</div>
<div class="rxOlny">
<div class="rxImg"></div>
<div class="rxName">右侧面</div>
</div>
<div class="rxOlny">
<div class="rxImg"></div>
<div class="rxName">身份证</div>
</div>
</div>
</div>
</div>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
...@@ -43,8 +287,9 @@ export default { ...@@ -43,8 +287,9 @@ export default {
}, },
data () { data () {
return { return {
drawer: false, drawer: true, // 抽屉开关
direction: 'rtl', direction: 'rtl', // 抽屉类型
radio1: 3, // 指纹，掌纹，人像
}; };
}, },
mounted () { mounted () {
...@@ -79,6 +324,279 @@ export default { ...@@ -79,6 +324,279 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.rx {
padding: 0 32px;
box-sizing: border-box;
.rxHead {
display: flex;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 22px;
margin-bottom: 15px;
.blueDiv {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-right: 13px;
margin-top: 3px;
}
.Num {
margin-left: 13px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 22px;
span {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 22px;
}
}
}
.rxBody {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.rxOlny {
.rxImg {
width: 198px;
height: 260px;
border-radius: 4px;
border: 1px solid #cccccc;
}
.rxName {
width: 198px;
text-align: center;
margin-top: 8px;
margin-bottom: 16px;
}
}
}
}
.zhangwen {
padding: 0 32px;
box-sizing: border-box;
margin-bottom: 15px;
.zhangwenHead {
display: flex;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 22px;
margin-bottom: 15px;
.blueDiv {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-right: 13px;
margin-top: 3px;
}
.Num {
margin-left: 13px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 22px;
span {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 22px;
}
}
}
.zhangwenBody {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.zhangwenOlny {
.zhangwenImg {
width: 300px;
height: 300px;
border-radius: 2px;
border: 1px solid #cccccc;
}
.zhangwenName {
width: 300px;
text-align: center;
margin-top: 8px;
margin-bottom: 16px;
}
}
}
}
.zwDiv {
padding: 0 32px;
box-sizing: border-box;
.zwDivHead {
display: flex;
height: 22px;
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 22px;
margin-bottom: 15px;
.blueDiv {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-right: 13px;
margin-top: 3px;
}
.Num {
margin-left: 13px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 22px;
span {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 22px;
}
}
}
.zwDivBody {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.zw {
width: 110px;
.zwImg {
width: 110px;
height: 110px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #00b88d;
}
.zwName {
width: 110px;
text-align: center;
margin-top: 8px;
margin-bottom: 16px;
}
}
}
}
.cz {
height: 86px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
.czRight {
/deep/.el-button--text {
color: #055fe7;
}
.sc {
width: 72px;
height: 32px;
border-radius: 4px;
border: 1px solid #aeb5c2;
}
}
}
.jbxx {
width: 100%;
height: 133px;
display: flex;
background: #f6f8fa;
.jbxxLeft {
width: 50%;
height: 100%;
padding-top: 21px;
padding-left: 32px;
box-sizing: border-box;
.sjx {
width: 100%;
.span1 {
display: inline-block;
width: 78px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
line-height: 22px;
}
.span2 {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 22px;
}
.span3 {
display: inline-block;
width: 42px;
height: 24px;
background: #ff0039;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 24px;
margin-left: 10px;
}
}
.l2 {
margin: 15px 0;
}
}
.jbxxCenter {
width: 30%;
height: 100%;
padding-top: 21px;
box-sizing: border-box;
.sjx {
display: flex;
.sjxLeft {
width: 42px;
height: 42px;
background: #ddebff;
border-radius: 4px;
margin-right: 10px;
}
.sjxRight {
div {
span {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 22px;
}
font-size: 12px;
font-family: MicrosoftYaHei;
color: #999999;
line-height: 22px;
}
}
}
.l1 {
margin-bottom: 18px;
}
.l2 {
.sjxLeft {
background: #ffebed;
}
}
}
.jbxxRight {
width: 20%;
height: 100%;
padding-top: 21px;
box-sizing: border-box;
background-color: #aa3;
}
}
.ryxxkDrawer { .ryxxkDrawer {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -87,16 +605,15 @@ export default { ...@@ -87,16 +605,15 @@ export default {
} }
} }
.header { .header {
position: fixed;
background: #ffffff; background: #ffffff;
height: 50px; height: 50px;
width: 688px; // width: 688px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 32px; padding: 0 32px;
box-sizing: border-box;
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
z-index: 999;
.header-title { .header-title {
font-size: 16px; font-size: 16px;
...@@ -119,4 +636,18 @@ export default { ...@@ -119,4 +636,18 @@ export default {
} }
} }
} }
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #fff;
background-color: #055fe7;
border-color: #055fe7;
}
/deep/.el-radio-button__inner {
width: 86px;
height: 32px;
line-height: 32px;
}
/deep/.el-radio-button__inner {
padding: 0;
line-height: 32px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment