<template>
	<view class="page">
		<cu-custom :isBack="true" title="我的老师">
		</cu-custom>
		<scroll-view scroll-y="true" style="height:100vh">
    <view class="list">
      <view class="card" v-for="(item,index) in teachers" :key="index">
        <image class="img" :src="teacherImg" mode="widthFix"></image>
        <view class="content">
          <view class="name_ava" >
						<image mode="scaleToFill" :src="item.avatar||defaultAvatar" class="avatar lg"></image>
            <view class="name">{{ item.username }}</view>
          </view>
          <view class="title">{{ item.portrait }}</view>
          <view class="school">{{ item.agency_name }}</view>
          <view class="des">{{ item.introduce }}</view>
        </view>
      </view>
    </view>
		</scroll-view>
	</view>
</template>

<script>
import { _getTeacher } from '@/api/auth'
export default {
  data() {
    return {
      teachers: [],
      teacherImg: '/static/imgs/mine/teacher1.png',
      defaultAvatar: '/static/imgs/mine/teacheravatar.png'
    }
  },
  onLoad() {
    this.get_list()
  },
  methods: {
    get_list() {
      _getTeacher().then(res => {
        this.teachers = res.data.teacher_data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background: #fff;
}
.list {
  padding: 0 0.8rem;
  padding-bottom: 2rem;
}
.card {
  position: relative;
  margin-top: 1rem;
}
.card .img {
  width: 100%;
}
.card .content {
  position: absolute;
  top: 0;
  padding: 0 0.8rem;
  padding-top: 0.6rem;
  color: #fff;
}
.card .content .name_ava {
  display: flex;
  align-items: center;
}
.card .content .name_ava .name {
  margin-left: 0.4rem;
  z-index: 99;
  color: #fff;
}
.card .content .title {
  font-weight: bold;
  font-size: 20px;
  margin-top: 0.2rem;
}
.card .content .school {
  font-size: 14px;
  margin-top: 0.2rem;
}
.card .content .des {
  font-size: 14px;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

</style>
