个人中心教师信息

src/api/modules/teacher.js

@@ -17,6 +17,10 @@ const getInfoById = function(id) {
     return ajax.get('/xboe/teacher/simple?id=' + id);
 }
 
+const detailTeacher=function (id){
+    return ajax.get('/xboe/teacher/detail-teacher?id='+id);
+  }
+
 /**
  * 分页查询
  * @param {
@@ -213,5 +217,6 @@ export default {
 	start,
 	end,
 	exports,
-    syncUpdate
+    syncUpdate,
+    detailTeacher
 }

src/views/user/Setting.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="personSetting">
+    
     <el-button type="text" class="passWard-btn"  @click="openPassword"><svg-icon icon-class="passWard-edit" style="margin-right: 10px;font-size: 22px;"></svg-icon>修改密码</el-button>
     <div class="avatar" title="修改头像" @click="openAvatar">
       <el-avatar :src="avatar" :size="116" alt=""></el-avatar>
@@ -13,10 +14,46 @@
 
     <!-- <el-form :model="form" label-position="right" label-width="80px"> -->
       <div class="informationItem">
-        <div class="information-header">
+        <div class="info-header">
-          <h4>基础信息</h4>
+          <h4 @click="infoswich=1" :class="infoswich == 1 ? 'h4active' : '' ">基础信息</h4>
+          <h4 @click="infoswich=0" :class="infoswich == 0 ? 'h4active' : '' ">教师信息</h4>
         </div>
-        <ul class="base-info">
+        <div v-if="infoswich == 0">
+           <div class="tearchimg">
+            <h3>教师职业照</h3>
+            <img src="../../../public/images/artfoot.png" alt="">
+          </div>
+          <div class="tearchexperi">
+            <h3>工作经历</h3>
+            <span>英语教研组在学校领导的关怀指导下,开学初制定了务实的工作计划。我们认真按照开学初制定的计划开展教研活动,较好地完成了本学期工作任务</span>
+          </div>
+          <div class="teachphoto" style="height:70px">
+              <h3>擅长课程</h3>
+              <div class="teachexcel">
+                通用力
+              </div>
+              <div class="teachexcel">
+                产品经理培训
+              </div>
+              <div class="teachexcel">
+                规章制度
+              </div>
+              <div class="teachexcel">
+                职业操守与道德
+              </div>
+        </div>
+         <div class="teachphoto" style="height:70px">
+              <h3>专长</h3>
+              <div class="teachexcel">
+                通用力
+              </div>
+              <div class="teachexcel">
+                职业操守与道德
+              </div>
+        </div>
+        </div>
+        <div v-if="infoswich == 1">
+           <ul class="base-info">
           <li><label class="label" style="width:32px">姓名</label><span class="info-text">{{form.name}}</span></li>
           <li><label class="label" style="width:32px">性别</label><span class="info-text">{{form.gender == 1?'男':'女'}}</span></li>
           <li><label class="label">所属部门</label><span class="info-text">{{form.departName}}</span></li>
@@ -26,8 +63,7 @@
           <li><label class="label">手机号</label><span class="info-text">{{form.account.mobile}}</span></li>
           <li><label class="label">邮箱</label><span class="info-text">{{form.account.email}}</span></li>
         </ul>
-      </div>
+          <div class="informationItem">
-      <div class="informationItem">
         <div class="information-header">
           <h4>个人签名<svg-icon v-show="!signData.isEdit" type="primary" @click="signData.isEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
         </div>
@@ -43,7 +79,8 @@
           <!-- <el-button v-show="!signData.isEdit" style="margin-left:110px" type="primary" @click="signData.isEdit = true"></el-button> -->
         </div>
       </div>
-      <div class="informationItem">
+
+        <div class="informationItem">
         <div class="information-header">
           <h4>个人主页设置<svg-icon v-show="!hideHomeEdit" type="primary" @click="hideHomeEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
         </div>
@@ -56,7 +93,7 @@
            <!-- <el-button v-show="!dynamicData.isEdit" style="margin-left:110px" type="primary" @click="dynamicData.isEdit = true">编辑</el-button> -->
         </div>
       </div>
-      <div class="informationItem">
+        <div class="informationItem">
         <div class="information-header">
           <h4>动态可见范围<svg-icon v-show="!dynamicDataEdit" type="primary" @click="dynamicDataEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
         </div>
@@ -93,6 +130,16 @@
           <el-button v-show="!interestIsEdit" type="primary" @click="interestIsEdit = true">编辑</el-button>
           -->
          </div>
+
+      
+
+        </div>
+       
+      </div>
+      
+      
+      
+        
       <!-- </div> -->
     <!-- </el-form> -->
     <el-dialog
@@ -190,6 +237,7 @@
         }
       };
       return {
+        infoswich:1,
         dynamicDataEdit:false,
         hideHomeEdit:false,
         signData:{
@@ -434,6 +482,71 @@
 </script>
 
 <style lang="scss" scoped>
+.teachexcel{
+    padding: 5px 10px;
+    margin-right: 10px;
+    border: 1px solid #588afc;
+    border-radius: 20px;
+    color: #588afc;
+    float: left;
+  }
+.teachphoto{
+    margin-top: 20px;
+    h3{
+      margin: 0;
+      font-size: 16px;
+      font-weight: 450;
+      padding-bottom: 20px;
+    }
+  }
+.tearchexperi{
+  height: 80px;
+  span{
+    display: inline-block;
+    width: 350px;
+    margin-top: 15px;
+    color: #666;
+    font-size: 15px;
+  }
+  h3{
+    float: left;
+     font-size: 16px;
+      font-weight: 450;
+    margin-right: 30px;
+  }
+}
+.tearchimg{
+  height: 180px;
+  h3{
+    float: left;
+     font-size: 16px;
+      font-weight: 450;
+    margin-right: 15px;
+  }
+  img{
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-top: 20px;
+  }
+}
+.info-header{
+  margin-bottom: 35px;
+  height: 40px;
+  width: 100%;
+  h4{
+    float: left;
+    font-weight: 400;
+    margin: 0;
+    line-height: 30px;
+    margin-top: 10px;
+    margin-right: 10px;
+  }
+  .h4active{
+    font-size: 20px;
+    font-weight: bold;
+  }
+}
 .avatarhover{
   width: 116px;
    height: 116px;
@@ -553,9 +666,7 @@
   .personSetting{
     background-color: #fff;
     box-sizing: border-box;
-    // padding: 30px 0px 0px 247px;
     padding: 30px 0 10% 20%;
-    // margin: 0 auto;
     position: relative;
     .avatar{
       width: 116px;