zhongderengongzhineng/src/components/v-dialog/v-dialog.vue

<template>
<div class="dialog-con-bg">
  <div class="dialog-con" @click="_closeMask"></div>
  <div class="dialog-body">
    <div class="dialog-body-top">
      <div v-if="Lang" class="dialog-body-title ">
        {{detail.name}}
      </div>
      <div v-if="Lang===false" class="dialog-body-title ">
        {{detail.englishName}}
      </div>
      <div class="dialog-body-sublist">
        <span v-for="(item,i) in 1" :key="i">
          <span v-if="Lang" class="dialog-body-sub_title">职位类别：</span>
        <span v-if="Lang===false" class="dialog-body-sub_title">Job Category:</span>
        <span v-if="Lang" class="dialog-body-sub_value">{{detail.categories[0].name}}</span>
        <span v-if="Lang===false" class="dialog-body-sub_value">{{detail.categories[0].englishName}}</span>
        <span v-if="Lang" class="dialog-body-sub_title">工作地点：</span>
        <span v-if="Lang===false" class="dialog-body-sub_title">address:</span>
        <span v-if="Lang" v-for="item in detail.locations" :key="item.id" class="dialog-body-sub_value">{{item.name}}</span>
        <span v-if="Lang===false" v-for="item in detail.locations" :key="item.id" class="dialog-body-sub_value">{{item.englishName}}</span>
        <span v-if="Lang" class="dialog-body-sub_title">招聘人数：</span>
        <span v-if="Lang===false" class="dialog-body-sub_title">number:</span>
        <span class="dialog-body-sub_value">1</span>
        <span v-if="Lang" class="dialog-body-sub_title">发布时间：</span>
        <span v-if="Lang===false" class="dialog-body-sub_title">time:</span>
        <span class="dialog-body-sub_value">{{detail.releaseTime}}</span>
        </span>
      </div>
    </div>
    <div class="dialog-body-list">
      <div class="dialog-body-list-item">
        <div v-if="Lang" class="dialog-body-list-title">职位描述</div>
        <div v-if="Lang===false" class="dialog-body-list-title">job description</div>
        <div v-if="Lang" class="dialog-body-list-con" v-html='detail.description'>
        </div>
        <div v-if="Lang===false" class="dialog-body-list-con" v-html='detail.englishDescription'>
        </div>
      </div>
      <div class="dialog-body-list-item">
        <div v-if="Lang" class="dialog-body-list-title">任职要求</div>
        <div v-if="Lang===false" class="dialog-body-list-title">job requirements</div>
        <div v-if="Lang" class="dialog-body-list-con" v-html='detail.demand'></div>
        <div v-if="Lang===false" class="dialog-body-list-con" v-html='detail.englishDemand'></div>
      </div>
      <!--<div>-->
      <!--<span v-if="Lang" class="apply-btn">申请</span>-->
      <!--<span v-if="Lang===false" class="apply-btn">apply</span>-->
      <!--</div>-->
    </div>
  </div>
</div>
</template>

<script>
import {
  mapGetters
} from 'vuex'

export default {

  name: 'v-dialog',

  data () {
    return {}
  },
  props: {
    detail: Object
  },
  computed: {
    ...mapGetters(['Lang'])
  },
  methods: {
    _closeMask: function () {
      this.$emit('closeMask', false)
    }
  }
}
</script>

<style lang="css" scoped>
.dialog-con-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-con {
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(204, 204, 204, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}

.dialog-body {
  z-index: 2;
  width: 740px;
  background: #fff;
  position: absolute;
  padding: 2em;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.dialog-body-top {
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.7em;
}

.dialog-body-title {
  margin-bottom: 1.1em;
  font-size: 1.5em;
  color: #e8383d;
}

.dialog-body-sublist {
  font-size: 0.8em;
  line-height: 2em;
}

.dialog-body-sub_title {
  font-weight: bold;
}

.dialog-body-sub_value {
  padding-right: 5px;
}

.dialog-body-list {
  margin: 1.1em 0;
}

.dialog-body-list-item {
  margin-bottom: 1.1em;
}

.dialog-body-list-title {
  margin-bottom: 1.1em;
  font-weight: bold;
}

.dialog-body-list-con {
  line-height: 2em;
}

.apply-btn {
  background: #e8383d;
  color: #fff;
  line-height: 2em;
  width: 7em;
  padding: 0 2em;
  text-align: center;
  cursor: pointer;
  display: inline-block;
}
</style>