commentResult.vue

<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>