移动端评论区页面设计

需求：评论界面样式设计。

PS：界面比较粗糙，参考的朋友可自己细化。

实现如下图：

 

 代码：

<template>
  <div class="ym-comment">
    <div class="comment-title">
      <p>
        <span>游戏评论 <em>共<i>3</i>条</em></span>
        <span><i class="i-icon"></i>问题反馈</span>
      </p>
      <div class="comment-url opendialog"><i class="i-icon2"></i> 真实、客观、丰富的评论内容，更容易获得大家的赞哦~</div>
    </div>

    <div class="comment-list">
      <ul>
          <li class="cf" v-for="i in 6" :key="i">
          <div class="avatar">
            <nut-avatar @active-avatar="activeAvatar"></nut-avatar>
          </div>
          <div class="info">
            <div class="base">
              <span>请你麻溜的团成团离开此地</span>
              <nut-rate v-if="i==2" v-model="val" :size="14" :spacing="5" :readOnly="true"></nut-rate>
            </div>
            <div class="con" v-if="i!=2">
              <p>有漂亮可爱的小姐姐加好友么？送装备哦~~~</p>
            </div>
            <div class="con" v-if="i==2">
              <p class="ppl_text">《冒险王3OL》有3个不同特性的职业，分别位战士、法师和弓箭手，每个职业都有自己独特的3条技能成长线，可以自行搭配出最适合自己的技能线，在这里有个小诀窍技能开启...</p>
              <p class="solong">《冒险王3OL》有3个不同特性的职业，分别位战士、法师和弓箭手，每个职业都有自己独特的3条技能成长线，可以自行搭配出最适合自己的技能线，在这里有个小诀窍技能开启越晚伤害也就越高！技能搭配时刷怪建议以群攻技能为主，BOSS战或PVP建议以高伤害的单体技能为主；指挥系统可以让角色针对不同的战斗情况优先按照设定来进行战斗。</p>
              <a href="javascript:;" class="ppl_look">查看全文</a>
            </div>
            <div class="reply">
              <div class="rep">
                <p><span>打酱油的饭盒一个：</span>装备太多怎么办？有人要么？</p>
                <p><span>打翻酱油的饭盒一个：</span>装备太多怎么办？有人要么？</p>
                <a v-if="i==2" href="#" class="replaymore">点击查看更多回复 &gt;&gt;</a>
              </div>
            </div>
            <div class="operation">
              <span>07 - 2{{ i }}</span>
              <div class="right">
                <a href="javascript:;" class="btn-jubao">举报</a>
                <a href="javascript:;" class="btn-zan">3{{ i }}</a>
                <a href="javascript:;" class="btn-rep">回复</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="showmore">
        <div class="nomore">没有更多评论了</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {

  },
  data () {
    return {
      val: 3
    }
  },
  components: {
  },
  created () {

  },
  mounted () {
  },
  watch: {
  },
  methods: {
    activeAvatar () {
      console.log('e')
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-title{
  @include wh(100%, auto);
  p{
    @include verticalCenterFlex(space-between, center);
    padding: 10px;
    em{
      display: inline-block;
      color: #959595;
    }
    i{
      color: #f00;
    }

    span:last-child{
      color: #959595;

      .i-icon{
        display: inline-block;
        @include wh(34px, 32px);
        background: url(../assets/images/icon.png) no-repeat 0 -1234px;
        transform: scale(0.5);
      }
    }

  }
  .comment-url{
    padding: 0 10px 20px 0;
    margin: 0 10px;
    border: 1px #ccc solid;
    box-sizing: border-box;
    color: #959595;
    border-radius: 2px;
    line-height: 12px;

    .i-icon2{
      display: inline-block;
      @include wh(30px, 30px);
      background: url(../assets/images/icon.png) no-repeat 0 -2432px;
      transform: scale(0.5);
    }
  }
}
.comment-list{
  .cf{
    border-bottom: 1px #e3e3e3 solid;
    @include verticalCenterFlex(flex-start, flex-start);
    padding: 10px 15px;
    .avatar{
      padding: 2px 10px 0 0;
      vertical-align: middle;
    }
    .info{
      .base{
        @include verticalCenterFlex(space-between, center);
        text-align: left;
        color: #3d94ee;
        padding: 5px 0;
      }
      .con{
        text-align: left;
        .ppl_text{
          font-size: 14px;
        }

        .solong{
          display: none;
        }
        .ppl_look{
          color: #ff811c;
          display: block;
          padding: 4px 0;
        }
      }
      .reply{
        background: #f5f5f5;
        border-radius: 2px;
        margin-top: 10px;
        padding: 6px 10px 10px;
        position: relative;

        &::after {
          position: absolute;
          content: "";
          top: -20px;
          left: 20px;
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-bottom: 10px #f5f5f5 solid;
        }

        .rep{

          p{
            text-align: left;
            line-height: 20px;
            span{
              color: #959595;
              vertical-align: top;
            }
          }
        }

        .replaymore{
          display: block;
          @include wh(100%, 30px);
          line-height: 30px;
          border-radius: 4px;
          border: 1px #ccc solid;
          background: #fff;
          color: #555;
          margin-top: 10px;
        }
      }
      .operation{
        @include verticalCenterFlex(space-between, center);
        color: #959595;
        margin-top: 15px;

        a{
          padding-left: 24px;
          line-height: 20px;
        }
        .btn-jubao{
          margin-right: 20px;
        }

        .btn-zan{
          background: url(../assets/images/zan.png) left center no-repeat;
          background-size: 15px 15px;
          margin-right: 20px;
        }

        .btn-rep{
          background: url(../assets/images/comment.png) left center no-repeat;
          background-size: 15px 14px;
        }
      }
    }
  }
}
.nomore{
  display: block;
  color: #999999;
  @include wh(100%, 45px);
  line-height: 45px;
}
</style>