diff --git a/src/router/index.js b/src/router/index.js index 3607a009460f41ecaac8c57b81de11a79f7a0963..6ed9423774f48634d6b88559b4259c3ce8dc5cac 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -155,18 +155,18 @@ export const constantRoutes = [ path: 'leakyCableRepair', name: 'leakyCableRepair', component: () => import('@/views/history/leakyCableRepair/index.vue'), - meta: { title: 'æ¼ç¼†ç›‘测维护状æ€' } + meta: { title: 'æ¼ç¼†ç›‘测维护历å²' } }, { - path: '', - name: 'leakyCableRepair', - component: () => import('@/views/history/leakyCableRepair/index.vue'), + path: 'deviceLinkStatus', + name: 'deviceLinkStatus', + component: () => import('@/views/history/deviceLinkStatus/index.vue'), meta: { title: '设备连接历å²çŠ¶æ€' } }, { - path: '', - name: 'leakyCableRepair', - component: () => import('@/views/history/leakyCableRepair/index.vue'), + path: 'deviceLinkRepair', + name: 'deviceLinkRepair', + component: () => import('@/views/history/deviceLinkRepair/index.vue'), meta: { title: '设备连接维修历å²' } } ] diff --git a/src/views/history/deviceLinkRepair/index.vue b/src/views/history/deviceLinkRepair/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..27cae7fa3fd6ea33001dde55e79981a8742d3e46 --- /dev/null +++ b/src/views/history/deviceLinkRepair/index.vue @@ -0,0 +1,229 @@ +<template> + <div class="leakage-cable"> + <!-- è®¾å¤‡è¿žæŽ¥ç»´ä¿®åŽ†å² --> + <div class="leakage-top"> + <div style="color: #666666">å…±14æ¡æ•°æ®</div> + <div class="operate-btn"> + <el-button + :type="multipleSelection.length ? 'primary' : 'info'" + :disabled="!multipleSelection.length" + >åˆ é™¤</el-button + > + <el-button type="primary">刷新</el-button> + <el-button type="primary">查询</el-button> + <el-button type="primary">导出</el-button> + <el-button type="primary">清空数æ®</el-button> + </div> + </div> + <el-table + :data="tableData" + style="width: 100%" + :cell-class-name="cellClassFn" + :header-cell-style="{ background: '#EAF1FE', color: '#666666' }" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55" align="center" /> + + <el-table-column prop="netDevice" label="网元设备" align="center" /> + <el-table-column + prop="linkStatus" + label="连接状æ€" + width="150" + align="center" + > + </el-table-column> + <el-table-column prop="netDevice2" label="网元设备" align="center"> + </el-table-column> + <el-table-column prop="repairPerson" label="网元设备" align="center"> + </el-table-column> + <el-table-column + prop="linkRepairDate" + label="链接告è¦ç»´ä¿®æ—¶é—´" + + align="center" + /> + </el-table> + <pagination + :limit="searchForm.pageSize" + :page="searchForm.pageNum" + :total="total" + class="pagination" + @pagination="handlePageChange" + > + </pagination> + </div> +</template> +<script> +import Pagination from "@/components/Pagination"; +export default { + props: [], + components: { Pagination }, + data() { + return { + multipleSelection: [], + searchForm: { + pageNum: 1, + pageSize: 10, + }, + total: 10, + tableData: [ + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + repairPerson: "å¼ ä¸‰", + linkRepairDate: "2022/12/18 11:59:42", + }, + { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + linkRepairDate: "2022/12/18 11:59:42", + repairPerson: "å¼ ä¸‰", + }, + ], + }; + }, + computed: {}, + methods: { + handleSelectionChange(val) { + this.multipleSelection = val; + }, + handlePageChange(pageData) { + this.searchForm.pageSize = pageData.size; + this.searchForm.pageNum = pageData.page; + }, + cellClassFn({ row, column, rowIndex, columnIndex }) { + if (row.linkStatus == "连接异常" && column.label == "连接状æ€") { + return "emergency"; + } else if (row.linkStatus == "连接æ£å¸¸" && column.label == "连接状æ€") { + return "normal"; + } + if (rowIndex % 2 == 1) { + return "stripe"; + } + }, + }, + mounted() {}, +}; +</script> +<style lang="scss" scoped> +.leakage-cable { + .leakage-top { + margin-bottom: 20px; + display: flex; + align-items: flex-end; + justify-content: space-between; + } + & ::v-deep .cell { + color: #333333; + } + + & ::v-deep .stripe { + background-color: #eaf1fe; + } + & ::v-deep .emergency { + background-color: #f00; + } + & ::v-deep .important { + background-color: #f89850; + } + & ::v-deep .normal { + background-color: green; + } + + .page { + display: flex; + align-items: center; + justify-content: center; + margin: 20px 0; + .pageNum { + margin: 0 20px; + } + } +} +</style> \ No newline at end of file diff --git a/src/views/history/deviceLinkStatus/index.vue b/src/views/history/deviceLinkStatus/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..addcfd888fdf0ad8848aa41b4ce537e31d689f36 --- /dev/null +++ b/src/views/history/deviceLinkStatus/index.vue @@ -0,0 +1,251 @@ +<template> + <div class="leakage-cable"> + <!-- è®¾å¤‡è¿žæŽ¥çŠ¶æ€ --> + <div class="leakage-top"> + <div style="color: #666666">å…±14æ¡æ•°æ®</div> + <div class="operate-btn"> + <el-button + :type="multipleSelection.length ? 'primary' : 'info'" + :disabled="!multipleSelection.length" + >åˆ é™¤</el-button + > + <el-button type="primary">刷新</el-button> + <el-button type="primary">查询</el-button> + <el-button type="primary">导出</el-button> + <el-button type="primary">清空数æ®</el-button> + </div> + </div> + <el-table + :data="tableData" + style="width: 100%" + :cell-class-name="cellClassFn" + :header-cell-style="{ background: '#EAF1FE', color: '#666666' }" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55" align="center" /> + + <el-table-column + prop="netDevice" + label="网元设备" + + align="center" + /> + <el-table-column + prop="linkStatus" + label="连接状æ€" + width="150" + align="center" + > + </el-table-column> + <el-table-column prop="netDevice2" label="网元设备" align="center"> + </el-table-column> + <el-table-column + prop="uploadDate" + label="ä¸Šä¼ æ—¶é—´" + + align="center" + /> + <el-table-column + prop="cancelDate" + label="å–消时间" + + align="center" + /> + <el-table-column + prop="linkCancelTime" + label="连接ä¸æ–时长" + + align="center" + /> + </el-table> + <pagination + :limit="searchForm.pageSize" + :page="searchForm.pageNum" + :total="total" + class="pagination" + @pagination="handlePageChange" + > + </pagination> + </div> +</template> +<script> +import Pagination from "@/components/Pagination"; +export default { + props: [], + components: { Pagination }, + data() { + return { + multipleSelection: [], + searchForm: { + pageNum: 1, + pageSize: 10, + }, + total: 10, + tableData: [ + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "现场管ç†å•å…ƒ K65+308", + linkStatus: "连接æ£å¸¸", + netDevice2: "故障定ä½å•å…ƒ K64+287", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, { + netDevice: "监控ä¸å¿ƒLSC", + linkStatus: "连接异常", + netDevice2: "现场管ç†å•å…ƒ K65+308", + uploadDate: "2022/12/18 11:51:12", + cancelDate: "2022/12/18 11:59:42", + linkCancelTime: "5å°æ—¶2分5秒", + }, + ], + }; + }, + computed: {}, + methods: { + handleSelectionChange(val) { + this.multipleSelection = val; + }, + handlePageChange(pageData) { + this.searchForm.pageSize = pageData.size; + this.searchForm.pageNum = pageData.page; + }, + cellClassFn({ row, column, rowIndex, columnIndex }) { + if (row.linkStatus == "连接异常" && column.label == "连接状æ€") { + return "emergency"; + } else if (row.linkStatus == "连接æ£å¸¸" && column.label == "连接状æ€") { + return "normal"; + } + if (rowIndex % 2 == 1) { + return "stripe"; + } + }, + }, + mounted() {}, +}; +</script> +<style lang="scss" scoped> +.leakage-cable { + .leakage-top { + margin-bottom: 20px; + display: flex; + align-items: flex-end; + justify-content: space-between; + } + & ::v-deep .cell { + color: #333333; + } + + & ::v-deep .stripe { + background-color: #eaf1fe; + } + & ::v-deep .emergency { + background-color: #f00; + } + & ::v-deep .important { + background-color: #f89850; + } + & ::v-deep .normal { + background-color: green; + } + + .page { + display: flex; + align-items: center; + justify-content: center; + margin: 20px 0; + .pageNum { + margin: 0 20px; + } + } +} +</style> \ No newline at end of file diff --git a/src/views/history/leakyCableRepair/index.vue b/src/views/history/leakyCableRepair/index.vue index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c7e8863bfc3674ad292c64834547756cfddad89a 100644 --- a/src/views/history/leakyCableRepair/index.vue +++ b/src/views/history/leakyCableRepair/index.vue @@ -0,0 +1,251 @@ +<template> + <div class="leakage-cable"> + <!-- è®¾å¤‡ç»´æŠ¤åŽ†å² --> + <div class="leakage-top"> + <div style="color: #666666">å…±8æ¡æ•°æ®</div> + <div class="operate-btn"> + <el-button + :type="multipleSelection.length ? 'primary' : 'info'" + :disabled="!multipleSelection.length" + >åˆ é™¤</el-button + > + <el-button type="primary">刷新</el-button> + <el-button type="primary">查询</el-button> + <el-button type="primary">导出</el-button> + </div> + </div> + <el-table + :data="tableData" + style="width: 100%" + :cell-class-name="cellClassFn" + :header-cell-style="{ background: '#EAF1FE', color: '#666666' }" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55" align="center" /> + + <el-table-column + prop="name" + label="基站å称" + width="180" + align="center" + /> + <el-table-column + prop="object" + label="å‘Šè¦å¯¹è±¡" + width="180" + align="center" + /> + <el-table-column prop="level" label="å‘Šè¦çº§åˆ«" width="150" align="center"> + <template slot-scope="scope"> + <div> + {{ scope.row.level }} + </div> + </template> + </el-table-column> + <el-table-column prop="message" label="å‘Šè¦ä¿¡æ¯" align="center"> + <template slot-scope="scope"> + <div + v-for="(item, index) in scope.row.message.red" + :key="index + 'red'" + class="red message" + > + {{ item }} + </div> + <div + v-for="(item, index) in scope.row.message.green" + :key="index + 'green'" + class="green message" + > + {{ item }} + </div> + <div + v-for="(item, index) in scope.row.message.black" + :key="index + 'black'" + class="black message" + > + {{ item }} + </div> + </template> + </el-table-column> + <el-table-column prop="uploadDate" label="å‘Šè¦ç»´ä¿®æ—¶é—´" align="center" /> + </el-table> + <pagination + :limit="searchForm.pageSize" + :page="searchForm.pageNum" + :total="total" + class="pagination" + @pagination="handlePageChange" + > + </pagination> + </div> +</template> +<script> +import Pagination from "@/components/Pagination"; +export default { + props: [], + components: { Pagination }, + data() { + return { + multipleSelection: [], + searchForm: { + pageNum: 1, + pageSize: 10, + }, + total: 10, + tableData: [ + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "紧急", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "紧急", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "紧急", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "紧急", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "紧急", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "é‡è¦", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "é‡è¦", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, { + name: "STATION2未开通", + object: "æ¼ç¼†FSU2_R1下行方å‘", + level: "é‡è¦", + message: { + red: ["è·ç¦»ï¼š0ç±³ 驻波比:8.72"], + green: ["è·ç¦»ï¼š18ç±³ 驻波比:1.07", "è·ç¦»ï¼š42ç±³ 驻波比:1.02"], + black: ["æ¼ç¼†ç™¾ç±³æŸè€—:2.8"], + }, + uploadDate: "2022/12/18 11:51:12", + }, + ], + }; + }, + computed: {}, + methods: { + handleSelectionChange(val) { + this.multipleSelection = val; + }, + handlePageChange(pageData) { + this.searchForm.pageSize = pageData.size; + this.searchForm.pageNum = pageData.page; + }, + cellClassFn({row, column, rowIndex, columnIndex}) { + if (row.level == '紧急' && column.label == 'å‘Šè¦çº§åˆ«') { + return 'emergency' + } else if (row.level == 'é‡è¦' && column.label == 'å‘Šè¦çº§åˆ«') { + return 'important' + } + if (rowIndex%2 == 1) { + return 'stripe' + } + }, + }, + mounted() {}, +}; +</script> +<style lang="scss" scoped> +.leakage-cable { + .leakage-top { + margin-bottom: 20px; + display: flex; + align-items: flex-end; + justify-content: space-between; + } + & ::v-deep .cell { + color: #333333; + } + .message { + line-height: 22px; + } + .red { + color: red; + } + .green { + color: green; + } + .black { + color: black; + } + & ::v-deep .stripe { + background-color: #EAF1FE; + } + & ::v-deep .emergency { + background-color: #f00; + } + & ::v-deep .important { + background-color: #f89850; + } + .page { + display: flex; + align-items: center; + justify-content: center; + margin: 20px 0; + .pageNum { + margin: 0 20px; + } + } +} +</style>