wangxingyuan
7 months ago
9 changed files with 946 additions and 173 deletions
Split View
Diff Options
-
+2 -0package.json
-
+1 -0src/App.vue
-
+16 -0src/api/quniao/infoStatistics.js
-
+9 -0src/api/quniao/soundWave.js
-
+64 -11src/components/FlvPlayer/index.vue
-
+26 -15src/views/quniao/device/index.vue
-
+599 -13src/views/quniao/infoStatistics/index.vue
-
+0 -84src/views/quniao/soundWave/index copy.vue
-
+229 -50src/views/quniao/soundWave/index.vue
+ 2
- 0
package.json
View File
+ 1
- 0
src/App.vue
View File
+ 16
- 0
src/api/quniao/infoStatistics.js
View File
| @ -0,0 +1,16 @@ | |||
| import request from '@/utils/request'; | |||
| export function intrusionNum(data) { | |||
| return request({ | |||
| url: `/api/brid/intrusionNum`, | |||
| method: 'post', | |||
| data: data | |||
| }) | |||
| } | |||
| // 鸟类入侵警告 | |||
| export function reportList(data) { | |||
| return request({ | |||
| url: `/api/brid/reportList`, | |||
| method: 'post', | |||
| data: data | |||
| }) | |||
| } | |||
+ 9
- 0
src/api/quniao/soundWave.js
View File
+ 64
- 11
src/components/FlvPlayer/index.vue
View File
+ 26
- 15
src/views/quniao/device/index.vue
View File
+ 599
- 13
src/views/quniao/infoStatistics/index.vue
View File
| @ -1,27 +1,613 @@ | |||
| <template> | |||
| <div class="quniaoApp"> | |||
| <iframe class="iframe" :src="src" scrolling="yes"></iframe> | |||
| </div> | |||
| <div class="quniaoApp"> | |||
| <!-- <iframe class="iframe" :src="src" scrolling="yes"></iframe> --> | |||
| <el-row :gutter="20"> | |||
| <el-col :span="12"> | |||
| <div class="content-box"> | |||
| <div class="titleLabel"> | |||
| <img style="width: 3%" src="@/assets/images/img/left_yuan.png" /> | |||
| <span>鸟类入侵统计</span> | |||
| <img style="width: 73%" src="@/assets/images/img/XianBig.png" /> | |||
| <img style="width: 5%" src="@/assets/images/img/JianTou.png" /> | |||
| </div> | |||
| <div class="form-box"> | |||
| <el-form label-width="25%"> | |||
| <el-form-item label="选择时间：" | |||
| ><el-date-picker | |||
| popper-class="customDatePicker" | |||
| v-model="timeData" | |||
| type="datetimerange" | |||
| range-separator="至" | |||
| start-placeholder="开始日期" | |||
| end-placeholder="结束日期" | |||
| @change="changeDate" | |||
| format="yyyy-MM-dd HH:mm:ss" | |||
| value-format="yyyy-MM-dd HH:mm:ss" | |||
| > | |||
| </el-date-picker> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| <div class="TiShiShuJu"> | |||
| <div> | |||
| <span class="text" | |||
| ><img src="@/assets/images/img/acousticdevice1.png" /><span | |||
| style="color: rgb(98, 208, 255, 1); margin-left: 15px" | |||
| >有声波装置区域</span | |||
| ></span | |||
| > | |||
| <span class="text" | |||
| ><img src="@/assets/images/img/acousticdevice2.png" /><span | |||
| style="color: rgb(231, 23, 60, 1); margin-left: 15px" | |||
| >无声波装置区域</span | |||
| ></span | |||
| > | |||
| </div> | |||
| </div> | |||
| <div class="echarts_Box" ref="echarts_Box"></div> | |||
| </div> | |||
| </el-col> | |||
| <el-col :span="12"> | |||
| <div class="content-box"> | |||
| <div class="titleLabel"> | |||
| <img style="width: 3%" src="@/assets/images/img/left_yuan.png" /> | |||
| <span>鸟类入侵警告</span> | |||
| <img style="width: 73%" src="@/assets/images/img/XianBig.png" /> | |||
| <img style="width: 5%" src="@/assets/images/img/JianTou.png" /> | |||
| </div> | |||
| <div class="tableQuray"> | |||
| <div class="time_screening"> | |||
| <el-form :model="tableQuray" label-min-width="13%"> | |||
| <el-form-item label="时间筛选"> | |||
| <el-radio-group | |||
| v-model="tableQuray.reportType" | |||
| @change="radioChangeTop" | |||
| > | |||
| <el-radio :label="1">日报</el-radio> | |||
| <el-radio :label="2">周报</el-radio> | |||
| <el-radio :label="3">月报</el-radio> | |||
| <el-radio :label="4">自定义</el-radio> | |||
| </el-radio-group> | |||
| <el-date-picker | |||
| v-model="tableQurayTime" | |||
| type="daterange" | |||
| range-separator="-" | |||
| start-placeholder="开始日期" | |||
| end-placeholder="结束日期" | |||
| format="yyyy-MM-dd" | |||
| value-format="yyyy-MM-dd" | |||
| @change="radioTimeChange" | |||
| :disabled="tableQuray.reportType != 4" | |||
| > | |||
| </el-date-picker> | |||
| </el-form-item> | |||
| <el-form-item label="有无数据筛选"> | |||
| <el-radio-group | |||
| v-model="tableQuray.isHave" | |||
| @change="radioChangeBottom" | |||
| > | |||
| <el-radio :label="2">全部</el-radio> | |||
| <el-radio :label="1">有数据</el-radio> | |||
| <el-radio :label="0">无数据</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| </el-form> | |||
| </div> | |||
| </div> | |||
| <div class="table_box"> | |||
| <el-table :data="tableData" style="width: 97%" border> | |||
| <el-table-column label="序号" align="center" width="100"> | |||
| <template slot-scope="{ $index }"> | |||
| <span>{{ $index + 1 }}</span> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="reportName" | |||
| label="报告名称" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="createTime" | |||
| label="创建时间" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="reportType" | |||
| label="报告类型" | |||
| align="center" | |||
| > | |||
| <template slot-scope="scope"> | |||
| <span v-if="scope.row.reportType == 1">日报</span> | |||
| <span v-if="scope.row.reportType == 2">周报</span> | |||
| <span v-if="scope.row.reportType == 3">月报</span> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column prop="time" label="操作" align="center"> | |||
| <template slot-scope="scope"> | |||
| <div class="operation"> | |||
| <span>预览</span> | |||
| <span>下载</span> | |||
| </div> | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <el-pagination | |||
| @size-change="handleSizeChange" | |||
| @current-change="handleCurrentChange" | |||
| :page-sizes="[3, 4, 5, 6, 7, 10]" | |||
| layout="total, sizes,prev, pager, next,jumper" | |||
| :total="total" | |||
| > | |||
| </el-pagination> | |||
| </div> | |||
| </div> | |||
| </el-col> | |||
| </el-row> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default{ | |||
| data(){ | |||
| return{ | |||
| src:'/static/quniaosss.html' | |||
| import * as echarts from "echarts"; | |||
| import { intrusionNum, reportList } from "@/api/quniao/infoStatistics"; | |||
| import dayjs from "dayjs"; | |||
| export default { | |||
| data() { | |||
| return { | |||
| timeData: ["2023-10-10 00:00:00", "2025-05-13 14:00:00"], | |||
| echartsTime: { | |||
| startTime: null, | |||
| endTime: null, | |||
| }, | |||
| myChart: null, | |||
| tableQuray: { | |||
| // reportType: 1, | |||
| isHave: 2, | |||
| pNum: 1, | |||
| pSize: 10, | |||
| }, | |||
| value1: "", | |||
| tableQurayTime: [], | |||
| tableData: [], | |||
| total: 0, | |||
| }; | |||
| }, | |||
| created() { | |||
| this.changeDate(); | |||
| }, | |||
| mounted() { | |||
| this.initIntrusionNum(); | |||
| this.initReportList(); | |||
| this.initTime(); | |||
| }, | |||
| methods: { | |||
| changeDate() { | |||
| this.echartsTime.startTime = this.timeData[0]; | |||
| this.echartsTime.endTime = this.timeData[1]; | |||
| }, | |||
| // 初始化echarts数据 | |||
| initIntrusionNum() { | |||
| intrusionNum(this.echartsTime).then((res) => { | |||
| if (res.code == 200) { | |||
| let result1 = []; | |||
| let result2 = []; | |||
| res.rows.forEach((item, index) => { | |||
| let result = | |||
| item.hour.split(" ")[0] + | |||
| " " + | |||
| item.hour.split(" ")[1].slice(0, 2) + | |||
| "时"; | |||
| result1.push([result, item.countIsArea]); | |||
| result2.push([result, item.countNoArea]); | |||
| }); | |||
| let dataZoomEnd = result1.length > 10 ? 100 : 100; | |||
| this.initEcharts(result1, result2, dataZoomEnd); | |||
| } | |||
| } | |||
| } | |||
| }); | |||
| }, | |||
| initEcharts(result1, result2, dataZoomEnd) { | |||
| let that = this; | |||
| this.myChart = echarts.init(this.$refs.echarts_Box); | |||
| let colorList = [ | |||
| ["#4d76ff", "#80aaff"], | |||
| ["#FF3838", "#FF6543"], | |||
| ]; | |||
| var option = { | |||
| dataZoom: [ | |||
| { | |||
| type: "inside", | |||
| realtime: true, | |||
| start: 0, | |||
| end: dataZoomEnd, | |||
| zoomOnMouseWheel: true, | |||
| }, | |||
| ], | |||
| tooltip: { | |||
| trigger: "axis", | |||
| }, | |||
| grid: { | |||
| bottom: "60px", | |||
| left: "40px", | |||
| right: "0", | |||
| top: "10px", | |||
| }, | |||
| xAxis: { | |||
| type: "category", | |||
| boundaryGap: false, | |||
| boundaryGap: ["20%", "20%"], | |||
| splitLine: { | |||
| show: false, | |||
| }, | |||
| axisTick: { | |||
| show: false, | |||
| }, | |||
| axisLabel: { | |||
| interval: 0, | |||
| textStyle: { | |||
| color: "#C6D3EC", | |||
| fontSize: "0.6em", | |||
| }, | |||
| formatter: function (value) { | |||
| return that.chulidata(value); | |||
| }, | |||
| lineHeight: 9, | |||
| width: 0.4, | |||
| height: 6, | |||
| }, | |||
| }, | |||
| yAxis: { | |||
| type: "value", | |||
| // 去除背景横线 | |||
| splitLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: "#40486A", | |||
| }, | |||
| }, | |||
| // 字体颜色 | |||
| axisLabel: { | |||
| // formatter: '{value} m³ ', // 给y轴添加单位 | |||
| textStyle: { | |||
| color: "#C6D3EC", | |||
| fontSize: "12", | |||
| }, | |||
| }, | |||
| // 坐标轴颜色 | |||
| axisLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: "#40486A", | |||
| }, | |||
| }, | |||
| min: 0, | |||
| minInterval: 1, | |||
| }, | |||
| series: [ | |||
| { | |||
| name: "有声波装置区域", | |||
| type: "bar", | |||
| color: "rgba(255, 243, 136, 0.62)", | |||
| barWidth: 12, | |||
| itemStyle: { | |||
| normal: { | |||
| color: function (params) { | |||
| return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: colorList[0][0] }, | |||
| { offset: 1, color: colorList[0][1] }, | |||
| ]); | |||
| }, | |||
| }, | |||
| }, | |||
| tooltip: { | |||
| title: "2222222", | |||
| }, | |||
| axisLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: "#40486A", | |||
| }, | |||
| }, | |||
| data: result1, | |||
| }, | |||
| { | |||
| name: "无声波装置区域", | |||
| type: "bar", | |||
| color: "rgba(255, 243, 136, 0.62)", | |||
| barWidth: 12, | |||
| itemStyle: { | |||
| normal: { | |||
| color: function (params) { | |||
| return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
| { offset: 0, color: colorList[1][0] }, | |||
| { offset: 1, color: colorList[1][1] }, | |||
| ]); | |||
| }, | |||
| }, | |||
| }, | |||
| tooltip: { | |||
| title: "2222222", | |||
| }, | |||
| axisLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: "#40486A", | |||
| }, | |||
| }, | |||
| data: result2, | |||
| }, | |||
| ], | |||
| }; | |||
| this.myChart.setOption(option); | |||
| }, | |||
| //图表x坐标轴展示数据处理 | |||
| chulidata(value) { | |||
| let year = value.split(" ")[0].split("-")[0] + "年"; | |||
| let month = Number(value.split(" ")[0].split("-")[1]) + "月"; | |||
| let day = Number(value.split(" ")[0].split("-")[2]) + "日"; | |||
| let time = value.split(" ")[1].slice(0, 2) + "时"; | |||
| return year + "\n" + month + day + "\n" + time; | |||
| }, | |||
| // 初始化表格 | |||
| initReportList() { | |||
| let data = {}; | |||
| if (this.tableQuray.reportType && this.tableQuray.reportType == 4) { | |||
| data = this.tableQuray; | |||
| } else { | |||
| data = { | |||
| reportType: this.tableQuray.reportType, | |||
| isHave: this.tableQuray.isHave, | |||
| pNum: this.tableQuray.pNum, | |||
| pSize: this.tableQuray.pSize, | |||
| }; | |||
| } | |||
| reportList(data).then((res) => { | |||
| console.log(res, "表格数据"); | |||
| this.tableData = res.reportList; | |||
| this.total = res.allNum; | |||
| }); | |||
| }, | |||
| radioChangeTop() { | |||
| console.log(this.tableQuray); | |||
| this.initReportList(); | |||
| }, | |||
| radioChangeBottom() { | |||
| this.initReportList(); | |||
| }, | |||
| radioTimeChange() { | |||
| this.tableQuray.startTime = this.tableQurayTime[0]; | |||
| this.tableQuray.endTime = this.tableQurayTime[1]; | |||
| }, | |||
| // 初始化时间选择器 | |||
| initTime() { | |||
| let now = dayjs(); | |||
| let last24Hours = now.subtract(24, "hour"); | |||
| let startTimeDate = last24Hours.format("YYYY-MM-DD"); | |||
| let endTimeDate = now.format("YYYY-MM-DD"); | |||
| this.tableQurayTime = [startTimeDate, endTimeDate]; | |||
| this.tableQuray.startTime = this.tableQurayTime[0]; | |||
| this.tableQuray.endTime = this.tableQurayTime[1]; | |||
| }, | |||
| handleSizeChange(size) { | |||
| console.log(size, 111); | |||
| this.tableQuray.pSize = size; | |||
| this.initReportList(); | |||
| }, | |||
| handleCurrentChange(page) { | |||
| this.tableQuray.pNum = page; | |||
| this.initReportList(); | |||
| }, | |||
| }, | |||
| }; | |||
| </script> | |||
| <style scoped> | |||
| .quniaoApp{ | |||
| .quniaoApp { | |||
| } | |||
| .el-row { | |||
| height: 100%; | |||
| } | |||
| .content-box { | |||
| width: 100%; | |||
| height: 100%; | |||
| padding: 1.4%; | |||
| } | |||
| .titleLabel { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| color: #40e5f0; | |||
| font-size: 1.2vw; | |||
| } | |||
| .titleLabel img { | |||
| vertical-align: middle; | |||
| } | |||
| .form-box { | |||
| margin-top: 4%; | |||
| width: 100%; | |||
| height: 4%; | |||
| } | |||
| ::v-deep.el-form-item--medium .el-form-item__label { | |||
| font-size: 1vw; | |||
| color: white; | |||
| font-weight: normal; | |||
| height: 4vh; | |||
| line-height: 4vh; | |||
| } | |||
| ::v-deep.el-date-editor { | |||
| background: rgba(32, 47, 62, 1); | |||
| border: 1px solid rgba(64, 72, 106, 1); | |||
| width: 86%; | |||
| height: 4vh; | |||
| } | |||
| ::v-deep .el-date-editor .el-range-input { | |||
| background-color: transparent !important; | |||
| color: white !important; | |||
| } | |||
| ::v-deep .el-range-editor--medium .el-range-separator { | |||
| color: white !important; | |||
| line-height: 3vh; | |||
| } | |||
| .TiShiShuJu { | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 10%; | |||
| } | |||
| .TiShiShuJu > div { | |||
| display: flex; | |||
| width: 75%; | |||
| height: 100%; | |||
| justify-content: space-around; | |||
| align-items: center; | |||
| } | |||
| .TiShiShuJu > div > span { | |||
| font-size: 0.9vw; | |||
| } | |||
| .TiShiShuJu > div > span > img { | |||
| width: 19%; | |||
| } | |||
| .TiShiShuJu .text { | |||
| width: 30%; | |||
| } | |||
| .iframe{ | |||
| .echarts_Box { | |||
| width: 100%; | |||
| height: 76%; | |||
| font-size: 1vw; | |||
| } | |||
| .el-col { | |||
| height: 100%; | |||
| border: none; | |||
| } | |||
| .tableQuray { | |||
| /* padding: 1%; */ | |||
| margin-top: 4%; | |||
| } | |||
| .tableQuray ::v-deep .el-date-editor { | |||
| margin-left: 2%; | |||
| width: 42%; | |||
| background: transparent !important; | |||
| } | |||
| ::v-deep.el-radio .el-radio__label { | |||
| color: #fff !important; | |||
| font-size: 0.9vw !important; | |||
| } | |||
| ::v-deep.el-radio-group { | |||
| margin-left: 2%; | |||
| } | |||
| ::v-deep .el-table { | |||
| font-size: 0.8vw; | |||
| } | |||
| ::v-deep .el-table .el-table__header-wrapper th { | |||
| background-color: #172533 !important; | |||
| color: #b0bdd4 !important; | |||
| font-size: 0.9vw; | |||
| } | |||
| ::v-deep .el-table--border::after { | |||
| /* background-color: #41476B !important; */ | |||
| width: 0 !important; | |||
| } | |||
| ::v-deep .el-table--border { | |||
| border: 1px solid #41476b !important; | |||
| } | |||
| ::v-deep .el-table--border .el-table__cell { | |||
| border-right: 1px solid #41476b !important; | |||
| } | |||
| ::v-deep .el-table th.el-table__cell.is-leaf { | |||
| border-bottom: 1px solid #41476b !important; | |||
| } | |||
| ::v-deep .el-table::before { | |||
| height: 0 !important; | |||
| } | |||
| ::v-deep .el-table__body-wrapper { | |||
| background-color: #222f3d !important; | |||
| } | |||
| ::v-deep | |||
| .el-table--enable-row-hover | |||
| .el-table__body | |||
| tr:hover | |||
| > td.el-table__cell { | |||
| background-color: #222f3d; | |||
| } | |||
| ::v-deep .el-table tr { | |||
| background-color: #222f3d; | |||
| color: #ffffff; | |||
| } | |||
| ::v-deep .el-table td.el-table__cell { | |||
| border-bottom: 1px solid rgba(64, 72, 106, 1); | |||
| } | |||
| ::v-deep .el-table .cell { | |||
| line-height: 28px; | |||
| color: #ffffff; | |||
| } | |||
| .operation { | |||
| width: 100%; | |||
| display: flex; | |||
| justify-content: space-evenly; | |||
| color: #1799e2; | |||
| cursor: pointer; | |||
| } | |||
| ::v-deep .el-pagination { | |||
| /* text-align: center; */ | |||
| margin-top: 20px; | |||
| margin-left: 3%; | |||
| } | |||
| ::v-deep .el-pagination .el-pagination__total { | |||
| color: white !important; | |||
| font-size: 0.8vw !important; | |||
| } | |||
| ::v-deep .el-pagination .el-pager li { | |||
| background-color: transparent !important; | |||
| color: white !important; | |||
| border-color: #fff !important; | |||
| font-size: 0.8vw !important; | |||
| } | |||
| ::v-deep .el-pagination .el-pager li.active { | |||
| background-color: transparent !important; | |||
| color: #40e5f0 !important; | |||
| } | |||
| ::v-deep .el-pagination .btn-prev, | |||
| ::v-deep .el-pagination .btn-next { | |||
| background-color: transparent !important; | |||
| color: white !important; | |||
| } | |||
| ::v-deep .el-pagination .el-select .el-input--mini .el-input__inner { | |||
| background-color: transparent !important; | |||
| color: white !important; | |||
| border: 1px solid #fff !important; | |||
| } | |||
| ::v-deep .el-pagination .el-input-number .el-input__inner { | |||
| background-color: transparent !important; | |||
| color: white !important; | |||
| border: 1px solid #fff !important; | |||
| } | |||
| ::v-deep.el-pagination .el-pagination__jump { | |||
| color: #fff !important; | |||
| font-size: 0.8vw !important; | |||
| } | |||
| ::v-deep.el-pagination .el-pagination__jump .el-input__inner { | |||
| background: transparent !important; | |||
| color: #fff !important; | |||
| } | |||
| </style> | |||
| <style> | |||
| </style> | |||
+ 0
- 84
src/views/quniao/soundWave/index copy.vue
View File
| @ -1,84 +0,0 @@ | |||
| <template> | |||
| <div class="quniaoApp"> | |||
| <iframe class="iframe" ref="iframe" :src="src" scrolling="yes"></iframe> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import { MessageBox } from "element-ui"; | |||
| import {oneKeyReq} from '@/api/quniao/soundWave'; | |||
| import { Message } from 'element-ui'; | |||
| export default{ | |||
| data(){ | |||
| return{ | |||
| src:'/static/quniaoShenBo.html' | |||
| } | |||
| }, | |||
| methods:{ | |||
| //获取iframe中传递的参数 并进行操作 | |||
| postMessageFromIframe(message){ | |||
| console.log(message.data) | |||
| if(message.data==1){ | |||
| MessageBox.confirm("确认关闭？") | |||
| .then(() => { | |||
| oneKeyReq(message.data).then((res)=>{ | |||
| console.log(res) | |||
| if(res.code==200){ | |||
| this.handleIframeLoad(res,message.data) | |||
| Message({ | |||
| message:'关闭成功', | |||
| type:'success' | |||
| }) | |||
| } | |||
| }) | |||
| }) | |||
| .catch(() => {}); | |||
| }else if(message.data==0){ | |||
| MessageBox.confirm("确认开启？") | |||
| .then(() => { | |||
| oneKeyReq(message.data).then((res)=>{ | |||
| console.log(res) | |||
| if(res.code==200){ | |||
| this.handleIframeLoad(res,message.data) | |||
| Message({ | |||
| message:'开启成功', | |||
| type:'success' | |||
| }) | |||
| } | |||
| }) | |||
| }) | |||
| .catch(() => {}); | |||
| } | |||
| }, | |||
| //向iframe中传递参数 | |||
| handleIframeLoad(data,type) { | |||
| let iframeWindow = this.$refs.iframe.contentWindow; | |||
| let result={ | |||
| type, | |||
| data | |||
| } | |||
| iframeWindow.postMessage(result, '*'); | |||
| }, | |||
| }, | |||
| mounted(){ | |||
| //添加监听iframe的message事件，获取参数 | |||
| window.addEventListener('message', this.postMessageFromIframe); | |||
| }, | |||
| beforeDestroy(){ | |||
| //移除iframe的message事件 | |||
| window.removeEventListener('message',this.postMessageFromIframe); | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .quniaoApp{ | |||
| } | |||
| .iframe{ | |||
| width: 100%; | |||
| height: 100%; | |||
| border: none; | |||
| } | |||
| </style> | |||