hjyd/src/views/Index/components/HardwareSummary/index.vue

<template>
  <div class="wrap">
    <div class="case_picture_list_container" id="hardware_picture_list">
      <div class="empty" v-if="showEmpty"></div>
      <div class="contract_title" id="contract_ani">
        <p class="line"></p>
        <p class="title"><span class="blue_font">软硬件</span>开发</p>
        <!-- <img class="img" :src="Back" alt="back" /> -->
      </div>
      <div class="data_container">
        <div class="text">
          <span class="blue">
            <CountTo
              :start="0"
              :end="15"
              :autoPlay="false"
              :i="start_count_i"
              :duration="duration"
            />
          </span>
          年
        </div>
        <div class="text">
          <span class="blue">
            <CountTo
              :start="0"
              :end="300"
              :autoPlay="false"
              :duration="duration"
              :i="start_count_i"
              suffix="+"
            /> </span
          >客户
        </div>
        <div class="text">
          <span class="blue">
            <CountTo
              :start="0"
              :end="500"
              :autoPlay="false"
              :duration="duration"
              :i="start_count_i"
              suffix="+" /></span
          >项目
        </div>
        <div class="text">
          <span class="blue">
            <CountTo
              :start="0"
              :end="100"
              :autoPlay="false"
              :duration="duration"
              :i="start_count_i"
              suffix="W+" /></span
          >量产
        </div>
      </div>
      <div class="pic_list">
        <div
          class="scroll_container_case mb4"
          id="hard_scroll_container_case_1"
        >
          <ul>
            <li><img class="pic" :src="A1" alt="" /></li>
            <li><img class="pic" :src="A2" alt="" /></li>
            <li><img class="pic" :src="A3" alt="" /></li>
            <li><img class="pic" :src="A4" alt="" /></li>
            <li><img class="pic" :src="A5" alt="" /></li>
            <li><img class="pic" :src="A6" alt="" /></li>
            <li><img class="pic" :src="A7" alt="" /></li>
            <li><img class="pic" :src="A8" alt="" /></li>
          </ul>
        </div>
        <div
          class="scroll_container_case mb4"
          id="hard_scroll_container_case_2"
        >
          <ul>
            <li><img class="pic" :src="A9" alt="" /></li>
            <li><img class="pic" :src="A10" alt="" /></li>
            <li><img class="pic" :src="A11" alt="" /></li>
            <li><img class="pic" :src="A12" alt="" /></li>
            <li><img class="pic" :src="A13" alt="" /></li>
            <li><img class="pic" :src="A14" alt="" /></li>
            <li><img class="pic" :src="A15" alt="" /></li>
            <li><img class="pic" :src="A16" alt="" /></li>
          </ul>
        </div>
        <div class="scroll_container_case" id="hard_scroll_container_case_3">
          <ul>
            <li><img class="pic" :src="A17" alt="" /></li>
            <li><img class="pic" :src="A18" alt="" /></li>
            <li><img class="pic" :src="A19" alt="" /></li>
            <li><img class="pic" :src="A20" alt="" /></li>
            <li><img class="pic" :src="A21" alt="" /></li>
            <li><img class="pic" :src="A22" alt="" /></li>
            <li><img class="pic" :src="A23" alt="" /></li>
            <li><img class="pic" :src="A24" alt="" /></li>
            <li><img class="pic" :src="A25" alt="" /></li>
          </ul>
        </div>
        <p class="zhezhao_right"></p>
        <p class="zhezhao_left"></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Back from '@/assets/img/case/biaotiback.png'
import CountTo from 'cpns/CountTo'
import { ref, onMounted } from 'vue'
import A1 from '@/assets/img/harddetail/01.png'
import A2 from '@/assets/img/harddetail/02.png'
import A3 from '@/assets/img/harddetail/03.png'
import A4 from '@/assets/img/harddetail/04.png'
import A5 from '@/assets/img/harddetail/05.png'
import A6 from '@/assets/img/harddetail/06.png'
import A7 from '@/assets/img/harddetail/07.png'
import A8 from '@/assets/img/harddetail/08.png'
import A9 from '@/assets/img/harddetail/09.png'
import A10 from '@/assets/img/harddetail/10.png'
import A11 from '@/assets/img/harddetail/11.png'
import A12 from '@/assets/img/harddetail/12.png'
import A13 from '@/assets/img/harddetail/13.png'
import A14 from '@/assets/img/harddetail/14.png'
import A15 from '@/assets/img/harddetail/15.png'
import A16 from '@/assets/img/harddetail/16.png'
import A17 from '@/assets/img/harddetail/17.png'
import A18 from '@/assets/img/harddetail/18.png'
import A19 from '@/assets/img/harddetail/19.png'
import A20 from '@/assets/img/harddetail/20.png'
import A21 from '@/assets/img/harddetail/21.png'
import A22 from '@/assets/img/harddetail/22.png'
import A23 from '@/assets/img/harddetail/23.png'
import A24 from '@/assets/img/harddetail/24.png'
import A25 from '@/assets/img/harddetail/25.png'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper'
import { handleScreenAuto } from '@/common/utils'
import { useCountStore } from '@/store'
import { storeToRefs } from 'pinia'
// Import Swiper styles
import 'swiper/css'
const countStore = useCountStore()
const duration = ref(2000)
const { start_count_i } = storeToRefs(countStore)
const handleScroll = (id, speed) => {
  var oDiv = document.getElementById(id)
  var oUl = oDiv.getElementsByTagName('ul')[0]
  var aLi = oUl.getElementsByTagName('li')
  var iSpeed = speed //正左负右
  var timer = null
  //计算ul的宽为所有li的宽的和;
  oUl.innerHTML += oUl.innerHTML + oUl.innerHTML
  oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'
  function Slider() {
    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
      oUl.style.left = 0
    } else if (oUl.offsetLeft > 0) {
      oUl.style.left = -oUl.offsetWidth / 2 + 'px'
    }
    oUl.style.left = oUl.offsetLeft - iSpeed + 'px' //正负为方向
  }
  timer = setInterval(Slider, 30)
}
const modules = ref([Autoplay])
onMounted(() => {
  handleScreenAuto(showEmpty, '#hardware_picture_list')
  window.onresize = handleScreenAuto(showEmpty, '#hardware_picture_list')
  handleScroll('hard_scroll_container_case_1', 2)
  handleScroll('hard_scroll_container_case_2', -2)
  handleScroll('hard_scroll_container_case_3', 2)
})
const showEmpty = ref(false)
</script>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  height: 100vh;
  background: $common_bg;
  position: relative;
  overflow: hidden;
  .case_picture_list_container {
    width: 100%;
    height: 100%;
    // background: $common_bg;
    .empty {
      min-height: 90px;
    }
    .contract_title {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: 'SourceHanSans';
      background-size: 100% 100%;
      padding: 55px 55px 20px 55px;
      box-sizing: border-box;
      position: relative;
      white-space: nowrap;
      transform-style: preserve-3d;
      .line {
        width: 39px;
        height: 5px;
        background: #283fe7;
        border-radius: 3px;
        margin-bottom: 12px;
      }
      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%) translateZ(-1px);
        width: 543px;
        height: 61px;
      }
      .title {
        font-size: 30px;
        font-weight: bold;
        color: #000000;
        margin-bottom: 21px;
        .blue_font {
          color: $theme_color;
        }
      }
      .detail {
        font-size: 18px;
        font-weight: 300;
        font-family: 'SourceHanSansLight';
        color: #646a73;
      }
    }
    .data_container {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font-size: 50px;
      font-family: 'SourceHanSans';
      font-weight: 400;
      color: #000000;
      .text {
        display: flex;
        align-items: center;
        .blue {
          font-size: 65px;
          font-family: 'ZonaPro';
          font-weight: 900;
          color: $theme_color;
          margin-right: 19px;
        }
      }
    }
    .pic_list {
      padding: 46px 75px 75px 75px;
      position: relative;
      .zhezhao_right {
        position: absolute;
        right: 70px;
        bottom: 0px;
        width: 163px;
        height: 100%;
        background: url(../../../../assets/img/case/zhezhao.png) no-repeat;
        background-size: 100% 100%;
      }
      .zhezhao_left {
        position: absolute;
        left: 70px;
        top: 0;
        bottom: 0;
        width: 163px;
        height: 100%;
        transform: rotate(180deg);
        background: url(../../../../assets/img/case/zhezhao.png) no-repeat;
        background-size: 100% 100%;
      }
      .mb4 {
        margin-bottom: 41px;
      }
      .scroll_container_case {
        position: relative;
        overflow: hidden;
        height: 171px;
        ul {
          position: absolute;
          left: 0;
          li {
            padding: 5px;
            list-style: none;
            width: 307px;
            float: left;
            margin: 0 22px;
            .pic {
              width: 307px;
              height: 171px;
            }
          }
        }
      }
    }
  }
}
</style>