You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.6 KiB
113 lines
2.6 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-05-04 17:48:12
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-05-04 17:53:11
|
|
* @Description: file content
|
|
-->
|
|
|
|
<template>
|
|
<div>
|
|
<main class="main">
|
|
<h3 class="title">消息通知</h3>
|
|
<section class="section">
|
|
<div class="section__item flex" v-for="item in socketMsgData" :key="item.id">
|
|
<img
|
|
class="section__item-img"
|
|
src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
|
|
alt="消息通知"
|
|
/>
|
|
<div class="section__item-content flex flex-column">
|
|
<div class="section__item-content--title flex">
|
|
<span>{{ JSON.parse(item.payload).title || `` }}</span>
|
|
<span class="section__item-content--time">{{
|
|
item.createTimeStamp
|
|
}}</span>
|
|
</div>
|
|
<div class="section__item-content--txt">
|
|
{{
|
|
JSON.parse(item.payload).content ||
|
|
``
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState(["token","socketMsgData"]),
|
|
},
|
|
mounted(){
|
|
console.log(`socketMsgData`,this.$store.state)
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
width: 1000px;
|
|
.title {
|
|
width: 100%;
|
|
height: 42px;
|
|
background: #f8f8f8;
|
|
border: 1px solid #dddddd;
|
|
padding: 0 24px;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 42px;
|
|
}
|
|
|
|
.section {
|
|
padding: 22px 20px 0;
|
|
border: 1px solid #ddd;
|
|
margin-top: -1px;
|
|
|
|
&__item {
|
|
margin-bottom: 20px;
|
|
|
|
&-img {
|
|
width: 110px;
|
|
height: 110px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
&-content {
|
|
width: 840px;
|
|
&--title {
|
|
margin-top: 8px;
|
|
font-size: 16px;
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
&--time {
|
|
font-size: 12px;
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-left: auto;
|
|
}
|
|
&--txt {
|
|
margin-top: auto;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|