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.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!--
* @ 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 3" :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>{{ item.payload.title || `马士兵严选上新啦` }}</span>
<span class="section__item-content--time">{{
item.createTimeStamp
}}</span>
</div>
<div class="section__item-content--txt" >
{{
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 )
} ,
methods : { } ,
} ;
< / script >
< style lang = "scss" scoped >
. main {
width : 1000 px ;
. title {
width : 100 % ;
height : 42 px ;
background : # f8f8f8 ;
border : 1 px solid # dddddd ;
padding : 0 24 px ;
font - size : 14 px ;
font - family : Source Han Sans CN - Regular , Source Han Sans CN ;
font - weight : 400 ;
color : # 333333 ;
line - height : 42 px ;
}
. section {
padding : 22 px 20 px 0 ;
border : 1 px solid # ddd ;
margin - top : - 1 px ;
& _ _item {
margin - bottom : 20 px ;
& - img {
width : 110 px ;
height : 110 px ;
margin - right : 20 px ;
}
& - content {
width : 840 px ;
& -- title {
margin - top : 8 px ;
font - size : 16 px ;
font - family : Microsoft YaHei - Regular , Microsoft YaHei ;
font - weight : 400 ;
color : # 333333 ;
}
& -- time {
font - size : 12 px ;
font - family : Microsoft YaHei - Regular , Microsoft YaHei ;
font - weight : 400 ;
color : # 999999 ;
margin - left : auto ;
}
& -- txt {
margin - top : auto ;
margin - bottom : 8 px ;
font - size : 14 px ;
font - family : Microsoft YaHei - Regular , Microsoft YaHei ;
font - weight : 400 ;
color : # 999999 ;
}
}
}
}
}
< / style >