train-student/src/layout/class/studentteainfo.vue

<template>
  <div id="studentInfo">
    <el-row>
      <el-col :span="24" class="messageInfo">
        <el-col :span="24" class="images">
          <div class="demo-basic--circle">
            <div class="block"><el-avatar :size="163" :src="circleUrl"></el-avatar></div>
          </div>
        </el-col>
        <span v-if="messInfo">
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">姓名</p>
              <p class="name">{{ messInfo.name }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">身份证号</p>
              <p class="name">{{ messInfo.id_number }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">性别</p>
              <p class="name">{{ messInfo.gender }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">民族</p>
              <p class="name">{{ messInfo.nation }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">手机号</p>
              <p class="name">{{ messInfo.phone }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">QQ</p>
              <p class="name">{{ messInfo.qq }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">学校</p>
              <p class="name">{{ messInfo.school_name }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">所在院系</p>
              <p class="name">{{ messInfo.faculty }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">所在专业</p>
              <p class="name">{{ messInfo.major }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">入学年份</p>
              <p class="name">{{ messInfo.entry_year }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">毕业年份</p>
              <p class="name">{{ messInfo.finish_year }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">在校所担当职务</p>
              <p class="name">{{ messInfo.school_job }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">e-mail</p>
              <p class="name">{{ messInfo.email }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">户口所在地</p>
              <p class="name">{{ messInfo.family_place }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
        </span>

        <span v-else>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">姓名</p>
              <p class="name">{{ teainfo.name }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">性别</p>
              <p class="name">{{ teainfo.gender }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">年龄</p>
              <p class="name">{{ teainfo.age }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">出生年月</p>
              <p class="name">{{ teainfo.birthday }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">手机号</p>
              <p class="name">{{ teainfo.phone }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">所在部门</p>
              <p class="name">{{ teainfo.department }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
          <el-col :span="24" class="mess">
            <el-col :span="22" class="info">
              <p class="title">是否可讲礼仪课</p>
              <p class="name">{{ teainfo.islyteacher === 0 ? '否' : '是' }}</p>
            </el-col>
            <el-col :span="2" class="icon">
              <van-icon name="arrow" />
            </el-col>
          </el-col>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
export default {
  name: 'studentInfo',
  props: {
    messInfo: null,
    teainfo: null,
    jianshiinfo: null,
  },
  components: {},
  data: () => ({
    circleUrl: require('@/assets/circle.png'),
  }),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {},
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.messageInfo {
  margin: 0 0 10px 0;
}
.images {
  text-align: center;
  padding: 15px 0;
}
.mess {
  min-height: 50px;
  border-bottom: 1px solid #efeff4;
}
.info {
  padding: 0 15px;
}
.info .title {
  font-size: 14px;
  color: #92a1b1;
  padding: 4px 0;
}
.info .name {
  font-size: 16px;
  color: #000;
}
.icon {
  padding: 11px 0;
  font-size: 20px;
  color: #ccc;
}
</style>