YingXingAI/components/AnswerList/index.vue

<template>
  <view>
    <view
      class="answer-item"
      v-for="(item, index) in answerList"
      :key="item.id"
    >
      <view class="student-info">
        <image class="student-avatar" :src="item.studentAvatar"></image>
        <text class="student-name">{{ item.studentName }}</text>
        <text class="answer-time">{{ item.time }}</text>
      </view>

      <view class="question">
        <image
          class="question-tag"
          src="/static/common/images/icon_ask.png"
        ></image>
        <view class="question-content">{{ item.question }}</view>
      </view>

      <view class="answer">
        <image
          class="answer-tag"
          src="/static/common/images/icon_answer.png"
        ></image>
        <view class="answer-content">
          <view class="answer-text">{{ item.fullAnswer }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "AnswerList",
  props: {
    answerList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.answer-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;

  .student-info {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .student-avatar {
      width: 40rpx;
      height: 40rpx;
      border-radius: 20rpx;
      margin-right: 16rpx;
    }

    .student-name {
      flex: 1;
      font-size: 26rpx;
      color: #666666;
      font-weight: 500;
    }

    .answer-time {
      font-size: 24rpx;
      color: #666666;
    }
  }

  .question {
    display: flex;
    margin-bottom: 24rpx;

    .question-tag {
      width: 42rpx;
      height: 42rpx;
      margin-right: 32rpx;
      flex-shrink: 0;
    }

    .question-content {
      font-size: 32rpx;
      color: #333333;
      flex: 1;
    }
  }

  .answer {
    display: flex;
    align-items: flex-start;

    .answer-tag {
      width: 42rpx;
      height: 42rpx;
      margin-right: 32rpx;
      flex-shrink: 0;
    }

    .answer-content {
      font-size: 24rpx;
      line-height: 40rpx;
      color: #666666;
      flex: 1;
      position: relative;

      .answer-text {
        word-break: break-word;
        transition: all 0.3s;
      }

      &:not(.content-expanded) .answer-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
      }

      &.content-expanded {
        .expand-btn-container {
          margin-top: 16rpx;
          text-align: right;
        }
      }

      .expand-btn-container {
        display: block;
      }

      &:not(.content-expanded) .expand-btn-container {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        background-color: #ffffff;
        padding-left: 10rpx;
        padding-right: 0;
      }

      .expand-btn {
        color: #4e7eff;
        display: inline-block;
        font-size: 26rpx;
        cursor: pointer;
        white-space: nowrap;
        padding: 0 4rpx;

        .expand-icon {
          font-size: 20rpx;
          display: inline-block;
          vertical-align: middle;
          margin-left: 4rpx;
        }
      }
    }
  }
}
</style>