<template> <div class="comment-result"> <div class="status"> <img src="../assets/images/result-success.png" class="result-img" mode="widthFix"/> <div class="message">评价成功</div> </div> <!-- <div class="body"> <div class="title">猜你喜欢</div> <div class="content-list m-b"> <div class="content-item"> <div class="content-body"> <div class="content-cell info"> <div class="title">梁惠贞教授本周巡回巡回巡回</div> <div class="des"> 宫寒常伴不孕,听梁惠贞专家怎么说宫寒常伴不孕,听梁 </div> <div class="datetime"> 2018/11/01 17:00 </div> </div> <div class="content-cell poster"> <div class="poster-img"> <img src="/static/images/doctor.jpg" class="full-width" mode="widthFix"/> </div> </div> </div> </div> <div class="content-item"> <div class="content-body"> <div class="content-cell info"> <div class="title">梁惠贞教授本周巡回巡回巡回</div> <div class="des"> 宫寒常伴不孕,听梁 </div> <div class="datetime"> 2018/11/01 17:00 </div> </div> <div class="content-cell poster"> <div class="poster-img"> <img src="/static/images/doctor.jpg" class="full-width" mode="widthFix"/> </div> </div> </div> </div> </div> </div> --> </div> </template> <script> export default { props: [''], methods: { } } </script> <style> .comment-result { background-color: #fafbfc; padding: 10px; font-size: 14px; color: #343434; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9; } .comment-result .status { text-align: center; margin: 30px 0 45px 0; } .comment-result .status .result-img { width: 150px; margin-bottom: 20px; } .comment-result .status .message { font-size: 20px; font-weight: bold; color: #62cf50; text-align: center; } .comment-result .body .title { font-size: 14px; margin-bottom: 10px; color: #999; } /* .content-list { } */ .content-list > .content-item { padding: 10px; box-shadow: 1px 5px 5px #eee; background-color: #fff; margin-bottom: 15px; } .content-list > .content-item .content-body { display: table; width: 100%; } .content-list > .content-item .content-body .content-cell { display: table-cell; vertical-align: middle; } .content-list > .content-item .content-body .info{ color: #999999; } .content-list > .content-item .content-body .content-cell.info{ position: relative; padding-bottom: 30px; } .content-list > .content-item .content-body .info > .title { font-size: 16px; font-weight: bold; color: #4B5760; margin-bottom: 5px; } .content-list > .content-item .content-body .content-cell.info > .title { white-space: nowrap; text-overflow: ellipsis; max-width: 200px; overflow: hidden; } .content-list > .content-item .content-body .content-cell.info > .datetime { position: absolute; width: 100%; bottom: 0; left: 0; } .content-list > .content-item .content-body .content-cell.poster { width: 120px; } .content-list > .content-item .content-body .poster .poster-img { border-radius: 5px; overflow: hidden; } </style>