<template> <div class="feedbook_reply"> <p class="content">{{ detailData.content }}</p> <div class="img_box"> <div class="img_item" v-for="(item, index) in detailData.imgs" :key="index" :style="'background:url(' + item + ') center/cover no-repeat'" ></div> </div> <div class="line" v-if="detailData.replyContent"></div> <div class="reply_box" v-if="detailData.replyContent"> <p class="title">尊敬的用户您好</p> <p class="reply">{{ detailData.replyContent }}</p> <p class="time">{{ detailData.replyTime.substring(0, 10) }}</p> </div> </div> </template> <script> export default { data() { return { detailData: { }, } }, mounted() { const id = this.$route.query.id if (id) { this.getDetail(id) } else { this.$toast('查看回复失败,请稍后再试') } }, methods: { getDetail(id) { this.yxAxios .post(`${this.yanxueUrl}/api/Manage/FeedBackList`, { id: id, pageSize: 999, page: 1, }) .then((res) => { this.$toast.clear() console.log('我的反馈列表:', res.data.data) if (res.data.status == 1) { let detailData = res.data.data.list[0] detailData.imgs = detailData.imgs.split(',') this.detailData = detailData } else { this.$toast(res.data.message) } }) }, }, } </script> <style lang="scss"> .feedbook_reply { padding: 36px 0; .content { font-size: 32px; color: #999; padding: 0 24px; } .img_box { margin-top: 98px; padding: 0 24px; .img_item { width: 216px; height: 216px; display: inline-block; margin-right: 24px; margin-bottom: 24px; &:nth-of-type(3n) { margin-right: 0; } } } .line { width: 100%; height: 22px; background: #f5f6fa; margin-top: 10px; } .reply_box { padding: 54px 24px; .title { font-size: 36px; font-weight: bold; } .reply { font-size: 32px; margin-top: 20px; line-height: 52px; } .time { font-size: 28px; margin-top: 62px; text-align: right; } } } </style> <style lang="scss"> // 长辈版 .elder { .feedbook_reply .content{ font-size: 36px; } } </style>