|
|
@@ -5,332 +5,335 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { defineProps, ref, nextTick, reactive, watch } from 'vue';
|
|
|
- import * as echarts from 'echarts';
|
|
|
+import { defineProps, ref, nextTick, reactive, watch } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
|
- let props = defineProps({
|
|
|
- echartDataGq: {
|
|
|
- type: Object,
|
|
|
- },
|
|
|
- maxY: {
|
|
|
- type: Number,
|
|
|
- },
|
|
|
- echartDw: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- echartDw1: {
|
|
|
- type: String,
|
|
|
+let props = defineProps({
|
|
|
+ echartDataGq: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ maxY: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ echartDw: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ echartDw1: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ gridV: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ top: '15%',
|
|
|
+ left: '2%',
|
|
|
+ bottom: '6%',
|
|
|
+ right: '2%',
|
|
|
+ containLabel: true,
|
|
|
+ };
|
|
|
},
|
|
|
- gridV: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- top: '15%',
|
|
|
- left: '2%',
|
|
|
- bottom: '6%',
|
|
|
- right: '2%',
|
|
|
- containLabel: true,
|
|
|
- };
|
|
|
+ },
|
|
|
+ // //报警历史交点坐标
|
|
|
+ // pointHisWarnData:{
|
|
|
+ // type:Object,
|
|
|
+ // default:()=>{
|
|
|
+ // return {}
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+});
|
|
|
+//获取dom元素节点
|
|
|
+let line = ref<any>();
|
|
|
+let echartDataGqs = reactive({});
|
|
|
+watch(
|
|
|
+ () => props.echartDataGq,
|
|
|
+ (data) => {
|
|
|
+ echartDataGqs = Object.assign({}, data);
|
|
|
+ getOption();
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
+function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ let myChart = echarts.init(line.value);
|
|
|
+ let option = {
|
|
|
+ grid: props.gridV,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- // //报警历史交点坐标
|
|
|
- // pointHisWarnData:{
|
|
|
- // type:Object,
|
|
|
- // default:()=>{
|
|
|
- // return {}
|
|
|
- // }
|
|
|
- // }
|
|
|
- });
|
|
|
- //获取dom元素节点
|
|
|
- let line = ref<any>();
|
|
|
- let echartDataGqs = reactive({});
|
|
|
- watch(
|
|
|
- () => props.echartDataGq,
|
|
|
- (data) => {
|
|
|
- echartDataGqs = Object.assign({}, data);
|
|
|
- getOption();
|
|
|
- },
|
|
|
- { immediate: true, deep: true }
|
|
|
- );
|
|
|
- function getOption() {
|
|
|
- nextTick(() => {
|
|
|
- let myChart = echarts.init(line.value);
|
|
|
- let option = {
|
|
|
- grid: props.gridV,
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
+ legend: {
|
|
|
+ align: 'left',
|
|
|
+ right: 'center',
|
|
|
+ top: '-20',
|
|
|
+ type: 'plain',
|
|
|
+ textStyle: {
|
|
|
+ color: '#7ec7ff',
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
- legend: {
|
|
|
- align: 'left',
|
|
|
- right: 'center',
|
|
|
- top: '-20',
|
|
|
- type: 'plain',
|
|
|
- textStyle: {
|
|
|
- color: '#7ec7ff',
|
|
|
- fontSize: 14,
|
|
|
+ // icon:'rect',
|
|
|
+ itemGap: 25,
|
|
|
+ itemWidth: 18,
|
|
|
+ icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
|
|
|
},
|
|
|
- // icon:'rect',
|
|
|
- itemGap: 25,
|
|
|
- itemWidth: 18,
|
|
|
- icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
|
|
|
- },
|
|
|
- {
|
|
|
- name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
|
|
|
- },
|
|
|
- {
|
|
|
- name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
|
|
|
- },
|
|
|
- {
|
|
|
- name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
{
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- axisLabel: {
|
|
|
- // formatter: '{value}',
|
|
|
- fontSize: 14,
|
|
|
- margin: 20,
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
- formatter: function (params) {
|
|
|
- let newParamsName = ref(''); // 最终拼接成的字符串
|
|
|
- let paramsNameNumber = ref(params.length); // 实际标签的个数
|
|
|
- let provideNumber = ref(10); // 每行能显示的字的个数
|
|
|
- let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话，需要显示几行，向上取整
|
|
|
- /**
|
|
|
- * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
|
- */
|
|
|
- // 条件等同于rowNumber>1
|
|
|
- if (paramsNameNumber.value > provideNumber.value) {
|
|
|
- /** 循环每一行,p表示行 */
|
|
|
- for (var p = 0; p < rowNumber; p++) {
|
|
|
- var tempStr = ''; // 表示每一次截取的字符串
|
|
|
- var start = p * provideNumber.value; // 开始截取的位置
|
|
|
- var end = start + provideNumber.value; // 结束截取的位置
|
|
|
- // 此处特殊处理最后一行的索引值
|
|
|
- if (p == rowNumber - 1) {
|
|
|
- // 最后一次不换行
|
|
|
- tempStr = params.substring(start, paramsNameNumber.value);
|
|
|
- } else {
|
|
|
- // 每一次拼接字符串并换行
|
|
|
- tempStr = params.substring(start, end) + '\n';
|
|
|
- }
|
|
|
- newParamsName.value += tempStr; // 最终拼成的字符串
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 将旧标签的值赋给新标签
|
|
|
- newParamsName.value = params;
|
|
|
- }
|
|
|
- //将最终的字符串返回
|
|
|
- return newParamsName.value;
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- // color: 'rgba(14, 53, 95)',
|
|
|
- color: '#244a94',
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- // lineStyle: {
|
|
|
- // color: '#243753',
|
|
|
- // },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: echartDataGqs.xData ? echartDataGqs.xData : [],
|
|
|
+ name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
|
|
|
},
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
{
|
|
|
- boundaryGap: false,
|
|
|
- type: 'value',
|
|
|
- max: props.maxY,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
- formatter: '{value}',
|
|
|
- },
|
|
|
- name: props.echartDw,
|
|
|
- nameTextStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 10,
|
|
|
+ name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ // formatter: '{value}',
|
|
|
+ fontSize: 14,
|
|
|
+ margin: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- // color: 'rgba(14, 53, 95)',
|
|
|
- color: '#0d2973',
|
|
|
- },
|
|
|
+ formatter: function (params) {
|
|
|
+ let newParamsName = ref(''); // 最终拼接成的字符串
|
|
|
+ let paramsNameNumber = ref(params.length); // 实际标签的个数
|
|
|
+ let provideNumber = ref(10); // 每行能显示的字的个数
|
|
|
+ let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话，需要显示几行，向上取整
|
|
|
+ /**
|
|
|
+ * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
|
+ */
|
|
|
+ // 条件等同于rowNumber>1
|
|
|
+ if (paramsNameNumber.value > provideNumber.value) {
|
|
|
+ /** 循环每一行,p表示行 */
|
|
|
+ for (var p = 0; p < rowNumber; p++) {
|
|
|
+ var tempStr = ''; // 表示每一次截取的字符串
|
|
|
+ var start = p * provideNumber.value; // 开始截取的位置
|
|
|
+ var end = start + provideNumber.value; // 结束截取的位置
|
|
|
+ // 此处特殊处理最后一行的索引值
|
|
|
+ if (p == rowNumber - 1) {
|
|
|
+ // 最后一次不换行
|
|
|
+ tempStr = params.substring(start, paramsNameNumber.value);
|
|
|
+ } else {
|
|
|
+ // 每一次拼接字符串并换行
|
|
|
+ tempStr = params.substring(start, end) + '\n';
|
|
|
+ }
|
|
|
+ newParamsName.value += tempStr; // 最终拼成的字符串
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 将旧标签的值赋给新标签
|
|
|
+ newParamsName.value = params;
|
|
|
+ }
|
|
|
+ //将最终的字符串返回
|
|
|
+ return newParamsName.value;
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- // color: 'rgba(14, 53, 95)',
|
|
|
- color: '#244a94',
|
|
|
- },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ // color: 'rgba(14, 53, 95)',
|
|
|
+ color: '#244a94',
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#243753',
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: echartDataGqs.xData ? echartDataGqs.xData : [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ boundaryGap: false,
|
|
|
+ type: 'value',
|
|
|
+ max: props.maxY,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
},
|
|
|
+ formatter: '{value}',
|
|
|
},
|
|
|
- {
|
|
|
- boundaryGap: false,
|
|
|
- type: 'value',
|
|
|
- max: props.maxY,
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
- formatter: '{value}',
|
|
|
+ name: props.echartDw,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 10,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ // color: 'rgba(14, 53, 95)',
|
|
|
+ color: '#0d2973',
|
|
|
},
|
|
|
- name: props.echartDw1,
|
|
|
- nameTextStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 10,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ // color: 'rgba(14, 53, 95)',
|
|
|
+ color: '#244a94',
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(14, 53, 95)',
|
|
|
- },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ boundaryGap: false,
|
|
|
+ type: 'value',
|
|
|
+ max: props.maxY,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(14, 53, 95)',
|
|
|
- },
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ name: props.echartDw1,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 10,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(14, 53, 95)',
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(14, 53, 95)',
|
|
|
},
|
|
|
},
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
|
|
|
- type: 'line',
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
|
|
|
+ type: 'line',
|
|
|
|
|
|
- // markPoint: {
|
|
|
- // symbol: 'circle',
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // coord: [345.44, 94250.0],
|
|
|
- // name: '交点',
|
|
|
- // },
|
|
|
+ // markPoint: {
|
|
|
+ // symbol: 'circle',
|
|
|
+ // data: [
|
|
|
+ // {
|
|
|
+ // coord: [345.44, 94250.0],
|
|
|
+ // name: '交点',
|
|
|
+ // },
|
|
|
|
|
|
- // ],
|
|
|
- // symbolSize: 10,
|
|
|
- // itemStyle: {
|
|
|
- // color: '#19a3df',
|
|
|
- // borderColor: '#a3c8d8',
|
|
|
- // },
|
|
|
- // label: {
|
|
|
- // fontSize: 10,
|
|
|
- // color: '#fff',
|
|
|
- // },
|
|
|
- // },
|
|
|
- smooth: true,
|
|
|
- symbol: 'none',
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
- // color: '#19a3df',
|
|
|
+ // ],
|
|
|
+ // symbolSize: 10,
|
|
|
+ // itemStyle: {
|
|
|
+ // color: '#19a3df',
|
|
|
+ // borderColor: '#a3c8d8',
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: '#fff',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#ff0000',
|
|
|
+ borderColor: '#ff0000',
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
color: '#ff0000',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#19a3df',
|
|
|
- },
|
|
|
},
|
|
|
- data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
|
|
|
},
|
|
|
- {
|
|
|
- name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'none',
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
+ data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#4fffad',
|
|
|
+ borderColor: '#a3c8d8',
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
color: '#4fffad',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#4fffad',
|
|
|
- },
|
|
|
},
|
|
|
- data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
|
|
|
},
|
|
|
- {
|
|
|
- name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'none',
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
+ data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: echartDataGqs.avgData ? echartDataGqs.avgData.lengedData : '',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#fc8452',
|
|
|
+ borderColor: '#a3c8d8',
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
color: '#fc8452',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#fc8452',
|
|
|
- },
|
|
|
},
|
|
|
+ },
|
|
|
|
|
|
- data: echartDataGqs.avgData ? echartDataGqs.avgData.data : [],
|
|
|
+ data: echartDataGqs.avgData ? echartDataGqs.avgData.data : [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ zlevel: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#fc8452',
|
|
|
+ borderColor: '#a3c8d8',
|
|
|
},
|
|
|
- {
|
|
|
- name: echartDataGqs.curData ? echartDataGqs.curData.lengedData : '',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'none',
|
|
|
- zlevel: 3,
|
|
|
- itemStyle: {
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
color: '#fc8452',
|
|
|
- borderColor: '#a3c8d8',
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- color: '#fc8452',
|
|
|
- },
|
|
|
},
|
|
|
-
|
|
|
- data: echartDataGqs.curData ? echartDataGqs.curData.data : [],
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- });
|
|
|
- }
|
|
|
+
|
|
|
+ data: echartDataGqs.curData ? echartDataGqs.curData.data : [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .echartLine {
|
|
|
+.echartLine {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .line {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
-
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
hongrunxia