YingXingAI/pages/home/teacherInfo/index.vue

<template>
  <view class="teacherInfo-container">
    <view class="header">
      <div class="header-left">
        <u-icon
          class="header-left-icon"
          name="arrow-left"
          @click="handleLeftClick"
        ></u-icon>
      </div>
      <text class="header-title">老师详情</text>
      <div></div>
    </view>

    <div class="teacher-info-card">
      <div class="card-content">
        <image class="teacher-avatar" :src="teacherInfo.avatar"></image>
        <div class="teacher-info">
          <div class="teacher-name">{{ teacherInfo.name }}</div>

          <div class="teacher-school">
            <image
              class="school-icon"
              src="/static/common/images/icon_college.png"
            ></image>
            <text class="school-text">{{ teacherInfo.school }}</text>
          </div>

          <div class="teacher-college">
            <image
              class="college-icon"
              src="/static/common/images/icon_major.png"
            ></image>
            <text class="college-text">{{ teacherInfo.college }}</text>
          </div>
        </div>
      </div>

      <div class="action-buttons">
        <button class="action-btn consult-btn" @click="handleConsult">
          <image
            class="btn-icon"
            src="/static/common/images/icon_consult.png"
          ></image>
          <text class="btn-text">在线咨询</text>
        </button>
        <button class="action-btn message-btn" @click="handleMessage">
          <image
            class="btn-icon"
            src="/static/common/images/icon_edit.png"
          ></image>
          <text class="btn-text">留言提问</text>
        </button>
      </div>
    </div>

    <!-- 老师回答 -->
    <view class="teacher-answers">
      <view class="answer-title">老师回答</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">
          <view class="question-tag">问</view>
          <view class="question-content">{{ item.question }}</view>
        </view>

        <view class="answer">
          <view class="answer-tag">答</view>
          <view class="answer-content">
            <view class="answer-text">{{ item.fullAnswer }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      teacherId: "",
      teacherInfo: {
        id: 1,
        name: "孙老师",
        school: "江西新能源科技职业学院",
        college: "生命科学与工程学院·生物工程专业",
        avatar: "/static/common/images/avatar2.png",
        online: true,
      },
      answerList: [
        {
          id: 1,
          studentName: "浙江考生13024",
          studentAvatar: "/static/common/images/avatar.png",
          time: "2025/6/26 15:45:12",
          question: "学校在录取时有没有一些专业会有特殊要求?",
          fullAnswer:
            "考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部",
        },
        {
          id: 2,
          studentName: "浙江考生13024",
          studentAvatar: "/static/common/images/avatar.png",
          time: "2025/6/26 15:45:12",
          question: "学校在录取时有没有一些专业会有特殊要求?",
          fullAnswer:
            "考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》。",
        },
        {
          id: 3,
          studentName: "浙江考生13024",
          studentAvatar: "/static/common/images/avatar.png",
          time: "2025/6/26 15:45:12",
          question: "学校在录取时有没有一些专业会有特殊要求?",
          fullAnswer:
            "考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部、教育部、原卫生部、见》和人力资源社会保障部、教育部、原卫生部中共发布的相关规定。部分专业确有特殊要求，如航空服务类专业对身高、视力等有特殊要求，艺术类专业要求有艺术基础等。建议考生在填报志愿前，详细了解意向专业的招生要求。",
        },
      ],
    };
  },
  mounted() {},
  onLoad(options) {
    if (options.teacherId) {
      this.teacherId = options.teacherId;
      this.getTeacherInfo();
    }

    // 在页面加载后检查文本是否超过三行
    this.$nextTick(() => {
      this.checkTextOverflow();
    });
  },
  methods: {
    handleLeftClick() {
      uni.navigateBack();
    },
    getTeacherInfo() {
      // 模拟获取教师信息的接口
      console.log("获取教师ID为", this.teacherId, "的信息");
      // 实际开发中这里应该调用接口获取教师信息
    },
    handleConsult() {
      console.log("在线咨询");
      // 跳转到咨询页面或者打开咨询对话框
    },
    handleMessage() {
      console.log("留言提问");
      // 打开留言弹窗
    },
  },
};
</script>

<style lang="scss" scoped>
.teacherInfo-container {
  min-height: 100vh;
  padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
  padding: 32rpx;
  padding-top: calc(88rpx + 40rpx);

  background-image: url(/static//common/images/images_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50%;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    z-index: 99;

    .header-left {
      font-size: 36rpx;
    }

    .header-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .teacher-info-card {
    // margin: 30rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 26rpx 32rpx 32rpx 32rpx;

    .card-content {
      display: flex;
      align-items: center;
      margin-bottom: 36rpx;

      .teacher-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 30rpx;
        object-fit: cover;
      }

      .teacher-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8rpx;
        flex: 1;

        .teacher-name {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }

        .teacher-school,
        .teacher-college {
          display: flex;
          align-items: center;

          .school-icon,
          .college-icon {
            margin-right: 16rpx;
            width: 24rpx;
            height: 24rpx;
            display: inline-block;
            text-align: center;
          }

          .school-text,
          .college-text {
            font-size: 24rpx;
            color: #666666;
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      justify-content: space-between;

      .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46%;
        height: 60rpx;
        border-radius: 16rpx;
        font-size: 32rpx;
        border: none;

        .btn-icon {
          margin-right: 16rpx;
          width: 24rpx;
          height: 24rpx;
        }

        .btn-text {
          font-size: 24rpx;
          font-weight: 500;
        }
      }

      .consult-btn {
        background-color: #4f6aff;
        color: #ffffff;
      }

      .message-btn {
        background-color: #ffffff;
        color: #4f6aff;
        border: 1px solid #4f6aff;
      }
    }
  }
}

/* 老师回答区域样式 */
.teacher-answers {
  margin-top: 50rpx;

  .answer-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 28rpx;
  }

  .answer-item {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 32rpx;
    border: 1px solid #ccc;

    .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: 40rpx;
        height: 40rpx;
        background-color: #4e7eff;
        color: #ffffff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
        margin-right: 32rpx;
        flex-shrink: 0;
        font-weight: 500;
      }

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

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

      .answer-tag {
        width: 40rpx;
        height: 40rpx;
        background-color: #ffbd41;
        color: #ffffff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
        margin-right: 32rpx;
        flex-shrink: 0;
        font-weight: 500;
      }

      .answer-content {
        font-size: 28rpx;
        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;
          }
        }
      }
    }
  }
}

/* 响应式布局 - PC端样式 */
@media screen and (min-width: 768px) {
  .teacherInfo-container {
    .content {
      max-width: 1200rpx;
      margin: 0 auto;
    }
  }
}
</style>