1 line
37 KiB
JSON
1 line
37 KiB
JSON
{"remainingRequest":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\views\\bounced\\dataBoard.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\views\\bounced\\dataBoard.vue","mtime":1673944978879},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1673232709513},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1673232720592}],"contextDependencies":[],"result":["import \"core-js/modules/es6.set\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.array.from\";\nimport \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport typeChart from \"../../components/target/typeChart.vue\";\nimport OD from \"../../components/target/OD.vue\";\nimport { getComponentSection } from \"../../api/index\";\nexport default {\n components: {\n typeChart: typeChart,\n OD: OD\n },\n props: {\n activeName: {\n type: String\n },\n triggerData: {\n type: Array,\n default: function _default() {\n return [];\n }\n }\n },\n data: function data() {\n return {\n title1: '01断面',\n title2: '01区域',\n dialogVisible: false,\n // 触发数据断面与区域相同\n tableData: [{\n steam_id: 0,\n timestamp: '2022-10-01 09:15:10.156',\n obj_id: 125,\n type: 'car',\n plate: '苏A0131M',\n speed: 35.2,\n event: 'in',\n lane: 0,\n headWay: 19\n }, {\n steam_id: 0,\n timestamp: '2022-10-01 09:15:10.156',\n obj_id: 125,\n type: 'car',\n plate: '苏A0131M',\n speed: 70.2,\n event: 'in',\n lane: 0,\n headWay: 6.5\n }, {\n steam_id: 0,\n timestamp: '2022-10-01 09:15:10.156',\n obj_id: 125,\n type: 'car',\n plate: '苏A0131M',\n speed: 60.2,\n event: 'in',\n lane: 0,\n headWay: 10.5\n }, {\n steam_id: 0,\n timestamp: '2022-10-01 09:15:10.156',\n obj_id: 125,\n type: 'car',\n plate: '苏A0131M',\n speed: 60.2,\n event: 'in',\n lane: 0,\n headWay: 2.5\n }, {\n steam_id: 0,\n timestamp: '2022-10-01 09:15:10.156',\n obj_id: 125,\n type: 'car',\n plate: '苏A0131M',\n speed: 60.2,\n event: 'in',\n lane: 0,\n headWay: 11.5\n }],\n // 断面的周期统计\n sectionList: [{\n steam_id: '0',\n gate_id: 'Gate_1',\n name: '西进口',\n timestamp: '2022-10-1',\n interval: '53',\n type: 'truck',\n in_flow: 90,\n out_flow: 120,\n flow: 147,\n in_spd: 20.1,\n out_spd: 30.6,\n speed: 30\n }, {\n steam_id: '0',\n gate_id: 'Gate_1',\n name: '西进口',\n timestamp: '2022-10-1',\n interval: '53',\n type: 'truck',\n in_flow: 90,\n out_flow: 120,\n flow: 123,\n in_spd: 20.1,\n out_spd: 30.6,\n speed: 40\n }, {\n steam_id: '0',\n gate_id: 'Gate_1',\n name: '西进口',\n timestamp: '2022-10-1',\n interval: '53',\n type: 'truck',\n in_flow: 90,\n out_flow: 80,\n flow: 210,\n in_spd: 20.1,\n out_spd: 30.6,\n speed: 50\n }, {\n steam_id: '0',\n gate_id: 'Gate_1',\n name: '西进口',\n timestamp: '2022-10-1',\n interval: '53',\n type: 'truck',\n in_flow: 90,\n out_flow: 120,\n flow: 210,\n in_spd: 20.1,\n out_spd: 30.6,\n speed: 77\n }],\n // 区域的周期时刻\n regionList1: [{\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n frame: 1000,\n type: 'car',\n n_stay: 3,\n n_queue: 2,\n occ: 1,\n speed: 5.6\n }, {\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n frame: 1000,\n type: 'car',\n n_stay: 3,\n n_queue: 2,\n occ: 1,\n speed: 12.6\n }, {\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n frame: 1000,\n type: 'car',\n n_stay: 3,\n n_queue: 2,\n occ: 1,\n speed: 10\n }, {\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n frame: 1000,\n type: 'car',\n n_stay: 3,\n n_queue: 2,\n occ: 1,\n speed: 6\n }],\n // 区域的周期统计\n regionList2: [{\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n type: 'car',\n enter_flow: 1,\n leave_flow: 3,\n ave_stay: 3.2,\n ave_queue: 2.9,\n ave_occ: 0.56,\n ave_delay: 8,\n ave_speed: 12\n }, {\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n type: 'car',\n enter_flow: 1,\n leave_flow: 3,\n ave_stay: 3.2,\n ave_queue: 2.9,\n ave_occ: 0.56,\n ave_delay: 7,\n ave_speed: 22\n }, {\n zone_id: '0',\n gate_id: 'Zone_1',\n name: '西进口左1',\n timestamp: '2022-10-1',\n type: 'car',\n enter_flow: 1,\n leave_flow: 3,\n ave_stay: 3.2,\n ave_queue: 2.9,\n ave_occ: 0.56,\n ave_delay: 17,\n ave_speed: 12\n }],\n // sectionShow: false,\n // regionShow: false,\n count1: false,\n count2: false,\n idVal: '',\n //组件数组\n componentList: [],\n // 触发数据数组\n triggerList: [],\n //断面的数组\n sectionData: [],\n // 区域的数组\n regionData: []\n };\n },\n created: function created() {\n var _this = this;\n\n // console.log(this.$route.query.id);\n // console.log(this.$route.query.id);\n this.idVal = this.$route.query.id;\n getComponentSection({\n VideoId: this.idVal\n }).then(function (res) {\n // console.log(res);\n if (res.data.code == 200) {\n // console.log(res.data.data, '11111111111111111');\n _this.componentList = res.data.data; // 断面\n\n var sectionArr = []; // 区域\n\n var regionArr = [];\n res.data.data.forEach(function (val) {\n if (val.graphicType == '区域') {\n regionArr.push(val.combinationName);\n regionArr = Array.from(new Set(regionArr));\n } else {\n sectionArr.push(val.combinationName);\n sectionArr = Array.from(new Set(sectionArr));\n }\n });\n _this.regionData = regionArr.map(function (item) {\n item = {\n title: item,\n children: []\n };\n res.data.data.forEach(function (val) {\n if (item.title == val.combinationName && val.graphicType == '区域') {\n item.children.push(val);\n }\n });\n return item;\n });\n _this.sectionData = sectionArr.map(function (item) {\n item = {\n title: item,\n children: []\n };\n res.data.data.forEach(function (val) {\n if (item.title == val.combinationName && val.graphicType == '断面') {\n item.children.push(val);\n }\n });\n return item;\n });\n console.log(_this.regionData, 'regionArr'); // console.log(, '111111');\n } else if (res.data.code == 404) {}\n });\n },\n methods: {\n // 区域点击事件\n regionHandle: function regionHandle(i) {\n //获取区域内box的所有标签\n var regions = document.querySelectorAll('.region');\n var downPulls = document.querySelectorAll('.downPull');\n downPulls[i].dataset.num++; // console.log(downPulls[i].dataset.num);\n // 判断datasetid能否整除2能整除进行操作\n\n if (downPulls[i].dataset.num % 2 == 0) {\n downPulls[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\n regions[i].style.height = regions[i].firstChild.offsetHeight + 30 + 'px';\n } else {\n downPulls[i].style.cssText = 'transition: all 0.5s linear;';\n regions[i].style.height = '500px';\n }\n },\n // 断面点击事件\n sectionHandle: function sectionHandle(i) {\n var sections = document.querySelectorAll('.section');\n var downPulls1 = document.querySelectorAll('.downPull1'); // 断面的小图标\n\n downPulls1[i].dataset.num++;\n\n if (downPulls1[i].dataset.num % 2 == 0) {\n downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\n sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';\n } else {\n downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\n sections[i].style.height = '500px';\n }\n }\n },\n mounted: function mounted() {},\n watch: {\n triggerData: {\n handler: function handler(newVal, oldVal) {\n console.log(newVal, 'newVal');\n this.triggerList = newVal;\n\n for (var i = 0; i < this.triggerList.length; i++) {\n if (this.triggerList[i].headWay == -1) {\n this.triggerList[i].headWay = '';\n }\n }\n },\n immediate: true\n }\n }\n};",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n <div ref=\"box\" class=\"box\">\r\n <!-- <p class=\"title\" style=\"margin-bottom: 20px;font-size: 20px;font-weight: 400;\">数据看板</p> -->\r\n\r\n <div class=\"dataBoard\" v-if=\"activeName == 'second'\" :style=\"componentList.length > 4 ? 'height:auto' : 'height:1050px'\">\r\n <!-- 断面 -->\r\n <div class=\"plate1\">\r\n <div class=\"section\" ref=\"section\" v-for=\"(s, i) in sectionData\" :key=\"s.analogAreaComponentId\">\r\n <template>\r\n <div ref=\"sectionContent\">\r\n <div>\r\n <p class=\"board-title\">\r\n <span>{{ s.title }}</span>\r\n </p>\r\n <span class=\"downPull1\" data-num=\"1\" @click=\"sectionHandle(i)\"></span>\r\n </div>\r\n <div v-for=\"o in s.children\" :key=\"o.analogAreaComponentId\">\r\n <typeChart\r\n :pageType=\"o.graphicType\"\r\n triggerType=\"触发\"\r\n :componentName=\"o.componentName\"\r\n :data=\"tableData\"\r\n :echartArr=\"o.presentationForm\"\r\n />\r\n </div>\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n\r\n <!-- 区域 -->\r\n <div class=\"plate2\">\r\n <div class=\"region\" ref=\"region\" v-for=\"(s, i) in regionData\" :key=\"s.analogAreaComponentId\">\r\n <div ref=\"regionContent\">\r\n <div>\r\n <p class=\"board-title\">\r\n <span>{{ s.title }}</span>\r\n </p>\r\n <span class=\"downPull\" data-num=\"1\" @click=\"regionHandle(i)\"></span>\r\n </div>\r\n <div v-for=\"o in s.children\" :key=\"o.analogAreaComponentId\">\r\n <OD\r\n v-if=\"o.componentName.includes('OD')\"\r\n :pageType=\"o.graphicType\"\r\n triggerType=\"触发\"\r\n :componentName=\"o.componentName\"\r\n :echartArr=\"o.presentationForm\"\r\n />\r\n <typeChart\r\n v-else\r\n :pageType=\"o.graphicType\"\r\n triggerType=\"触发\"\r\n :componentName=\"o.componentName\"\r\n :data=\"triggerList.length != 0 ? triggerList : tableData\"\r\n :echartArr=\"o.presentationForm\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- 详情框 -->\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport typeChart from '../../components/target/typeChart.vue';\r\nimport OD from '../../components/target/OD.vue';\r\n\r\nimport { getComponentSection } from '../../api/index';\r\nexport default {\r\n components: {\r\n typeChart,\r\n OD\r\n },\r\n props: {\r\n activeName: {\r\n type: String\r\n },\r\n triggerData: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n title1: '01断面',\r\n title2: '01区域',\r\n dialogVisible: false,\r\n // 触发数据断面与区域相同\r\n tableData: [\r\n {\r\n steam_id: 0,\r\n timestamp: '2022-10-01 09:15:10.156',\r\n obj_id: 125,\r\n type: 'car',\r\n plate: '苏A0131M',\r\n speed: 35.2,\r\n event: 'in',\r\n lane: 0,\r\n headWay: 19\r\n },\r\n {\r\n steam_id: 0,\r\n timestamp: '2022-10-01 09:15:10.156',\r\n obj_id: 125,\r\n type: 'car',\r\n plate: '苏A0131M',\r\n speed: 70.2,\r\n event: 'in',\r\n lane: 0,\r\n headWay: 6.5\r\n },\r\n {\r\n steam_id: 0,\r\n timestamp: '2022-10-01 09:15:10.156',\r\n obj_id: 125,\r\n type: 'car',\r\n plate: '苏A0131M',\r\n speed: 60.2,\r\n event: 'in',\r\n lane: 0,\r\n headWay: 10.5\r\n },\r\n {\r\n steam_id: 0,\r\n timestamp: '2022-10-01 09:15:10.156',\r\n obj_id: 125,\r\n type: 'car',\r\n plate: '苏A0131M',\r\n speed: 60.2,\r\n event: 'in',\r\n lane: 0,\r\n headWay: 2.5\r\n },\r\n {\r\n steam_id: 0,\r\n timestamp: '2022-10-01 09:15:10.156',\r\n obj_id: 125,\r\n type: 'car',\r\n plate: '苏A0131M',\r\n speed: 60.2,\r\n event: 'in',\r\n lane: 0,\r\n headWay: 11.5\r\n }\r\n ],\r\n\r\n // 断面的周期统计\r\n sectionList: [\r\n {\r\n steam_id: '0',\r\n gate_id: 'Gate_1',\r\n name: '西进口',\r\n timestamp: '2022-10-1',\r\n interval: '53',\r\n type: 'truck',\r\n in_flow: 90,\r\n out_flow: 120,\r\n flow: 147,\r\n in_spd: 20.1,\r\n out_spd: 30.6,\r\n speed: 30\r\n },\r\n {\r\n steam_id: '0',\r\n gate_id: 'Gate_1',\r\n name: '西进口',\r\n timestamp: '2022-10-1',\r\n interval: '53',\r\n type: 'truck',\r\n in_flow: 90,\r\n out_flow: 120,\r\n flow: 123,\r\n in_spd: 20.1,\r\n out_spd: 30.6,\r\n speed: 40\r\n },\r\n {\r\n steam_id: '0',\r\n gate_id: 'Gate_1',\r\n name: '西进口',\r\n timestamp: '2022-10-1',\r\n interval: '53',\r\n type: 'truck',\r\n in_flow: 90,\r\n out_flow: 80,\r\n flow: 210,\r\n in_spd: 20.1,\r\n out_spd: 30.6,\r\n speed: 50\r\n },\r\n {\r\n steam_id: '0',\r\n gate_id: 'Gate_1',\r\n name: '西进口',\r\n timestamp: '2022-10-1',\r\n interval: '53',\r\n type: 'truck',\r\n in_flow: 90,\r\n out_flow: 120,\r\n flow: 210,\r\n in_spd: 20.1,\r\n out_spd: 30.6,\r\n speed: 77\r\n }\r\n ],\r\n // 区域的周期时刻\r\n regionList1: [\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n frame: 1000,\r\n type: 'car',\r\n n_stay: 3,\r\n n_queue: 2,\r\n occ: 1,\r\n speed: 5.6\r\n },\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n frame: 1000,\r\n type: 'car',\r\n n_stay: 3,\r\n n_queue: 2,\r\n occ: 1,\r\n speed: 12.6\r\n },\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n frame: 1000,\r\n type: 'car',\r\n n_stay: 3,\r\n n_queue: 2,\r\n occ: 1,\r\n speed: 10\r\n },\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n frame: 1000,\r\n type: 'car',\r\n n_stay: 3,\r\n n_queue: 2,\r\n occ: 1,\r\n speed: 6\r\n }\r\n ],\r\n // 区域的周期统计\r\n regionList2: [\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n type: 'car',\r\n enter_flow: 1,\r\n leave_flow: 3,\r\n ave_stay: 3.2,\r\n ave_queue: 2.9,\r\n ave_occ: 0.56,\r\n ave_delay: 8,\r\n ave_speed: 12\r\n },\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n type: 'car',\r\n enter_flow: 1,\r\n leave_flow: 3,\r\n ave_stay: 3.2,\r\n ave_queue: 2.9,\r\n ave_occ: 0.56,\r\n ave_delay: 7,\r\n ave_speed: 22\r\n },\r\n {\r\n zone_id: '0',\r\n gate_id: 'Zone_1',\r\n name: '西进口左1',\r\n timestamp: '2022-10-1',\r\n type: 'car',\r\n enter_flow: 1,\r\n leave_flow: 3,\r\n ave_stay: 3.2,\r\n ave_queue: 2.9,\r\n ave_occ: 0.56,\r\n ave_delay: 17,\r\n ave_speed: 12\r\n }\r\n ],\r\n\r\n // sectionShow: false,\r\n // regionShow: false,\r\n\r\n count1: false,\r\n count2: false,\r\n\r\n idVal: '',\r\n //组件数组\r\n componentList: [],\r\n // 触发数据数组\r\n triggerList: [],\r\n //断面的数组\r\n sectionData: [],\r\n // 区域的数组\r\n regionData: []\r\n };\r\n },\r\n created() {\r\n // console.log(this.$route.query.id);\r\n // console.log(this.$route.query.id);\r\n this.idVal = this.$route.query.id;\r\n getComponentSection({ VideoId: this.idVal }).then((res) => {\r\n // console.log(res);\r\n if (res.data.code == 200) {\r\n // console.log(res.data.data, '11111111111111111');\r\n this.componentList = res.data.data;\r\n // 断面\r\n var sectionArr = [];\r\n // 区域\r\n var regionArr = [];\r\n res.data.data.forEach((val) => {\r\n if (val.graphicType == '区域') {\r\n regionArr.push(val.combinationName);\r\n regionArr = Array.from(new Set(regionArr));\r\n } else {\r\n sectionArr.push(val.combinationName);\r\n sectionArr = Array.from(new Set(sectionArr));\r\n }\r\n });\r\n this.regionData = regionArr.map((item) => {\r\n item = { title: item, children: [] };\r\n res.data.data.forEach((val) => {\r\n if (item.title == val.combinationName && val.graphicType == '区域') {\r\n item.children.push(val);\r\n }\r\n });\r\n return item;\r\n });\r\n this.sectionData = sectionArr.map((item) => {\r\n item = { title: item, children: [] };\r\n res.data.data.forEach((val) => {\r\n if (item.title == val.combinationName && val.graphicType == '断面') {\r\n item.children.push(val);\r\n }\r\n });\r\n return item;\r\n });\r\n console.log(this.regionData, 'regionArr');\r\n // console.log(, '111111');\r\n } else if (res.data.code == 404) {\r\n }\r\n });\r\n },\r\n methods: {\r\n // 区域点击事件\r\n regionHandle(i) {\r\n //获取区域内box的所有标签\r\n let regions = document.querySelectorAll('.region');\r\n let downPulls = document.querySelectorAll('.downPull');\r\n downPulls[i].dataset.num++;\r\n // console.log(downPulls[i].dataset.num);\r\n // 判断datasetid能否整除2能整除进行操作\r\n if (downPulls[i].dataset.num % 2 == 0) {\r\n downPulls[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\r\n regions[i].style.height = regions[i].firstChild.offsetHeight + 30 + 'px';\r\n } else {\r\n downPulls[i].style.cssText = 'transition: all 0.5s linear;';\r\n regions[i].style.height = '500px';\r\n }\r\n },\r\n // 断面点击事件\r\n sectionHandle(i) {\r\n let sections = document.querySelectorAll('.section');\r\n let downPulls1 = document.querySelectorAll('.downPull1');\r\n // 断面的小图标\r\n downPulls1[i].dataset.num++;\r\n if (downPulls1[i].dataset.num % 2 == 0) {\r\n downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\r\n sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';\r\n } else {\r\n downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n sections[i].style.height = '500px';\r\n }\r\n }\r\n },\r\n mounted() {},\r\n watch: {\r\n triggerData: {\r\n handler(newVal, oldVal) {\r\n console.log(newVal, 'newVal');\r\n this.triggerList = newVal;\r\n for (let i = 0; i < this.triggerList.length; i++) {\r\n if (this.triggerList[i].headWay == -1) {\r\n this.triggerList[i].headWay = '';\r\n }\r\n }\r\n },\r\n immediate: true\r\n }\r\n }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* .box {\r\n overflow-y: scroll;\r\n} */\r\n.dataBoard {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n}\r\n.plate1,\r\n.plate2 {\r\n width: 48%;\r\n}\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n width: 100%;\r\n border: 1px solid #e4e7ed;\r\n box-sizing: border-box;\r\n padding: 15px;\r\n height: 500px;\r\n position: relative;\r\n transition: all 1s;\r\n overflow: hidden;\r\n margin-top: 30px;\r\n}\r\n.dataBoard .region:nth-child(1),\r\n.dataBoard .section:nth-child(1) {\r\n margin-top: 0;\r\n}\r\n/* .downUp{\r\n height: 2000px !important;\r\n} */\r\n\r\n.dataBoard .board-title {\r\n font-size: 17px;\r\n font-weight: 400;\r\n position: relative;\r\n margin-bottom: 15px;\r\n border-bottom: 1px solid #e4e7ed;\r\n}\r\n.dataBoard .board-title span {\r\n padding: 5px 10px 5px 10px;\r\n border-bottom: 1px solid #79b7f8;\r\n /* display: block; */\r\n display: inline-block;\r\n}\r\n\r\n.test-div i {\r\n font-size: 25px;\r\n}\r\n\r\n.down {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n}\r\n\r\n.downPull,\r\n.downPull1 {\r\n position: absolute;\r\n top: 20px;\r\n right: 17px;\r\n cursor: pointer;\r\n background-size: 14px 9px;\r\n background-image: url(../../assets/img/downpull.png);\r\n width: 14px;\r\n height: 9px;\r\n}\r\n\r\n.upActive {\r\n transform: rotate(180deg);\r\n transition: all 0.5s linear;\r\n /* transform-origin: 7px 7px; */\r\n}\r\n.active {\r\n transition: all 0.5s linear;\r\n}\r\n</style>"],"sourceRoot":"src/views/bounced"}]} |