jxkg-new-ui.git

<!-- 教师介绍 -->
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <!-- 带返回的标题 -->
        <TitleIndex title="教师介绍" />
        <div class="content flex">
          <div class="left">
            <!-- 左边上部分 -->
            <div class="left-top">
              <div class="avatar">
                <!-- 头像 -->
                <div class="block">
                  <el-avatar
                    :size="80"
                    :src="all.url"
                  ></el-avatar>
                </div>
                <span class="name">{{all.name}}</span>
                <span
                  class="title"
                  style="font-size:14px; color: #444444;"
                >{{all.title}}</span>
              </div>
              <div
                class="table-style flex"
                v-for="(item,index) in all.data"
                :key="index"
              >
                <span>{{item.name}}</span>
                <span class="table-style-title">{{item.title}}</span>
              </div>
            </div>
            <!-- 左边下部分 -->
            <div
              class="left-top"
              style="margin-top:10px;padding-bottom: 10px;"
            >
              <div style=" border-bottom: 1px solid rgb(228, 225, 225);padding: 10px;">
                <div>关于老师</div>
                <p class="indent">{{all.intro}}</p>
              </div>
              <div
                class="table-style flex"
                v-for="(item,index) in all.data1"
                :key="index"
              >
                <span>{{item.name}}</span>
                <span class="table-style-title">{{item.title}}</span>
              </div>
              <div class="flex flex-box">
                <div class="flex flex-style flex-style-left">
                  <span>1000</span>
                  <span>小时</span>
                  <span>授课时长</span>
                </div>
                <div class="flex flex-style">
                  <span>120</span>
                  <span>项</span>
                  <span>获奖数量</span>
                </div>
                <div class="flex flex-style">
                  <span>8494</span>
                  <span>条</span>
                  <span>好评数量</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane
                label="教师介绍"
                name="introduce"
              ></el-tab-pane>
              <el-tab-pane
                label="照片墙"
                name="photoWall"
              ></el-tab-pane>
            </el-tabs>
            <!-- 介绍 -->
            <Introduce
              v-show="activeName=='introduce'"
              :Introduces='all.Introduces'
            />
            <!-- 照片墙 -->
            <photo-wall
              v-show="activeName=='photoWall'"
              :PhotoWalls="all.PhotoWalls"
            />
          </div>
        </div>
      </div>
 
    </div>
  </div>
</template>
 
<script>
import Introduce from "../../../components/particulars/introduce.vue";
import photoWall from "../../../components/particulars/photoWall.vue";
export default {
  components: {
    Introduce,
    photoWall,
  },
  data() {
    return {
      searchData: {
        subject: null,
      },
      all: {
        name: "罗曼罗兰",
        title: "高级教师",
        url: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        data: [
          {
            name: "加入时间",
            title: "2022-05-22",
          },
          {
            name: "工龄",
            title: "20年",
          },
          {
            name: "学生",
            title: "1000人",
          },
        ],
        //关于--介绍
        intro:
          "是一位深受学生喜爱和信任的好老师！老师英语专业学士，英语专业八级。具有丰富的耶鲁视线英语教学经验。善于发现孩子的性格特点，抓住孩子的学习兴趣",
        data1: [
          {
            name: "性别",
            title: "男",
          },
          {
            name: "教育",
            title: "博士学位",
          },
          {
            name: "联系电话",
            title: "183-9848-9373",
          },
          {
            name: "电子邮箱",
            title: "info@example.com",
          },
          {
            name: "联系地址",
            title: "明市马莫拉路111号",
          },
          {
            name: "联系电话",
            title: "183-9848-9373",
          },
        ],
        // 教师介绍的内容
        Introduces: {
          p: [
            "英语专业学士，英语专业八级，语感和英文表达能力比较强。从事少儿英语教学工作多年，经验丰富。热爱少儿英语教育，善于观察孩子学习中的优点与潜力，并将自己发现的问题与家长沟通、有针对性地帮助孩子提高。很欣赏也一直实践着童话大王郑渊洁的一句话“好孩子都是鼓励出来的！",
            "长期从事于少儿英语教学工作，有丰富的授课经验。英语功底扎实，发音标准，表达流利。性格活泼开朗，对孩子饱含热情与爱心，善于与孩子交流。讲课思路清晰，认真负责，深受小朋友和家长的喜爱！“永远用欣赏的眼光看学生，永远用宽容的心态面对学生！",
            '学生眼里的我，是一个自然优雅、充满热情、热爱生活、热爱学生、热爱教育工作的好老师。他们说："您的热情点燃我们每一个人对生活的爱，您教学的严谨，鞭策我们每一个人认真求知，您优雅的举止，影响我们每一个人去追求心灵的高贵"。 在学生眼里，我是那个课堂上激情四射、知识渊博，对自己的教与他们的学近乎严苛的师长；是一个课堂外坦率随性，可以海阔天空畅聊天下的朋友；是那私底下细心关怀，能诉心声的知己。他们说，在人生这样一段特殊的经历中，有一位您这样的教师，是无比幸运和幸福的。',
          ],
          skill: [
            {
              title: "技能",
              all: ["英语功底扎实", "外教老师", "科学受教"],
            },
            {
              title: "技能",
              all: ["英语", "法语", "中文"],
            },
          ],
        },
        // 照片墙
        PhotoWalls: [
          {
            url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            title: "教师生活",
          },
          {
            url: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
            title: "教师生活",
          },
          {
            url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
            title: "教师生活",
          },
          {
            url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
            title: "教师生活",
          },
          {
            url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
            title: "教师生活",
          },
          {
            url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
            title: "教师生活",
          },
          {
            url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
            title: "教师生活",
          },
        ],
      },
      //配置标签页
      activeName: "introduce",
    };
  },
  methods: {
    routerTo(url) {
      this.$router.push(url);
    },
    handleClick() {
      console.log(this.activeName, "activeName");
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
  },
};
</script>
 
<style scoped lang="scss">
.flex {
  display: flex;
}
.content {
  width: 1262px;
  justify-content: space-between;
  margin-bottom: 80px;
  background-color: transparent;
  padding: 0;
  // 左边
  & > .left {
    width: 260px;
    .left-top {
      background-color: #fff;
      border-radius: 5px;
      padding: 10px;
      // 头像
      & > .avatar {
        margin: 0 auto;
        width: 236px;
        height: 198px;
        background: rgb(242, 242, 242);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // 图片
        & > .avatar-img {
          width: 88px;
          height: 88px;
          border-radius: 50%;
        }
        & > .name {
          font-size: 20px;
          padding: 10px 0;
        }
        & > .title {
          font-size: 14px;
          color: #444444;
        }
      }
    }
    // 授课时长等设置
    .flex-style {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
      border-left: 1px solid rgb(224, 224, 224);
      flex: 1;
      // span 通用
      & > span {
        font-size: 14px;
        color: #333333;
      }
      // 第一个span
      & > span:first-child {
        font-size: 16px;
        color: rgb(16, 71, 247);
      }
      & > span:nth-child(2) {
        color: rgb(170, 170, 170);
        padding-bottom: 10px;
      }
    }
    .flex-style-left {
      border-left: none;
    }
    .table-style {
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      height: 40px;
      border-bottom: 1px solid rgb(239, 239, 239);
      &:last-child {
        border: none;
      }
      .table-style-title {
        color: #aaaaaa;
      }
    }
    .flex-box {
      justify-content: space-between;
    }
  }
  //   右边
  & > .right {
    margin-left: 20px;
    flex: 1;
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
  }
}
// .c {
//   background-image: url("../../assets/loginBackground.jpg");
//   width: 100vw;
//   // height: calc(100vh - 75px);
//   height: 100%;
//   background-size: cover;
// }
// .bg {
//   width: 100%;
//   height: 100%;
//   background: rgba(255, 255, 255, 0.2);
//   display: flex;
//   justify-content: center;
// }
.main {
  &-title {
    border-left: 5px solid rgb(16, 71, 247);
    padding-left: 10px;
    margin: 50px 0 0 0;
    position: relative;
    & p {
      font-weight: 700;
    }
  }
}
.back {
  position: absolute;
  top: 0px;
  left: -30px;
}
// 关于
.indent {
  font-size: 12px;
  // 首行缩进
  text-indent: 24px;
  color: #7f7f7f;
  // 设置行高，撑开行高
  line-height: 20px;
}
</style>