$(function () {
  createBackCircle($('.circle-nosquare-animated'))
  createDeseCircle($('.dese-concact'))
  seeMoreBtn()
  headerScroll()
  $(document).scroll(function () {
    // tagAutoPlay('.challanges')
    animeCircle($('.circle-nosquare-animated'))
    animeDeseCircle($('.dese-concact'))
  })
})
// 判断页面是否到了需要显示图片的位置并赋值
function loadlazy(){
    var itv = setTimeout(function(){
        var winHeight = $(window).height();
        var scrolltop = $(window).scrollTop();
        $('img').each(function(){
            var oTop = $(this).offset().top;
            if((oTop-scrolltop) >= 0 && (oTop-scrolltop)<winHeight){
                var src = $(this).attr("data_src");
                if(src){
$(this).attr("src",src);
                }
                
            }
        })
    },100);
}

// 页面滚动加载
$(window).scroll(function() {
    loadlazy();
});
//顶部导航栏 背景色适配banner
        function headerScroll() {
          $('.header')
            .mouseenter(function () {
              headerWhite()
            })
            .mouseleave(function () {
              headerTransparent()
            })
          $('.nav-wrap > ul > li')
            .mouseenter(function () {
              $(this).find('.nav-li-active').css('width', '3.5rem')
              $(this).siblings().find('.nav-li-active').css('width', '0')

              $(`.hd-nav:eq(${$(this).index()})`)
                .stop()
                .slideDown({
                  start: function () {
                    $(this).css({ display: 'flex' })
                  },
                })
            })
            .mouseleave(function () {
              $(this).find('.nav-li-active').css('width', '0')
              $(`.hd-nav:eq(${$(this).index()})`)
                .stop()
                .slideUp()
            })

          $('.nav-wrap > ul > li > a').css('color', '#fff')
          $('.header').css('background', 'transparent')
          $('.search-logo').addClass('search-logo-new')
          $(window).scroll(function () {
            var offsetTop = $('.header').offset().top
            if (offsetTop === 0) {
              $('.header').mouseleave(function () {
                headerTransparent()
              })
              headerTransparent()
            } else if (offsetTop > 0) {
              $('.header').mouseleave(function () {
                headerWhite()
              })
              headerWhite()
            }
          })
        }
        function headerTransparent() {
          $('.logo').removeClass('logo-new')
          $('.nav-wrap > ul > li > a').css('color', '#fff')
          $('.search-logo').addClass('search-logo-new')
          $('.header').css('background', 'transparent')
          $('.header').removeClass('headerShadow')
        }
        function headerWhite() {
          $('.logo').addClass('logo-new')
          $('.nav-wrap > ul > li > a').css('color', '#090F21')
          $('.search-logo').removeClass('search-logo-new')
          $('.header').css('background', '#fff')
           $('.header').addClass('headerShadow')
        }
    
    
// 滚动背景
//创建架构背景图片（3个圆 无方块）
function createBackCircle(className) {
  $('<div class="item-bg1"></div>').appendTo(className)
  $('<div class="item-bg2"></div>').appendTo(className)
  $('<div class="item-bg3"></div>').appendTo(className)
}

//架构部分背景图片滚动特效
function animeCircle(className) {
  if ($(className).length == 0) {
    return
  }
  var scrollValue =
    ($(window).height() + $(document).scrollTop() - $(className).offset().top) /
    2

  if (scrollValue > 120 && scrollValue < 700) {
    anime({
      targets: '.item-bg1',
      translateY: -scrollValue / 2 + 100,
      translateX: scrollValue + 300,
      loop: false,
      duration: 300,
      easing: 'linear',
    })
    anime({
      targets: '.item-bg2',
      translateY: -scrollValue + 70,
      translateX: 300 - scrollValue,
      loop: false,
      duration: 300,
      easing: 'linear',
    })
    anime({
      targets: '.item-bg3',
      translateY: scrollValue - 60,
      translateX: -scrollValue - 30,
      loop: false,
      duration: 300,
      easing: 'linear',
    })
  }
}
//查看更多按钮（动态圆效果）
function seeMoreBtn() {
  $('.more-white-see,.more-black-see')
    .on('mouseenter', function (e) {
      var parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top
      $(this).find('.more-see-bg').css({
        top: relY,
        left: relX,
      })
    })
    .on('mouseout', function (e) {
      var parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top
      $(this).find('.more-see-bg').css({
        top: relY,
        left: relX,
      })
    })
}
//创建小得瑟咨询背景圆图片（3个圆 无方块）
function createDeseCircle(className) {
  $('<div class="dese-bg1"></div>').appendTo(className)
  $('<div class="dese-bg2"></div>').appendTo(className)
  $('<div class="dese-bg3"></div>').appendTo(className)
}

//小得瑟咨询部分背景图片滚动特效
function animeDeseCircle(className) {
  if ($(className).length == 0) {
    return
  }
  var scrollValue =
    ($(window).height() + $(document).scrollTop() - $(className).offset().top) /
    3
  if (scrollValue > 0 && scrollValue < 120) {
    anime({
      targets: '.dese-bg1',
      translateY: scrollValue / 2,
      translateX: scrollValue + 30,
      loop: false,
      duration: 300,
      easing: 'linear',
    })
    anime({
      targets: '.dese-bg2',
      translateY: -scrollValue / 3 + 70,
      translateX: scrollValue - 70,
      loop: false,
      duration: 300,
      easing: 'linear',
    })
    anime({
      targets: '.dese-bg3',
      translateY: scrollValue / 5 - 5,
      translateX: -scrollValue - 90,
      loop: false,
      duration: 300,
      easing: 'linear',
    })
  }
}
// renderIcon 部分hover上移10px
function moveRenderIconUp(box, iconBox, type) {
  // hover上移20px
  if (type === 'renderIcon') {
    $(box)
      .mouseenter(function () {
        $(this).find(iconBox).css('transform', 'translateY(-.625rem)')
      })
      .mouseleave(function () {
        $(this).find(iconBox).css('transform', 'translateY(0rem)')
      })
  } else if (type === 'product') {
    // 自主产品模块hover
    $(box)
      .mouseenter(function () {
        $(this).siblings(iconBox).css('transform', 'translateY(-.625rem)')
      })
      .mouseleave(function () {
        $(this).siblings(iconBox).css('transform', 'translateY(0rem)')
      })
  } else if (type === 'aps-tips') {
    //智能制造 aps模块hover
    $(box)
      .mouseenter(function () {
        $(this)
          .parent()
          .parent()
          .siblings(iconBox)
          .css('transform', 'translateY(-.625rem)')
      })
      .mouseleave(function () {
        $(this)
          .parent()
          .parent()
          .siblings(iconBox)
          .css('transform', 'translateY(0rem)')
      })
  }
}
//渲染两个方框 swiper-slide内容
function renderTwoboxSlide(list, boxDom) {
  list.forEach((item) => {
    const slideHtmlFont = ` <div class="swiper-slide">
                    <div class="technology-boxes">
                        <div class="technology-box">
                            <div class="box-content">
                                <div class="img-box"><img src="/static/${item.imgUrl1}" /></div>`
    const slideHtmlEnd = ` <div class="box-tit">
                                    <div class="box-more">
                                        <span>${item.title1}</span>
                                        <a href="#">
                                            <span>MORE</span>
                                            <div>
                                                <img src="/static/img/index-page/more3.svg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="box-subtit">${item.subTitle1}${
      item.blueSubTitle1
        ? `<span class="box-blue-subtit">${item.blueSubTitle1}</span>${item.backSubTitle1}`
        : ``
    }
                                    </div>
                                </div>
                            </div>
                            <div class="box-p">${item.description1}</div>
                        </div>
                        <div class="technology-box">
                            <div class="box-content">
                                <div class="img-box"><img src="/static/${
                                  item.imgUrl2
                                }" /></div>
                                <div class="box-tit">
                                    <div class="box-more">
                                        <span>${item.title2}</span>
                                        <a href="#">
                                            <span>MORE</span>
                                            <div>
                                                <img src="/static/img/index-page/more3.svg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="box-subtit">${item.subTitle2}${
      item.blueSubTitle2
        ? `<span class="box-blue-subtit">${item.blueSubTitle2}</span>${item.backSubTitle2}`
        : ``
    }
                                    </div>
                                </div>
                            </div>
                            <div class="box-p">${item.description2}</div>
                        </div>
                    </div>
                </div>`
    if (item.imgUrl3) {
      $(
        slideHtmlFont +
          `<div class="img-box" style="margin-left:.375rem"><img src="/static/${item.imgUrl3}" /></div>` +
          slideHtmlEnd
      ).appendTo(boxDom)
    } else {
      $(slideHtmlFont + slideHtmlEnd).appendTo(boxDom)
    }
  })
}
//渲染圆框 带滑动 进度条分页器（5个）
function renderDigitalSwiper(dom, spaceBetween, loop, delay, slidesPerView) {
    var rootSizeScale = parseFloat($('html').css('font-size')) / 16
    var spaceB = spaceBetween * rootSizeScale
  if (delay) {
    delay = {
      disableOnInteraction: false,
      delay: delay,
    }
  }
  var mouseSwiper = new Swiper(dom, {
    slidesPerView: slidesPerView,
    loop: loop,
    pagination: {
      el: `${dom} .swiper-pagination`,
      clickable: true,
      bulletElement: 'li',
    },
    spaceBetween: spaceB,
    autoplay: delay,
    navigation: {
      nextEl: `${dom} .swiper-button-next`,
      prevEl: `${dom} .swiper-button-prev`,
    },
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  })
  for (i = 0; i < mouseSwiper.pagination.bullets.length; i++) {
    mouseSwiper.pagination.bullets[i].onmouseover = function () {
      this.click()
    }
  }
  $(`${dom} .swiper-slide`).mouseenter(function () {
    mouseSwiper.autoplay.stop()
  })
  $(`${dom} .swiper-slide`).mouseleave(function () {
    mouseSwiper.autoplay.start()
  })
  $(`${dom} .swiper-button`)
    .mouseenter(function () {
      $(this).addClass(`swiper-button-white`)
    })
    .mouseleave(function () {
      $(this).removeClass(`swiper-button-white`)
    })
  return mouseSwiper
}

// 展示tag 对应块内容
function showChallangeTag(dom, orderList, Index, imgBool) {
  $(`${dom} .challange-tags .challange-tag:eq(${orderList[Index]})`).addClass(
    'challange-tag-active'
  )
  $(`${dom} .challange-tags .challange-tag:eq(${orderList[Index]})`)
    .siblings()
    .removeClass('challange-tag-active')
  $(`${dom} .content-right:eq(${orderList[Index]})`).show()
  $(`${dom} .content-right:eq(${orderList[Index]})`).siblings().hide()
  if (imgBool) {
    $(`${dom} .img-tag-show:eq(${orderList[Index]})`).show()
    $(`${dom} .img-tag-show:eq(${orderList[Index]})`).siblings().hide()
  }
}
// 滚动到对应位置开始自动播放
//是否正在有challengeTag定时器进行
var challangeBool=false;
function challangeTag(dom, index, imgBool, orderList) {
  var domHeight = 0
  if ($(`${dom}`).parents('.card-new').length === 0) {
    domHeight = $(`${dom}`).height()
  } else {
    domHeight = $(`${dom}`).parents('.card-new').height()
  }
// let scrollNum=0
// if (dom.indexOf('case') === -1){
//   scrollNum=domHeight/2
// }else{
//   dom.indexOf('case-log') === -1 ? (scrollNum = window.innerHeight-214) : (scrollNum = window.innerHeight-80)
// }
//   $(document).scroll(function(){
// console.log(($(`${dom}`).offset().top - $(document).scrollTop()),scrollNum)
//     })
  showChallangeTag(dom, orderList, 0, imgBool)
 $(`${dom} .challange-tags .challange-tag`)
    .mouseenter(function () {
      showChallangeTag(dom, orderList.sort(), $(this).index(), imgBool)
    })

  var stop = true
  function autoplayFlag() {
    if (
      // $(`${dom}`).css('display') !== 'none' &&
      $(`${dom}`).offset().top - $(document).scrollTop() < domHeight / 2 &&
      $(`${dom}`).offset().top - $(document).scrollTop() > -domHeight
    ) {
      if (stop) {
        tagAutoPlay(dom, index, imgBool, orderList, false)
      }
      stop = false
    } else {
      if (!stop) {
        tagAutoPlay(dom, index, imgBool, orderList, true)
      }
      stop = true
    }
  }
  autoplayFlag()
  $(document).scroll(function () {
    autoplayFlag()
  })
}
  var timerList = {}
  var DomNameing=''
//自动播放切换tag +右侧内容
function tagAutoPlay(dom, index, imgBool, orderList, stop) {
 if (DomNameing!== dom) {
  clearInterval(timerList[DomNameing])
    intervalEnd()
 DomNameing = dom
  }
 
  // 自动播放切换tag全局变量 tagIndex
  var tagIndex = 0
  function IntroInterval() {
    if (tagIndex < index - 1 && $(`${dom}`).css('display') !== 'none') {
      tagIndex++
    } else {
      tagIndex = 0
    }
    showChallangeTag(dom, orderList, tagIndex, imgBool)
  }


  function intervalStart() {
    console.log('开始')
    challangeBool=true
    timerList[dom] = setInterval(IntroInterval, 3000)
  }

  function intervalEnd() {
    console.log('结束')
    clearInterval(timerList[dom])
    challangeBool=false
  }
  if (!stop) {
    if (!challangeBool){
intervalStart()
    } 
  } else {
    intervalEnd()
  }
//   //   //鼠标移入tag 结束自动播放
  $(`${dom} .challange-tags .challange-tag`)
    .mouseenter(function () {
      $(this).addClass('challange-tag-active')
      $(this).siblings().removeClass('challange-tag-active')
      intervalEnd()
      $(`${dom} .content-right:eq(${$(this).index()})`).show()
      $(`${dom} .content-right:eq(${$(this).index()})`)
        .siblings()
        .hide()
      if (imgBool) {
        $(`${dom} .img-tag-show:eq(${$(this).index()})`).show()
        $(`${dom} .img-tag-show:eq(${$(this).index()})`)
          .siblings()
          .hide()
      }
    })
    .mouseleave(function () {
     if (!challangeBool) {
       intervalStart()
     } 
    })

//   // //鼠标移入右侧内容 不轮播
  $(`${dom} .content-right`)
    .mouseenter(function () {
      intervalEnd();
        if ($(this).parents('.case-content-df').index()===0&&$(this).find('.qingdao-video-play')){
var casePlay = $(this).find('.qingdao-video-play')
        }else if ($(this).parents('.case-content-df').index()===1&&$(this).find('.guangming-video-play')) {
          var casePlay = $(this).find('.guangming-video-play')
        }
        if (
          $(`${dom}`).parents('#market').length !== 0 &&
          ($(`${dom}`).index() === 0 || $(`${dom}`).index() === 1)
        ) {
          caseVideoPaly(casePlay)
        }
     
    })
    .mouseleave(function () {
      if (!challangeBool) {
        intervalStart()
      } 
    })
}
//case 案例里的视频播放
function caseVideoPaly(casePlay) {
  casePlay.siblings('.product-img-mask')
    .find('.mask-cover')
    .mouseenter(function () {
      $(this).css('opacity', '0')
    })
    .mouseleave(function () {
      $(this).css('opacity', '0.5')
    })
  casePlay
    .mouseenter(function () {
      $(this)
        .siblings('.product-img-mask')
        .find('.mask-cover')
        .css('opacity', '0')
    })
    .mouseleave(function () {
      $(this)
        .siblings('.product-img-mask')
        .find('.mask-cover')
        .css('opacity', '0.5')
    })
    .click(function () {
      if ($(this).attr('class') === 'qingdao-video-play') {
        $(this)
          .siblings('.product-img-mask')
          .find('.mask-cover')
          .css('display', 'none')
        videoplayCase('qingdao-video', '.qingdao-video-play')
      } else if ($(this).attr('class') === 'guangming-video-play') {
        $(this)
          .siblings('.product-img-mask')
          .find('.mask-cover')
          .css('display', 'none')
        videoplayCase('guangming-video', '.guangming-video-play')
      }
    })
}
//视频播放
function videoplayCase(dom, that) {
  let ele = document.getElementById(dom)
  ele.load()
  ele.controls = true //显示控件
  ele.play()
  ele.autoplay = true //加载完毕后自动播放
  $(that).hide()
  //播放时暂停轮播

let playPromise = ele.play()
if (playPromise !== undefined) {
  playPromise
    .then(() => {
      ele.play()
    })
    .catch(() => {})
}

  ele.onplay = function () {
    //播放时其他的播放器关闭
    for (let i = 0; i < document.querySelectorAll('video').length; i++) {
      if (document.querySelectorAll('video')[i] !== ele) {
        document.querySelectorAll('video')[i].pause()
      }
    }
    setTimeout(() => {}, 0)
  }
}

//产品价值 圆圈图片切换
var ValtimerIntro = {}
 // 自动播放切换tag全局变量 tagIndex
var valueIndex=0
//是否正在有定时器进行
var valueTagBool=false
function valueTag(dom, index) {
  if(!valueTagBool){
    valueTagBool=true;
ValtimerIntro[dom] = setInterval(IntroInterval, 3000)
  }
  function IntroInterval() {
    if (valueIndex < index - 1) {
      valueIndex++
    } else {
      valueIndex = 0
    }
    $(`${dom} .value-tag-index .value-tag-name:eq(${valueIndex})`).addClass(
      'value-tag-name-active'
    )
    $(`${dom} .value-tag-index .value-tag-name:eq(${valueIndex})`)
      .siblings()
      .removeClass('value-tag-name-active')
    $(`${dom} .value-content:eq(${valueIndex})`).show()
    $(`${dom} .value-content:eq(${valueIndex})`).siblings().hide()
    valueTagBool=true
  }
   
  $(`${dom} .value-tag-index .value-tag-name`)
    .mouseenter(function () {
      $(this).addClass('value-tag-name-active')
      $(this).siblings().removeClass('value-tag-name-active')
      valueTagBool=false
      clearInterval(ValtimerIntro[dom])
      $(`${dom} .value-content:eq(${$(this).index()})`).show()
      $(`${dom} .value-content:eq(${$(this).index()})`)
        .siblings()
        .hide()
    })
    .mouseleave(function () {
        if (!valueTagBool) {
          valueTagBool = true
          ValtimerIntro[dom] = setInterval(IntroInterval, 3000)
        }
    })
}
//para内嵌循环
function paraForeach(paraItem, templateType) {
  var HtmlPara = ''
  paraItem.forEach((para, i) => {
    var template = ''
    if (templateType === 'subsidiaryBoxTag') {
    //blue-tag
    template = ` <div class="box-tit-tag">${para}</div>`
    }else if (templateType === 'subsidiaryBoxFlex') {
      // subsidiaryBoxFlex
      template = ` <div>
                   <div class="box-flex-tit">${para.tit}</div>
                   <div class="box-flex-p">${para.p}</div>
                 </div>`
    } else if (templateType === 'listicon') {
      //产品线
      if (para.txt) {
        template = `<div class="line-tag">${para.txt}</div>`
      } else if (para.empty) {
        template = `<div class="line-tag-empty"></div>`
      } else {
        template = `<img class="line-icon" src="/static/img/pageimage/${para}" />`
      }
    } else if (templateType === 'apsSubTitle') {
      //APS 二级标题内容
      if (para.first) {
        template = ` <div class="aps-sub-para">${para.first}
                                <div class="aps-sub-p">${para.second}</div>
                            </div>`
      } else {
        template = `<div class="aps-sub-para">
                                <div class="aps-sub-before"><span class="blue-title">${para.beforeBlue}</span>${para.second}<span class="blue-title">${para.blue}</span></div>
                            </div>`
      }
    } else if (templateType === 'apsTabs') {
      //APS tabs
      if (i === 0) {
        template = ` <div class="aps-tab aps-tab-active">
                        <div>${para}</div>
                        <div class="case-icon-active" style="width: 6.25rem;"></div>
                    </div>`
      } else {
        template = ` <div class="aps-tab">
                        <div>${para}</div>
                        <div class="case-icon-active"></div>
                    </div>`
      }
    } else if (templateType === 'introPara') {
      //概览 业务痛点
      template = `<p>${para}</p>`
    } else if (templateType === 'solutionPara') {
      //概览 解决方案
      template = `<p><span class="bold-font">${para.bold}</span>${para.txt}</p>`
    } else if (templateType === 'backSub') {
      //客户案例 业务背景二级圆框
      template = `<div class="case-tag"><span>${para}</span></div>`
    } else if (templateType === 'backContent') {
      //客户案例 业务背景内容para
      if (Object.prototype.toString.call(para) === '[object Object]') {
        template = `
 <p class="challange-tag-title" style="line-height: 1.75rem;width: 32.5rem;margin-bottom:1.25rem">
        <span class="case-fangan-bold">${para.bold}<br/></span>${para.txt}</p>`
      } else
        [
          (template = `<p class="challange-tag-title" style="line-height: 1.75rem;width: 32.5rem;">
        ${para}</p>`),
        ]
    } else if (templateType === 'fanganContent') {
      //客户案例 方案01before para
      if (Object.prototype.toString.call(para) === '[object Object]') {
        //客户案例 方案01before para 加粗title
        template = ` <div class="para-df">
        <img src="/static/img/pageimage/c2m-marketing/before-0${i + 1}.svg">
        <div class="case-fangan-bold">${para.bold}
        <p class="challange-tag-title" style="line-height: 1.75rem;width: 16.25rem;">
            ${para.txt}
        </p>
        </div>
        
    </div>`
      } else {
        template = ` <div class="para-df">
        <img src="/static/img/pageimage/c2m-marketing/before-0${i + 1}.svg">
        <p class="challange-tag-title" style="line-height: 1.75rem;width: 16.25rem;">
            ${para}
        </p>
    </div>`
      }
    } else if (templateType === 'valueContent') {
      //客户案例 value para前小圆圈
      if (Object.prototype.toString.call(para) === '[object Object]') {
        template = `<p class="challange-tag-title" style="width: 47.5rem;">
       <span class="case-value-bold">${para.bold}</span>${para.txt}
    </p>`
      } else {
        template = `<p class="challange-tag-title" style="width: 47.5rem;">
        ${para}
    </p>`
      }
    } else if (templateType === 'valueNum') {
      if (para.beforeTxt) {
        template = `<div class="case-num-p">
            <div class="case-blue-num"><span style="font-size: .875rem;">${para.beforeTxt}</span>${para.num}<span style="font-size: .875rem;">${para.minnum}</span></div>
            <div class="case-num-txt">${para.txt}</div>
        </div>`
      } else {
        template = `<div class="case-num-p">
            <div class="case-blue-num">${para.num}<span style="font-size: .875rem;">${para.minnum}</span></div>
            <div class="case-num-txt">${para.txt}</div>
        </div>`
      }
    }
    HtmlPara = HtmlPara + template
  })
  return HtmlPara
}

//渲染  客户案例 内容 4个tab
function renderCaseSlide(list, boxDom) {
  list.forEach((item) => {
    var HtmljianjieImg = ''

    if (item.jianjieImg.type === 'img') {
      const ImgSingle = ` <img src="/static/img/pageimage/${item.jianjieImg.imgUrl}" />`
      HtmljianjieImg = ImgSingle
    } else {
      const ImgSingle = `
      <div class="product-img-mask">
        <div class="mask-cover"></div>
      </div>

  <div class="${item.jianjieImg.name}-play"></div>
  <video poster="/static/img/pageimage/${item.jianjieImg.imgUrl}" id="${item.jianjieImg.name}">
      <source src="${item.jianjieImg.url}" type="video/mp4">
  </video>`
      HtmljianjieImg = ImgSingle
    }

    const HtmlFont =
      `<div class="case-content-df" style="display:none">
      <div class="case-tags challange-tags">
          <div class="challange-tag challange-tag-active">
              <div class="challange-tag-subtitle">客户简介</div>
          </div>
          <div class="challange-tag">
              <div class="challange-tag-subtitle" id="tag-yewu-subtitle">业务背景</div>
          </div>
          <div class="challange-tag">
              <div class="challange-tag-subtitle">解决方案</div>
          </div>
          <div class="challange-tag">
              <div class="challange-tag-subtitle">客户价值</div>
          </div>
      </div>
      <div class="case-right">
          <div class="jingmao-content content-right">
              <div class="challenge-para">
                  <div class="case-para-title" style="margin-top: 0rem;">${item.jianjieTitle}</div>
                  <p class="challange-tag-title">
                      ${item.jianjieContent}
                  </p>
              </div>` +
      HtmljianjieImg +
      `
          </div>

          <div class="content-right" style="display: none;">
              <img class="jingmao-img" src="/static/img/pageimage/digital_hiam/tongdian.png"
                  style="width: 22.0625rem;height: 22.5rem;" />
              <div class="challenge-para" style="margin-right: 5.625rem;">
                  <div class="left-para">
                      <div class="case-para-title" id="case-yewu-title">业务背景</div>
                      <div class="case-para-h2" id="case-yewu-h2">BUSINESS BACKGROUND</div>` +
      paraForeach(item.backSub, 'backSub') +
      `
                  </div>
                  <div style="margin-top: .9375rem;">` +
      paraForeach(item.backContent, 'backContent') +
      `
                  </div>

              </div>
          </div>

          <div class="content-right" style="display: none;">
              <img class="jingmao-img" src="/static/img/pageimage/digital_hiam/fangan.png"
                  style="width: 14.5rem;height: 22.5rem;" />
              <div class="challenge-para" style="margin-right: 2.8125rem;">
                  <div class="left-para" style="width: 18.125rem;">
                      <div class="case-para-title">解决方案</div>
                      <div class="case-para-h2">SOLUTIONS</div>` +
      paraForeach(item.fanganSub, 'backSub') +
      `
                  </div>
                  <div class="case-fangan">` +
      paraForeach(item.fanganContent, 'fanganContent') +
      ` </div>
              </div>
          </div>
          <div class="content-right" style="display: none;">
              <img class="jingmao-img" src="/static/img/pageimage/digital_hiam/jiazhi.png"
                  style="width: 11.1875rem;height: 19.0625rem;" />
              <div class="challenge-para" style="margin-right: 2.8125rem;">
                  <div class="left-para">
                      <div class="case-para-title" style="margin-top: 0rem;">客户价值</div>
                      <div class="case-para-h2">VALUES</div>` +
      paraForeach(item.valueNum, 'valueNum') +
      `
                  </div>
                  <div>
                      <div class="case-para-sub">
                          ${item.valueTitle}
                      </div>` +
      paraForeach(item.valueContent, 'valueContent') +
      `

                  </div>

              </div>
          </div>
      </div>
  </div>`
    $(HtmlFont).appendTo(boxDom)
  })
}
//tab带左右按钮的swiper
function tabOneKeeperSwiper(swiperName) {
  swiperName.on('slideChangeTransitionStart', function () {
    $(`.aps-tab:eq(${swiperName.activeIndex})`).addClass('aps-tab-active')
    $(`.aps-tab:eq(${swiperName.activeIndex})`)
      .siblings()
      .removeClass('aps-tab-active')
    $(`.aps-tab:eq(${swiperName.activeIndex})`)
      .find('.case-icon-active')
      .css('width', '6.25rem')
    $(`.aps-tab:eq(${swiperName.activeIndex})`)
      .siblings()
      .find('.case-icon-active')
      .css('width', 0)
  })

  $('.aps-tab').mouseenter(function () {
    $(this).addClass('aps-tab-active')
    $(this).siblings().removeClass('aps-tab-active')
    $(this).find('.case-icon-active').css('width', '6.25rem')
    $(this).siblings().find('.case-icon-active').css('width', 0)
    swiperName.slideTo($(this).index())
  })
}
//aps 模块渲染
function renderApsSlide(list, boxDom) {
  const HtmlFont = ` <h1>
                ${list.title}<span class="blue-title">${list.blue}</span>
            </h1>
            <div class="aps-subtitle">${list.subtitle}</div>
            <div class="aps-content card-content animated">
                <div class="aps-tabs">
                    ${paraForeach(list.tabs, 'apsTabs')}
                </div>
                <div class="aps-tab-line"></div>
                <div class="aps-box-content">`

  //渲染Aps 内容 多个不固定数量tab
  var HtmlBox = ''
  list.apsBox.forEach((item, i) => {
    const HtmlAps = `
               ${
                 i === 0
                   ? `<div class="aps-box">`
                   : `<div class="aps-box" style="display: none;">`
               }
                    <div class="aps-home-tip">
                        <div class="aps-home-tip-img">
                            <img src="/static/img/pageimage/${item.iconUrl}">
                        </div>
                        <div class="aps-home-tip-txt">
                            <div><a>${item.title}</a></div>
                           ${
                             item.subtitle1
                               ? `<div class="aps-sub-para-box">
                                <div>${paraForeach(
                                  item.subtitle,
                                  'apsSubTitle'
                                )}</div>
                                <div>${paraForeach(
                                  item.subtitle1,
                                  'apsSubTitle'
                                )}</div>
                                </div>
                                `
                               : paraForeach(item.subtitle, 'apsSubTitle')
                           }
                        </div>
                    </div>
                    <div class="aps-img">
                        <img src="/static/img/pageimage/${item.imgUrl}" />
                    </div>
                </div>`
    HtmlBox = HtmlBox + HtmlAps
  })
  $(
    HtmlFont +
      HtmlBox +
      `</div>
 </div>`
  ).appendTo(boxDom)
}
// //渲染 行业解决方案 内容 4个tab
function renderIndustry(list, boxDom) {
  list.forEach((item) => {
    const HtmlIndustry = `
        <div class="industry-box" style="display:none">
            <img src="/static/img/pageimage/${item.imgUrl}" />
            <div class="industry-box-content">
               ${
                 item.numList.length!==0
                   ? `<div class="industry-title"><span class="industry-title-bold">${item.title}</span>行业解决方案</div>`
                   : `<div class="industry-title"><span class="industry-title-bold">${item.title}</div>`
               } 
                <div class="industry-num-part">
                   ${paraForeach(item.numList, 'valueNum')}
                </div>
                <div class="industry-p">
                    ${item.para}
                </div>
            </div>
        </div>`
    $(HtmlIndustry).appendTo(boxDom)
  })
}
//设置cookie
 function setCookie(name, value, iDay) {
            var oDate = new Date();
            oDate.setDate(oDate.getDate() + iDay);
            document.cookie = name + "=" + value + ";expires=" + oDate;
        }
//获取cookie
function getCookie(name) {
            var arr = document.cookie.split('; '); //用“;”和空格来划分cookie
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split("=");
                if (arr2[0] == name) {
                    return arr2[1];
                }
            }
            return ""; //整个遍历完没找到，就返回空值
        }
//删除cookie
function removeCookie(name) {
            setCookie(name, " 1", -1) //第二个value值随便设个值，第三个值设为-1表示：昨天就过期了，赶紧删除 }
        }