<div class="careers">
  <list-menu></list-menu>
  <list-head :headType="5"></list-head>
  <list-bottom :blackColor="false"></list-bottom>
  <div class="careers-body">
    <UAnimateContainer :target="getTarget">
    <div class="company-goal">
      <div class="company-bg-color"></div>
      <img src="http://yun-image.elab-plus.com/images/join/1_objects@2x.png" class="company-goal-bg">
      <UAnimate delay="0.8s" duration="1s" :offset="100" name="fadeIn">
        <img src="http://yun-image.elab-plus.com/images/join/3_objects@2x.png" class="company-goal-desc">
      </UAnimate>
    </div>
    <div class="company-vision">
      <UAnimate delay="0.5s" duration="1s" :offset="100" name="fadeIn">
      <div class="company-vision-title">
        <span style="font-family: 'AritaHeiti-Bold'">公司愿景</span>
      </div>
      <div class="company-vision-detail">
        <p style="font-family: 'AritaHeiti-Light'">以数据和技术驱动的新型房地产柔性开发的领导者<br/>未来人居的缔造者</p>
      </div>
      </UAnimate>
    </div>
    <div class="company-value">
      <img src="http://yun-image.elab-plus.com/images/join/1_objects@2x_7.png" class="company-value-panel-img">
      <UAnimate delay="0.5s" duration="1s" :offset="100" name="fadeIn">
      <img src="http://yun-image.elab-plus.com/images/join/1_objects@2x_1.png" class="company-value-logo-img">
      </UAnimate>
      <div class="company-value-description">
        <UAnimate delay="0.5s" duration="1s" :offset="100" name="fadeIn">
        <div class="company-value-description-title">
          <p style="font-family: 'AritaHeiti-Bold'">核心价值观</p>
        </div>
        <div class="company-value-description-detail">
          <p style="font-family: 'AritaHeiti-Light'">要成功更要成长，要胜利更要抗挫；</p>
          <p style="font-family: 'AritaHeiti-Light'">要权利更要责任，要自由更要自制；</p>
          <p style="font-family: 'AritaHeiti-Light'">要创新更要专注，要利己更要共赢；</p>
          <p style="font-family: 'AritaHeiti-Light'">要赚钱更要值钱，要高速更要高效。</p>
        </div>
        </UAnimate>
        <UAnimate delay="1s" duration="1s" :offset="100" name="fadeIn">
        <div class="company-value-people">
          <div class="company-value-people-title">
            <p style="font-family: 'AritaHeiti-Bold'">用人理念</p>
          </div>
          <div class="company-value-people-des">
            <p style="font-family: 'AritaHeiti-Bold'">以德为先，以才为重</p>
            <p style="font-family: 'AritaHeiti-Bold'">知行合一，追求卓越</p>
          </div>
        </div>
        </UAnimate>
      </div>
    </div>
    <div class="company-job" :style="{height:deviceMobile?(screenWidth*630/966):(screenWidth*360/966)}">
      <div :style="{height:deviceMobile?(screenWidth*630/966):(screenWidth*360/966)}" class="company-job-bg">
        <img src="http://yun-image.elab-plus.com/images/join/1_objects@2x_2.png" class="company-job-bg-img">
      </div>
      <div class="company-job-desc">
        <UAnimate delay="0.5s" duration="1s" :offset="100" name="fadeIn">
        <img src="http://yun-image.elab-plus.com/images/join/3_objects@2x_1.png" class="company-job-desc-img">
        </UAnimate>
      </div>
      <div :style="{marginTop:deviceMobile?(screenWidth*630/966):(screenWidth*300/966)+'px'}" class="company-job-button">
<!--        <UAnimate delay="1s" duration="1s" :offset="160" name="fadeInDown">-->
          <a v-on:click="navigateToJob" style="font-family: 'AritaHeiti-Light'">查看职位</a>
<!--        </UAnimate>-->
      </div>
    </div>
    </UAnimateContainer>
  </div>
  <div class="careers-jobContainer" v-if="showJobList">
    <div class="careers-job-description">
      <div class="careers-job-description-close" v-on:click="closeJobDescription()">
        <img src="http://yun-image.elab-plus.com/images/join/1_objects@2x_3.png" class="careers-job-description-close-img">
      </div>
      <div class="careers-job-description-title">
        <p>根据ELAB 2018年未来规划，现诚聘以下职位：</p>
      </div>
      <div class="careers-job-description-detail" :style="'height:'+jobListHeight">
        <el-table
          :data="jobList"
          :height="jobListHeight"
          :header-cell-style="tableHeaderColor"
          style="width: 100%;">
<!--          :height="'calc(100vh - 120px)'"-->
          <el-table-column
            label="职位名称"
            prop="postion"
            style="text-align: center;">
            <template slot-scope="props">
              <p style="color:#2A2A2A;font-size: 15px;font-weight: 700;">
                {{props.row.postion}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="招聘人数"
            v-if="!deviceMobile"
            prop="number">
            <template slot-scope="props">
              <p style="color:#2A2A2A;font-size: 15px;font-weight: 700;">
                {{props.row.number}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="公司"
            v-if="!deviceMobile"
            prop="company">
            <template slot-scope="props">
              <p style="color:#2A2A2A;font-size: 15px;font-weight: 700;">
                {{props.row.company}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="地点"
            prop="locaton">
            <template slot-scope="props">
              <p style="color:#2A2A2A;font-size: 15px;font-weight: 700;">
                {{props.row.locaton}}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间"
            v-if="!deviceMobile"
            prop="updateTime">
            <template slot-scope="props">
              <div style="color:#2A2A2A;font-size: 15px;font-weight: 700;">{{new Date(props.row.updateTime*1000).getFullYear()+'-'+new Date(props.row.updateTime*1000).getMonth()+'-'+new Date(props.row.updateTime*1000).getDate()}}</div>
            </template>
          </el-table-column>
          <el-table-column
            type="expand"
            align="left">
            <template slot-scope="props">
              <div class="tab-detail-content" v-html="props.row.description"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--<div class="careers-job-description-bottom">
        <div class="menu-bottom">
          <div class="menu-contact-map">
            <a style="text-decoration:none" href="https://m.amap.com/search/mapview/markers=31.287272%2C121.447295%2C%E4%B8%8A%E6%B5%B7%E5%B8%82%E9%9D%99%E5%AE%89%E5%8C%BA%E5%BD%AD%E6%B1%9F%E8%B7%AF602%E5%8F%B7e%E5%BA%A7" target="_blank">
              <div class="map-icon">
                <img class="map-img" src="http://yun-image.elab-plus.com/images/join/1_objects@2x_4.png">
              </div>
              <div class="map-desc">
                <p>上海市静安区彭江路602号E座408室</p>
              </div>
            </a>
          </div>
          <div class="menu-contact-phone">
            <div class="phone-icon">
              <img class="phone-img" src="http://yun-image.elab-plus.com/images/join/1_objects@2x_5.png">
            </div>
            <div class="phone-desc">
              <p>
                <a href="tel:02156519508">021-56519508</a>
              </p>
            </div>
          </div>
          <div class="menu-contact-mail">
            <div class="email-icon">
              <img class="email-img" src="http://yun-image.elab-plus.com/images/join/1_objects@2x_6.png">
            </div>
            <div class="email-desc">
              <p>
                <a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a>
              </p>
            </div>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</div>
