You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
9.2 KiB
305 lines
9.2 KiB
<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>
|