YingXingAI/pages/home/teacherInfo/index.vue

<template>
  <view class="teacherInfo-container">
    <header-bar
      title="老师详情"
      @leftClick="handleLeftClick"
    ></header-bar>

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

      <!-- 问答列表组件 -->
      <answer-list :answerList="answerList"></answer-list>
    </view>
  </view>
</template>

<script>
import HeaderBar from "@/components/HeaderBar.vue";
import AnswerList from "@/components/AnswerList/index.vue";

export default {
  components: {
    HeaderBar,
    AnswerList,
  },
  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样式移至HeaderBar组件 */

  .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;
  }
}

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