<template> <div class="message-container"> <div class="message-list"> <div class="message-panel-box" v-for="(item,index) in messageList" :key="index"> <div class="message-panel-box-left"> <p class="message-title"> {{item.title}} </p> <p class="message-content"> {{item.content}} </p> </div> <div class="message-panel-box-right"> <span>{{item.createDate}}</span> </div> </div> </div> <div class="btn-plus" @click="handleAddMessage"> <span>+</span> </div> </div> </template> <script> import {getMessageByClerkId} from '@/utils/utils.Request.aApi' export default { name: 'index', data() { return { // clerkId: '2003160512400400000', clerkId: '', messageList: [] } }, mounted() { this.clerkId = sessionStorage.getItem('userId') this.handleGetMessageByClerkId() }, methods: { handleGetMessageByClerkId() { let _this = this let requestRarams = {clerkId: _this.clerkId} alert(JSON.stringify(requestRarams)) getMessageByClerkId(requestRarams) .then(res => { if (res.result == 'success') { _this.messageList = res.data } else { _this.messageList = [] _this.$toast(res.errorMsg); } }) .catch(err => { }) }, handleAddMessage(){ this.$router.push('/addMessage') } } } </script> <style scoped lang="scss"> .message-container{ height: 100%; padding: 20px 10px 20px 20px; .message-panel-box{ font-size: 14px; display: flex; align-items: center; justify-content: space-between; padding: 5px 0 ; .message-panel-box-left{ width: calc(100% - 135px); .message-title,.message-content{ width: 100%; overflow: hidden; } .message-title{ font-size: 16px; font-weight: 500; color: black; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; } .message-content{ font-size: 12px; color: #2d2a2a; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } .message-panel-box-right{ color: #ccc; } &:not(last-child){ border-bottom: 1px solid #f3eaea; } } .btn-plus{ position: fixed; right: 30px; bottom: 30px; font-size: 40px; font-weight: bold; width: 50px; height: 50px; border: 2px solid #ccc; border-radius: 50%; text-align: center; color: green; line-height: 1; } } </style>