更新简历管理

src/views/resumeJob.vue

@@ -1,154 +1,329 @@
 <template>
-  <div id="resumeJob">
-    <el-row>
-      <el-col :span="24" class="jobTop">
-        <el-col :span="5">
-          <el-avatar :size="60" :src="circleUrl"></el-avatar>
-        </el-col>
-        <el-col :span="19" class="topRight">
-          <el-col :span="24"><span style="font-size: 16px;">于奇&nbsp;&nbsp;(男)</span></el-col>
-          <el-col :span="24"><span style="color: #7CFC00;">没有</span></el-col>
-          <el-col :span="24">
-            <el-col :span="6"><span>长春大学</span></el-col>
-            <el-col :span="18"><el-tag class="isStu" style="color: #00bfff;">未认证为本校生</el-tag></el-col>
+  <div id="resume">
+    <div class="w_0100 resume">
+      <div class="w_1200">
+        <el-row class="resumeTxt">
+          <el-col :span="24" class="button">
+            <el-col :span="12" v-if="type !== '1'">
+              <el-button size="medium" type="primary" @click="update('1', info.letterid)">纳入考虑</el-button>
+            </el-col>
+            <el-col :span="12" v-if="type !== '2'">
+              <el-button size="medium" type="danger" @click="update('2', info.letterid)">暂不考虑</el-button>
+            </el-col>
           </el-col>
-          <el-col :span="24"><span>政治面貌：&nbsp;共青团员</span></el-col>
-        </el-col>
-      </el-col>
-      <el-col style="border-bottom: 1px solid #ccc;">
-        <el-col :span="24" class="jobBottom">
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem"><span>求职意向</span></el-col>
-            <el-col :span="24" class="itemList">
-              <el-col :span="2" class="itemPoint"><span></span></el-col>
-              <el-col :span="22" class="itemTit">期望职业：程序员</el-col>
+          <el-col :span="24" class="resumeMain">
+            <el-col :span="24" class="resumeMainHead">
+              <el-col :span="20" class="resumeMainHeadTxt">
+                <p class="bi-text">
+                  <span class="bi-inline user-name">{{ info.info.xm }}</span>
+                  <span class="bi-inline">{{ info.info.xb }}</span>
+                  <span class="bi-inline">
+                    {{ info.profile }}
+                  </span>
+                  <span class="label label-success">已认证毕业生</span>
+                </p>
+                <p class="bi-text">
+                  <span class="bi-inline">籍贯：{{ info.info.syszd }}</span>
+                  <span class="bi-inline">专业：{{ info.info.zy }}</span>
+                  <span class="bi-inline">学校：{{ info.info.yx }}</span>
+                </p>
+                <p class="bi-text">
+                  <span class="bi-inline"></span>
+                  <span class="bi-inline"></span>
+                </p>
+              </el-col>
+              <el-col :span="4" class="resumeMainHeadImg">
+                <img :src="info.avatar_url" style="max-height: 120px" width="100" height="100" />
+              </el-col>
             </el-col>
-            <el-col :span="24" class="itemList">
-              <el-col :span="2" class="itemPoint"><span></span></el-col>
-              <el-col :span="22" class="itemTit">期望薪资：6K</el-col>
+            <el-col :span="24" class="resumeMainMod">
+              <el-col :span="3" class="resumeMainModSide">
+                <h4 class="sideTit">求职意向</h4>
+              </el-col>
+              <el-col :span="21" class="sideMain">
+                <ul>
+                  <li><span style="font-weight: bold;">期望职业：</span>{{ info.expect.job }}</li>
+                  <li><span style="font-weight: bold;">期望薪资：</span>{{ info.expect.salary }}</li>
+                  <li>
+                    <span style="font-weight: bold;">期望城市：</span>
+                    {{ info.expect.city }}
+                  </li>
+                </ul>
+              </el-col>
             </el-col>
-            <el-col :span="24" class="itemList">
-              <el-col :span="2" class="itemPoint"><span></span></el-col>
-              <el-col :span="22" class="itemTit">期望城市：长春</el-col>
+            <el-col :span="24" class="resumeMainMod">
+              <el-col :span="3" class="resumeMainModSide">
+                <h4 class="sideTit">教育经历</h4>
+              </el-col>
+              <el-col :span="21" class="sideMain">
+                <p class="sideMain-p" v-for="(item, index) in info.educations" :key="index">
+                  <span class="sideMain-inline"> {{ item.rxsj }}&nbsp;-&nbsp;{{ item.bysj }} </span>
+                  <span class="sideMain-inline">{{ item.yx }}-</span>
+                  <span class="sideMain-inline">{{ item.fy }}-</span>
+                  <span class="sideMain-inline">{{ item.zy }}-</span>
+                  <span class="sideMain-inline">{{ item.xl }}</span>
+                </p>
+              </el-col>
             </el-col>
-          </el-col>
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem"><span>专业技能</span></el-col>
-            <el-col :span="24" style="padding: 10px;">
-              <el-tag effect="plain" class="jobSkill" style="color: #606266;">思维敏捷</el-tag>
+            <el-col :span="24" class="resumeMainMod">
+              <el-col :span="3" class="resumeMainModSide">
+                <h4 class="sideTit">专业技能</h4>
+              </el-col>
+              <el-col :span="21" class="sideMain">
+                <div class="sideMain-list">
+                  <span class="sideMain-item" v-for="(item, index) in skillPro(info.skill)" :key="index">{{ item }}</span>
+                </div>
+              </el-col>
             </el-col>
-          </el-col>
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem"><span>教育经历</span></el-col>
-            <el-col :span="24" class="itemList">
-              <el-col :span="2" class="itemPoint"><span></span></el-col>
-              <el-col :span="22" class="itemTit">2015年7月至2019年7月&nbsp;&nbsp;长春大学&nbsp;&nbsp;本科</el-col>
+            <el-col :span="24" class="resumeMainMod">
+              <el-col :span="3" class="resumeMainModSide">
+                <h4 class="sideTit">工作经历/项目经历</h4>
+              </el-col>
+              <el-col :span="21" class="sideMain">
+                <ul v-for="(item, index) in info.works" :key="index">
+                  <li class="sideMainLi">
+                    <p class="sideMain-p">{{ item.begin }} - {{ item.end }}</p>
+                    <p class="sideMain-p">
+                      <span class="sideMain-inline">
+                        {{ item.corpname }}
+                      </span>
+                      <span class="sideMain-inline">{{ item.position }}</span>
+                    </p>
+                  </li>
+                </ul>
+              </el-col>
             </el-col>
-          </el-col>
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem"><span>工作\项目经历</span></el-col>
-            <el-col :span="24" class="itemList">
-              <el-col :span="2" class="itemPoint"><span></span></el-col>
-              <el-col :span="22" class="itemTit">2018年12月至2019年7月&nbsp;&nbsp;长春市福瑞科技有限公司&nbsp;&nbsp;测试</el-col>
+            <el-col :span="24" class="resumeMainMod">
+              <el-col :span="3" class="resumeMainModSide">
+                <h4 class="sideTit">证书或荣誉</h4>
+              </el-col>
+              <el-col :span="21" class="sideMain">
+                <div class="sideMain-list">
+                  <span class="sideMain-item" v-for="item in info.honors" :key="item.name">{{ item.name }}</span>
+                  <span class="sideMain-item" v-for="item in info.abilities" :key="item.name">{{ item.name }}</span>
+                </div>
+              </el-col>
             </el-col>
-          </el-col>
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem" style="margin-top: 20px;"><span>证书或荣誉</span></el-col>
-            <el-col :span="24" style="padding: 10px;">
-              <el-tag effect="plain" class="jobSkill" style="color: #606266;">三等奖学金</el-tag>
+            <el-col :span="24" class="resumeMainMod">
+              <el-col :span="3" class="resumeMainModSide">
+                <h4 class="sideTit">自我介绍</h4>
+              </el-col>
+              <el-col :span="21" class="sideMain">
+                <p class="sideMain-p" v-html="info.content"></p>
+              </el-col>
             </el-col>
           </el-col>
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem"><span>自我介绍</span></el-col>
-            <el-col :span="24" class="itemList" style="padding-left: 10px;"><span class="itemTit">你好</span></el-col>
-          </el-col>
-          <el-col :span="24" class="itemDetail">
-            <el-col :span="24" class="jobItem"><span>能力介绍</span></el-col>
-            <el-col :span="24" class="itemList" style="padding-left: 10px;"><span class="itemTit">无</span></el-col>
-          </el-col>
-        </el-col>
-      </el-col>
-      <el-col :span="24" style="text-align: center; padding: 10px;">
-        <el-col :span="12"><el-button class="noBtn">暂不考虑</el-button></el-col>
-        <el-col :span="12"><el-button class="yesBtn">合格</el-button></el-col>
-      </el-col>
-    </el-row>
+        </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'resumeJob',
-  props: {},
+  name: 'resume',
+  props: {
+    type: { type: String, defalut: 'none' },
+    info: { type: Object, default: () => {} },
+  },
   components: {},
-  data: () => ({
-    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-  }),
+  data: () => ({}),
   created() {},
+  // mounted() {
+  //   console.log('in function:');
+  // },
+  // watch:{
+  //   info:{
+  //     handler(val){
+  //       console.log('in function:watch');
+  //     }
+  //   }
+  // },
   computed: {},
-  methods: {},
+  methods: {
+    skillPro(data) {
+      let arr = data.split(';');
+      return arr;
+    },
+    update(status, letterid) {
+      console.log(status, letterid);
+      this.$emit('update', { status: status, id: letterid });
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.jobTop {
-  background-color: rgb(0, 191, 255);
-  border-bottom-right-radius: 10%;
-  border-bottom-left-radius: 10%;
-  padding: 15px;
+.w_0100 {
+  float: left;
+  width: 100%;
 }
-.jobBottom {
-  padding: 15px 0 0 15px;
+.w_1200 {
+  margin: 0 auto;
+  width: 1200px;
 }
-.topRight span {
-  color: #fff;
-  font-size: 14px;
+p {
+  margin: 0;
+  padding: 0;
 }
-.isStu {
+img {
+  max-height: 100%;
+  max-width: 100%;
+}
+ul {
+  margin: 0;
+  padding: 0;
+}
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+}
+.resume {
+  float: left;
+  width: 100%;
+  height: 68rem;
+  background: #e7e8eb;
+}
+.resumeTxt {
+  width: 800px;
+  margin: 0 auto;
+  background: #fff;
+  position: relative;
+}
+.button {
+  position: absolute;
+  height: 40px;
+  line-height: 40px;
+  margin: 10px 0;
+  text-align: center;
+}
+.resumeMain {
+  position: absolute;
+  width: 800px;
+  padding: 0 30px;
+  margin: 60px 0 0 0;
   background-color: #fff;
-  height: 20px;
-  line-height: 20px;
-  padding: 0 5px;
+  border: 1px solid #d9dadc;
+}
+.resumeBtn {
+  position: fixed;
+  top: 38px;
+  left: 50%;
+  margin: 0 0 0 420px;
+  width: 120px;
+  height: 170px;
+}
+.resumeMainTop {
+  overflow: hidden;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
 }
-.itemDetail {
-  margin-bottom: 20px;
+
+.resumeMainTop .el-col {
+  width: 60px;
+  height: 80px;
+  padding: 10px 0;
+}
+.resumeMainTop p {
+  float: left;
+  font-size: 18px;
+  height: 80px;
+  line-height: 80px;
+  margin-left: 20px;
+  color: #333;
+}
+.resumeMainHead {
+  padding: 35px 0 15px;
+}
+
+.resumeMainHeadTxt {
+  font-size: 14px;
+}
+.resumeMainHeadTxt .bi-text {
+  padding: 5px 0;
+}
+.resumeMainHeadTxt .bi-text .bi-inline {
+  margin-right: 10px;
 }
-.jobItem {
-  margin-bottom: 5px;
+.resumeMainHeadTxt .bi-text .user-name {
+  font-size: 24px;
 }
-.itemPoint {
+.resumeMainHeadTxt .bi-text .label {
+  display: inline;
+  padding: 0.2em 0.6em 0.3em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
   text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25em;
+}
+.resumeMainHeadTxt .bi-text .label-success {
+  background-color: #5cb85c;
 }
-.itemList {
-  height: 25px;
-  line-height: 25px;
+.resumeMainHeadImg {
+  float: right;
+  height: 100px;
+  width: 100px;
+  display: table;
 }
-.itemTit {
+
+.resumeMainMod {
   font-size: 14px;
-  color: #606266;
-}
-.itemPoint span {
-  width: 5px;
-  height: 5px;
-  background-color: rgb(0, 191, 255);
-  border-radius: 90px;
-  display: inline-block;
-  margin: 2px 0;
-}
-.jobSkill {
-  border: 1px solid #ebeef5;
-  border-radius: 30px;
-  height: 23px;
-  line-height: 23px;
-}
-.noBtn {
-  width: 95%;
-  background-color: #ff1493;
-  color: white;
+  overflow: hidden;
+}
+.resumeMainModSide {
+  float: left;
+}
+.sideTit {
+  font-size: 18px;
+  margin: 0;
+  color: #333;
+  font-weight: 500;
+}
+.sideMain {
+  border-top: 12px solid #eee;
+  margin: 5px 0 0 0px;
+  padding: 10px 0 30px;
 }
-.yesBtn {
-  width: 95%;
-  background-color: #3cb371;
+.sideMain ul {
+  overflow: hidden;
+}
+.sideMain ul li {
+  float: left;
+  width: 100%;
+  margin-right: 2%;
+  /*height: 30px;*/
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sideMain .sideMainLi {
+  border-bottom: 1px dashed #eee;
+  padding: 10px 0;
+}
+.sideMain-list {
+  margin-top: 10px;
+}
+.sideMain-list .sideMain-item {
+  margin: 0 10px 5px 0;
   color: white;
+  background-color: #a7a5a5;
+  padding: 2px 5px;
+  border-radius: 5px;
+}
+.resumeBtn .el-button {
+  width: 120px;
+  padding: 10px 16px;
+  margin: 9px 0 0;
+  font-size: 15px;
+  margin-top: 5px;
 }
 </style>