<template>
  <div class="work-container">
    <!-- v-if="work.type == " -->
    <div class="w-work">
      <div class="work" v-if="work.type == 0" @click="imageView(work.works)"><img :src="work.works" alt="" /></div>
      <div class="work" v-else><img src="@/assets/images/works/noImg.png" alt="" /></div>
    </div>
    <div class="s-name">
      <span>{{ work.sName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    work: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    imageView(src) {
      // ImagePreview([src]);
      this.$hevueImgPreview({ url: src, clickMaskCLose: true })
    }
  }
}
</script>

<style lang="scss" scoped>
.work-container {
  max-width: 4.5rem;
  width: calc((100% - 20px) / 2);
  overflow: hidden;
  height: 3rem;
  border-radius: 10px;
  box-shadow: rgb(223, 218, 218) 0px 0px 6px 1px;
  margin: 0 10px 15px 0;

  .w-work {
    width: 100%;
    height: calc(100% - 0.7rem);
    .work {
      width: 100%;
      height: 100%;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .s-name {
    width: 100%;
    height: 0.6rem;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    > span {
      width: 100%;
      @include textoverflow();
    }
  }
}
</style>
