<template>
|
<div class="shuju-table">
|
<div class="shuju-table-line">
|
<div class="biao-title"></div>
|
<div class="title-flex">
|
<div class="title" v-for="(item,index) in shiyeHeardData" :key="index">
|
<h1>{{item.name}}</h1>
|
</div>
|
<!--<div class="title">
|
<h1>本年同比</h1>
|
</div>
|
<div class="title">
|
<h1>同比</h1>
|
</div>
|
<div class="title">
|
<h1>上月</h1>
|
</div>
|
<div class="title">
|
<h1>环比</h1>
|
</div>-->
|
</div>
|
</div>
|
<div class="shuju-scroll">
|
<div class="shuju-table-line2" v-for="(item, index) in shiyeTable" :key="index">
|
<div class="biao-title">
|
<h1>{{item.item}}</h1>
|
</div>
|
<div class="title-flex">
|
<div class="title" v-for="(e,i) in item.dataList" :key="i">
|
<h1 :class="[e.flag && e.flag == 'up' ? 'fontColorBlue' : (e.flag && e.flag == 'down' ? 'fontColorRed' : '')]">{{e.val}}</h1>
|
</div>
|
<!--<div class="title">
|
<h1>128417</h1>
|
</div>
|
<div class="title">
|
<h1 class="fontColor">111.2%</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>-->
|
</div>
|
</div>
|
<!--<div class="shuju-table-line2">
|
<div class="biao-title">
|
<h1>收入（亿元）</h1>
|
</div>
|
<div class="title-flex">
|
<div class="title">
|
<h1>138957</h1>
|
</div>
|
<div class="title">
|
<h1>128417</h1>
|
</div>
|
<div class="title">
|
<h1 class="fontColor">111.2%</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
</div>
|
</div>
|
<div class="shuju-table-line2">
|
<div class="biao-title">
|
<h1>支出（亿元）</h1>
|
</div>
|
<div class="title-flex">
|
<div class="title">
|
<h1>138957</h1>
|
</div>
|
<div class="title">
|
<h1>128417</h1>
|
</div>
|
<div class="title">
|
<h1 class="fontColor">111.2%</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
</div>
|
</div>
|
<div class="shuju-table-line2">
|
<div class="biao-title">
|
<h1>本月结余（亿元）</h1>
|
</div>
|
<div class="title-flex">
|
<div class="title">
|
<h1>138957</h1>
|
</div>
|
<div class="title">
|
<h1>128417</h1>
|
</div>
|
<div class="title">
|
<h1 class="fontColor">111.2%</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
</div>
|
</div>
|
<div class="shuju-table-line2">
|
<div class="biao-title">
|
<h1>累计结余（亿元）</h1>
|
</div>
|
<div class="title-flex">
|
<div class="title">
|
<h1>138957</h1>
|
</div>
|
<div class="title">
|
<h1>128417</h1>
|
</div>
|
<div class="title">
|
<h1 class="fontColor">111.2%</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
<div class="title">
|
<h1>125000</h1>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {getInsurTable} from '@/api/index'
|
export default {
|
name: "shiyeAndgongshangBaoxian",
|
props: {
|
typeString: {
|
type: String,
|
default: '4'
|
}
|
},
|
data() {
|
return {
|
shiyeHeardData: [],
|
shiyeTable: []
|
}
|
},
|
mounted() {
|
this.getInsurTable()
|
},
|
methods: {
|
getInsurTable() {
|
getInsurTable({type: this.typeString}).then(res => {
|
if(res.code === 1000) {
|
this.shiyeTable = res.list
|
this.shiyeTable.forEach((item,index) => {
|
if(index == 0) {
|
this.shiyeHeardData = item.dataList
|
console.log(this.shiyeHeardData,'this.shiyeHeardData')
|
}
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../../assets/css/base";
|
@import "../../../assets/css/mixin";
|
.shuju-table {
|
width: 3.1328125rem /* 802/256 */;
|
height: 1.2109375rem /* 310/256 */;
|
display: flex;
|
flex-direction: column;
|
|
.shuju-table-line {
|
width: 100%;
|
display: flex;
|
|
.biao-title {
|
width: 0.859375rem /* 220/256 */;
|
}
|
|
.title-flex {
|
width: calc(100% - 0.859375rem);
|
display: flex;
|
}
|
|
.title {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
h1 {
|
font-size: $fontSize-26;
|
color: $color-white;
|
text-align: center;
|
}
|
}
|
|
}
|
|
.shuju-scroll {
|
max-height: 1.09375rem /* 280/256 */
|
;
|
@include overflow-y()
|
}
|
|
.shuju-table-line2 {
|
width: 100%;
|
display: flex;
|
padding: 0.0390625rem /* 10/256 */
|
0;
|
|
&:nth-child(odd) {
|
background: rgba(81, 210, 255, 0.10);
|
}
|
|
.title {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
h1 {
|
font-size: $fontSize-26;
|
color: $color-white;
|
text-align: center;
|
line-height: 1.5;
|
}
|
|
.fontColorBlue {
|
color: $color-blue;
|
}
|
.fontColorRed {
|
color: #FF3939;
|
}
|
}
|
|
.title-flex {
|
width: calc(100% - 0.859375rem);
|
display: flex;
|
}
|
|
.biao-title {
|
width: 0.859375rem /* 220/256 */
|
;
|
|
h1 {
|
font-size: $fontSize-26;
|
color: $color-white;
|
text-align: right;
|
line-height: 1.5;
|
@include ellipsis()
|
}
|
|
.fontColor {
|
color: $color-blue;
|
}
|
}
|
}
|
// 城市职工养老第2，3条数据
|
.chengzhen_scroll {
|
&:nth-of-type(2) {
|
background: rgba(81, 210, 255, 0.10);
|
|
h1 {
|
font-size: 24px;
|
line-height: 1;
|
color: #999999;
|
}
|
}
|
|
&:nth-of-type(3) {
|
background: rgba(81, 210, 255, 0.10);
|
|
h1 {
|
font-size: 24px;
|
line-height: 1;
|
color: #999999;
|
|
}
|
}
|
}
|
|
.shuju-bj-color {
|
background: rgba(81, 210, 255, 0.10);
|
}
|
}
|
</style>
|
