After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 167 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 884 B |
After Width: | Height: | Size: 167 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,94 @@ |
|||||||
|
<template> |
||||||
|
<div class="base-bg"> |
||||||
|
<div class="zhp-title"> |
||||||
|
<img |
||||||
|
class="leftImg" |
||||||
|
src="@/assets/imgs/show/back.png" |
||||||
|
@click="router.back()" |
||||||
|
/> |
||||||
|
<div class="zhp-title-text">消息</div> |
||||||
|
</div> |
||||||
|
<div class="zhp-horizontal" style="justify-content: center"> |
||||||
|
<div v-for="(item, i) in messageList" :key="i" @click="onItemClick(item)"> |
||||||
|
<div |
||||||
|
:class=" |
||||||
|
item.selectState |
||||||
|
? 'base-card-content-selectBg' |
||||||
|
: 'base-card-content-unSelectBg' |
||||||
|
"> |
||||||
|
<div class="zhp-vertical margin-left-30"> |
||||||
|
<div class="zhp-text-24-white-alpha40">{{ item.time }}</div> |
||||||
|
<div class="message-content">{{ item.content }}</div> |
||||||
|
</div> |
||||||
|
<img |
||||||
|
src="@/assets/imgs/show/btn_item_timing_delete.png" |
||||||
|
class="message-delete" |
||||||
|
@click.stop="onItemDelete(i)" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import router from "@/router"; |
||||||
|
import { onActivated, ref } from "vue"; |
||||||
|
import * as path from "path"; |
||||||
|
|
||||||
|
const onItemClick = (item: any) => { |
||||||
|
router.push({ |
||||||
|
path: "/messageDetail", |
||||||
|
query: { |
||||||
|
time: item.time, |
||||||
|
content: item.content, |
||||||
|
title: item.title |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
const onItemDelete = (index: number) => { |
||||||
|
messageList.value.splice(index, 1); |
||||||
|
}; |
||||||
|
onActivated(() => { |
||||||
|
messageList.value = [ |
||||||
|
{ |
||||||
|
title: "尊敬的用户", |
||||||
|
time: "2023年 5月12日 12:32", |
||||||
|
content: |
||||||
|
"尊敬的用户,天气越来越热了,为了您的健康,建议使用空调前做一次高温除菌", |
||||||
|
isRead: false, |
||||||
|
selectState: false |
||||||
|
} |
||||||
|
]; |
||||||
|
}); |
||||||
|
const messageList = ref([ |
||||||
|
{ |
||||||
|
title: "尊敬的用户", |
||||||
|
time: "2023年 5月12日 12:32", |
||||||
|
content: |
||||||
|
"尊敬的用户,天气越来越热了,为了您的健康,建议使用空调前做一次高温除菌", |
||||||
|
isRead: false, |
||||||
|
selectState: false |
||||||
|
} |
||||||
|
]); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.message-delete { |
||||||
|
position: absolute; |
||||||
|
right: 30px; |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
.message-content { |
||||||
|
color: #fff; |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 400; |
||||||
|
margin-top: 20px; |
||||||
|
width: 500px; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,53 @@ |
|||||||
|
<template> |
||||||
|
<div class="base-bg"> |
||||||
|
<div class="zhp-title"> |
||||||
|
<img |
||||||
|
class="rightImg" |
||||||
|
src="@/assets/imgs/show/close.png" |
||||||
|
@click="router.back()" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="message-bg"> |
||||||
|
<div class="zhp-text-34-white-alpha50">{{time}}</div> |
||||||
|
<div class="message-title">{{title}}</div> |
||||||
|
<div class="zhp-text-28-white">{{content}}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import router from "@/router"; |
||||||
|
import { onActivated, ref } from "vue"; |
||||||
|
let title=ref(""); |
||||||
|
let time=ref(""); |
||||||
|
let content=ref(""); |
||||||
|
onActivated(()=>{ |
||||||
|
const query:any=router.currentRoute.value.query; |
||||||
|
if (query){ |
||||||
|
title.value=query.title; |
||||||
|
time.value=query.time; |
||||||
|
content.value=query.content; |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.message-bg { |
||||||
|
background-color: rgba($color: #a1b8e6, $alpha: 0.08); |
||||||
|
flex-direction: column; |
||||||
|
border-radius: 8px; |
||||||
|
background-origin: border-box; |
||||||
|
display: flex; |
||||||
|
height: 100vh; |
||||||
|
padding: 24px 29px 29px 24px; |
||||||
|
margin-left: 24px; |
||||||
|
margin-right: 24px; |
||||||
|
} |
||||||
|
.message-title { |
||||||
|
color: white; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 44px; |
||||||
|
margin-top: 34px; |
||||||
|
margin-bottom: 34px; |
||||||
|
} |
||||||
|
</style> |