齐采药WEB端项目
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.
 
 
 

109 lines
2.5 KiB

<!-- 消息 -->
<template>
<div class="index wrapper_1200">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/message?id=' + `${id}` }"
>消息</el-breadcrumb-item
>
<el-breadcrumb-item>查看详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="message_details_Box">
<h1 class="message_details_title">{{ messageDetail.title }}</h1>
<p class="message_details_time">
{{ $dayjs(messageDetail.create_time * 1000).format("YYYY-MM-DD HH:mm") }}
</p>
<div v-html="messageDetail.content"></div>
</div>
</div>
</template>
<script>
export default {
name: "message_details",
auth: false,
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
id: undefined,
messageDetail: {},
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.id = this.$route.query.id;
this.getData();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
//方法集合
methods: {
getData() {
let obj = {
id: this.id,
};
this.$axios
.post("/notice/info", obj)
.then((res) => {
console.log(res);
this.messageDetail = res.data;
})
.catch((err) => {
this.$message.error(err);
});
},
},
};
</script>
<style lang="scss" scoped>
.index {
.crumbs {
margin-top: 20px;
}
.message_details_Box {
padding: 30px;
width: 1200px;
min-height: 485px;
background: #ffffff;
border-radius: 4px;
margin: 20px 0;
position: relative;
.message_details_title {
text-align: center;
height: 30px;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 30px;
}
.message_details_time {
text-align: center;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 17px;
margin-top: 15px;
margin-bottom: 40px;
}
.message_details_end {
// margin-top: 20px;
// display: flex;
// justify-content: flex-end;
position: absolute;
right: 40px;
bottom: 40px;
}
}
}
</style>