|
|
@@ -21,410 +21,423 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, nextTick, defineProps, watch } from 'vue';
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- import * as echarts from 'echarts';
|
|
|
+import { ref, reactive, nextTick, defineProps, watch } from 'vue';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
|
- let props = defineProps({
|
|
|
- roadData: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
+let props = defineProps({
|
|
|
+ roadData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
},
|
|
|
- });
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
- let roadTitle = ref('通风巷道长度统计');
|
|
|
- let road = ref(); //获取Dom节点
|
|
|
- let roadDatas = reactive({
|
|
|
- label: '通风巷道总长度',
|
|
|
- value: '',
|
|
|
- });
|
|
|
+let roadTitle = ref('通风巷道长度统计');
|
|
|
+let road = ref(); //获取Dom节点
|
|
|
+let roadDatas = reactive({
|
|
|
+ label: '通风巷道总长度',
|
|
|
+ value: '',
|
|
|
+});
|
|
|
+let maxY = ref<any>(0)
|
|
|
|
|
|
- // let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
|
|
|
- let xData = ref<any[]>([]);
|
|
|
- // var yData = reactive([200, 100, 200, 200, 100]);
|
|
|
- // var maxData = reactive([300, 200, 300, 300, 200]);
|
|
|
- let yData = ref<any[]>([]);
|
|
|
- let maxData = reactive<any[]>([]);
|
|
|
+// let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
|
|
|
+let xData = ref<any[]>([]);
|
|
|
+// var yData = reactive([200, 100, 200, 200, 100]);
|
|
|
+// var maxData = reactive([300, 200, 300, 300, 200]);
|
|
|
+let yData = ref<any[]>([]);
|
|
|
+let maxData = reactive<any[]>([]);
|
|
|
|
|
|
- function getOption() {
|
|
|
- nextTick(() => {
|
|
|
- const myChart = echarts.init(road.value);
|
|
|
- let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
|
|
|
- let option = {
|
|
|
- grid: {
|
|
|
- top: '14%',
|
|
|
- left: '2%',
|
|
|
- bottom: '4%',
|
|
|
- right: '2%',
|
|
|
- containLabel: true,
|
|
|
+function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ const myChart = echarts.init(road.value);
|
|
|
+ let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
|
|
|
+ let option = {
|
|
|
+ grid: {
|
|
|
+ top: '14%',
|
|
|
+ left: '2%',
|
|
|
+ bottom: '4%',
|
|
|
+ right: '2%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: xData.value,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- data: xData.value,
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(187, 187, 187,.2)',
|
|
|
- type: 'dashed',
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(187, 187, 187,.2)',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- margin: 20, //刻度标签与轴线之间的距离。
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
+ margin: 20, //刻度标签与轴线之间的距离。
|
|
|
},
|
|
|
+ },
|
|
|
|
|
|
- yAxis: {
|
|
|
- max: Math.ceil(roadDatas.value + 1000),
|
|
|
- name: '长度(km)',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#3df6ff',
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 20,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(187, 187, 187,.2)',
|
|
|
- type: 'dashed',
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
+ yAxis: {
|
|
|
+ max: Math.ceil(roadDatas.value + 1000),
|
|
|
+ name: '长度(km)',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#3df6ff',
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 20,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(187, 187, 187,.2)',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
},
|
|
|
+ },
|
|
|
|
|
|
- series: [
|
|
|
- {
|
|
|
- //三个最低下的圆片
|
|
|
- name: '',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [30, 10],
|
|
|
- symbolOffset: [0, 7],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- opacity: 1,
|
|
|
- color: function (params) {
|
|
|
- console.log(params, 'index-----11111111111111111');
|
|
|
- // var a = params.name.slice(0, 2);
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ //三个最低下的圆片
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [30, 10],
|
|
|
+ symbolOffset: [0, 7],
|
|
|
+ z: 12,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ color: function (params) {
|
|
|
+ console.log(params, 'index-----11111111111111111');
|
|
|
+ // var a = params.name.slice(0, 2);
|
|
|
|
|
|
- return new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: color[params.seriesIndex], // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: color[params.seriesIndex + 1], // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- false
|
|
|
- );
|
|
|
- },
|
|
|
+ return new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: color[params.seriesIndex], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: color[params.seriesIndex + 1], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ );
|
|
|
},
|
|
|
- data: [1, 1, 1, 1, 1],
|
|
|
},
|
|
|
+ data: [1, 1, 1, 1, 1],
|
|
|
+ },
|
|
|
|
|
|
- //下半截柱状图
|
|
|
- {
|
|
|
- name: '2020',
|
|
|
- type: 'bar',
|
|
|
- barWidth: 30,
|
|
|
- barGap: '-100%',
|
|
|
- itemStyle: {
|
|
|
- //lenged文本
|
|
|
- opacity: 0.7,
|
|
|
- color: function (params) {
|
|
|
- console.log(params, 'index-----222222222222222');
|
|
|
- return new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: color[params.dataIndex], // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: color[params.dataIndex + 1], // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- false
|
|
|
- );
|
|
|
- // var a = params.name.slice(0, 2);
|
|
|
- // if (a === '全矿') {
|
|
|
- // return new echarts.graphic.LinearGradient(
|
|
|
- // 0,
|
|
|
- // 0,
|
|
|
- // 0,
|
|
|
- // 1,
|
|
|
- // [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: '#FF9A22', // 0% 处的颜色
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: '#FFD56E', // 100% 处的颜色
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // false
|
|
|
- // );
|
|
|
- // }
|
|
|
- // // else if (a === '榆家' || a == '大柳') {
|
|
|
- // // return new echarts.graphic.LinearGradient(
|
|
|
- // // 0,
|
|
|
- // // 0,
|
|
|
- // // 0,
|
|
|
- // // 1,
|
|
|
- // // [
|
|
|
- // // {
|
|
|
- // // offset: 0,
|
|
|
- // // color: '#00EC28', // 0% 处的颜色
|
|
|
- // // },
|
|
|
- // // {
|
|
|
- // // offset: 1,
|
|
|
- // // color: '#5DF076', // 100% 处的颜色
|
|
|
- // // },
|
|
|
- // // ],
|
|
|
- // // false
|
|
|
- // // );
|
|
|
- // // }
|
|
|
- // // else if (a === '锦界' || a == '哈拉') {
|
|
|
- // // return new echarts.graphic.LinearGradient(
|
|
|
- // // 0,
|
|
|
- // // 0,
|
|
|
- // // 0,
|
|
|
- // // 1,
|
|
|
- // // [
|
|
|
- // // {
|
|
|
- // // offset: 0,
|
|
|
- // // color: '#12B9DB', // 0% 处的颜色
|
|
|
- // // },
|
|
|
- // // {
|
|
|
- // // offset: 1,
|
|
|
- // // color: '#6F8EF2', // 100% 处的颜色
|
|
|
- // // },
|
|
|
- // // ],
|
|
|
- // // false
|
|
|
- // // );
|
|
|
- // // }
|
|
|
- },
|
|
|
+ //下半截柱状图
|
|
|
+ {
|
|
|
+ name: '2020',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 30,
|
|
|
+ barGap: '-100%',
|
|
|
+ itemStyle: {
|
|
|
+ //lenged文本
|
|
|
+ opacity: 0.7,
|
|
|
+ color: function (params) {
|
|
|
+ console.log(params, 'index-----222222222222222');
|
|
|
+ return new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: color[params.dataIndex], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: color[params.dataIndex + 1], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ );
|
|
|
+ // var a = params.name.slice(0, 2);
|
|
|
+ // if (a === '全矿') {
|
|
|
+ // return new echarts.graphic.LinearGradient(
|
|
|
+ // 0,
|
|
|
+ // 0,
|
|
|
+ // 0,
|
|
|
+ // 1,
|
|
|
+ // [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: '#FF9A22', // 0% 处的颜色
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: '#FFD56E', // 100% 处的颜色
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // false
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // // else if (a === '榆家' || a == '大柳') {
|
|
|
+ // // return new echarts.graphic.LinearGradient(
|
|
|
+ // // 0,
|
|
|
+ // // 0,
|
|
|
+ // // 0,
|
|
|
+ // // 1,
|
|
|
+ // // [
|
|
|
+ // // {
|
|
|
+ // // offset: 0,
|
|
|
+ // // color: '#00EC28', // 0% 处的颜色
|
|
|
+ // // },
|
|
|
+ // // {
|
|
|
+ // // offset: 1,
|
|
|
+ // // color: '#5DF076', // 100% 处的颜色
|
|
|
+ // // },
|
|
|
+ // // ],
|
|
|
+ // // false
|
|
|
+ // // );
|
|
|
+ // // }
|
|
|
+ // // else if (a === '锦界' || a == '哈拉') {
|
|
|
+ // // return new echarts.graphic.LinearGradient(
|
|
|
+ // // 0,
|
|
|
+ // // 0,
|
|
|
+ // // 0,
|
|
|
+ // // 1,
|
|
|
+ // // [
|
|
|
+ // // {
|
|
|
+ // // offset: 0,
|
|
|
+ // // color: '#12B9DB', // 0% 处的颜色
|
|
|
+ // // },
|
|
|
+ // // {
|
|
|
+ // // offset: 1,
|
|
|
+ // // color: '#6F8EF2', // 100% 处的颜色
|
|
|
+ // // },
|
|
|
+ // // ],
|
|
|
+ // // false
|
|
|
+ // // );
|
|
|
+ // // }
|
|
|
},
|
|
|
- data: yData.value,
|
|
|
},
|
|
|
+ data: yData.value,
|
|
|
+ },
|
|
|
|
|
|
- {
|
|
|
- // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
|
|
|
- type: 'bar',
|
|
|
- barWidth: 30,
|
|
|
- barGap: '-100%',
|
|
|
- stack: '广告',
|
|
|
- itemStyle: {
|
|
|
- color: 'transparent',
|
|
|
- },
|
|
|
- data: maxData,
|
|
|
+ {
|
|
|
+ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 30,
|
|
|
+ barGap: '-100%',
|
|
|
+ stack: '广告',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'transparent',
|
|
|
},
|
|
|
+ data: maxData,
|
|
|
+ },
|
|
|
|
|
|
- {
|
|
|
- name: '', //头部
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [30, 10],
|
|
|
- symbolOffset: [0, -7],
|
|
|
- z: 12,
|
|
|
- symbolPosition: 'end',
|
|
|
- itemStyle: {
|
|
|
- color: '#163F7A',
|
|
|
- opacity: 1,
|
|
|
- },
|
|
|
- data: maxData,
|
|
|
+ {
|
|
|
+ name: '', //头部
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [30, 10],
|
|
|
+ symbolOffset: [0, -7],
|
|
|
+ z: 12,
|
|
|
+ symbolPosition: 'end',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#163F7A',
|
|
|
+ opacity: 1,
|
|
|
},
|
|
|
+ data: maxData,
|
|
|
+ },
|
|
|
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pictorialBar',
|
|
|
- symbolSize: [30, 10],
|
|
|
- symbolOffset: [0, -7],
|
|
|
- z: 12,
|
|
|
- itemStyle: {
|
|
|
- opacity: 1,
|
|
|
- color: function (params) {
|
|
|
- console.log(params, 'index-----333333333333333');
|
|
|
- return new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: color[params.dataIndex], // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: color[params.dataIndex + 1], // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- false
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- symbolPosition: 'end',
|
|
|
-
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- fontSize: 12,
|
|
|
- // fontWeight: 'bold',
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolSize: [30, 10],
|
|
|
+ symbolOffset: [0, -7],
|
|
|
+ z: 12,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ color: function (params) {
|
|
|
+ console.log(params, 'index-----333333333333333');
|
|
|
+ return new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: color[params.dataIndex], // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: color[params.dataIndex + 1], // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ );
|
|
|
},
|
|
|
- data: yData.value,
|
|
|
},
|
|
|
+ symbolPosition: 'end',
|
|
|
|
|
|
- {
|
|
|
- name: '2019',
|
|
|
- type: 'bar',
|
|
|
- barWidth: 30,
|
|
|
- barGap: '-100%',
|
|
|
- z: 0,
|
|
|
- itemStyle: {
|
|
|
- color: '#163F7A',
|
|
|
- opacity: 0.7,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ fontSize: 12,
|
|
|
+ // fontWeight: 'bold',
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
+ },
|
|
|
+ data: yData.value,
|
|
|
+ },
|
|
|
|
|
|
- data: maxData,
|
|
|
+ {
|
|
|
+ name: '2019',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 30,
|
|
|
+ barGap: '-100%',
|
|
|
+ z: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#163F7A',
|
|
|
+ opacity: 0.7,
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- });
|
|
|
- }
|
|
|
|
|
|
- watch(
|
|
|
- () => props.roadData,
|
|
|
- (newR, oldR) => {
|
|
|
- console.log(newR, '通风巷道长度数据-------');
|
|
|
- if (JSON.stringify(newR) != '{}') {
|
|
|
- maxData.length = 0;
|
|
|
- roadDatas.value = newR.totallength;
|
|
|
- xData.value = newR.data1;
|
|
|
- yData.value = newR.data;
|
|
|
- yData.value.forEach((el) => {
|
|
|
- maxData.push(el + 200);
|
|
|
- });
|
|
|
- getOption();
|
|
|
+ data: maxData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.roadData,
|
|
|
+ (newR, oldR) => {
|
|
|
+ console.log(newR, '通风巷道长度数据-------');
|
|
|
+ if (JSON.stringify(newR) != '{}') {
|
|
|
+ maxData.length = 0;
|
|
|
+ roadDatas.value = newR.totallength;
|
|
|
+ maxY.value = roadDatas.value.indexOf('.') == -1 ? roadDatas.value : roadDatas.value.substring(0, roadDatas.value.indexOf('.'))
|
|
|
+ if (maxY.value.length < 2) {
|
|
|
+ maxY.value = 10
|
|
|
+ } else if (maxY.value.length < 3) {
|
|
|
+ maxY.value = Number(maxY.value[0]) * 10
|
|
|
+ } else if (maxY.value.length < 4) {
|
|
|
+ maxY.value = Number(maxY.value[0]) * 100
|
|
|
+ } else if (maxY.value.length < 5) {
|
|
|
+ maxY.value = Number(maxY.value[0]) * 1000
|
|
|
+ } else if (maxY.value.length < 6) {
|
|
|
+ maxY.value = Number(maxY.value[0]) * 10000
|
|
|
}
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
+ xData.value = newR.data1;
|
|
|
+ yData.value = newR.data;
|
|
|
+ yData.value.forEach((el) => {
|
|
|
+ maxData.push(el + 200);
|
|
|
+ });
|
|
|
+ getOption();
|
|
|
}
|
|
|
- );
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+);
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- @font-face {
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
+
|
|
|
+.windRoad {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .road-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 10px;
|
|
|
+ color: #fff;
|
|
|
font-family: 'douyuFont';
|
|
|
- src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
- .windRoad {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .road-content {
|
|
|
position: relative;
|
|
|
+ height: 100%;
|
|
|
+ padding: 52px 40px 23px 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .road-title {
|
|
|
+ .left-jt {
|
|
|
position: absolute;
|
|
|
- left: 50px;
|
|
|
- top: 10px;
|
|
|
- color: #fff;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
+ top: 50%;
|
|
|
+ left: 18px;
|
|
|
+ transform: translate(0, -50%);
|
|
|
}
|
|
|
|
|
|
- .road-content {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- padding: 52px 40px 23px 40px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .left-jt {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 18px;
|
|
|
- transform: translate(0, -50%);
|
|
|
- }
|
|
|
-
|
|
|
- .right-jt {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 18px;
|
|
|
- transform: translate(0, -50%);
|
|
|
- }
|
|
|
+ .right-jt {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 18px;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ }
|
|
|
|
|
|
- .road-card {
|
|
|
- height: 100%;
|
|
|
+ .road-card {
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .head-nav {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- padding-left: 58px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .head-nav {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-left: 58px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
+ &:nth-child(2) {
|
|
|
+ color: #3df6ff;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .echart-box {
|
|
|
- height: calc(100% - 30px);
|
|
|
+ .echart-box {
|
|
|
+ height: calc(100% - 30px);
|
|
|
|
|
|
- .road {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .road {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
