评论列表

<ul class="hui-comment">
  <li class="hui-comment-item clearfix">
    <a href="#"><i class="hui-avatar size-L radius"><img alt="" src="static/h-ui/images/ucenter/avatar-default.jpg"></i></a>
    <div class="hui-comment-main">
      <header class="hui-comment-header">
        <div class="hui-comment-meta">
          <a class="hui-comment-author" href="#">辉哥</a> 评论于
          <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
        </div>
      </header>
      <div class="hui-comment-body">
        <p><a href="#">@某人</a> 你是猴子派来的救兵吗？</p>
      </div>
    </div>
  </li>
 
  <li class="hui-comment-item clearfix hui-comment-flip">
    <a href="#"><i class="hui-avatar size-L radius"><img alt="" src="//static.h-ui.net/h-ui/images/ucnter/hui-avatar-default.jpg"></i></a>
    <div class="hui-comment-main">
      <header class="hui-comment-header">
        <div class="hui-comment-meta">
          <a class="hui-comment-author" href="#">辉哥</a> 评论于
          <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
        </div>
      </header>
      <div class="hui-comment-body">
        <p><a href="#">@某人</a> 你是猴子派来的救兵来恶心我的吗？</p>
      </div>
    </div>
  </li>
</ul>

.hui-comment {
  .hui-comment-item {
    list-style: none outside none;
    margin: 1.6rem 0 0;
    .hui-avatar {
      border: 1px solid transparent;
      float: left;
    }
    .hui-comment-main {
      position: relative;
      margin-left: 64px;
      border: 1px solid #dedede;
      @include borderRadius(2px);
      &:before,
      &:after {
        position: absolute;
        top: 11px;
        left: -16px;
        right: 100%;
        width: 0;
        height: 0;
        display: block;
        content: " ";
        border-color: transparent;
        border-style: solid solid outset;
        pointer-events: none;
      }
      &:before {
        border-right-color: #dedede;
        border-width: 8px;
      }
      &:after {
        border-width: 7px;
        border-right-color: #f8f8f8;
        margin-top: 1px;
        margin-left: 2px;
      }
      .hui-comment-header {
        padding: 10px 15px;
        background: #f8f8f8;
        border-bottom: 1px solid #eee;
        .hui-comment-title {
          margin: 0 0 8px 0;
          font-size: 1.6rem;
          line-height: 1.2;
        }
 
        .hui-comment-meta {
          font-size: 13px;
          color: #999;
          line-height: 1.2;
          a {
            color: #999;
          }
          .hui-comment-author {
            font-weight: 700;
            color: #999;
          }
        }
      }
      .hui-comment-body {
        padding: 15px;
        overflow: hidden;
        >:last-child {
          margin-bottom: 0;
        }
      }
    }
    &.hui-comment-flip {
      .hui-avatar {
        float: right;
      }
      .hui-comment-main {
        margin-left: 0;
        margin-right: 64px;
        &:before {
          border-left-color: #dedede;
          border-right-color: transparent;
        }
        &:before,
        &:after {
          left: 100%;
          position: absolute;
          right: -16px;
        }
        :after {
          border-left-color: #f8f8f8;
          border-right-color: transparent;
          margin-left: auto;
          margin-right: 2px;
        }
      }
    }
  }
}

.hui-comment .hui-comment-item {
  list-style: none outside none;
  margin: 1.6rem 0 0;
}
.hui-comment .hui-comment-item .hui-avatar {
  border: 1px solid transparent;
  float: left;
}
.hui-comment .hui-comment-item .hui-comment-main {
  position: relative;
  margin-left: 64px;
  border: 1px solid #dedede;
  border-radius: 2px;
}
.hui-comment .hui-comment-item .hui-comment-main:before, .hui-comment .hui-comment-item .hui-comment-main:after {
  position: absolute;
  top: 11px;
  left: -16px;
  right: 100%;
  width: 0;
  height: 0;
  display: block;
  content: " ";
  border-color: transparent;
  border-style: solid solid outset;
  pointer-events: none;
}
.hui-comment .hui-comment-item .hui-comment-main:before {
  border-right-color: #dedede;
  border-width: 8px;
}
.hui-comment .hui-comment-item .hui-comment-main:after {
  border-width: 7px;
  border-right-color: #f8f8f8;
  margin-top: 1px;
  margin-left: 2px;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header {
  padding: 10px 15px;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-title {
  margin: 0 0 8px 0;
  font-size: 1.6rem;
  line-height: 1.2;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-meta {
  font-size: 13px;
  color: #999;
  line-height: 1.2;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-meta a {
  color: #999;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-meta .hui-comment-author {
  font-weight: 700;
  color: #999;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-body {
  padding: 15px;
  overflow: hidden;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-body > :last-child {
  margin-bottom: 0;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-avatar {
  float: right;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main {
  margin-left: 0;
  margin-right: 64px;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main:before {
  border-left-color: #dedede;
  border-right-color: transparent;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main:before, .hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main:after {
  left: 100%;
  position: absolute;
  right: -16px;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main :after {
  border-left-color: #f8f8f8;
  border-right-color: transparent;
  margin-left: auto;
  margin-right: 2px;
}