<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useCounterStore } from '@/stores/nav'
import { linkNavigateTo } from '~/utils/util'
const AboutUs = ref(null)
let isHover = false
const mainBusiness = ref(null)
const indexBus = ref(1)
const isShow = ref(false)
const carouselArr = ref([
  {
    name: 'carousel1.png',
    tit: '电商转单平台',
    conText:
      ' 聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，通过转单平台连接本地商户，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易服务，实现线上线下无缝对接，助力电商用户和本地商户无缝对接，高效提升商户经营业绩。',
  },
  {
    name: 'carousel2.png',
    tit: '同城配送聚合平台',
    conText:
      ' 提供线上同城配送聚合服务，打通全域电商平台同城物流配送，通过顺丰同城、达达、闪送、美团同城、蜂鸟、UU跑腿、货拉拉等同城配送平台，实现多平台对比，一键操作发单，降低商户配送成本，提高商户配送满意度。',
  },
  {
    name: 'carousel3.png',
    tit: '订单运营管理系统',
    conText:
      ' 多平台电商运营管理聚合软件，包含：多门店管理、门店产品复制、门店产品折扣设置、多平台消息聚合、多门店评价管理、多门店诊断等服务，提高商户运营效率。',
  },
])
const introduction: any = ref(null)
const videoBox: any = ref(null)
onMounted(() => {
  useCounterStore().increment(2)

  let items = document.querySelectorAll('.carousel-3d')

  function layout(ind: number) {
    const offsetStep = 300
    const scaleStep = 0.6
    const opacityStep = 0.5
    for (let i = 0; i < items.length; i++) {
      const item = items[i]

      const dis = Math.abs(i - ind)
      // const sign = i -index>0?1:-1
      const sign = Math.sign(i - ind)
      let xOffset = (i - ind) * offsetStep
      if (i !== ind) {
        xOffset = xOffset + 100 * sign
      }
      const scale = scaleStep ** dis
      // rotateY
      const rotateY = 60 * -sign
      // @ts-ignore
      item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`
      // opacity
      const opacity = opacityStep ** dis
      // @ts-ignore
      item.style.opacity = opacity
      const zIdex = items.length - dis
      // @ts-ignore
      item.style.zIndex = zIdex
    }
  }
  layout(indexBus.value)
  const prev = document.querySelector('.prev')
  const next = document.querySelector('.next')

  // @ts-ignore
  prev.onclick = function () {
    --indexBus.value
    if (indexBus.value < 0) {
      indexBus.value = items.length - 1
    }
    layout(indexBus.value)
  }
  // @ts-ignore
  next.onclick = function () {
    ++indexBus.value
    if (indexBus.value > items.length - 1) {
      indexBus.value = 0
    }
    layout(indexBus.value)
  }
  // setInterval(() => {
  //     // @ts-ignore
  //     if (!isHover && mainBusiness.value.getBoundingClientRect().bottom >= window.innerHeight&&!isShow.value) next.click()
  // }, 2000)
  items.forEach((item, i) => {
    // @ts-ignore
    item.onclick = function () {
      indexBus.value = i
      layout(indexBus.value)
    }
  })

  let scrollI = 0
  // function scrLayout() {
  //     // @ts-ignore
  //     introduction.value.childNodes[0].style.transform = `scale(${1 - scrollI * 0.03})  translateY(${-scrollI * (65 + 200)}px)`
  //     // @ts-ignore
  //     introduction.value.childNodes[1].style.transform = `scale(${1 + scrollI * 0.02})  translateY(${-scrollI * (90 + 20 + 90)}px)`
  //     // @ts-ignore
  //     introduction.value.childNodes[0].style.opacity = 1.5 - scrollI / 5
  //     // @ts-ignore
  //     introduction.value.childNodes[1].style.opacity = scrollI / 5 + 0.2
  // }
  function rightLayout() {
    let newScrI = scrollI - 5

    // @ts-ignore
    let bei = introduction.value.childNodes[1].getBoundingClientRect().width / 10
    // @ts-ignore
    let indexTX = introduction.value.childNodes[1].style.transform.search(' translateX')
    // @ts-ignore
    introduction.value.childNodes[1].style.transform =
      introduction.value.childNodes[1].style.transform + ` translateX(${newScrI * bei}px)`
    // @ts-ignore
    introduction.value.childNodes[1].style.opacity = 1 - newScrI / 5
    let doc = document.querySelector('.container-ab')
    // @ts-ignore
    doc.childNodes[2].style.transform = `translateX(${newScrI * 20}%)`
    // @ts-ignore
    doc.childNodes[3].style.transform = `translateX(${-newScrI * 20}%)`

    if (newScrI == 1) {
      // @ts-ignore
      doc.childNodes[2].style.transform = `translateX(0%)`
      // @ts-ignore
      doc.childNodes[3].style.transform = `translateX(0%)`
    }
  }
  // 192
  let isPreDefault = true,
    i = 0
  // document.body.addEventListener('mousewheel', function (e) {
  //     if (e.target !== introduction.value) isPreDefault = true
  //     // @ts-ignore
  //     introduction.value.childNodes.forEach(item => { if (e.target !== item) isPreDefault = true })
  // })
  // @ts-ignore
  // document.querySelector('.container-ab').addEventListener('mousewheel', function (e) {
  //     // @ts-ignore
  //     if (Math.sign(e.deltaY) == -1)
  //         if (window.scrollY !== 0) {
  //             e.preventDefault()
  //             window.scrollTo({ top: 0, behavior: "smooth" })
  //             return
  //         }
  // })
  // @ts-ignore
  // introduction.value.addEventListener('mousewheel', function (e) {
  //     if (Math.sign(e.deltaY) == -1)
  //         if (window.scrollY !== 0) {
  //             e.preventDefault()
  //             window.scrollTo({ top: 0, behavior: "smooth" })
  //             return
  //         }

  //     isPreDefault = true
  //     if (Math.sign(e.deltaY) == 1) {
  //         scrollI++
  //         if (scrollI <= 5) scrLayout()
  //         // if (scrollI > 5 && scrollI <= 10) rightLayout()

  //         if (scrollI == 8) {
  //             scrollI--
  //             isPreDefault = false
  //             // if (i++ >= 3) isPreDefault = false
  //             // else isPreDefault = true
  //         }
  //     }
  //     if (Math.sign(e.deltaY) == -1) {
  //         if (scrollI !== 0) scrollI--
  //         if (scrollI <= 5) scrLayout()
  //         // if (scrollI > 5 && scrollI <= 10) rightLayout()
  //         if (scrollI == 0) {
  //             // @ts-ignore
  //             scrollI++, videoBox.value.pause()
  //             isPreDefault = false
  //             // if (i++ >= 3) isPreDefault = false
  //             // else isPreDefault = true
  //         }
  //     }
  //     if (isPreDefault) e.preventDefault()
  // })

  // window.addEventListener('click',(e)=>console.log(e.target))

  // top.value = document.querySelector('.AboutUs')?.getBoundingClientRect().top
  // const moduleAll = document.querySelectorAll('.module')

  // window.addEventListener('mousewheel', e => {
  //     e.preventDefault()
  //     // @ts-ignore
  //     diff.value -= e.deltaY / 10
  //     // @ts-ignore
  //     moduleAll.forEach((el, index) => {
  //         if (index >= cont.value+1) {
  //             el.style.transform = `translateY(${diff.value}px)`
  //             console.log(2);

  //         }
  //      })
  //     if (diff.value <= 0) {// 上
  //         if(reset()){
  //             console.log(0);

  //             cont.value++
  //             diff.value=0
  //         }
  //     } else {// 下
  //         if(reset()){
  //             console.log(1);

  //             cont.value++
  //             diff.value=0
  //         }
  //     }
  //     function reset() {
  //         return Math.abs(diff.value + 50) >= window.innerHeight
  //     }
  // }, { passive: false })
})
const goToLinkUrl = async (url: any) => {
  // console.log('/activity/information_info?informationId=1');
  const res = url.split('?')
  const link = res[0]
  const id = res[1].split('=')[1]
  await linkNavigateTo(link, { informationId: id })
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
// const top = ref()
// const diff = ref(0)
// const cont = ref(0)
// document.documentElement.style.setProperty('--wid', '500px')
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { transform } from 'typescript'
// @ts-ignore
function handleHover(bool) {
  isHover = bool
}
// document.body.style.overflowY = 'hidden'

// 滚动
const rollBox = <any>ref(null)
let done = false
onMounted(() => {
  done=false
  let cont = 0
  const left: any = document.querySelector('#first1')?.getBoundingClientRect().left
  function handleRoll() {
    if (document.querySelector('#first2')?.getBoundingClientRect().left as number <= left) {
      rollBox.value.scrollLeft = cont
      cont = 0
    }
    let scale = Number(window.getComputedStyle(document.documentElement).fontSize.slice(0,-2))/192
    if(scale<=4&&scale>=3.9)scale=4
    if(scale<=0.25)scale=0.25    
    rollBox.value.scrollLeft += 1.5 * scale
    cont = rollBox.value.scrollLeft
  }

  let start: any, previousTimeStamp: any
  function runRoll(timestamp: any) {
    if (start === undefined) start = timestamp
    const elapsed = timestamp - start    
    if (previousTimeStamp !== timestamp && !done) handleRoll()
    previousTimeStamp = timestamp
    if (!done) window.requestAnimationFrame(runRoll)
  }
  window.requestAnimationFrame(runRoll)
  rollBox.value.onmouseover = function () {
    done = true
  }
  rollBox.value.onmouseout = function () {
    done = false
    window.requestAnimationFrame(runRoll)
  }
})
onBeforeUnmount(() => done = true)

onMounted(() => {
  try {
    const vdo = videoBox.value
    function play() {
      const ctx = new AudioContext();
      const canAutoPlay = ctx.state === 'running'
      ctx.close()
      if (canAutoPlay) vdo.muted = false
      else vdo.muted = true
    }
    play()
  } catch (error) {
    console.log(error);

  }
})
onMounted(()=>{
  videoBox.value.addEventListener('loadeddata', function() {
        console.log('视频数据已加载完成');
        // 在这里你可以执行其他操作，比如播放视频等。
        videoBox.value.play(); // 例如，视频数据加载完成后自动播放。
    });
})
onBeforeUnmount(()=>videoBox.value.pause())
const config = useRuntimeConfig();
</script>

<template>
  <div class="AboutUs" ref="AboutUs">
    <div class="company-introduction" style="overflow: hidden" ref="introduction">
      <div class="top" style="margin-top: .1563rem">
        <div style="display: flex; flex-direction: column; align-items: center">
          <div>
            <div style="width: 10vw"></div>
            <div class="center" style="width: 60vw">
              <h1 style="text-align: center; font-size: .2083rem">公司介绍</h1>
              <div style="margin: auto; font-size: .0938rem; margin-top: .1042rem">
                <span
                  style="line-height: .1563rem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;花机宝网络科技，是一家为电商平台提供“SaaS”服务的网络科技公司。公司基于技术创新和应用，推动“技术性”降本，发展“互联网+”，通过TCO“全生命周期”在智能时代的深度应用，实现电商行业的“降本增效”、“精益运营”。</span><br />
                <span
                  style="line-height: .1563rem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;花机宝专注于转单交易软件，为线下实体花店、蛋糕店和基于各大电商平台进行销售的商家提供了通道，解决线上商城跨区转单难，线下门店订单少的问题。</span><br />
                <span
                  style="line-height: .1563rem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;花机宝为电商商户提供订单全链路的“SaaS”服务，包括订单管理、同城即时配送管理，打印管理、门店运营等服务。</span><br />
                <span
                  style="line-height: .1563rem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“SaaS”服务的客户群体为国内电商商家，覆盖大型餐饮集团、连锁商户、中小商户等，商户类别覆盖有浪漫鲜花、烘焙蛋糕、龙虾烧烤、甜品饮品、果蔬生鲜、超市百货、小吃夜宵和异国料理等。</span><br />
                <span style="color: #a67d3d"> 一、 电商聚合转单系统:</span><br />
                <span style="line-height: .1563rem">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  聚合美团、饿了么、淘宝、京东、抖店、拼多多、快手、小红书等电商交易平台，通过转单平台连接本地商户，针对鲜花、蛋糕、绿植、气球派对等行业提供转单交易服务，实现线上线下无缝对接，助力电商用户和本地商户无缝对接，高效提升商户经营业绩。
                </span><br />
                <span style="display: flex;justify-content: center;">
                  <el-image style="width: 6.6094rem;" src="/images/tit1.png"></el-image> </span><br />
                <span style="color: #a67d3d"> 二、 同城配送聚合系统</span><br />
                <span style="line-height: .1563rem">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  提供线上同城配送聚合服务，打通全域电商平台同城物流配送，通过顺丰同城、达达、闪送、美团同城、蜂鸟、UU跑腿、货拉拉等同城配送平台，实现多平台对比，一键操作发单，降低商户配送成本，提高商户配送满意度。
                </span><br />
                <span style="display: flex;justify-content: center;">
                  <el-image style="width: 6.6094rem;" src="/images/tit2.png"></el-image> </span><br />
                <span style="color: #a67d3d">三、 电商运营管理系统</span><br />
                <span style="line-height: .1563rem">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  多平台电商运营管理聚合软件，包含：多门店管理、门店产品复制、门店产品折扣设置、多平台消息聚合、多门店评价管理、多门店诊断等服务，提高商户运营效率。 </span><br />
                <span style="display: flex;justify-content: center;">
                  <el-image style="width: 6.6094rem;" src="/images/tit3.png"></el-image> </span><br />
                <div class="right" style="width: 60vw">
                  <h1 style="text-align: center; font-size: .2083rem">公司企业文化</h1>
                  <span style="display: flex;justify-content: center;">
                    <el-image style="width: 6.6094rem;" src="/images/tit4_.png"></el-image> </span>
                  <!-- <div style="display: flex; justify-content: center">
                    <div style="margin: auto; font-size: 13px">
                      <span style="line-height: 30px"><span
                          style="font-size: 16px; color: #a67d3d">使命</span>:助力每一位中国人轻松实现电商梦想<br /></span>
                      <span style="line-height: 30px"><span
                          style="font-size: 16px; color: #a67d3d">愿景</span>:为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的<br /></span>
                      <span style="line-height: 30px"><span
                          style="font-size: 16px; color: #a67d3d">机会</span>:核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br /></span>
                      <span style="line-height: 30px"><span
                          style="font-size: 16px; color: #a67d3d">战略目标</span>:<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br /></span>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="line-height: 30px"><span
                          style="font-size: 16px; color: #4a766e">1、</span>以科技进步、应用于技术创新为电商行业带来真正快乐。<br /></span>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="line-height: 30px"><span
                          style="font-size: 16px; color: #4a766e">2、</span>把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br /></span>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="line-height: 30px"><span
                          style="font-size: 16px; color: #4a766e">3、</span>以产品带动服务，以服务开拓市场，有选择的发展新业务。<br /></span>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="width: 4.651rem; height: 2.625rem; margin: auto; position: relative; top: 15%; margin-top: .2604rem">
        <video ref="videoBox" preload="auto" :src="`${config.public.apiAdminUrl}/huajibao.mp4`" controls muted autoplay loop />
        <!-- https://apia.huajibao.cn/hjbimage/huajibao.mp4 -->
      </div>
    </div>

    <div class="module certificateOrPlaque" style="margin: .2604rem 0">
      <div class="header" style="text-align: center">
        <h1>获得的荣誉</h1>
      </div>
      <div ref="rollBox" style="
          height: 2.3438rem;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          width: 80%;
          margin: .2604rem auto 0;
          overflow: hidden;
        ">
        <div id="first1" style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信供应商等级证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信经营示范单位.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信企业家.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信职业经理人证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业1.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业2.jpg" alt="" />
        </div>
        <!-- <div
                    style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;">
                    <img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝互联网行业.jpg"
                        alt="">
                </div>
                <div
                    style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;">
                    <img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝品牌荣誉证书.jpg"
                        alt="">
                </div> -->
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/立信单位证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/企业信用等级证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%"
            src="/images/公司证书+牌匾/四川花机宝网络科技有限公司_双3550-通用证书_效果图.png" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/行业诚信单位证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌1.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌2.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/质量、服务诚信单位.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/重合同守信用企业.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/资信等级证书.jpg" alt="" />
        </div>
        <!--  -->
        <div id="first2" style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信供应商等级证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信经营示范单位.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信企业家.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/诚信职业经理人证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业1.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/互联网行业2.jpg" alt="" />
        </div>
        <!-- <div
                    style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;">
                    <img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝互联网行业.jpg"
                        alt="">
                </div>
                <div
                    style=" margin: auto 10pX; width: calc((1799/2542)*740px);height: 200px;">
                    <img style="margin: auto; max-width: 100%;max-height: 100%;" src="/images/公司证书+牌匾/花机宝品牌荣誉证书.jpg"
                        alt="">
                </div> -->
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/立信单位证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/企业信用等级证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%"
            src="/images/公司证书+牌匾/四川花机宝网络科技有限公司_双3550-通用证书_效果图.png" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/行业诚信单位证书.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌1.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 1.0417rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/引领品牌2.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/质量、服务诚信单位.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/重合同守信用企业.jpg" alt="" />
        </div>
        <div style="margin: auto .0521rem; width: calc((1799 / 2542) * 2.0833rem); height: 2.0833rem">
          <img style="margin: auto; max-width: 100%; max-height: 100%" src="/images/公司证书+牌匾/资信等级证书.jpg" alt="" />
        </div>
      </div>
      <!-- <div class="cRP_center" style="margin-top: 50px;">
                    <div>
                        <el-carousel :interval="4000" type="card" height="300px" style="margin: auto;width: 80%;">
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/互联网行业1.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/互联网行业1.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/互联网行业1.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/互联网行业1.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/诚信供应商等级证书.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/诚信经营示范单位.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/诚信职业经理人证书.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/互联网行业1.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/互联网行业2.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/花机宝品牌荣誉证书.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/立信单位证书.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/企业信用等级证书.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/四川花机宝网络科技有限公司_双3550-通用证书_效果图.png" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/行业诚信单位证书.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/引领品牌1.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/引领品牌2.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/质量、服务诚信单位.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/重合同守信用企业.jpg" alt="">
                            </el-carousel-item>
                            <el-carousel-item style="display: flex;background-color: rgba(0, 0, 0, 0);">
                                <img style="margin: auto; max-width: 100%;max-height: 100%;"
                                    src="/images/公司证书+牌匾/资信等级证书.jpg" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div> -->
    </div>

    <div class="container-ab" style="display: none">
      <div class="module main-business" ref="mainBusiness" style="display: none">
        <h1 style="text-align: center; font-size: .2083rem; width: 100vw">主营业务</h1>
        <el-card :style="{ width: '30%', height: '50%', transform: 'translateY(-15%)' }" style="z-index: 10">
          <template #header>
            <div class="card-header">
              <h1 style="text-align: center; font-size: .2083rem">{{ carouselArr[indexBus].tit }}</h1>
            </div>
          </template>
          <p class="text item">{{ carouselArr[indexBus].conText }}</p>
        </el-card>

        <div style="
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            transform: translateY(-15%);
          ">
          <div style="width: 3.125rem; position: relative; display: flex; align-items: center">
            <div class="prev" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)">
              <el-icon style="margin: auto">
                <ArrowLeft />
              </el-icon>
            </div>
            <div class="next" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)">
              <el-icon style="margin: auto">
                <ArrowRight />
              </el-icon>
            </div>
            <div class="module-child carousel-3d" v-for="(item, index) in carouselArr" :key="index"
              @mouseenter="handleHover(true)" @mouseleave="handleHover(false)">
              <el-image v-if="indexBus == index" hide-on-click-modal @show="isShow = true" @close="isShow = false"
                class="img-box" :src="`/images/${item.name}`" :preview-teleported="true" alt=""
                :preview-src-list="[`/images/${item.name}`]" />
              <el-image v-else class="img-box" hide-on-click-modal @show="isShow = true" @close="isShow = false"
                :src="`/images/${item.name}`" :preview-teleported="true" alt="" />
              <div class="con-text"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="module enterprise-culture" style="display: flex; display: none">
        <div style="font-size: .3125rem; margin: auto">企业文化</div>
      </div>
      <div class="module corporation-charter" style="display: flex; display: none">
        <div style="font-size: .3125rem; margin: auto">公司证书</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 1.5625rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

::v-deep .flex-left-card .el-card__header {
  padding-top: 0;
  padding-bottom: 0;
}

.AboutUs {
  .container-ab {
    width: 100vw;
    height: 100vh;
    // scroll-snap-type: y mandatory;
    // overflow-y: scroll;
    overflow-x: hidden;
    position: relative;

    .module {
      width: 100%;
      height: 100vh;
      scroll-snap-align: start;
      background: url(/images/Group9849.png) no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border-bottom: .0052rem solid;
      // position: relative;
    }

    .certificateOrPlaque {
      width: 100vw;
      display: flex;
      flex-direction: column;

      .header {
        height: 20%;
        display: flex;
        align-items: center;

        h1 {
          text-align: center;
          font-size: .2083rem;
          width: 100vw;
        }
      }

      .cRP_center {
        transform: translateY(-0.7813rem);
        height: 80%;
        // background-color: rgb(37, 43, 58, 0.2);
        display: flex;
      }

      .cRP_center>div {
        display: flex;
        width: 80%;
        height: 60%;
        margin: auto;
        // background-color: rgb(255, 192, 203, 0.2);
      }
    }

    .main-business {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .prev,
      .next {
        transition: 0.5s;
        font-size: .1302rem;
        width: .2604rem;
        height: .2604rem;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        position: absolute;
        z-index: 6;
        cursor: pointer;
      }

      .prev {
        left: -1.0417rem;
      }

      .next {
        right: -1.0417rem;
      }

      .prev:hover,
      .next:hover {
        color: #fff;
      }

      .module-child {
        width: 3.125rem;
        height: calc(3.125rem / (1332 / 579));
        position: absolute;
        transition: 0.5s;

        .img-box {
          width: 100%;
          height: 100%;
          background-image: url('../../assets/images/cool-background.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }

        .con-text {
          width: 1.0417rem;
          position: absolute;
          right: .0521rem;
          top: 50%;
          transform: translateY(-50%);
          color: rgb(26, 23, 23);
        }
      }

      .module-child:hover {
        translate: 0 -0.0104rem;
        box-shadow: 0rem .026rem .0781rem rgba(0, 0, 0, 0.3);
      }
    }

    .company-introduction>* {
      transition: 0.3s;
    }

    .enterprise-culture,
    .corporation-charter {
      position: absolute;
      top: 0;
      width: 50.06vw;
      top: 100%;
      transition: 0.3s;
      pointer-events: none;
      background-color: #252b3a;
    }

    .enterprise-culture {
      left: -51%;
    }

    .corporation-charter {
      right: -51%;
      background-color: aqua;
    }
  }
}

.concerning-box {
  width: 100%;
  background-color: #fff;
  padding-top: 0.2604rem;

  .concerning {
    width: 6.9427rem;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    margin: 0 auto;

    .title {
      font-size: 0.1667rem;
      color: #252b3a;
      font-weight: 600;
      padding: 0.0521rem 0;
    }

    .title-one {
      color: #575d6c;
      font-size: 0.0833rem;
      margin: .026rem 0;
    }

    .bjc-round {
      width: 100%;
      height: 3.8854rem;
      // background-color: #ecf0fd;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.1563rem;

      .round {
        width: 6.9427rem;
        height: 6.9427rem;
        border-radius: 50%;
        background-color: #ecf0fd;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0.4167rem;

        .left {
          flex: 1;
          height: 3.6458rem;
          display: flex;
          flex-direction: column;
          align-items: center;

          .title {
            color: #252b3a;
            font-size: 0.1354rem;
            margin-top: 0.5729rem;
          }

          .title::after {
            content: 'SQLUTION';
            display: block;
            color: #575d6c;
            font-size: 0.0729rem;
            margin-top: 0.026rem;
            margin-bottom: 0.4688rem;
          }

          p {
            width: 1.6094rem;
            color: #575d6c;
            font-size: 0.0729rem;
            margin: 0.0521rem 0;

            span {
              color: #252b3a;
              font-weight: 600;
            }
          }
        }
      }

      .right {
        width: 3.6458rem;
        height: 3.6458rem;

        img {
          width: 100%;
        }
      }
    }
  }
}

.information-box {
  padding-top: 0.4167rem;
  width: 100%;
  background-color: #fff;
  padding-bottom: 0.9375rem;

  .information {
    width: 6.25rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      color: #252b3a;
      font-size: 0.1667rem;
      font-weight: 600;
    }

    .title-one {
      color: #575d6c;
      font-size: 0.0833rem;
      margin-top: 0.0781rem;
    }

    .footet-content {
      width: 100%;
      height: 2.6771rem;
      display: flex;
      margin-top: 0.3906rem;

      .right {
        width: 2.0625rem;
        height: 100%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          transition: 0.3s;
        }
      }

      .right:hover {
        img {
          transform: scale(1.1);
        }
      }

      .left {
        flex: 1;
        margin-right: 0.1042rem;

        .top {
          width: 100%;
          height: 50%;
          display: flex;

          .left-top-bgc {
            width: 50%;
            height: 100%;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              transition: 0.3s;
            }
          }

          .left-top-bgc:hover {
            img {
              transform: scale(1.1);
            }
          }

          .left-top-txt {
            width: 50%;
            height: 100%;
            border: .0052rem dotted #aaa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: left;
            padding: 0.3177rem 0.1563rem 0.3542rem 0.2604rem;

            .title {
              width: 1.7031rem;
              color: #252b3a;
              font-size: 0.0833rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            p {
              margin-top: 0.1563rem;
              width: 1.7031rem;
              font-size: 0.0729rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .bottom {
          width: 100%;
          height: 50%;
          width: 100%;
          height: 50%;
          display: flex;

          .left-top-bgc {
            width: 50%;
            height: 100%;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              transition: 0.3s;
            }
          }

          .left-top-bgc:hover {
            img {
              transform: scale(1.1);
            }
          }

          .left-top-txt {
            width: 50%;
            height: 100%;
            border: .0052rem dotted #aaa;
            // border-style: dashed 4px 8px 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: left;
            padding: 0.3177rem 0.1563rem 0.3542rem 0.2604rem;
            order: -1;

            .title {
              width: 1.7031rem;
              color: #252b3a;
              font-size: 0.0833rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            p {
              margin-top: 0.1563rem;
              width: 1.7031rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 0.0729rem;
            }
          }
        }
      }
    }
  }
}
</style>

<!-- <div class="concerning-box">
            <div class="concerning">
                <div class="title">关于我们</div>
                <div class="title-one">
                    花机宝网络科技，是一家为电商平台提供“SaaS”的网络科技公司。公司基于技术创新和应用，推动“技术性”降本
                </div>
                <div class="title-one">
                    发展“互联网+”，通过TCO“全生命周期”在智能时代的深度应用，实现电商行业的“降本增效”、“精益运营”。
                </div>
                <div class="bjc-round">
                    <div class="round">
                        <div class="left">
                            <div class="title">花机宝网络科技主要经营：</div>
                            <p><span>使命：</span>助力每一位中国人轻松实现电商梦想</p>
                            <p><span>愿景：</span>为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的机会</p>
                            <p><span>核心价值观： </span>源于创新、诚信经营、成就伙伴、合作共赢</p>
                            <p>
                                <span>战略目标：</span><br />
                                1、以科技进步、应用于技术创新为电商行业带来真正快乐。<br />
                                2、把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br />
                                3、以产品带动服务，以服务开拓市场，有选择的发展新业务。
                            </p>
                        </div>
                        <div class="right"><img src="../../assets/images/Group9855.png" alt="" /></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="information-box">
            <div class="information">
                <div class="title">行业动态 产业资讯</div>
                <div class="title-one">汇集主流媒体报道、行业大咖采访、花店经营攻略等鲜花行业一手资讯</div>
                <div class="footet-content">
                    <div class="left">
                        <div class="top">
                            <div class="left-top-bgc"><img src="../../assets/images/image63.png" alt="" /></div>
                            <div class="left-top-txt">
                                <div class="title">这家藏在西安老巷的“不正经”花店，到。。。大大大大大大。。</div>
                                <p>直到上世纪80年代中期，中国才开始出现真正意义上的花店。而随着后来新型营销方式突起、高端花卉品牌…</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="left-top-bgc"><img src="../../assets/images/image63.png" alt="" /></div>
                            <div class="left-top-txt">
                                <div class="title">鲜花行业大数据：阳过之后。圣诞无人买...</div>
                                <p>【中国经济新闻】“没有通宵加班”“花做好了送不出去”“备了很多花却没有订单”…今年圣诞节鲜花...</p>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <img src="../../assets/images/image63.png" alt="" />
                    </div>
                </div>
            </div>
        </div> -->

<!-- <div class="module main-business" ref="mainBusiness">
            <h1 style="text-align: center; font-size: 40px;width: 100vw;">主营业务</h1>
            <el-card :style="{ width: '30%', height: '50%', transform: 'translateY(-15%)' }" style="z-index: 10;">
                <template #header>
                    <div class="card-header">
                        <h1 style="text-align: center;font-size: 40px;">{{ carouselArr[indexBus].tit }}</h1>
                    </div>
                </template>
                <p class="text item">{{ carouselArr[indexBus].conText }}</p>
            </el-card>

            <div
                style="display: flex;height: 100vh;align-items: center;justify-content: center;flex-grow: 1;transform:translateY(-15%)">
                <div style="width: 600px;position: relative;display: flex;align-items: center;">
                    <div class="prev" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)">
                        <el-icon style="margin: auto;">
                            <ArrowLeft />
                        </el-icon>
                    </div>
                    <div class="next" @mouseenter="handleHover(true)" @mouseleave="handleHover(false)">
                        <el-icon style="margin: auto;">
                            <ArrowRight />
                        </el-icon>
                    </div>
                    <div class="module-child carousel-3d" v-for="(item, index) in carouselArr" :key="index"
                        @mouseenter="handleHover(true)" @mouseleave="handleHover(false)">

                        <el-image v-if="indexBus == index" hide-on-click-modal @show="isShow = true"
                            @close="isShow = false" class="img-box" :src="`/images/${item.name}`"
                            :preview-teleported="true" alt=""
                            :preview-src-list="[`/images/${item.name}`]" />
                        <el-image v-else class="img-box" hide-on-click-modal @show="isShow = true"
                            @close="isShow = false" :src="`/images/${item.name}`"
                            :preview-teleported="true" alt="" />
                        <div class="con-text">
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

<!--                             <div style="width: 10vw;"></div>
                            <div class="left" style="width: 60vw;">
                                <h1 style="text-align: center; font-size: 40px;">主营业务</h1>
                                <div style="margin: auto;font-size: 13px;">
                                    <span v-for="item in carouselArr" style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #A67D3D;">{{
                                                item.tit }}</span>:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.conText
                                        }}<br></span>
                                </div>
                            </div>
                            <div class="right" style="width: 60vw;">
                                <h1 style="text-align: center; font-size: 40px;">企业文化</h1>
                                <div style="margin: auto;font-size: 13px;">
                                    <span style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #A67D3D;">使命</span>:助力每一位中国人轻松实现电商梦想<br></span>
                                    <span style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #A67D3D;">愿景</span>:为股东、顾客、员工，乃至商业伙伴提供创造和实现美好梦想的<br></span>
                                    <span style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #A67D3D;">机会</span>:核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br></span>
                                    <span style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #A67D3D;">战略目标</span>:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;核心价值观：勇于创新、诚信经营、成就伙伴、合作共赢<br></span>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #4A766E;">1、</span>以科技进步、应用于技术创新为电商行业带来真正快乐。<br></span>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="line-height: 30px;"><span
                                            style="font-size: 16px;color: #4A766E;">2、</span>把握并创造客户需求，实施中关注客户的体验，并不断持续改善。<br></span>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="line-height: 30px;"><span
                                            style="font-size: 20px;color: #4A766E;">3、</span>以产品带动服务，以服务开拓市场，有选择的发展新业务。<br></span>
                                </div>
                            </div> -->
