<template lang="html">
  <div id="resume">
    <!-- <div class="w_0100 resumeCor">
      <div class="w_1200"><h2></h2></div>
    </div> -->
    <div class="w_0100 resumeCorMain">
      <div class="w_1200">
        <el-row class="resumeCont">
          <el-col :span="24" class="resumeContMain">
            <el-row class="mainTop">
              <el-col :span="12" class="mainTopInter">
                <el-col class="mainTopInterImg">
                  <img src="../assets/studentLogo.png" width="200" height="200" />
                </el-col>
                <el-col class="mainTopInterName">
                  <h1>{{ info.info.xm }}</h1>
                  <h3>求职意向：{{ info.expect.job }}</h3>
                </el-col>
              </el-col>
              <el-col :span="12" class="mainTopInfo">
                <el-col class="mainTopInfoTop">基本信息</el-col>
                <el-col class="mainTopInfoName">
                  <p>
                    <i class="el-icon-user-solid"></i>
                    <span>性别：{{ info.info.xb }}</span>
                  </p>
                  <p>
                    <i class="el-icon-location-outline"></i>
                    <span>期望城市：{{ info.expect.city }}</span>
                  </p>
                  <p>
                    <i class="el-icon-phone"></i>
                    <span>电话：{{ info.contact.mobile }}</span>
                  </p>
                  <p>
                    <i class="el-icon-message"></i>
                    <span>邮箱：{{ info.contact.email }}</span>
                  </p>
                </el-col>
              </el-col>
            </el-row>
            <el-row class="mainTopMain">
              <el-col style="width: 518px;">
                <el-col class="mainTopMainInfo">
                  <el-col class="mainTopInfoTop">工作经历</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList" v-for="(item, index) in info.works" :key="index">
                      <el-col class="ItemLeft">
                        <span class="resume_key">{{ item.begin }}</span>
                        <em>-</em>
                        <span class="resume_key">{{ item.begin }}</span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">{{ item.corpname }}</span>
                          <span class="resume_key">{{ item.position }}</span>
                        </el-col>
                        <el-col class="ItemDetails">
                          <el-col class="resume_key"></el-col>
                        </el-col>
                      </el-col>
                      <el-col class="line-box">
                        <el-col class="line-head"></el-col>
                        <el-col class="line"></el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo">
                  <el-col class="mainTopInfoTop">实习经历</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList" v-for="(item, index) in info.educations" :key="index">
                      <el-col class="ItemLeft">
                        <span class="resume_key">{{ item.rxsj }}</span>
                        <em>-</em>
                        <span class="resume_key">{{ item.bysj }}</span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">{{ item.xl }}</span>
                          <span class="resume_key">{{ item.yx }}</span>
                          <span class="resume_key">{{ item.zy }}</span>
                        </el-col>
                        <el-col class="ItemDetails">
                          <el-col class="resume_key"></el-col>
                        </el-col>
                      </el-col>
                      <el-col class="line-box">
                        <el-col class="line-head"></el-col>
                        <el-col class="line"></el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo">
                  <el-col class="mainTopInfoTop">项目经历</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key">2019/02</span>
                        <em>-</em>
                        <span class="resume_key">2019/04</span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">无</span>
                          <span class="resume_key">无</span>
                        </el-col>
                        <el-col class="ItemDetails">
                          <el-col class="resume_key"></el-col>
                        </el-col>
                      </el-col>
                      <el-col class="line-box">
                        <el-col class="line-head"></el-col>
                        <el-col class="line"></el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo">
                  <el-col class="mainTopInfoTop">培训经历</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key">2019/02</span>
                        <em>-</em>
                        <span class="resume_key">2019/04</span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">无</span>
                          <span class="resume_key">无</span>
                        </el-col>
                        <el-col class="ItemDetails">
                          <el-col class="resume_key"></el-col>
                        </el-col>
                      </el-col>
                      <el-col class="line-box">
                        <el-col class="line-head"></el-col>
                        <el-col class="line"></el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col style="width: 388px;float: right;">
                <el-col class="mainTopMainInfo Educational">
                  <el-col class="mainTopInfoTop">教育经历</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key"></span>
                        <em>-</em>
                        <span class="resume_key">2019/04</span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">海南热带海洋学院</span>
                          <span class="resume_key">海洋渔业科学与技术</span>
                          <span class="resume_key">本科毕业</span>
                        </el-col>
                      </el-col>
                      <el-col class="ItemDetails">
                        <el-col class="resume_key">
                          <ul>
                            <li style="list-style-type: disc;"></li>
                          </ul>
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo Certificate">
                  <el-col class="mainTopInfoTop">获得证书</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key"></span>
                        <em>-</em>
                        <span class="resume_key"></span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">2018/06/28</span>
                          <span class="resume_key">大学英语四级</span>
                        </el-col>
                        <el-col class="ItemDetails">
                          <el-col class="resume_key"></el-col>
                        </el-col>
                      </el-col>
                      <el-col class="line-box">
                        <el-col class="line-head"></el-col>
                        <el-col class="line"></el-col>
                      </el-col>
                    </el-col>
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key"></span>
                        <em>-</em>
                        <span class="resume_key"></span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemHead">
                          <span class="resume_key">2018/03/28</span>
                          <span class="resume_key">计算机二级</span>
                        </el-col>
                        <el-col class="ItemDetails">
                          <el-col class="resume_key"></el-col>
                        </el-col>
                      </el-col>
                      <el-col class="line-box">
                        <el-col class="line-head"></el-col>
                        <el-col class="line"></el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo Skills">
                  <el-col class="mainTopInfoTop">个人技能</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key"></span>
                        <em>-</em>
                        <span class="resume_key"></span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemDetails">
                          <el-col class="resume_key">
                            <p>
                              <i class="el-icon-football" style="color: #00c091;margin-right: 5px;"></i>
                              <span>办公基本操作</span>
                            </p>
                            <el-col class="progress">
                              <span></span>
                            </el-col>
                          </el-col>
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo Selfappraise">
                  <el-col class="mainTopInfoTop">自我评价</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key"></span>
                        <em>-</em>
                        <span class="resume_key"></span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemDetails">
                          <el-col class="resume_key">
                            <p>
                              本人适应能力较强，性格沉稳，观察力强，有上进心，为人随和，易于沟通，能够比较轻松的融入工作群体，服从公司纪律，愿意尝试各类型工作，发挥所长，同时有信心迎接各种工作的挑战。
                            </p>
                          </el-col>
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col class="mainTopMainInfo Signs">
                  <el-col class="mainTopInfoTop">能力标签</el-col>
                  <el-col class="ItemControl">
                    <el-col class="ItemList">
                      <el-col class="ItemLeft">
                        <span class="resume_key"></span>
                        <em>-</em>
                        <span class="resume_key"></span>
                      </el-col>
                      <el-col class="ItemRight">
                        <el-col class="ItemDetails">
                          <el-col class="resume_key">
                            <p>
                              Excel | PPT | Word | 办公软件 | 抗压能力 | 团队合作 | 沟通协调能力 | 执行力 | 团队精神 | 个人能力
                            </p>
                          </el-col>
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3" class="resumeContBtn">
            <el-button type="success"><a href="" style="color: #fff;">纳入考虑</a></el-button>
            <el-button type="success"><a href="" style="color: #fff;">下载简历</a></el-button>
            <el-button type="success"><a href="" style="color: #fff;">打印简历</a></el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'resume',
  props: {
    info: { type: Object, default: () => {} },
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_0100 {
  float: left;
  width: 100%;
}
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
p {
  margin: 0;
  padding: 0;
}
img {
  max-height: 100%;
  max-width: 100%;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.resumeCor {
  position: fixed;
  top: 0;
  z-index: 50;
  height: 59px;
  background-color: #fff;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}
.resumeCor h2 {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 800px;
  height: 30px;
  line-height: 30px;
  margin-left: -400px;
  text-align: center;
  font-size: 14px;
  color: #51d3d9;
}
.resumeCorMain {
  position: relative;
  // margin: 60px 0 0 0px;
  width: 100%;
  height: 65rem;
  background: url(../assets/background.png) center center repeat;
}
.resumeCont {
  float: left;
  width: 100%;
  margin-top: 30px;
  padding: 0 127px;
}
.resumeContMain {
  position: absolute;
  width: 946px;
  padding: 15px 19px;
  background-color: #fff;
  border: 1px solid #d9dadc;
}
.resumeContBtn {
  position: fixed;
  right: 1.6rem;
}
.resumeContBtn .el-button {
  width: 150px;
  height: 31px;
  padding: 6px 12px;
  margin: 10px 0 0 0;
}
.mainTop {
  width: 100%;
  height: 200px;
  margin: 15px 0;
}
.mainTopInter {
  height: 200px;
}
.mainTopInterImg {
  width: 200px;
  height: 200px;
  border-radius: 90px;
}
.mainTopInterName {
  width: 50%;
  height: 200px;
  padding: 40px 0 0 20px;
}
.mainTopInterName h1 {
  font-size: 37px;
  font-weight: bold;
  margin-bottom: 22px;
}
.mainTopInterName h3 {
  font-size: 18px;
  font-weight: bold;
  padding: 3px;
}
.mainTopInfo {
  height: 200px;
  padding: 40px 0 0 0;
}
.mainTopInfoTop {
  height: 31px;
  padding-left: 16px;
  line-height: 31px;
  font-size: 22px;
  font-weight: bold;
  color: #040404;
  border-left: 6px solid #00c091;
}
.mainTopInfoName {
  position: relative;
  font-size: 16px;
  color: #767676;
  padding-left: 50px;
  line-height: 20px;
  background-color: #fff;
}
.mainTopInfoName p {
  position: relative;
  padding: 5px 0;
  background-color: #fff;
}
.mainTopInfoName p i {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  top: 5px;
  left: -28px;
  color: #fff;
  border-radius: 90px;
  background-color: #00c091;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 15px;
  cursor: pointer;
}
.mainTopInfoName p span {
  display: inline-block;
  min-width: 150px;
  padding: 0 5px;
  border: 1px solid transparent;
}
.mainTopMain {
  width: 100%;
}
.mainTopMainInfo {
  width: 100%;
  margin-bottom: 12px;
}
.ItemControl {
  position: relative;
}
.ItemList {
  position: relative;
  padding: 5px 10px 5px 50px;
  border: 1px dotted transparent;
  outline: 0;
}
.resume_key {
  height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-block;
  padding: 3px;
  font-size: 16px;
  color: #515151;
  padding: 3px 2px;
  border: 1px solid transparent;
}
.ItemHead {
  margin-bottom: 1px;
  font-size: 16px;
  padding-left: 0;
}
.ItemDetails {
  line-height: 21px;
  border: 1px solid transparent;
}
.ItemList .line-box {
  position: absolute;
  left: 20px;
  top: 0;
  width: 22px;
  height: 102%;
}
.line-box .line-head {
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #00c091;
}
.line-box .line {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 1px;
  height: 99%;
  background-color: #00c091;
  z-index: 10;
}
.ItemHead > span {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #515151;
  border: 1px solid transparent;
}
.Educational .ItemList {
  padding: 5px 5px 8px 25px;
}
.Certificate .ItemLeft {
  display: none;
}
.Skills {
  margin-bottom: 30px;
}
.Skills .ItemLeft {
  display: none;
}
.Skills .ItemList {
  padding: 5px 5px 8px 25px;
}
.Skills .progress {
  width: 70%;
  height: 8px;
  margin: 10px 0 12px 20px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #040404;
  border-color: #00c091;
}
.Skills .progress span {
  display: block;
  height: 100%;
  width: 50%;
  background-color: #00c091;
  cursor: w-resize;
}
.Selfappraise {
  margin-bottom: 90px;
}
.Selfappraise .ItemLeft {
  display: none;
}
.Selfappraise .ItemList {
  padding: 5px 5px 8px 25px;
}
.Signs {
  margin-bottom: 80px;
}
.Signs .ItemLeft {
  display: none;
}
.Signs .ItemList {
  padding: 5px 5px 8px 25px;
}
</style>
