You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
432 lines
15 KiB
432 lines
15 KiB
<template>
|
|
<div class="mw-cpt a-fade-in"
|
|
:ref="item.tempOnlyId"
|
|
:class="{'z-focused': isFocused}"
|
|
@click="focusCpt">
|
|
|
|
<!-- 积分银行-积分排行组件 -->
|
|
<div v-if="item.componentFrontId==='resi-functionList-score-rank'">
|
|
|
|
<div class="score_news">
|
|
<div class="cpt-title">
|
|
|
|
<div v-if="item.configuration.title"
|
|
class="cpt-title-t">{{item.configuration.title}}</div>
|
|
<div v-else
|
|
class="cpt-title-t">积分排名</div>
|
|
|
|
</div>
|
|
|
|
<div class="info">
|
|
<div class="card">
|
|
<div class="title">
|
|
<img class="avatar"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
|
|
mode="aspectFill">
|
|
<div class="name">{{item.demoData.info1.title1}}</div>
|
|
</div>
|
|
<div class="ranks">
|
|
<div class="rank">
|
|
|
|
<div class="rank-field">网格排名</div>
|
|
<div class="rank-value value_color_1"><span>{{item.demoData.info1.no1}}</span></div>
|
|
</div>
|
|
<div class="rank">
|
|
|
|
<div class="rank-field">总排名</div>
|
|
<div class="rank-value value_color_2"><span>{{item.demoData.info1.no2}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="card">
|
|
<div class="title">
|
|
<img class="avatar2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
|
|
mode="aspectFill">
|
|
<div class="name">{{item.demoData.info2.title1}}</div>
|
|
</div>
|
|
<div class="ranks">
|
|
<div class="rank">
|
|
<div class="rank-field">社区排名</div>
|
|
<div class="rank-value value_color_1"><span>{{item.demoData.info2.no1}}</span></div>
|
|
|
|
</div>
|
|
<div class="rank">
|
|
<div class="rank-field">总排名</div>
|
|
<div class="rank-value value_color_2"><span>{{item.demoData.info2.no2}}</span></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="score_list ">
|
|
|
|
<div class="item item_1"
|
|
:key="subindex"
|
|
v-for="(subitem,subindex) in item.demoData.list">
|
|
<div class="logo">
|
|
<img v-if="subindex===0"
|
|
src="../../assets/img/modules/wx-mini/index-set/rank1.png"
|
|
mode="aspectFill">
|
|
<img v-else-if="subindex===1"
|
|
src="../../assets/img/modules/wx-mini/index-set/rank2.png"
|
|
mode="aspectFill">
|
|
<img v-else-if="subindex===2"
|
|
src="../../assets/img/modules/wx-mini/index-set/rank3.png"
|
|
mode="aspectFill">
|
|
<span v-else>{{ subindex+1 }}</span>
|
|
</div>
|
|
|
|
<div class="avatar">
|
|
<img src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
mode="aspectFill">
|
|
</div>
|
|
<div class="name">{{ subitem.name }}</div>
|
|
<div class="score">{{ subitem.score }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="score_rank_content">
|
|
<div v-if="item.configuration.title"
|
|
class="title">{{item.configuration.title}}</div>
|
|
<div v-else
|
|
class="title">积分排行</div>
|
|
|
|
<div class="rank_tabs">
|
|
<span class="tabs_1">总排名</span>
|
|
<span class="tabs_2">本周排名</span>
|
|
<span class="tabs_2">本月排名</span>
|
|
</div>
|
|
<div class="rank_box">
|
|
<div class="list_title">
|
|
<div>排名</div>
|
|
<div>头像</div>
|
|
<div>姓名</div>
|
|
<div>当月积分</div>
|
|
</div>
|
|
|
|
<div class="score_list score_no_border">
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem,subindex) in item.demoData.list">
|
|
<div class="d-group-rank">
|
|
<span v-if="subitem.rank===1"
|
|
class="span_rank1">{{subitem.rank}}</span>
|
|
<span v-else-if="subitem.rank===2"
|
|
class="span_rank2">{{subitem.rank}}</span>
|
|
<span v-else-if="subitem.rank===3"
|
|
class="span_rank3">{{subitem.rank}}</span>
|
|
<span v-else>{{subitem.rank}}</span>
|
|
</div>
|
|
<div class="d-group-img">
|
|
<img v-if="subitem.rank===1"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===3"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===4"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===5"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
</div>
|
|
<div>
|
|
<span>{{subitem.name}}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{subitem.score}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- 积分银行-积分排行2 -->
|
|
<div class="score_rank"
|
|
v-if="item.componentFrontId==='resi-functionList-score-rank-2'">
|
|
<div class="score_rank_content">
|
|
<div v-if="item.configuration.title"
|
|
class="title">{{item.configuration.title}}</div>
|
|
<div v-else
|
|
class="title">积分排名2.0</div>
|
|
|
|
<div class="single">
|
|
<div class="single_bc">
|
|
|
|
<div class="single_name">
|
|
<img src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg">
|
|
<span>{{item.demoData.info1.title1}}</span>
|
|
</div>
|
|
|
|
<div class="single_rank">
|
|
<div class="single_rank_bc bc_left">
|
|
<div class="score">
|
|
<span class="span_title">No.</span>
|
|
<span class="span_no">{{item.demoData.info1.no1}}</span>
|
|
</div>
|
|
<div class="rank2_row2">支部排名</div>
|
|
</div>
|
|
<div class="single_rank_bc bc_right">
|
|
<div class="score">
|
|
<span class="span_title">No.</span>
|
|
<span class="span_no">{{item.demoData.info1.no2}}</span>
|
|
</div>
|
|
<div class="rank2_row2">平台排名</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="single_bc">
|
|
<div class="single_name">
|
|
|
|
<span>{{item.demoData.info2.title1}}</span>
|
|
</div>
|
|
|
|
<div class="single_rank">
|
|
<div class="single_rank_bc bc_left">
|
|
<div class="score">
|
|
<span class="span_title">No.</span>
|
|
<span class="span_no">{{item.demoData.info1.no1}}</span>
|
|
</div>
|
|
<div class="rank2_row2">本区排名</div>
|
|
</div>
|
|
<div class="single_rank_bc bc_right">
|
|
<div class="score">
|
|
<span class="span_title">No.</span>
|
|
<span class="span_no">{{item.demoData.info1.no2}}</span>
|
|
</div>
|
|
<div class="rank2_row2">平台排名</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rank_tabs">
|
|
<span class="tabs_1">身边党员</span>
|
|
<span class="tabs_2">社区党员</span>
|
|
<span class="tabs_2">平台党员</span>
|
|
</div>
|
|
<div class="rank_box">
|
|
<div class="list_title">
|
|
<div>排名</div>
|
|
<div>头像</div>
|
|
<div>姓名</div>
|
|
<div>当月积分</div>
|
|
</div>
|
|
|
|
<!--更多排名-->
|
|
<div class="score_list score_no_border">
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem,subindex) in item.demoData.list">
|
|
<div class="d-group-rank">
|
|
<span v-if="subitem.rank===1"
|
|
class="span_rank1">{{subitem.rank}}</span>
|
|
<span v-else-if="subitem.rank===2"
|
|
class="span_rank2">{{subitem.rank}}</span>
|
|
<span v-else-if="subitem.rank===3"
|
|
class="span_rank3">{{subitem.rank}}</span>
|
|
<span v-else>{{subitem.rank}}</span>
|
|
</div>
|
|
<div class="d-group-img">
|
|
<img v-if="subitem.rank===1"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===3"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===4"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subitem.rank===5"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
</div>
|
|
<div>
|
|
<span>{{subitem.name}}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{subitem.score}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 党员积分排行组件 -->
|
|
<div class="score_party"
|
|
v-else-if="item.componentFrontId==='resi-functionList-top-party'">
|
|
<div class="score_party_content">
|
|
<div v-if="item.configuration.title"
|
|
class="title">{{item.configuration.title}}</div>
|
|
<div v-else
|
|
class="title">党员积分排行</div>
|
|
<div class="m-box">
|
|
<div class="rank_tabs">
|
|
<p class="rank_title_left">身边党员</p>
|
|
<div class="red_line"></div>
|
|
<p class="rank_title_right">社区党员</p>
|
|
</div>
|
|
|
|
<div class="rank_img_score">
|
|
<!--:key,列表循环的唯一标识符 -->
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem, subindex) in item.demoData.list1">
|
|
<div class="d-group-logo">
|
|
<div v-if="subindex === 0"
|
|
class="logo1"></div>
|
|
<div v-if="subindex === 1"
|
|
class="logo2"></div>
|
|
<div v-if="subindex === 2"
|
|
class="logo3"></div>
|
|
</div>
|
|
|
|
<div class="d-group-rank">
|
|
<span v-if="subindex===0"
|
|
class="rank_1">2</span>
|
|
<span v-if="subindex===1"
|
|
class="rank_2">1</span>
|
|
<span v-if="subindex===2"
|
|
class="rank_3">3</span>
|
|
|
|
</div>
|
|
|
|
<div class="d-group-imgback">
|
|
<div v-if="subindex === 0"
|
|
class="back_1"></div>
|
|
<div v-if="subindex === 1"
|
|
class="back_2"></div>
|
|
<div v-if="subindex === 2"
|
|
class="back_3"></div>
|
|
</div>
|
|
<div class="d-group-img">
|
|
<img v-if="subindex === 0"
|
|
class="img1"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg">
|
|
<img v-if="subindex === 1"
|
|
class="img2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg">
|
|
<img v-if="subindex === 2"
|
|
class="img3"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg">
|
|
</div>
|
|
|
|
<div class="d-group-score">
|
|
<span v-if="subindex===0"
|
|
class="score_1">{{subitem.title1}}</span>
|
|
<span v-if="subindex===1"
|
|
class="score_2">{{subitem.title2}}</span>
|
|
<span v-if="subindex===2"
|
|
class="score_3">{{subitem.title3}}</span>
|
|
</div>
|
|
|
|
<div class="d-group-name">
|
|
|
|
<span v-if="subindex===0"
|
|
class="name_1">{{subitem.info1}}</span>
|
|
<span v-if="subindex===1"
|
|
class="name_2">{{subitem.info2}}</span>
|
|
<span v-if="subindex===2"
|
|
class="name_3">{{subitem.info3}}</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--更多排名-->
|
|
<div class="rank_box">
|
|
<div class="list_title">
|
|
<div>排名</div>
|
|
<div>头像</div>
|
|
<div>姓名</div>
|
|
<div>当月积分</div>
|
|
</div>
|
|
|
|
<div class="score_list">
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem,subindex) in item.demoData.list2">
|
|
<div class="d-group-rank">
|
|
<span>{{subitem.rank}}</span>
|
|
</div>
|
|
<div class="d-group-img">
|
|
<img v-if="subindex===0"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subindex===1"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subindex===2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subindex===3"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-if="subindex===4"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
</div>
|
|
<div>
|
|
<span>{{subitem.name}}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{subitem.score}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<span class="list6">查看更多</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'cptItem',
|
|
data () {
|
|
return {}
|
|
},
|
|
components: {
|
|
},
|
|
props: {
|
|
isFocused: Boolean,
|
|
item: Object
|
|
},
|
|
mounted () {
|
|
console.log('score', this.item)
|
|
|
|
},
|
|
methods: {
|
|
|
|
focusCpt () {
|
|
this.$emit('focusCpt', this.item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" src="@/assets/scss/modules/wx-mini/score.scss"></style>
|
|
|