6 changed files with 256 additions and 8 deletions
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 53 KiB |
@ -0,0 +1,233 @@ |
|||
<template> |
|||
<div class="conflict-mediation-modal" v-show="disabilityVisible"> |
|||
<div class="conflict-mediation"> |
|||
<div class="close-icon" @click="closeDialog"> |
|||
<img src="@/assets/next-images/close-icon.png" alt="" /> |
|||
</div> |
|||
<div class="title-container"> |
|||
<div class="title-icon"> |
|||
<img src="@/assets/images/community-icon.png" alt="" /> |
|||
</div> |
|||
<div class="title">残联基层组织</div> |
|||
</div> |
|||
<div class="conflict-mediation-content"> |
|||
<div class="logo"> |
|||
<div class="logo-container"> |
|||
<img src="@/assets/images/cj_logo.png" alt="" /> |
|||
</div> |
|||
</div> |
|||
<div class="table-container"> |
|||
<TableFrame |
|||
:headerList="headerList" |
|||
:dataList="dataList" |
|||
:preloadVisible="preloadVisible" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import TableFrame from '../conflict-mediation/table-frame.vue' |
|||
import { mapActions, mapGetters } from 'vuex' |
|||
export default { |
|||
name: 'community-table', |
|||
data () { |
|||
return { |
|||
headerList: [ |
|||
{ width: '100%', title: '序号' }, |
|||
{ width: '200%', title: '工作站' }, |
|||
{ width: '100%', title: '主席' }, |
|||
{ width: '300%', title: '副主席' }, |
|||
{ width: '300%', title: '委员' }, |
|||
{ width: '100%', title: '专职委员' } |
|||
], |
|||
dataList: [ |
|||
[1,'堡子村','孙兴宽','唐桂琴、丁翊青、王胜平','杨奉贵、任光勇','任秀娟'], |
|||
[2,'北土楼村','丁翊胜','丁传福、任永顺','于金珍、王秋英','高远亭'], |
|||
[3,'南土楼村','毕群山','程振国、张方荣、王胜平','张邦春、张方伦','项荣芳'], |
|||
[4,'中土楼村','李善堂','丁文文、孙玲','李长清、任兴荣、李善友','李文腾'], |
|||
[5,'西三里村','朱成法','尹青、翟庆常','赵淑霞、张方海','赵双双'], |
|||
[6,'山头村','柳锡荣','孙孟河、柳东晓','李淑伟、刘强','柳宗庆'], |
|||
[7,'前阮二村','丁翊栋','丁华亭、刘娟','丁士平、高凤英','张雯雯'], |
|||
[8,'上盆王村','常正民','常正普、常荣、王军','靳贤梅、常本随','任华娟'], |
|||
[9,'下盆王村','常本银','常金祥、常铁军','常来成、殷翠','郑秀华'], |
|||
[10,'前寨村','赵奔','赵学梅、张宾','李吉伏、李道民、陈承信','李延荣'], |
|||
[11,'后寨村','靳拥华','李丙莲、丁桂兰、马玉平','靳士锋、靳维虎、靳维春、张召明','靳士伟'], |
|||
[12,'凌庄村','凌泽荣','郭永强、刘汝英','靳利红、尹飞飞','凌泽忠'], |
|||
[13,'毕海洋村','翟士香','何友君、张 华','毕泗泉、孙大凤','张子红'], |
|||
[14,'大李子顺村','李善柱','孙玉芳、李正元','张维珍、孙清华','李刚'], |
|||
[15,'东子顺南村','吴庆玉','郭振建、李传英','赵衍坤、张庆军、赵衍伦','吴莲'], |
|||
[16,'东子顺北村','张召木','焦广军、张倩倩','李宗懂、李 刚、李 根','李淑水'], |
|||
[17,'李山头村','李玉保','李传连、李玉良','李传明、郭建国','张翠峰'], |
|||
[18,'西子顺村','孙茂岩','赵绪寅、王秀宇','孙茂强、程振生','赵诗新'], |
|||
[19,'宋子顺村','李兆斌','李衍春、李吉华','宋宪增、李淑荣','李春英'], |
|||
[20,'东孙庄村','孙清福','孙忠清、牛连风','赵莲、陈茂金','孙允东'], |
|||
[21,'龙桥村','赵洪刚','毕秀平、赵敦俊','赵桂芝、赵敦东','赵桂风'], |
|||
[22,'玫瑰湖社区残协基层组织建设','丁秀梅','孙会昌、雷抒新','李铆铆、吕楠楠、陶 洁','孙娜'], |
|||
[23,'玫瑰苑社区残协基层组织建设','尹璞','张传恒、孔晓燕','郭兵、罗绪冬','孙媛媛'], |
|||
[24,'锦祥源社区残协基层组织建设','韩花','丁文文、李磊','李卡、宋娥','史明月'], |
|||
[25,'锦水园社区残协基层组织建设','刘文琦','陈双林、赵峰','张艳艳、朱田田','周晓莉'], |
|||
[25,'滨湖社区残协基层组织建设','朱震','韩子成、张伟','李晓敏、张利霞','于乐佳'] |
|||
], |
|||
conflictCommunityList: [], |
|||
preloadVisible: false |
|||
} |
|||
}, |
|||
components: { |
|||
TableFrame |
|||
}, |
|||
created () { |
|||
}, |
|||
computed: { |
|||
...mapGetters(['disabilityVisible']), |
|||
|
|||
}, |
|||
methods: { |
|||
...mapActions({ |
|||
set_disabilityVisible: 'SET_DISABILITYVISIBLE', |
|||
}), |
|||
closeDialog () { |
|||
this.set_disabilityVisible(false) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
object-fit: cover; |
|||
} |
|||
.conflict-mediation-modal { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 150; |
|||
.conflict-mediation { |
|||
width: 1696px; |
|||
height: 890px; |
|||
background: url("~@/assets/images/event-list-dialog-bg.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
.close-icon { |
|||
width: 26px; |
|||
height: 26px; |
|||
position: absolute; |
|||
top: 4px; |
|||
right: -2px; |
|||
cursor: pointer; |
|||
} |
|||
.title-container { |
|||
width: 100%; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
box-sizing: border-box; |
|||
padding-left: 26px; |
|||
margin-top: 18px; |
|||
.title-icon { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
.title { |
|||
font-size: 18px; |
|||
font-weight: 900; |
|||
background: linear-gradient( |
|||
0deg, |
|||
#85e3f9 0%, |
|||
#ffffff 60%, |
|||
#ffffff 100% |
|||
); |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
color: transparent; |
|||
margin-left: 3px; |
|||
} |
|||
} |
|||
.conflict-mediation-content { |
|||
width: 100%; |
|||
height: calc(100% - 30px - 18px - 30px); |
|||
box-sizing: border-box; |
|||
padding: 0 10%; |
|||
.logo { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 40px 0 10px 0; |
|||
&-container { |
|||
width: 856px; |
|||
height: 64px; |
|||
} |
|||
} |
|||
.tab-list { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 0 10%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 20px; |
|||
&-item { |
|||
width: 182px; |
|||
height: 58px; |
|||
background: url("~@/assets/images/org-bg.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
font-family: "PingFang Regular"; |
|||
font-weight: 900; |
|||
font-size: 18px; |
|||
white-space: wrap; |
|||
color: #fff; |
|||
line-height: 26px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
padding: 0 10px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.select-tab { |
|||
width: 100%; |
|||
height: 50px; |
|||
box-sizing: border-box; |
|||
padding: 0 10%; |
|||
position: relative; |
|||
&-container { |
|||
width: 62px; |
|||
height: 26px; |
|||
margin: 12px 0; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: calc(10% + 91px - 31px); |
|||
transition: left linear 0.5s; |
|||
&.tab1 { |
|||
left: calc(10% + 91px - 31px); |
|||
} |
|||
&.tab2 { |
|||
left: calc(50% - 31px); |
|||
} |
|||
&.tab3 { |
|||
left: calc(90% - 91px - 31px); |
|||
} |
|||
} |
|||
} |
|||
.table-container { |
|||
width: 100%; |
|||
height: calc(100% - (40px + 64px + 10px) - (20px + 58px) - 50px - 50px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue