33 changed files with 805 additions and 1044 deletions
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<div class="follow-up"> |
||||
|
<div class="content"> |
||||
|
<div class="left"> |
||||
|
<div class="total"> |
||||
|
<div class="tit">回访总数</div> |
||||
|
<div class="num"><span>{{ sumNum ? sumNum : 0 }}</span>个</div> |
||||
|
</div> |
||||
|
<div class="left-item"> |
||||
|
<div class="tit">电话回访</div> |
||||
|
<div class="num"><span>{{ mobileNum ? mobileNum : 0 }}</span>个</div> |
||||
|
</div> |
||||
|
<div class="left-item"> |
||||
|
<div class="tit">上门回访</div> |
||||
|
<div class="num"><span>{{ visitNum ? visitNum : 0 }}</span>个</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="xc"> |
||||
|
<div class="tit">回访消除 <br/> 风险人数</div> |
||||
|
<div class="num blue">{{ notRiskyNum ? notRiskyNum : 0 }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "FollowUp", |
||||
|
props: { |
||||
|
date: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
org: this.$store.state.chooseArea.chooseName, |
||||
|
typeList: [{ |
||||
|
label: '12345事件', |
||||
|
value: '12345' |
||||
|
}, { |
||||
|
label: '事件回访', |
||||
|
value: 'follow' |
||||
|
}], |
||||
|
type: 'follow', |
||||
|
sumNum: 0, |
||||
|
mobileNum: 0, |
||||
|
visitNum: 0, |
||||
|
notRiskyNum: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
"$store.state.chooseArea.chooseName"(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
date() { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.org.orgId) { |
||||
|
this.getData() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
this.$http.get('/actual/base/streetOverview/eventAndFollowGroup?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId + '&queryType=' + this.type).then(({data: {data}}) => { |
||||
|
this.sumNum = data.sumNum |
||||
|
this.mobileNum = data.mobileNum |
||||
|
this.visitNum = data.visitNum |
||||
|
this.notRiskyNum = data.notRiskyNum |
||||
|
}) |
||||
|
}, |
||||
|
typeChange(val) { |
||||
|
console.log(val,'val') |
||||
|
this.type = val |
||||
|
this.getData() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.follow-up { |
||||
|
padding: 10px 16px; |
||||
|
} |
||||
|
.content { |
||||
|
background: linear-gradient(90deg, rgba(1, 94, 234, 0.1) 0%, rgba(16, 50, 103, 0) 50%, rgba(1, 94, 234, 0.1) 100%); |
||||
|
padding: 40px 19px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
border-right: 1px solid #96B1CE; |
||||
|
padding-right: 35px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.total { |
||||
|
.tit { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
|
||||
|
span { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #08EBAE; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.left-item { |
||||
|
margin-left: 24px; |
||||
|
.tit { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #A3B9DA; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
span { |
||||
|
font-size: 30px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #78C4F3; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.xc { |
||||
|
.tit { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #FFB73C; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<div class="m-subbox m-sqrfph"> |
||||
|
<div class="table"> |
||||
|
<div class="tr"> |
||||
|
<div class="th">排名</div> |
||||
|
<div class="th">社区</div> |
||||
|
<div class="th">房屋更新数</div> |
||||
|
<div class="th">人口更新数</div> |
||||
|
<div class="th">人房更新总数</div> |
||||
|
</div> |
||||
|
<div class="tr" v-for="(item,index) in pmList" :key="index"> |
||||
|
<div :class="index - 0 + 1 < 4 ? `td tdbg${index-0+1}` : 'td'"> |
||||
|
{{ index - 0 + 1 }} |
||||
|
</div> |
||||
|
<div class="td">{{ item.orgName }}</div> |
||||
|
<div class="td">{{ item.houseNum }}</div> |
||||
|
<div class="td">{{ item.residentNum }}</div> |
||||
|
<div class="td">{{ item.sumNum }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "GridUpdateRanking", |
||||
|
props: { |
||||
|
date: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
org: this.$store.state.chooseArea.chooseName, |
||||
|
pmList: [], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
"$store.state.chooseArea.chooseName"(val) { |
||||
|
if (val.orgId) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
date() { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.org.orgId) { |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.$http.get('/actual/base/streetOverview/residentHouseUpdateGroup?level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => { |
||||
|
this.pmList = data |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped/> |
||||
|
<style lang="scss" scoped> |
||||
|
.m-sqrfph { |
||||
|
padding-top: 0 !important; |
||||
|
height: 160px !important; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -1,150 +0,0 @@ |
|||||
<template> |
|
||||
<div class="business-records"> |
|
||||
<Tabs v-model="type" :list="typeList" @changeVal="typeChange"/> |
|
||||
<div class="table"> |
|
||||
<el-table :data="list"> |
|
||||
<el-table-column |
|
||||
label="序号" |
|
||||
type="index" |
|
||||
width="80"/> |
|
||||
<el-table-column |
|
||||
label="评价周期" |
|
||||
prop="key" |
|
||||
width=""/> |
|
||||
<el-table-column |
|
||||
label="姓名" |
|
||||
prop="key" |
|
||||
width=""/> |
|
||||
<el-table-column |
|
||||
label="电话" |
|
||||
prop="key" |
|
||||
width=""/> |
|
||||
<el-table-column |
|
||||
label="不满意类型" |
|
||||
prop="key" |
|
||||
width=""/> |
|
||||
<el-table-column |
|
||||
label="不满意原因" |
|
||||
prop="key" |
|
||||
width=""/> |
|
||||
<el-table-column label="操作" width="90" align="center"> |
|
||||
<template slot-scope="data"> |
|
||||
<el-button type="text" @click="handleView">查看</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<Pagination |
|
||||
v-show="total>0" |
|
||||
:total="total" |
|
||||
:page.sync="queryParams.pageNum" |
|
||||
:limit.sync="queryParams.pageSize" |
|
||||
@pagination="getList" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
|
||||
|
|
||||
export default { |
|
||||
name: "BusinessRecords", |
|
||||
components: {Tabs}, |
|
||||
data() { |
|
||||
return { |
|
||||
total: 10, |
|
||||
queryParams: { |
|
||||
pageNum: 0, |
|
||||
pageSize: 10, |
|
||||
}, |
|
||||
type: 1, |
|
||||
typeList: [{ |
|
||||
label: ' 12345投诉', |
|
||||
value: 1 |
|
||||
}, { |
|
||||
label: '省满意度调查', |
|
||||
value: 2 |
|
||||
}, { |
|
||||
label: '社区满意度自查', |
|
||||
value: 3 |
|
||||
}, { |
|
||||
label: '事件', |
|
||||
value: 4 |
|
||||
}, { |
|
||||
label: '需求', |
|
||||
value: 5 |
|
||||
}, { |
|
||||
label: '服务', |
|
||||
value: 6 |
|
||||
}, { |
|
||||
label: '回访记录', |
|
||||
value: 7 |
|
||||
}], |
|
||||
list: [{},{},{},{},{}] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
typeChange() { |
|
||||
|
|
||||
}, |
|
||||
getList() { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.business-records { |
|
||||
margin-bottom: 25px; |
|
||||
} |
|
||||
.table { |
|
||||
/deep/ .el-table td, /deep/ .el-table th, /deep/ .el-table tr { |
|
||||
padding: 14px !important; |
|
||||
border:none!important; |
|
||||
min-height: 52px; |
|
||||
|
|
||||
} |
|
||||
/deep/ .el-table td, /deep/ .el-table th { |
|
||||
background: none!important; |
|
||||
} |
|
||||
/deep/ .el-table td { |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
text-shadow: 1px 2px 4px rgba(10,32,60,0.51); |
|
||||
} |
|
||||
|
|
||||
/deep/ .el-table tr { |
|
||||
background: none; |
|
||||
&:hover { |
|
||||
background-color: rgba(26, 149, 255, 0.3) !important; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
/deep/ .el-table__body-wrapper tr:nth-of-type(odd) { |
|
||||
background: rgba(14, 56, 115, 0.4); |
|
||||
} |
|
||||
|
|
||||
/deep/ .el-table { |
|
||||
background: none !important; |
|
||||
|
|
||||
&:before { |
|
||||
background: none; |
|
||||
} |
|
||||
} |
|
||||
/deep/ .el-table__header-wrapper tr { |
|
||||
color: #A3B9DA !important; |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
opacity: 0.76; |
|
||||
background: none; |
|
||||
&:hover { |
|
||||
background: none!important; |
|
||||
} |
|
||||
} |
|
||||
/deep/ .el-table__header-wrapper { |
|
||||
background: none!important; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,188 +0,0 @@ |
|||||
<template> |
|
||||
<div className="event-statistics"> |
|
||||
<div id="enjoyServiceChart" style="height: 360px;"></div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as echarts from "echarts"; |
|
||||
|
|
||||
export default { |
|
||||
name: "EnjoyService", |
|
||||
data() { |
|
||||
return {} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.initCharts() |
|
||||
}, |
|
||||
methods: { |
|
||||
initCharts() { |
|
||||
let div = document.getElementById('enjoyServiceChart'); |
|
||||
this.myChart = echarts.init(div); |
|
||||
|
|
||||
let xData = ['岗位找人', '技能找人', '温暖找人', '服务找人']; |
|
||||
let tq = [300, 90, 48, 39]; |
|
||||
const max = Math.max(...tq) |
|
||||
|
|
||||
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) |
|
||||
var option = { |
|
||||
title: { |
|
||||
show: false, |
|
||||
text: '', |
|
||||
x: 'center', |
|
||||
top: '15px', |
|
||||
textStyle: { |
|
||||
color: '#333333', |
|
||||
fontWeight: 500, |
|
||||
fontSize: 18, |
|
||||
}, |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
backgroundColor: 'rgba(13, 64, 71, 0.50)', |
|
||||
borderColor: 'rgba(143, 225, 252, 0.60)', |
|
||||
padding: 8, |
|
||||
textStyle: { |
|
||||
color: '#fff', |
|
||||
}, |
|
||||
formatter: function (params) { |
|
||||
console.log(params) |
|
||||
var res = '' |
|
||||
for (var i = 0; i < params.length; i++) { |
|
||||
if (params[i].seriesName != "") { |
|
||||
res += '<p>' + params[0].name + ':' + params[i].data + '</p>' |
|
||||
} |
|
||||
} |
|
||||
return res; |
|
||||
}, |
|
||||
}, |
|
||||
grid: { |
|
||||
top: '0', |
|
||||
left: '1%', |
|
||||
right: '2%', |
|
||||
bottom: '0', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLine: { |
|
||||
lineStyle: { |
|
||||
color: '#323c41' |
|
||||
} |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
align: 'right', |
|
||||
textStyle: { |
|
||||
fontSize: 12, |
|
||||
color: '#A3B9DA' |
|
||||
} |
|
||||
}, |
|
||||
boundaryGap: true, |
|
||||
data: xData, |
|
||||
}, { |
|
||||
type: 'category', |
|
||||
data: xData, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
}, |
|
||||
axisLine: {show: false}, |
|
||||
axisLabel: { |
|
||||
show: false, |
|
||||
}, |
|
||||
boundaryGap: true, |
|
||||
|
|
||||
} |
|
||||
], |
|
||||
|
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'value', |
|
||||
splitLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
color: 'rgba(4,187,255,0.18)', |
|
||||
type: 'dashed' |
|
||||
}, |
|
||||
}, |
|
||||
nameTextStyle: { |
|
||||
color: '#A3B9DA', |
|
||||
textStyle: { |
|
||||
fontSize: 12 |
|
||||
}, |
|
||||
align: 'center' |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
show: true, |
|
||||
color: '#A3B9DA', |
|
||||
textStyle: { |
|
||||
fontSize: 12 |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
} |
|
||||
} |
|
||||
], |
|
||||
series: [ |
|
||||
{ |
|
||||
type: 'bar', |
|
||||
barWidth: 16, |
|
||||
itemStyle: { |
|
||||
// lenged文本 |
|
||||
opacity: 1, // 这个是 透明度 |
|
||||
color: new echarts.graphic.LinearGradient( |
|
||||
1, |
|
||||
0, |
|
||||
0, |
|
||||
0, |
|
||||
[ |
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: '#6EDDFE' // 0% 处的颜色 |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: '#0B1F57' // 100% 处的颜色 |
|
||||
} |
|
||||
], |
|
||||
false |
|
||||
) |
|
||||
}, |
|
||||
data: tq, //data.values |
|
||||
}, |
|
||||
{ |
|
||||
name: '', |
|
||||
type: 'bar', |
|
||||
|
|
||||
barWidth: 66, |
|
||||
barGap: '-60%', |
|
||||
data: barArray, |
|
||||
itemStyle: { |
|
||||
normal: { |
|
||||
color: 'rgba(89,130,194,0.12)' |
|
||||
} |
|
||||
}, |
|
||||
zlevel: -1, |
|
||||
yAxisIndex: 1, |
|
||||
} |
|
||||
], |
|
||||
}; |
|
||||
this.myChart.setOption(option); |
|
||||
window.addEventListener("resize", () => this.myChart.resize()); |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.event-statistics { |
|
||||
padding: 16px 16px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,76 +0,0 @@ |
|||||
<template> |
|
||||
<div class="family"> |
|
||||
<div class="tag"> |
|
||||
<div>张三(户主)</div> |
|
||||
<div>入户状态：入户一致</div> |
|
||||
<div>居民分类：老年人</div> |
|
||||
</div> |
|
||||
<div class="tag"> |
|
||||
<div>张三(户主)</div> |
|
||||
<div>入户状态：入户一致</div> |
|
||||
<div>居民分类：老年人</div> |
|
||||
</div> |
|
||||
<div class="tag"> |
|
||||
<div>张三(户主)</div> |
|
||||
<div>入户状态：入户一致</div> |
|
||||
</div> |
|
||||
<div class="tag"> |
|
||||
<div>张三(户主)</div> |
|
||||
<div>入户状态：入户一致</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: "Family" |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.family { |
|
||||
width: 464px; |
|
||||
height: 340px; |
|
||||
background: url('@/assets/images/manyidu/gx_bg.png') no-repeat center; |
|
||||
position: relative; |
|
||||
margin: 40px auto; |
|
||||
} |
|
||||
.tag { |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
line-height: 22px; |
|
||||
padding: 18px 24px; |
|
||||
box-sizing: border-box; |
|
||||
position: absolute; |
|
||||
&:nth-of-type(1), |
|
||||
&:nth-of-type(2) { |
|
||||
background: url("@/assets/images/manyidu/gx_big.png") no-repeat center; |
|
||||
width: 180px; |
|
||||
height: 100px; |
|
||||
} |
|
||||
&:nth-of-type(3), |
|
||||
&:nth-of-type(4) { |
|
||||
background: url("@/assets/images/manyidu/gx_small.png") no-repeat center; |
|
||||
width: 180px; |
|
||||
height: 70px; |
|
||||
padding: 15px 24px; |
|
||||
} |
|
||||
&:nth-of-type(1) { |
|
||||
left: -98px; |
|
||||
top: 34px; |
|
||||
} |
|
||||
&:nth-of-type(2) { |
|
||||
right: -68px; |
|
||||
top: 34px; |
|
||||
} |
|
||||
&:nth-of-type(3) { |
|
||||
left: -91px; |
|
||||
bottom: 41px; |
|
||||
} |
|
||||
&:nth-of-type(4) { |
|
||||
right: -44px; |
|
||||
bottom: 41px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,93 +0,0 @@ |
|||||
<template> |
|
||||
<div class="matter-details"> |
|
||||
<div class="user-img"> |
|
||||
<img src="@/assets/images/manyidu/dn_bg1.png" alt=""> |
|
||||
</div> |
|
||||
<div class="tags"> |
|
||||
<div class="tag red">满意度风险人员</div> |
|
||||
<div class="tag small">与子女同住</div> |
|
||||
<div class="tag">第三网格</div> |
|
||||
<div class="tag small">入户一致</div> |
|
||||
<div class="tag">13343999999</div> |
|
||||
<div class="tag">四季景园1号楼1单元101</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: "MatterDetails" |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.matter-details { |
|
||||
width: 607px; |
|
||||
height: 372px; |
|
||||
background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom; |
|
||||
position: relative; |
|
||||
margin: 12px auto 60px; |
|
||||
} |
|
||||
.user-img { |
|
||||
position: absolute; |
|
||||
left: calc(50% - 87px); |
|
||||
top: calc(50% - 37px); |
|
||||
} |
|
||||
.tag { |
|
||||
position: absolute; |
|
||||
background: url("@/assets/images/manyidu/dn_big.png") center no-repeat; |
|
||||
width: 108px; |
|
||||
height: 107px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
line-height: 16px; |
|
||||
box-sizing: border-box; |
|
||||
padding: 24px; |
|
||||
text-align: center; |
|
||||
word-break: break-all; |
|
||||
&.small { |
|
||||
width: 89px; |
|
||||
height: 89px; |
|
||||
background: url("@/assets/images/manyidu/dn_small.png") center no-repeat; |
|
||||
padding: 16px; |
|
||||
} |
|
||||
&.red { |
|
||||
background: url("@/assets/images/manyidu/dn_red.png") center no-repeat; |
|
||||
color: #FE0000; |
|
||||
} |
|
||||
&:nth-of-type(1) { |
|
||||
left: 0; |
|
||||
bottom: 15px; |
|
||||
} |
|
||||
|
|
||||
&:nth-of-type(2) { |
|
||||
left: 42px; |
|
||||
bottom: 185px; |
|
||||
} |
|
||||
|
|
||||
&:nth-of-type(3) { |
|
||||
left: 194px; |
|
||||
bottom: 245px; |
|
||||
} |
|
||||
|
|
||||
&:nth-of-type(4) { |
|
||||
left: 384px; |
|
||||
bottom: 240px; |
|
||||
} |
|
||||
|
|
||||
&:nth-of-type(5) { |
|
||||
left: 499px; |
|
||||
bottom: 157px; |
|
||||
} |
|
||||
|
|
||||
&:nth-of-type(6) { |
|
||||
left: 453px; |
|
||||
bottom: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,51 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div class="enjoy-service"> |
|
||||
<div class="enjoy-service-item" v-for="(item,index) in 5"> |
|
||||
<div class="num">+10</div> |
|
||||
<div class="info"> |
|
||||
<div class="title">便民服务-配餐服务</div> |
|
||||
<div class="time">2023-07-15 15:30:30</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: "PointsRecord" |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
|
|
||||
.enjoy-service { |
|
||||
padding-left: 26px; |
|
||||
} |
|
||||
.enjoy-service-item { |
|
||||
color: #FFFFFF; |
|
||||
display: flex; |
|
||||
padding: 14px 16px 14px; |
|
||||
margin-bottom: 8px; |
|
||||
background: #07266B; |
|
||||
.num { |
|
||||
font-size: 24px; |
|
||||
font-weight: 500; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
.info { |
|
||||
font-size: 14px; |
|
||||
margin-left: 40px; |
|
||||
.title { |
|
||||
font-weight: 500; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.time { |
|
||||
font-weight: 400; |
|
||||
color: #A3B9DA; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue