From 41d6da7f5f8f0ce37c3521f6c4d639ab77ed9aac Mon Sep 17 00:00:00 2001 From: 付延余 <f-yanyu@outlook.com> Date: 星期五, 29 四月 2022 14:49:52 +0800 Subject: [PATCH] 其他业务 --- src/pages/show/index/index.vue | 2260 +++++++++++++++++++++++++++-------------------------------- 1 files changed, 1,044 insertions(+), 1,216 deletions(-) diff --git a/src/pages/show/index/index.vue b/src/pages/show/index/index.vue index a906a49..7282399 100644 --- a/src/pages/show/index/index.vue +++ b/src/pages/show/index/index.vue @@ -329,118 +329,118 @@ </div> </div> <div class="shuju-scroll"> - <div class="shuju-table-line2"> + <div class="shuju-table-line2 chengzhen_scroll" v-for="(item,index) in TownTable" :key="index"> <div class="biao-title"> - <h1>浜烘暟锛堜竾浜猴級</h1> + <h1>{{ item.name }}</h1> </div> <div class="title-flex"> <div class="title"> - <h1>277.8</h1> + <h1>{{ item.total }}</h1> </div> <div class="title"> - <h1>35.5</h1> + <h1>{{ item.office }}</h1> </div> <div class="title"> - <h1>242.3</h1> + <h1>{{ item.enterprise }}</h1> </div> </div> </div> - <div class="shuju-table-line2 shuju-bj-color"> - <div class="biao-title"> - <h1>鍦ㄨ亴锛堜竾浜猴級</h1> - </div> - <div class="title-flex"> - <div class="title"> - <h1>217.8</h1> - </div> - <div class="title"> - <h1>13.5</h1> - </div> - <div class="title"> - <h1>142.3</h1> - </div> - </div> - </div> - <div class="shuju-table-line2"> - <div class="biao-title"> - <h1>绂婚��浼戯紙涓囦汉锛�</h1> - </div> - <div class="title-flex"> - <div class="title"> - <h1>23.8</h1> - </div> - <div class="title"> - <h1>16.5</h1> - </div> - <div class="title"> - <h1>52.3</h1> - </div> - </div> - </div> - <div class="shuju-table-line2"> - <div class="biao-title"> - <h1>渚涘吇姣�</h1> - </div> - <div class="title-flex"> - <div class="title"> - <h1>3.8</h1> - </div> - <div class="title"> - <h1>2.5</h1> - </div> - <div class="title"> - <h1>1.3</h1> - </div> - </div> - </div> - <div class="shuju-table-line2"> - <div class="biao-title"> - <h1>鏀跺叆锛堜嚎鍏冿級</h1> - </div> - <div class="title-flex"> - <div class="title"> - <h1>233.8</h1> - </div> - <div class="title"> - <h1>24.5</h1> - </div> - <div class="title"> - <h1>341.3</h1> - </div> - </div> - </div> - <div class="shuju-table-line2"> - <div class="biao-title"> - <h1>鏀嚭锛堜嚎鍏冿級</h1> - </div> - <div class="title-flex"> - <div class="title"> - <h1>533.8</h1> - </div> - <div class="title"> - <h1>84.5</h1> - </div> - <div class="title"> - <h1>541.3</h1> - </div> - </div> - </div> - <div class="shuju-table-line2"> - <div class="biao-title"> - <h1>缁撲綑锛堜嚎鍏冿級</h1> - </div> - <div class="title-flex"> - <div class="title"> - <h1>33.8</h1> - </div> - <div class="title"> - <h1>34.5</h1> - </div> - <div class="title"> - <h1>341.3</h1> - </div> - </div> - </div> + <!-- <div class="shuju-table-line2 shuju-bj-color">--> + <!-- <div class="biao-title">--> + <!-- <h1>鍦ㄨ亴锛堜竾浜猴級</h1>--> + <!-- </div>--> + <!-- <div class="title-flex">--> + <!-- <div class="title">--> + <!-- <h1>217.8</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>13.5</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>142.3</h1>--> + <!-- </div>--> + <!-- </div>--> + <!-- </div>--> + <!-- <div class="shuju-table-line2">--> + <!-- <div class="biao-title">--> + <!-- <h1>绂婚��浼戯紙涓囦汉锛�</h1>--> + <!-- </div>--> + <!-- <div class="title-flex">--> + <!-- <div class="title">--> + <!-- <h1>23.8</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>16.5</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>52.3</h1>--> + <!-- </div>--> + <!-- </div>--> + <!-- </div>--> + <!-- <div class="shuju-table-line2">--> + <!-- <div class="biao-title">--> + <!-- <h1>渚涘吇姣�</h1>--> + <!-- </div>--> + <!-- <div class="title-flex">--> + <!-- <div class="title">--> + <!-- <h1>3.8</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>2.5</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>1.3</h1>--> + <!-- </div>--> + <!-- </div>--> + <!-- </div>--> + <!-- <div class="shuju-table-line2">--> + <!-- <div class="biao-title">--> + <!-- <h1>鏀跺叆锛堜嚎鍏冿級</h1>--> + <!-- </div>--> + <!-- <div class="title-flex">--> + <!-- <div class="title">--> + <!-- <h1>233.8</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>24.5</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>341.3</h1>--> + <!-- </div>--> + <!-- </div>--> + <!-- </div>--> + <!-- <div class="shuju-table-line2">--> + <!-- <div class="biao-title">--> + <!-- <h1>鏀嚭锛堜嚎鍏冿級</h1>--> + <!-- </div>--> + <!-- <div class="title-flex">--> + <!-- <div class="title">--> + <!-- <h1>533.8</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>84.5</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>541.3</h1>--> + <!-- </div>--> + <!-- </div>--> + <!-- </div>--> + <!-- <div class="shuju-table-line2">--> + <!-- <div class="biao-title">--> + <!-- <h1>缁撲綑锛堜嚎鍏冿級</h1>--> + <!-- </div>--> + <!-- <div class="title-flex">--> + <!-- <div class="title">--> + <!-- <h1>33.8</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>34.5</h1>--> + <!-- </div>--> + <!-- <div class="title">--> + <!-- <h1>341.3</h1>--> + <!-- </div>--> + <!-- </div>--> + <!-- </div>--> </div> </div> <div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div> @@ -454,142 +454,7 @@ <h1>澶变笟淇濋櫓</h1> </div> <div class="shuju-main-box"> - <div class="shuju-table"> - <div class="shuju-table-line"> - <div class="biao-title"></div> - <div class="title-flex"> - <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 class="title"> - <h1>鐜瘮</h1> - </div> - </div> - </div> - <div class="shuju-scroll"> - <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 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> + <shiyeAndgongshangBaoxian typeString="4"></shiyeAndgongshangBaoxian> <div class="shuju-echarts" id="shiyeBaoxianEcharts"></div> </div> @@ -599,141 +464,7 @@ <h1>宸ヤ激淇濋櫓</h1> </div> <div class="shuju-main-box"> - <div class="shuju-table"> - <div class="shuju-table-line"> - <div class="biao-title"></div> - <div class="title-flex"> - <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 class="title"> - <h1>鐜瘮</h1> - </div> - </div> - </div> - <div class="shuju-scroll"> - <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 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> + <shiyeAndgongshangBaoxian typeString="5"></shiyeAndgongshangBaoxian> <div class="shuju-echarts" id="gongshangBaoxianEcharts"></div> </div> @@ -742,903 +473,1000 @@ </div> </template> <script> - import echarts from "echarts/lib/echarts"; - import nowSize from "../../../libs/nowSize"; - import { - getInsured, - getInstitution, - getIncome, - getMigrant, - getLoan, - getPersonnel, - getLabourTable, - getLabourChart - } from "@/api/index"; +import echarts from "echarts/lib/echarts"; +import nowSize from "../../../libs/nowSize"; +import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian"; +import { + getInsured, + getInstitution, + getIncome, + getMigrant, + getLoan, + getPersonnel, + getLabourTable, + getLabourChart, + getInsuranceChart, + getTownTable +} from "@/api/index"; - export default { - name: "index", - data() { - return { - // 琚繚闄╀汉 - Insured: {}, - // 棣栭〉甯傜洿鍗曚綅鏁版嵁 - Institution: {}, - // 浜哄潎鍙敮閰嶆敹鍏� - Income: {}, - // 鏌ヨ娆犺柂杩界即 - Migrant: {}, - // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 - Loan: {}, - // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 - Personnel: {}, - // 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 - LabourTable: {}, - // 25.棣栭〉灏变笟鏁版嵁鎶樼嚎鍥� - addJob: [], - reJob: [], - hardJob: [], - LabourChartYear: [] - } +export default { + name: "index", + components: { + shiyeAndgongshangBaoxian + }, + data() { + return { + // 琚繚闄╀汉 + Insured: {}, + // 棣栭〉甯傜洿鍗曚綅鏁版嵁 + Institution: {}, + // 浜哄潎鍙敮閰嶆敹鍏� + Income: {}, + // 鏌ヨ娆犺柂杩界即 + Migrant: {}, + // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 + Loan: {}, + // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 + Personnel: {}, + // 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 + LabourTable: {}, + // 25.棣栭〉灏变笟鏁版嵁鎶樼嚎鍥� + JiuYeEchart: { + addJob: [], + reJob: [], + hardJob: [], + LabourChartYear: [] + }, + // 26. 鏌ヨ棣栭〉鍏昏�併�佸伐浼ゃ�佸け涓氫繚闄╂姌绾垮浘鎺ュ彛 + // 鍩庨晣鑱屽伐鍏昏�� + YangLaoEchart: { + years: [], + shouru: [], + zhichu: [], + jieyu: [] + }, + // 澶变笟淇濋櫓 + ShiYeEchart: { + years: [], + shouru: [], + zhichu: [], + jieyu: [] + }, + // 宸ヤ激 + GongShangEchart: { + years: [], + shouru: [], + zhichu: [], + jieyu: [] + }, + // 27. 鏌ヨ棣栭〉鍩庨晣鑱屽伐鍏昏�佽〃鏍兼暟鎹帴鍙� + TownTable: [], + // 28.澶变笟淇濋櫓 + type:'', + } + }, + mounted() { + this.jiuyeshujuEcharts() + this.chengzhenZhigongYanglaoEcharts() + this.shiyeBaoxianEcharts() + this.gongshangBaoxianEcharts() + this.getInsured() + this.getInstitution() + this.getIncome() + this.getMigrant() + this.getLoan() + this.getPersonnel() + this.getLabourTable() + this.getLabourChart() + this.getInsuranceChart() + this.getTownTable() + // this.getshiyeTable() + // this.getGongshangTable() + }, + filters: { + dataFilter(type) { + switch (type) { + case '1': + return '鍩庨晣鏂板灏变笟浜烘暟' + break + case '2': + return '鍩庨晣澶变笟浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' + break + case '3': + return '鍩庨晣灏变笟鍥伴毦浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' + break + case '4': + return '鍐滄潙鍔冲姩鍔涘悜闈炲啘浜т笟杞Щ浜烘暟' + case '7': + return '鍩庨晣鐧昏澶变笟鐜�' + default: + break + } + } + }, + methods: { + /*灏变笟鏁版嵁*/ + jiuyeshujuEcharts() { + let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts')) + let option = { + color: ['#FF5151', '#51FF5D', '#FFD151'], + tooltip: { + show: true, + trigger: 'axis' }, - mounted() { - this.jiuyeshujuEcharts() - this.chengzhenZhigongYanglaoEcharts() - this.shiyeBaoxianEcharts() - this.gongshangBaoxianEcharts() - this.getInsured() - this.getInstitution() - this.getIncome() - this.getMigrant() - this.getLoan() - this.getPersonnel() - this.getLabourTable() - this.getLabourChart() + legend: { + itemWidth: nowSize(24), + itemHeight: nowSize(4), + itemGap: nowSize(10), + right: '0%', + top: '0%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(18), + } }, - filters: { - dataFilter(type) { - switch (type) { - case '1': - return '鍩庨晣鏂板灏变笟浜烘暟' - break - case '2': - return '鍩庨晣澶变笟浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' - break - case '3': - return '鍩庨晣灏变笟鍥伴毦浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' - break - case '4': - return '鍐滄潙鍔冲姩鍔涘悜闈炲啘浜т笟杞Щ浜烘暟' - case '7': - return '鍩庨晣鐧昏澶变笟鐜�' - default: - break - } - } + grid: { + top: '20%', + left: '3%', + right: '5%', + bottom: '3%', + containLabel: true }, - methods: { - /*灏变笟鏁版嵁*/ - jiuyeshujuEcharts() { - let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts')) - let option = { - color: ['#FF5151', '#51FF5D', '#FFD151'], - tooltip: { - show: true, - trigger: 'axis' - }, - legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], - itemWidth: nowSize(24), - itemHeight: nowSize(4), - itemGap: nowSize(10), - right: '0%', - top: '0%', - textStyle: { - color: '#FFFFFF', - fontSize: nowSize(18), - } - }, - grid: { - top: '20%', - left: '3%', - right: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: this.LabourChartYear, - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - yAxis: { - type: 'value', - axisLabel: { - show: false, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - }, - // 鍒诲害璁剧疆 - axisTick: { - show: false - } - }, - series: [{ - name: '鎬绘暟', - type: 'line', - data: this.addJob - }, - { - name: '鍦ㄨ亴鑱屽伐', - type: 'line', - data: this.reJob - }, - { - name: '绂婚��浼�', - type: 'line', - data: this.hardJob - }] - }; - myEchart.setOption(option) - window.addEventListener('resize', function () { - myEchart.resize() - }) - }, - /*鍩庨晣鑱屽伐鍏昏��*/ - chengzhenZhigongYanglaoEcharts() { - let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts')) - let option = { - color: ['#FF5151', '#51FF5D', '#FFD151'], - tooltip: { - show: true, - trigger: 'axis' - }, - legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], - itemWidth: nowSize(24), - itemHeight: nowSize(4), - itemGap: nowSize(10), - right: '0%', - top: '0%', - textStyle: { - color: '#FFFFFF', - fontSize: nowSize(18), - } - }, - grid: { - top: '20%', - left: '1%', - right: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - series: [ - { - name: '鎬绘暟', - type: 'line', - data: [370, 332, 401, 534, 490, 530, 910] - }, - { - name: '鍦ㄨ亴鑱屽伐', - type: 'line', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: '绂婚��浼�', - type: 'line', - data: [150, 132, 201, 154, 190, 330, 410] - } - ] - }; - myEchart.setOption(option) - window.addEventListener('resize', function () { - myEchart.resize() - }) - }, - /*澶变笟淇濋櫓*/ - shiyeBaoxianEcharts() { - let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts')) - let option = { - color: ['#FF5151', '#51FF5D', '#FFD151'], - tooltip: { - show: true, - trigger: 'axis' - }, - legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], - itemWidth: nowSize(24), - itemHeight: nowSize(4), - itemGap: nowSize(1), - right: '0%', - top: '0%', - textStyle: { - color: '#FFFFFF', - fontSize: nowSize(18), - } - }, - grid: { - top: '20%', - left: '1%', - right: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - series: [ - { - name: '鎬绘暟', - type: 'line', - data: [370, 332, 401, 534, 490, 530, 910] - }, - { - name: '鍦ㄨ亴鑱屽伐', - type: 'line', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: '绂婚��浼�', - type: 'line', - data: [150, 132, 201, 154, 190, 330, 410] - } - ] - }; - myEchart.setOption(option) - window.addEventListener('resize', function () { - myEchart.resize() - }) - }, - /*宸ヤ激淇濋櫓*/ - gongshangBaoxianEcharts() { - let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts')) - let option = { - color: ['#FF5151', '#51FF5D', '#FFD151'], - tooltip: { - show: true, - trigger: 'axis' - }, - legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], - itemWidth: nowSize(24), - itemHeight: nowSize(4), - itemGap: nowSize(10), - right: '0%', - top: '0%', - textStyle: { - color: '#FFFFFF', - fontSize: nowSize(18), - } - }, - grid: { - top: '20%', - left: '1%', - right: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - textStyle: { - color: "#fff", - fontSize: nowSize(20) - } - }, - axisLine: { - lineStyle: { - color: "#999999", - width: 1, - type: "solid" - } - }, - splitLine: { - show: false - } - }, - series: [ - { - name: '鎬绘暟', - type: 'line', - data: [370, 332, 401, 534, 490, 530, 910] - }, - { - name: '鍦ㄨ亴鑱屽伐', - type: 'line', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: '绂婚��浼�', - type: 'line', - data: [150, 132, 201, 154, 190, 330, 410] - } - ] - }; - myEchart.setOption(option) - window.addEventListener('resize', function () { - myEchart.resize() - }) - }, - // 鏌ヨ棣栭〉鍏昏�佷繚闄╁弬淇濅汉鏁帮紝绀句繚鍗′汉鏁� - getInsured() { - getInsured().then(res => { - if (res.code === 1000) { - this.Insured = res.obj - } else { - this.$message.error('鑾峰彇淇℃伅澶辫触') - } - }) - }, - // 鏌ヨ棣栭〉甯傜洿鍗曚綅鏁版嵁鎺ュ彛 - getInstitution() { - getInstitution().then(res => { - if (res.code === 1000) { - this.Institution = res.obj - } else { - this.$message.error('鑾峰彇淇℃伅澶辫触') - } - }) - }, - // 鏌ヨ浜哄潎鍙敮閰嶆敹鍏ユ暟鎹帴鍙� - getIncome() { - getIncome().then(res => { - if (res.code === 1000) { - this.Income = res.obj - } - }) - }, - // 鏌ヨ娆犺柂杩界即鏁版嵁鎺ュ彛 - getMigrant() { - getMigrant().then(res => { - if (res.code === 1000) { - this.Migrant = res.obj - } - }) - }, - // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 - getLoan() { - getLoan().then(res => { - if (res.code === 1000) { - this.Loan = res.obj - } - }) - }, - // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 - getPersonnel() { - getPersonnel().then(res => { - if (res.code === 1000) { - this.Personnel = res.obj - } - }) - }, - // 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 - getLabourTable() { - getLabourTable().then(res => { - this.LabourTable = res.list - }) - }, - // 25. 鏌ヨ棣栭〉灏变笟鏁版嵁鎶樼嚎鍥炬帴鍙� - getLabourChart() { - getLabourChart().then(res => { - console.log(res); - if (res.code === 1000) { - this.LabourChartYear = res.obj.years; - this.addJob = res.obj.addJob; - this.reJob = res.obj.hardJob; - this.hardJob = res.obj.reJob; - this.jiuyeshujuEcharts() - } - }) + xAxis: { + type: 'category', + boundaryGap: false, + data: this.JiuYeEchart.LabourChartYear, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + axisLabel: { + show: false, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + }, + // 鍒诲害璁剧疆 + axisTick: { + show: false + } + }, + series: [{ + name: '鍩庨晣鏂板灏变笟', + type: 'line', + data: this.JiuYeEchart.addJob + }, + { + name: '澶变笟鍐嶅氨涓�', + type: 'line', + data: this.JiuYeEchart.reJob + }, + { + name: '鍥伴毦鍐嶅氨涓�', + type: 'line', + data: this.JiuYeEchart.hardJob + }] + }; + myEchart.setOption(option) + window.addEventListener('resize', function () { + myEchart.resize() + }) + }, + /*鍩庨晣鑱屽伐鍏昏��*/ + chengzhenZhigongYanglaoEcharts() { + let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts')) + let option = { + color: ['#FF5151', '#51FF5D', '#FFD151'], + tooltip: { + show: true, + trigger: 'axis' + }, + legend: { + itemWidth: nowSize(24), + itemHeight: nowSize(4), + itemGap: nowSize(10), + right: '10%', + top: '0%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(18), + } + }, + grid: { + top: '20%', + left: '1%', + right: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: this.YangLaoEchart.years, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + series: [ + { + name: '鏀跺叆', + type: 'line', + data: this.YangLaoEchart.shouru + }, + { + name: '鏀嚭', + type: 'line', + data: this.YangLaoEchart.zhichu + }, + { + name: '缁撲綑', + type: 'line', + data: this.YangLaoEchart.jieyu + } + ] + }; + myEchart.setOption(option) + window.addEventListener('resize', function () { + myEchart.resize() + }) + }, + /*澶变笟淇濋櫓*/ + shiyeBaoxianEcharts() { + let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts')) + let option = { + color: ['#FF5151', '#51FF5D', '#FFD151'], + tooltip: { + show: true, + trigger: 'axis' + }, + legend: { + itemWidth: nowSize(24), + itemHeight: nowSize(4), + itemGap: nowSize(1), + right: '10%', + top: '0%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(18), + } + }, + grid: { + top: '20%', + left: '1%', + right: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: this.ShiYeEchart.years, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + series: [ + { + name: '鏀跺叆', + type: 'line', + data: this.ShiYeEchart.shouru + }, + { + name: '鏀嚭', + type: 'line', + data: this.ShiYeEchart.zhichu + }, + { + name: '缁撲綑', + type: 'line', + data: this.ShiYeEchart.jieyu + } + ] + }; + myEchart.setOption(option) + window.addEventListener('resize', function () { + myEchart.resize() + }) + }, + /*宸ヤ激淇濋櫓*/ + gongshangBaoxianEcharts() { + let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts')) + let option = { + color: ['#FF5151', '#51FF5D', '#FFD151'], + tooltip: { + show: true, + trigger: 'axis' + }, + legend: { + itemWidth: nowSize(24), + itemHeight: nowSize(4), + itemGap: nowSize(10), + right: '10%', + top: '0%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(18), + } + }, + grid: { + top: '20%', + left: '1%', + right: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: this.GongShangEchart.years, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: nowSize(20) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + series: [ + { + name: '鏀跺叆', + type: 'line', + data: this.GongShangEchart.shouru + }, + { + name: '鏀嚭', + type: 'line', + data: this.GongShangEchart.zhichu + }, + { + name: '缁撲綑', + type: 'line', + data: this.GongShangEchart.jieyu + } + ] + }; + myEchart.setOption(option) + window.addEventListener('resize', function () { + myEchart.resize() + }) + }, + // 鏌ヨ棣栭〉鍏昏�佷繚闄╁弬淇濅汉鏁帮紝绀句繚鍗′汉鏁� + getInsured() { + getInsured().then(res => { + if (res.code === 1000) { + this.Insured = res.obj + } else { + this.$message.error('鑾峰彇淇℃伅澶辫触') } - }; + }) + }, + // 鏌ヨ棣栭〉甯傜洿鍗曚綅鏁版嵁鎺ュ彛 + getInstitution() { + getInstitution().then(res => { + if (res.code === 1000) { + this.Institution = res.obj + } else { + this.$message.error('鑾峰彇淇℃伅澶辫触') + } + }) + }, + // 鏌ヨ浜哄潎鍙敮閰嶆敹鍏ユ暟鎹帴鍙� + getIncome() { + getIncome().then(res => { + if (res.code === 1000) { + this.Income = res.obj + } + }) + }, + // 鏌ヨ娆犺柂杩界即鏁版嵁鎺ュ彛 + getMigrant() { + getMigrant().then(res => { + if (res.code === 1000) { + this.Migrant = res.obj + } + }) + }, + // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 + getLoan() { + getLoan().then(res => { + if (res.code === 1000) { + this.Loan = res.obj + } + }) + }, + // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 + getPersonnel() { + getPersonnel().then(res => { + if (res.code === 1000) { + this.Personnel = res.obj + } + }) + }, + // 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 + getLabourTable() { + getLabourTable().then(res => { + this.LabourTable = res.list + }) + }, + // 25. 鏌ヨ棣栭〉灏变笟鏁版嵁鎶樼嚎鍥炬帴鍙� + async getLabourChart() { + await getLabourChart().then(res => { + if (res.code === 1000) { + this.JiuYeEchart.LabourChartYear = res.obj.years; + this.JiuYeEchart.addJob = res.obj.addJob; + this.JiuYeEchart.reJob = res.obj.hardJob; + this.JiuYeEchart.hardJob = res.obj.reJob; + this.jiuyeshujuEcharts() + } + }) + }, + // 26. 鏌ヨ棣栭〉鍏昏�併�佸伐浼ゃ�佸け涓氫繚闄╂姌绾垮浘鎺ュ彛 + async getInsuranceChart() { + // 鍩庨晣鑱屽伐鍏昏�� + await getInsuranceChart({type: 1}).then(res => { + if (res.code === 1000) { + this.YangLaoEchart.shouru = res.obj.shouru + this.YangLaoEchart.zhichu = res.obj.zhichu + this.YangLaoEchart.jieyu = res.obj.jieyu + this.YangLaoEchart.years = res.obj.years + this.chengzhenZhigongYanglaoEcharts() + } + }) + // 澶变笟淇濋櫓 + await getInsuranceChart({type: 5}).then(res => { + if (res.code === 1000) { + this.ShiYeEchart.shouru = res.obj.shouru + this.ShiYeEchart.zhichu = res.obj.zhichu + this.ShiYeEchart.jieyu = res.obj.jieyu + this.ShiYeEchart.years = res.obj.years + this.shiyeBaoxianEcharts() + } + }) + // 宸ヤ激淇濋櫓 + await getInsuranceChart({type: 6}).then(res => { + if (res.code === 1000) { + this.GongShangEchart.shouru = res.obj.shouru + this.GongShangEchart.zhichu = res.obj.zhichu + this.GongShangEchart.jieyu = res.obj.jieyu + this.GongShangEchart.years = res.obj.years + this.gongshangBaoxianEcharts() + } + }) + }, + // 27. 鏌ヨ棣栭〉鍩庨晣鑱屽伐鍏昏�佽〃鏍兼暟鎹帴鍙� + getTownTable() { + getTownTable().then(res => { + console.log(res); + if (res.code === 1000) { + this.TownTable = res.list + } + }) + } + } +}; </script> <style lang="scss" scoped> - @import "../../../assets/css/base"; - @import "../../../assets/css/mixin"; +@import "../../../assets/css/base"; +@import "../../../assets/css/mixin"; - .index-wrap { +.index-wrap { + width: 100%; + height: 100%; + padding: 0 0.078125rem /* 20/256 */ +; + box-sizing: border-box; + + .index-line-box { width: 100%; - height: 100%; - padding: 0 0.078125rem /* 20/256 */ + display: flex; + margin-top: 0.125rem /* 32/256 */ ; - box-sizing: border-box; - .index-line-box { - width: 100%; - display: flex; - margin-top: 0.125rem /* 32/256 */ + .yanglao-block { + width: 2.3046875rem /* 590/256 */ ; + height: 0.8984375rem /* 230/256 */ + ; + background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center; + background-size: 100% 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 0.078125rem /* 20/256 */ + ; + position: relative; - .yanglao-block { - width: 2.3046875rem /* 590/256 */ + img { + width: 0.3125rem /* 80/256 */ ; - height: 0.8984375rem /* 230/256 */ + height: 0.3125rem /* 80/256 */ ; - background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center; - background-size: 100% 100%; + } + + h1 { + color: #fff; + text-align: center; + font-size: $fontSize-24; + line-height: 1.3; + } + + h2 { + color: #fff; + font-size: $fontSize-20; + line-height: 1.3; + text-align: center; + + .bigger { + font-size: $fontSize-48; + color: $color-blue; + } + } + + .yanglao-block-inside { + width: 100%; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0 0.078125rem /* 20/256 */ - ; - position: relative; - img { - width: 0.3125rem /* 80/256 */ - ; - height: 0.3125rem /* 80/256 */ - ; - } - - h1 { - color: #fff; - text-align: center; - font-size: $fontSize-24; - line-height: 1.3; - } - - h2 { - color: #fff; - font-size: $fontSize-20; - line-height: 1.3; - text-align: center; - - .bigger { - font-size: $fontSize-48; - color: $color-blue; - } - } - - .yanglao-block-inside { - width: 100%; + .inside-left { display: flex; + flex: 1; + justify-content: right; + margin-left: 0.15625rem /* 40/256 */ + ; + } - .inside-left { - display: flex; - flex: 1; - justify-content: right; - margin-left: 0.15625rem /* 40/256 */ - ; - } + .inside-right { + display: flex; + flex-direction: column; + flex: 1; + } - .inside-right { + .inside-box-block { + display: flex; + width: 50%; + justify-content: center; + align-items: center; + + .line-center { display: flex; flex-direction: column; - flex: 1; - } - - .inside-box-block { - display: flex; - width: 50%; justify-content: center; - align-items: center; - .line-center { - display: flex; - flex-direction: column; - justify-content: center; - - h2 { - line-height: 1.2; - } - - .small { - font-size: $fontSize-24; - color: $color-blue; - } + h2 { + line-height: 1.2; } - } - } - .chuangye-box { - flex-wrap: wrap; - } - - .yanglao-block-inside2 { - width: 100%; - display: flex; - margin-top: 0.0390625rem /* 10/256 */ - ; - - .inside-left2 { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - - .danwei-box { - display: flex; - justify-content: center; - - .rightMargin { - margin-right: 0.0390625rem /* 10/256 */ - ; - color: #fff; - font-size: $fontSize-20; - line-height: 1.3; - text-align: center; - - .bigger { - font-size: $fontSize-32; - } - } + .small { + font-size: $fontSize-24; + color: $color-blue; } } } } - .yanglao-block2 { - width: 2.3046875rem /* 590/256 */ - ; - height: 0.8984375rem /* 230/256 */ - ; - background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center; - background-size: 100% 100%; + .chuangye-box { + flex-wrap: wrap; + } + + .yanglao-block-inside2 { + width: 100%; display: flex; - align-items: center; - justify-content: center; - position: relative; - margin: 0 0.078125rem /* 20/256 */ + margin-top: 0.0390625rem /* 10/256 */ ; - .yaolao-box { + .inside-left2 { flex: 1; display: flex; flex-direction: column; justify-content: center; - align-items: center; - &:first-child { - margin-left: 0.078125rem /* 20/256 */ - ; + .danwei-box { + display: flex; + justify-content: center; + + .rightMargin { + margin-right: 0.0390625rem /* 10/256 */ + ; + color: #fff; + font-size: $fontSize-20; + line-height: 1.3; + text-align: center; + + .bigger { + font-size: $fontSize-32; + } + } } - } - - img { - width: 0.3125rem /* 80/256 */ - ; - height: 0.3125rem /* 80/256 */ - ; - } - - h1 { - color: #fff; - text-align: center; - font-size: $fontSize-24; - line-height: 1.3; - } - - h2 { - color: #fff; - font-size: $fontSize-20; - line-height: 1.3; - - .bigger { - font-size: $fontSize-48; - color: $color-blue; - } - } - } - - .fu-biaoti { - position: absolute; - left: 0.0078125rem /* 2/256 */ - ; - top: 0.1171875rem /* 30/256 */ - ; - background: url("../../../assets/images/fubiaoti-bj.png") no-repeat center; - background-size: 100% 100%; - width: 0.125rem /* 32/256 */ - ; - height: 0.65234375rem /* 167/256 */ - ; - display: flex; - align-items: center; - justify-content: center; - - h1 { - font-size: $fontSize-20; - color: $color-dark; - text-align: center; } } } - .index-line-box2 { + .yanglao-block2 { + width: 2.3046875rem /* 590/256 */ + ; + height: 0.8984375rem /* 230/256 */ + ; + background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center; + background-size: 100% 100%; display: flex; - margin-top: 0.125rem /* 32/256 */ + align-items: center; + justify-content: center; + position: relative; + margin: 0 0.078125rem /* 20/256 */ ; - .shu-ju-box { - width: 4.765625rem /* 1220/256 */ - ; - height: 1.6015625rem /* 410/256 */ - ; - background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center; - background-size: 100% 100%; - position: relative; - margin: 0 0.078125rem /* 20/256 */ - ; + .yaolao-box { + flex: 1; display: flex; + flex-direction: column; + justify-content: center; + align-items: center; - .shuju-title-box { - position: absolute; - left: 0.390625rem /* 100/256 */ - ; - top: 0; - - h1 { - font-size: $fontSize-32; - color: $color-blue; - position: relative; - - &:after { - content: ''; - background: url("../../../assets/images/zhuangshi.png") no-repeat center; - background-size: 100% 100%; - width: 0.52734375rem /* 135/256 */ - ; - height: 0.0625rem /* 16/256 */ - ; - position: absolute; - left: 0.78125rem /* 200/256 */ - ; - top: 0.046875rem /* 12/256 */ - ; - } - } - } - - .shuju-main-box { - width: 100%; - padding: 0.234375rem /* 60/256 */ - 0.1171875rem /* 30/256 */ - ; - box-sizing: border-box; - display: flex; - - .shuju-table { - width: 3.1328125rem /* 802/256 */ - ; - height: 1.2109375rem /* 310/256 */ - ; - } - } - - .shuju-table { - width: 100%; - 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; - - 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; - - h1 { - font-size: $fontSize-26; - color: $color-white; - text-align: center; - line-height: 1.5; - } - - .fontColor { - color: $color-blue; - } - } - - .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; - } - } - } - - .shuju-bj-color { - background: rgba(81, 210, 255, 0.10); - } - } - - .shuju-echarts { - width: 1.3671875rem /* 350/256 */ - ; - height: 1.2109375rem /* 310/256 */ + &:first-child { + margin-left: 0.078125rem /* 20/256 */ ; } + } + + img { + width: 0.3125rem /* 80/256 */ + ; + height: 0.3125rem /* 80/256 */ + ; + } + + h1 { + color: #fff; + text-align: center; + font-size: $fontSize-24; + line-height: 1.3; + } + + h2 { + color: #fff; + font-size: $fontSize-20; + line-height: 1.3; + + .bigger { + font-size: $fontSize-48; + color: $color-blue; + } + } + } + + .fu-biaoti { + position: absolute; + left: 0.0078125rem /* 2/256 */ + ; + top: 0.1171875rem /* 30/256 */ + ; + background: url("../../../assets/images/fubiaoti-bj.png") no-repeat center; + background-size: 100% 100%; + width: 0.125rem /* 32/256 */ + ; + height: 0.65234375rem /* 167/256 */ + ; + display: flex; + align-items: center; + justify-content: center; + + h1 { + font-size: $fontSize-20; + color: $color-dark; + text-align: center; } } } + + .index-line-box2 { + display: flex; + margin-top: 0.125rem /* 32/256 */ + ; + + .shu-ju-box { + width: 4.765625rem /* 1220/256 */ + ; + height: 1.6015625rem /* 410/256 */ + ; + background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center; + background-size: 100% 100%; + position: relative; + margin: 0 0.078125rem /* 20/256 */ + ; + display: flex; + + .shuju-title-box { + position: absolute; + left: 0.390625rem /* 100/256 */ + ; + top: 0; + + h1 { + font-size: $fontSize-32; + color: $color-blue; + position: relative; + + &:after { + content: ''; + background: url("../../../assets/images/zhuangshi.png") no-repeat center; + background-size: 100% 100%; + width: 0.52734375rem /* 135/256 */ + ; + height: 0.0625rem /* 16/256 */ + ; + position: absolute; + left: 0.78125rem /* 200/256 */ + ; + top: 0.046875rem /* 12/256 */ + ; + } + } + } + + .shuju-main-box { + width: 100%; + padding: 0.234375rem /* 60/256 */ + 0.1171875rem /* 30/256 */ + ; + box-sizing: border-box; + display: flex; + + } + + .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); + } + } + + .shuju-echarts { + width: 1.3671875rem /* 350/256 */ + ; + height: 1.2109375rem /* 310/256 */ + ; + } + } + } +} </style> -- Gitblit v1.9.1