调整消息推送

This commit is contained in:
guanj
2026-04-03 14:48:45 +08:00
parent 9f593bd428
commit db097bc64a
20 changed files with 324 additions and 267 deletions

12
App.vue
View File

@@ -22,9 +22,17 @@ export default {
uni.onPushMessage((res) => { uni.onPushMessage((res) => {
console.log('收到推送消息:', res.data.payload.path) //监听推送消息 console.log('收到推送消息:', res.data.payload.path) //监听推送消息
if (res.data.payload && res.data.payload.path) { if (res.data.payload && res.data.payload.path) {
uni.navigateTo({ uni.setStorageSync('messageParams', {
name: '',
id: '',
type: res.data.payload.path.split('type=')[1],
})
uni.switchTab({
url: res.data.payload.path, url: res.data.payload.path,
}) })
// uni.navigateTo({
// url: res.data.payload.path,
// })
} }
}) })
}, },
@@ -37,7 +45,7 @@ export default {
<style lang="scss"> <style lang="scss">
/*每个页面公共css */ /*每个页面公共css */
@import './common/css/base.scss'; @import './common/css/base.scss';
@import "@/static/iconfont/iconfont.css"; @import '@/static/iconfont/iconfont.css';
/deep/ uni-tabbar .uni-tabbar__badge { /deep/ uni-tabbar .uni-tabbar__badge {
width: auto; width: auto;

View File

@@ -1,5 +1,4 @@
import request from '../js/request' import request from '../js/request'
import config from '../js/config'
// 获取设备 // 获取设备
export function getDeviceList(params) { export function getDeviceList(params) {
@@ -15,12 +14,15 @@ export function getDeviceList(params) {
* @param {*} id 工程id * @param {*} id 工程id
* @returns * @returns
*/ */
const date = new Date()
const year = date.getFullYear() // 年份 4 位
const month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份自动补 0
const currentYearMonth = `${year}-${month}`
export function getDevCount(id) { export function getDevCount(id) {
return request({ return request({
url: '/cs-device-boot/deviceUser/devCount', url: '/cs-device-boot/deviceUser/devCount',
method: 'post', method: 'post',
data: { id: id, time: currentYearMonth },
data: { id },
}) })
} }
@@ -209,11 +211,11 @@ export const engineeringPinToTop = (params) => {
// 查询工程树 // 查询工程树
export const lineTree = (params) => { export const lineTree = (params) => {
return request({ return request({
url: '/cs-device-boot/csLedger/lineTree', url: '/cs-device-boot/csLedger/AppLineTree',
method: 'POST', method: 'POST',
data: { // data: {
type: 'engineering', // type: 'engineering',
}, // },
// header: { // header: {
// 'Content-Type': 'application/json', // 'Content-Type': 'application/json',
// }, // },
@@ -236,6 +238,5 @@ export const queryEquipmentByndid = (params) => {
url: '/cs-device-boot/EquipmentDelivery/queryEquipmentByndid', url: '/cs-device-boot/EquipmentDelivery/queryEquipmentByndid',
method: 'POST', method: 'POST',
data: params, data: params,
}) })
} }

View File

@@ -1,7 +1,7 @@
const debug = true // true 是连地服务端本地false 是连接线上 const debug = true // true 是连地服务端本地false 是连接线上
const development = { const development = {
domain: 'http://192.168.1.103:10215', domain: 'http://192.168.2.126:10215',
} }
const production = { const production = {

View File

@@ -113,7 +113,7 @@ export default {
id: '', id: '',
pid: '0', pid: '0',
pids: '0', pids: '0',
name: '全部项目', name: '全部工程',
path: null, path: null,
provinceId: null, provinceId: null,
cityId: null, cityId: null,

View File

@@ -139,7 +139,7 @@
"/api" : { "/api" : {
"https" : true, "https" : true,
// "target" : "https://pqmcn.com:8092/api", // "target" : "https://pqmcn.com:8092/api",
"target" : "http://192.168.1.103:10215", "target" : "http://192.168.2.126:10215",
"changOrigin" : true, "changOrigin" : true,
"pathRewrite" : { "pathRewrite" : {
"/api" : "" "/api" : ""
@@ -153,6 +153,9 @@
}, },
"unipush" : { "unipush" : {
"enable" : false "enable" : false
},
"sdkConfigs" : {
"maps" : {}
} }
}, },
"mp-toutiao" : { "mp-toutiao" : {

View File

@@ -24,7 +24,9 @@
<!-- <view class="content-item-header-right-des">暂态类型{{ item.showName }}</view> --> <!-- <view class="content-item-header-right-des">暂态类型{{ item.showName }}</view> -->
<!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> --> <!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
</view> </view>
<view class="ml10" v-if="type === '0' || item.status != '1'"> <uni-icons type="search" size="25"></uni-icons></view> <view class="ml10" v-if="type === '0' || item.status != '1'">
<uni-icons type="search" size="25" color="#376cf3"></uni-icons
></view>
</view> </view>
<view class="content-item-footer">{{ item.subTitle }}</view> <view class="content-item-footer">{{ item.subTitle }}</view>
</view> </view>
@@ -112,7 +114,7 @@ export default {
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage') this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
this.store.params.type = this.type this.store.params.type = this.type
this.store.params.deviceId = this.deviceId this.store.params.deviceId = this.deviceId
this.store.params.startTime = this.$util.getBeforeDays() this.store.params.startTime = this.$util.getBeforeDays()
this.store.params.endTime = this.$util.getToday() this.store.params.endTime = this.$util.getToday()
this.store.loadedCallback = () => { this.store.loadedCallback = () => {
this.store.data.forEach((item) => { this.store.data.forEach((item) => {

View File

@@ -91,7 +91,8 @@
@change="switchChange(item)" @change="switchChange(item)"
/> />
<view class="star-icon" v-else> <view class="star-icon" v-else>
<uni-icons type="search" size="25"></uni-icons> <!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
🔍
</view> </view>
</template> </template>
</Cn-device-card> </Cn-device-card>

View File

@@ -10,7 +10,7 @@
><picker ><picker
@change="lineChange" @change="lineChange"
@cancel="selectProject = false" @cancel="selectProject = false"
:value="lineId" :value="lineKey"
:range="lineList" :range="lineList"
range-key="name" range-key="name"
> >
@@ -175,7 +175,7 @@ export default {
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' }, { name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
], ],
disabled: false, disabled: false,
countdown: 60, countdown: 30,
lineId: '00B78D00A87A1', lineId: '00B78D00A87A1',
lineKey: 0, lineKey: 0,
lineList: [], lineList: [],
@@ -607,7 +607,7 @@ export default {
if (this.countdown <= 0) { if (this.countdown <= 0) {
clearInterval(this.numTimer) // 清除定时器 clearInterval(this.numTimer) // 清除定时器
this.disabled = false // 启用按钮 this.disabled = false // 启用按钮
this.countdown = 60 // 重置倒计时 this.countdown = 30 // 重置倒计时
this.numTimer = null // 清空定时器标识 this.numTimer = null // 清空定时器标识
} }
}, 1000) }, 1000)
@@ -643,7 +643,7 @@ export default {
} }
}) })
.catch(() => { .catch(() => {
this.countdown = 60 // 重置倒计时 this.countdown = 30 // 重置倒计时
this.disabled = false this.disabled = false
this.connection = false this.connection = false
this.clear() this.clear()
@@ -870,7 +870,7 @@ export default {
async lineChange(e) { async lineChange(e) {
await this.clear() await this.clear()
this.disabled = false this.disabled = false
this.countdown = 60 this.countdown = 30
this.lineKey = e.detail.value this.lineKey = e.detail.value
this.lineId = this.lineList[e.detail.value].lineId this.lineId = this.lineList[e.detail.value].lineId

View File

@@ -77,7 +77,10 @@
style="transform: scale(0.8); position: relative; left: 20rpx" style="transform: scale(0.8); position: relative; left: 20rpx"
@change="switchChange(item)" @change="switchChange(item)"
/> />
<view class="star-icon" v-else> <uni-icons type="search" size="25"></uni-icons> </view> <view class="star-icon" v-else>
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
🔍
</view>
</template> </template>
</Cn-device-card> </Cn-device-card>
</uni-swipe-action-item> </uni-swipe-action-item>
@@ -373,6 +376,7 @@ export default {
/deep/ .button-group--right { /deep/ .button-group--right {
padding: 0 0 20rpx; padding: 0 0 20rpx;
} }
.star-icon {
font-size: 40rpx;
}
</style> </style>

View File

@@ -15,15 +15,13 @@
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view> <view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view> <view class="header-item-label">离线设备</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(0)">
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view> <view class="header-item-value">{{ devCount.eventCount || 0 }}</view>
<view class="header-item-label">告警数量</view> <view class="header-item-label">暂态事件数</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(1)">
<view class="header-item-value">{{ <view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view>
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0 <view class="header-item-label">稳态事件数</view>
}}</view>
<view class="header-item-label">事件数量</view>
</view> </view>
<view class="header-item" @click="eningerNum"> <view class="header-item" @click="eningerNum">
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view> <view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
@@ -178,7 +176,12 @@ export default {
url: '/pages/device/list?type=' + type, url: '/pages/device/list?type=' + type,
}) })
}, },
jumpMessage() { jumpMessage(type) {
uni.setStorageSync('messageParams', {
name: '',
id: '',
type: type,
})
uni.switchTab({ uni.switchTab({
url: '/pages/index/message1', url: '/pages/index/message1',
}) })

View File

@@ -15,11 +15,11 @@
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view> <view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view> <view class="header-item-label">离线设备</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(2, false)">
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view> <view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view> <view class="header-item-label">告警数量</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(0, false)">
<view class="header-item-value">{{ <view class="header-item-value">{{
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0 devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
}}</view> }}</view>
@@ -48,11 +48,11 @@
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view> <view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view> <view class="header-item-label">离线设备</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(2, true)">
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view> <view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view>
<view class="header-item-label">告警数量</view> <view class="header-item-label">告警数量</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(0, true)">
<view class="header-item-value">{{ <view class="header-item-value">{{
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0 devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0
}}</view> }}</view>
@@ -79,12 +79,17 @@ export default {
}, },
}, },
methods: { methods: {
jumpMessage(){ jumpMessage(type, flag) {
uni.setStorageSync('messageParams', {
name: flag ? uni.getStorageSync('engineering').name : '',
id: flag ? uni.getStorageSync('engineering').id : '',
type: type,
})
uni.switchTab({ uni.switchTab({
url: '/pages/index/message', url: '/pages/index/message1',
}) })
}, },
eningerNum(){ eningerNum() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/engineering/list', url: '/pages/engineering/list',
}) })

View File

@@ -36,11 +36,11 @@
</view> </view>
<view class="header-item" @click="jumpMessage('0')"> <view class="header-item" @click="jumpMessage('0')">
<view class="header-item-value">{{ devCount.eventCount || 0 }}</view> <view class="header-item-value">{{ devCount.eventCount || 0 }}</view>
<view class="header-item-label">暂态事件</view> <view class="header-item-label">暂态事件</view>
</view> </view>
<view class="header-item" @click="jumpMessage('1')"> <view class="header-item" @click="jumpMessage('1')">
<view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view> <view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view>
<view class="header-item-label">稳态事件</view> <view class="header-item-label">稳态事件</view>
</view> </view>
</view> </view>
<view class="canneng-index-title mt20">常用功能</view> <view class="canneng-index-title mt20">常用功能</view>

View File

@@ -15,15 +15,13 @@
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view> <view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view> <view class="header-item-label">离线设备</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(0, false)">
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view> <view class="header-item-value">{{ devCount.eventCount || 0 }}</view>
<view class="header-item-label">告警数量</view> <view class="header-item-label">暂态事件数</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(1, false)">
<view class="header-item-value">{{ <view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view>
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0 <view class="header-item-label">稳态事件数</view>
}}</view>
<view class="header-item-label">事件数量</view>
</view> </view>
<view class="header-item" @click="eningerNum"> <view class="header-item" @click="eningerNum">
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view> <view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
@@ -48,15 +46,13 @@
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view> <view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
<view class="header-item-label">离线设备</view> <view class="header-item-label">离线设备</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(0, true)">
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view> <view class="header-item-value">{{ devCount.currentEventCount || 0 }}</view>
<view class="header-item-label">告警数量</view> <view class="header-item-label">暂态事件数</view>
</view> </view>
<view class="header-item" @click="jumpMessage"> <view class="header-item" @click="jumpMessage(1, true)">
<view class="header-item-value">{{ <view class="header-item-value">{{ devCount.currentHarmonicCount || 0 }}</view>
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0 <view class="header-item-label">稳态事件数</view>
}}</view>
<view class="header-item-label">事件数量</view>
</view> </view>
<view class="header-item" @click="projectNum(true)"> <view class="header-item" @click="projectNum(true)">
<view class="header-item-value">{{ devCount.currentProjectCount || 0 }}</view> <view class="header-item-value">{{ devCount.currentProjectCount || 0 }}</view>
@@ -89,9 +85,14 @@ export default {
url: '/pages/engineering/list', url: '/pages/engineering/list',
}) })
}, },
jumpMessage(){ jumpMessage(type, flag) {
uni.setStorageSync('messageParams', {
name: flag ? uni.getStorageSync('engineering').name : '',
id: flag ? uni.getStorageSync('engineering').id : '',
type: type,
})
uni.switchTab({ uni.switchTab({
url: '/pages/index/message', url: '/pages/index/message1',
}) })
}, },
projectNum(now) { projectNum(now) {

View File

@@ -176,10 +176,10 @@ export default {
// console.log(`12312`,res) // console.log(`12312`,res)
// Object.assign(this.devCount, res.data) // Object.assign(this.devCount, res.data)
this.devCount = res.data this.devCount = res.data
this.devCount.currentOffLineDevs.forEach((item) => { this.devCount.currentOffLineDevs?.forEach((item) => {
item.runStatus = 1 item.runStatus = 1
}) })
this.devCount.offLineDevs.forEach((item) => { this.devCount.offLineDevs?.forEach((item) => {
item.runStatus = 1 item.runStatus = 1
}) })
this.devCount.engineeringListLength = this.engineeringList.length this.devCount.engineeringListLength = this.engineeringList.length

View File

@@ -11,14 +11,9 @@
/> />
<!-- 角标 --> <!-- 角标 -->
<view class="badge-container"> <view class="badge-container">
<span <span v-for="(item, index) in items" :key="index" class="badge">
v-for="(item, index) in items" <uni-badge :text="badgeCounts[index] > 99 ? '99+' : badgeCounts[index]" />
:key="index" <!-- {{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }} -->
class="badge"
:style="{ left: getBadgeRightPosition(index) }"
v-if="badgeCounts[index] > 0"
>
{{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }}
</span> </span>
</view> </view>
<!-- 筛选条件 --> <!-- 筛选条件 -->
@@ -74,7 +69,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
items: ['暂态事件', '稳态事件', '运行告警', '运行事件'], items: ['暂态事件', '稳态事件'], //'运行告警', '运行事件'
badgeCounts: [0, 0, 0, 0], badgeCounts: [0, 0, 0, 0],
current: 0, current: 0,
colorIndex: 0, colorIndex: 0,
@@ -123,7 +118,7 @@ export default {
const params = uni.getStorageSync('messageParams') const params = uni.getStorageSync('messageParams')
this.getDevCount() this.getDevCount()
this.$nextTick(() => { this.$nextTick(() => {
if (params.type != '') { if (params.type !== '') {
this.current = params.type - 0 this.current = params.type - 0
} }
if (params.name != '') { if (params.name != '') {
@@ -236,7 +231,11 @@ export default {
// 根据索引动态计算右侧偏移位置,使徽章对准每个标签的右上角 // 根据索引动态计算右侧偏移位置,使徽章对准每个标签的右上角
getBadgeRightPosition(index) { getBadgeRightPosition(index) {
return (index + 1) * (this.width / 4) + 'px' if (this.items == 4) {
return (index + 1) * (this.width / 4) + 'px'
} else {
return (index + 0) * (this.width / 2) + 'px'
}
}, },
}, },
@@ -282,25 +281,36 @@ export default {
} }
.badge-container { .badge-container {
position: absolute; position: absolute;
top: 10rpx; /* 徽章向上偏移,与控件重叠 */ top: -10rpx; /* 徽章向上偏移,与控件重叠 */
display: flex;
justify-content: space-around;
right: 0; right: 0;
width: 100%; width: 100%;
height: 0; height: 0;
pointer-events: none; /* 确保徽章不干扰点击事件 */ pointer-events: none; /* 确保徽章不干扰点击事件 */
} }
/deep/ .uni-badge--error {
background-color: #ff3b30;
}
.badge { .badge {
position: absolute; flex: 1;
// position: absolute;
// min-width: 18px; // min-width: 18px;
height: 16px; // height: 16px;
padding: 0 4px; // padding: 0 4px;
background-color: #ff3b30; /* 红色徽章 */ // background-color: #ff3b30; /* 红色徽章 */
color: white; // color: white;
font-size: 22rpx; // font-size: 22rpx;
line-height: 16px; // line-height: 16px;
// text-align: center;
// border-radius: 9px;
//
text-align: center; text-align: center;
border-radius: 9px; // transform: translateX(-110%); /* 使徽章中心对齐右上角 */
transform: translateX(-150%); /* 使徽章中心对齐右上角 */ .uni-badge--x {
left: 70rpx;
}
} }
} }
</style> </style>

View File

@@ -28,7 +28,10 @@
> >
<!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> --> <!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
</view> </view>
<view class="ml10" v-if="type === '0' || item.status != '1'"> <uni-icons type="search" size="25"></uni-icons></view> <view class="ml10" v-if="type === '0' || item.status != '1'">
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
🔍
</view>
</view> </view>
<view class="content-item-footer">{{ item.subTitle }}</view> <view class="content-item-footer">{{ item.subTitle }}</view>
</view> </view>

View File

@@ -36,7 +36,10 @@
<text class="event-id">{{ item.date }}发生告警终端{{ item.warnNums }}</text> <text class="event-id">{{ item.date }}发生告警终端{{ item.warnNums }}</text>
</view> </view>
</view> </view>
<view class="event-action"> <uni-icons type="search" size="25"></uni-icons> </view> <view class="event-action">
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
🔍
</view>
</view> </view>
</uni-card> </uni-card>
<uni-load-more <uni-load-more

View File

@@ -50,11 +50,12 @@
</view> </view>
</view> </view>
<view class="event-action"> <view class="event-action">
<uni-icons type="search" size="25"></uni-icons> <!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
🔍
</view> </view>
</view> </view>
<!-- 详情区域 --> <!-- 详情区域 -->
<view class="event-detail"> <view class="event-detail textBox">
<text>{{ item.statisticsDate }}发生 {{ item.overLimitDesc }} </text> <text>{{ item.statisticsDate }}发生 {{ item.overLimitDesc }} </text>
</view> </view>
</uni-card> </uni-card>
@@ -191,4 +192,14 @@ export default {
/deep/ .uni-scroll-view-refresher { /deep/ .uni-scroll-view-refresher {
display: none; display: none;
} }
.textBox {
max-height: 110rpx;
overflow: hidden;
/* 下面是溢出显示省略号关键样式 */
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制最多显示几行,你可以改 2/3/4 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
}
</style> </style>

View File

@@ -87,7 +87,10 @@
<text>监测点名称:{{ item.lineName }}</text> <text>监测点名称:{{ item.lineName }}</text>
</view> </view>
</view> </view>
<view class="event-action"> <uni-icons type="search" size="25" color="#376cf3"></uni-icons> </view> <view class="event-action">
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
🔍
</view>
</view> </view>
<!-- 详情区域 --> <!-- 详情区域 -->
<view class="event-detail"> <view class="event-detail">
@@ -293,5 +296,4 @@ export default {
/deep/ .uni-scroll-view-refresher { /deep/ .uni-scroll-view-refresher {
display: none; display: none;
} }
</style> </style>