menduner/src/views/recruit/personal/jobFair/enterprise/introduction.vue

<template>
  <div>
    <h4>公司简介</h4>
    <div v-if="props.info.enterprise.introduce" class="requirement" v-html="props.info.enterprise.introduce.replace(/\n/g, '</br>')"></div>
    <div v-else>暂无</div>
    <v-divider class="my-3"></v-divider>
    <div>
      <h4>公司地址</h4>
      <div v-if="props.info?.business?.address" class="mt-1">
        <v-icon size="25" color="primary">mdi-map-marker</v-icon>
        <span style="color: var(--color-666);font-size: 15px;">{{ props.info.business.address }}</span>
      </div>
      <div v-else class="mt-1">暂无</div>
    </div>
    <v-divider class="my-3"></v-divider>
    <div>
      <h4>公司相册</h4>
      <v-slide-group v-if="props.info.enterprise.albumList" :show-arrows="true" class="mt-3 img-box cursor-pointer">
        <v-slide-group-item v-for="(val, i) in props.info.enterprise.albumList" :key="i">
          <div>
            <v-img v-if="checkIsImage(val)" class="mr-3" width="200" height="115" :src="val" cover rounded @click.stop="handleClick(i)"></v-img>
            <video v-else class="videos-radius mr-3" :src="val" controls height="118" width="200" preload="preload" @click.stop="handleClick(i)"></video>
          </div>
        </v-slide-group-item>
      </v-slide-group>
      <div v-else>暂无</div>
    </div>
    <PreviewImage v-if="showPreview" :initialIndex="current" :urlList="props.info.enterprise.albumList" @close="showPreview = !showPreview" />
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-introduction'})
import { checkIsImage } from '@/utils'
import { ref } from 'vue'

const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})

// 预览
const showPreview = ref(false)
const current = ref(0)
const handleClick = (index) => {
  showPreview.value = !showPreview.value
  current.value = index
}
</script>

<style scoped lang="scss">
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: var(--color-333);
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
}
.videos-radius {
  border-radius: 8px;
}
</style>