hjyd/src/common/utils.js

export const handleScreenAuto = (showEmpty, id) => {
  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight
  if (clientWidth > 1600) {
    if (clientHeight < 1080) {
      const scale = clientHeight / 1080
      document.querySelector(id).style.transform = `scale(${scale})`
      handleBottomFont(id, scale)
      handleImgScale(id, scale)
      handleCooperation(id, scale)
      handleSwiper(id, scale)
      showEmpty.value = false
    } else {
      if (clientHeight >= 1764) {
        const scale = 1323 / clientHeight
        document.querySelector(id).style.transform = `scale(${scale})`
        handleBottomFont(id, scale)
        handleImgScale(id, scale)
        handleCooperation(id, scale)
        handleSwiper(id, scale)
        showEmpty.value = false
      } else {
        if (clientHeight >= 1323) {
          const scale = 1176 / clientHeight
          document.querySelector(id).style.transform = `scale(${scale})`
          handleBottomFont(id, scale)
          handleImgScale(id, scale)
          handleCooperation(id, scale)
          handleSwiper(id, scale)
          showEmpty.value = false
        } else {
          const scale = 1080 / clientHeight
          document.querySelector(id).style.transform = `scale(${scale})`
          handleBottomFont(id, scale)
          handleImgScale(id, scale)
          handleCooperation(id, scale)
          handleSwiper(id, scale)
          showEmpty.value = false
        }
      }
    }
  } else {
    showEmpty.value = true
  }
}

const handleBottomFont = (id, scale) => {
  if (id == '#service_container') {
    document.getElementById('bottom_container').style.transform = `scaleX(${
      1 / scale
    })`
    document.getElementById(
      'bottom_font_save',
    ).style.transform = `scale(${scale})`
  }
}

const handleImgScale = (id, scale) => {
  if (id == '#culture_container') {
    document.getElementById('bg_img_scale').style.transform = `scale(${
      1 / scale
    })`
  }
}

const handleCooperation = (id, scale) => {
  if (id == '#cooperation_container') {
    document.getElementById('contract_bg_coop').style.transform = `scale(${
      1 / scale
    })`
    document.getElementById(
      'contract_real_coop',
    ).style.transform = `scale(${scale})`
  }
}

export const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`
    const node = document.querySelector(element)
    node?.classList.add(`${prefix}animated`, animationName)
    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation()
      node?.classList.remove(`${prefix}animated`, animationName)
      resolve('Animation ended')
    }
    node?.addEventListener('animationend', handleAnimationEnd, {
      once: true,
    })
  })

// 根据 activeIndex 判断激活哪个元素的动画
export const totalPageAni = () => {
  animateCSS('#a', 'bounce')
}