From 473bd88d37e20ce9724b7fdaa70e3cc2b963e066 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期日, 24 四月 2022 16:57:28 +0800
Subject: [PATCH] 首页数据
---
src/pages/show/index/index.vue | 1671 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 895 insertions(+), 776 deletions(-)
diff --git a/src/pages/show/index/index.vue b/src/pages/show/index/index.vue
index b196e75..0f7d2a0 100644
--- a/src/pages/show/index/index.vue
+++ b/src/pages/show/index/index.vue
@@ -4,17 +4,17 @@
<div class="yanglao-block">
<img src="../../../assets/images/yanglao-icon1.png" alt="">
<h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1>
- <h2><font class="bigger">277.7</font>涓囦汉</h2>
+ <h2><font class="bigger">{{Insured.card}}</font>涓囦汉</h2>
</div>
<div class="yanglao-block">
<img src="../../../assets/images/yanglao-icon2.png" alt="">
<h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1>
- <h2><font class="bigger">277.8</font>涓囦汉</h2>
+ <h2><font class="bigger">{{Insured.jumin}}</font>涓囦汉</h2>
</div>
<div class="yanglao-block">
<img src="../../../assets/images/yanglao-icon3.png" alt="">
<h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1>
- <h2><font class="bigger">277.8</font>涓囦汉</h2>
+ <h2><font class="bigger">{{Insured.zhigong}}</font>涓囦汉</h2>
</div>
<div class="yanglao-block">
<div class="yanglao-block-inside">
@@ -22,27 +22,27 @@
<img src="../../../assets/images/yanglao-icon4.png" alt="">
<div>
<h1>鍏ㄥ競浜嬩笟鍗曚綅</h1>
- <h2><font class="bigger">5505</font>瀹�</h2>
+ <h2><font class="bigger">{{ Institution.quanshi }}</font>瀹�</h2>
</div>
</div>
<div class="inside-right">
<h1>鍦ㄨ亴浜哄憳</h1>
- <h2><font class="bigger">16.8</font>涓囦汉</h2>
+ <h2><font class="bigger">{{ Institution.quanshiren }}</font>涓囦汉</h2>
</div>
</div>
<div class="yanglao-block-inside2">
<div class="inside-left2">
<h1>甯傚�间簨涓氬崟浣�</h1>
<div class="danwei-box">
- <h2 class="rightMargin"><font class="bigger">513</font>瀹�</h2>
- <h2 class="rightMargin"><font class="bigger">5133244</font>浜�</h2>
+ <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhi }}</font>瀹�</h2>
+ <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>浜�</h2>
</div>
</div>
<div class="inside-left2">
<h1>鍘匡紙甯傘�佸尯锛�</h1>
<div class="danwei-box">
- <h2 class="rightMargin"><font class="bigger">4992</font>瀹�</h2>
- <h2 class="rightMargin"><font class="bigger">135380</font>浜�</h2>
+ <h2 class="rightMargin"><font class="bigger">{{ Institution.xian }}</font>瀹�</h2>
+ <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>浜�</h2>
</div>
</div>
</div>
@@ -171,136 +171,136 @@
</div>
<div class="index-line-box2">
- <div class="shu-ju-box">
- <div class="shuju-title-box">
- <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>
- </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>
- </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>
+ <div class="shu-ju-box">
+ <div class="shuju-title-box">
+ <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>
+ </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>
+ </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>
- </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>
+ </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>
- </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>
- </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>
+ </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>
+ </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>
- </div>
- </div>
+ </div>
+ </div>
- </div>
- <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
- </div>
+ </div>
+ <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
+ </div>
- </div>
- <div class="shu-ju-box">
+ </div>
+ <div class="shu-ju-box">
<div class="shuju-title-box">
<h1>鍩庨晣鑱屽伐鍏昏��</h1>
</div>
@@ -400,7 +400,7 @@
<h1>341.3</h1>
</div>
</div>
- </div>
+ </div>
<div class="shuju-table-line2">
<div class="biao-title">
<h1>鏀嚭锛堜嚎鍏冿級</h1>
@@ -433,7 +433,7 @@
</div>
</div>
</div>
- </div>
+ </div>
</div>
<div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
</div>
@@ -727,682 +727,801 @@
</div>
<div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
- </div>></div>
- </div>
-
- </div>
</div>
+
+ </div>
+ </div>
</div>
</template>
<script>
- import echarts from "echarts/lib/echarts";
- import nowSize from "../../../libs/nowSize";
- export default {
- name: "index",
- data() {
- return {
+import echarts from "echarts/lib/echarts";
+import nowSize from "../../../libs/nowSize";
+import {getInsured,getInstitution} from "@/api/index";
+export default {
+ name: "index",
+ data() {
+ return {
+ // 琚繚闄╀汉
+ Insured:{},
+ // 棣栭〉甯傜洿鍗曚綅鏁版嵁
+ Institution:{}
+ }
+ },
+ mounted() {
+ this.jiuyeshujuEcharts()
+ this.chengzhenZhigongYanglaoEcharts()
+ this.shiyeBaoxianEcharts()
+ this.gongshangBaoxianEcharts()
+ this.getInsured()
+ this.getInstitution()
+ },
+ 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),
}
- },
- mounted() {
- this.jiuyeshujuEcharts()
- this.chengzhenZhigongYanglaoEcharts()
- this.shiyeBaoxianEcharts()
- this.gongshangBaoxianEcharts()
- },
- 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: '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()
- })
+ },
+ 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)
+ }
},
- /*鍩庨晣鑱屽伐鍏昏��*/
- 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()
- })
+ axisLine: {
+ lineStyle: {
+ color: "#999999",
+ width: 1,
+ type: "solid"
+ }
},
- /*澶变笟淇濋櫓*/
- 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()
- })
+ 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()
+ })
+ },
+ /*鍩庨晣鑱屽伐鍏昏��*/
+ 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('鑾峰彇淇℃伅澶辫触')
+ }
+ })
+ }
+ }
+};
</script>
<style lang="scss" scoped>
- @import "../../../assets/css/base";
- @import "../../../assets/css/mixin";
- .index-wrap{
+@import "../../../assets/css/base";
+@import "../../../assets/css/mixin";
+
+.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 */;
- 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;
- 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%;
+ 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%;
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;
- .inside-left{
- display: flex;
- flex: 1;
- justify-content: right;
- margin-left: 0.15625rem /* 40/256 */;
- }
- .inside-right{
+ flex: 1;
+ justify-content: right;
+ margin-left: 0.15625rem /* 40/256 */
+ ;
+ }
+
+ .inside-right {
+ 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;
- 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 */;
- .yaolao-box{
+ margin-top: 0.0390625rem /* 10/256 */
+ ;
+
+ .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{
- 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 */;
- }
- }
- .shuju-table{
- width: 100%;
- display: flex;
- flex-direction: column;
- .shuju-table-line{
- width: 100%;
- display: flex;
- .biao-title{
- width: 1.328125rem /* 340/256 */;
- }
- .title-flex{
- width: 100%;
- display: flex;
- }
- .title{
- flex: 1;
- 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;
- h1{
- font-size: $fontSize-26;
- color: $color-white;
- text-align: center;
- line-height: 1.5;
- }
- .fontColor{
- color: $color-blue;
- }
- }
- .title-flex{
- width: 100%;
- display: flex;
- }
- .biao-title{
- width: 1.328125rem /* 340/256 */;
- h1{
- font-size: $fontSize-26;
- color: $color-white;
- text-align: right;
- line-height: 1.5;
- }
- .fontColor{
- color: $color-blue;
- }
- }
- }
- .shuju-bj-color{
- background: rgba(81,210,255,0.10);
- }
+ .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;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ margin: 0 0.078125rem /* 20/256 */
+ ;
+
+ .yaolao-box {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ &:first-child {
+ margin-left: 0.078125rem /* 20/256 */
+ ;
}
- .shuju-echarts{
- width: 1.3671875rem /* 350/256 */;
- height: 1.2109375rem /* 310/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 */
+ ;
+ }
+ }
+
+ .shuju-table {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .shuju-table-line {
+ width: 100%;
+ display: flex;
+
+ .biao-title {
+ width: 1.328125rem /* 340/256 */
+ ;
+ }
+
+ .title-flex {
+ width: 100%;
+ display: flex;
+ }
+
+ .title {
+ flex: 1;
+
+ 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;
+
+ h1 {
+ font-size: $fontSize-26;
+ color: $color-white;
+ text-align: center;
+ line-height: 1.5;
+ }
+
+ .fontColor {
+ color: $color-blue;
+ }
+ }
+
+ .title-flex {
+ width: 100%;
+ display: flex;
+ }
+
+ .biao-title {
+ width: 1.328125rem /* 340/256 */
+ ;
+
+ h1 {
+ font-size: $fontSize-26;
+ color: $color-white;
+ text-align: right;
+ line-height: 1.5;
+ }
+
+ .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 */
+ ;
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.1