465 lines
22 KiB
Vue
465 lines
22 KiB
Vue
<template>
|
||
<div class="main">
|
||
<section>
|
||
<div class="acard">
|
||
<div class="container">
|
||
<div class="row acardflex">
|
||
<div class="acard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
|
||
data-animation="slide-in-blurred-left">
|
||
<div class="videocard_title">
|
||
<span> {{ $t('home.who.title') }} </span>
|
||
<h2>{{ $t('home.who.company') }}</h2>
|
||
<p>{{ $t('home.who.desc') }}</p>
|
||
</div>
|
||
<div class="acard_list">
|
||
<ul>
|
||
<li>
|
||
<div class="acardli">
|
||
<i class="iconfont"></i>
|
||
<p>{{ $t('home.who.tech') }}</p>
|
||
<div class="acardlicover"></div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="acardli">
|
||
<i class="iconfont"></i>
|
||
<p>{{ $t('home.who.service') }}</p>
|
||
<div class="acardlicover"></div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="acardli">
|
||
<i class="iconfont"></i>
|
||
<p>{{ $t('home.who.price') }}</p>
|
||
<div class="acardlicover"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="acard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
|
||
data-animation="slide-in-blurred-right">
|
||
<div class="acardimg videoimgbtn videobtns">
|
||
<img src="/img/home/about-2.jpg" alt="about">
|
||
<a href="https://www.youtube.com/watch?v=2qpzCPHUv8g" target="_blank" rel="nofollow">
|
||
<div class="videobbb">
|
||
<div class="videoplay">
|
||
<div class="point2">
|
||
<i class="iconfont"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="bcard">
|
||
<div class="bcardcover"></div>
|
||
<div class="container">
|
||
<div class="bcard_title right">
|
||
<span>{{ $t('home.service.our') }}</span>
|
||
<h2>{{ $t('home.service.pro') }}</h2>
|
||
</div>
|
||
<div class="bcard_list op0 " data-animation="slide-in-blurred-left">
|
||
<div class="row">
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ $t('home.service.items.1.title') }}</h3>
|
||
</a>
|
||
<p>{{ $t('home.service.items.1.desc') }}</p>
|
||
<a href="javascrpit:;" class="bcard_more">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ $t('home.service.items.2.title') }}</h3>
|
||
</a>
|
||
<p>{{ $t('home.service.items.2.desc') }}</p>
|
||
<a href="javascrpit:;" class="bcard_more">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ $t('home.service.items.3.title') }}</h3>
|
||
</a>
|
||
<p>{{ $t('home.service.items.3.desc') }}</p>
|
||
<a href="javascrpit:;" class="bcard_more">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ $t('home.service.items.4.title') }}</h3>
|
||
</a>
|
||
<p>{{ $t('home.service.items.4.desc') }}</p>
|
||
<a href="javascrpit:;" class="bcard_more">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ $t('home.service.items.5.title') }}</h3>
|
||
</a>
|
||
<p>{{ $t('home.service.items.5.desc') }}</p>
|
||
<a href="javascrpit:;" class="bcard_more">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ $t('home.service.items.6.title') }}</h3>
|
||
</a>
|
||
<p>{{ $t('home.service.items.6.desc') }}</p>
|
||
<a href="javascrpit:;" class="bcard_more">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section>
|
||
<div class="number bottom op0" data-animation="slide-in-elliptic-top-fwd">
|
||
<div class="container">
|
||
<div class="number_con">
|
||
<ul>
|
||
<li>
|
||
<i class="iconfont"></i>
|
||
<span class="timer numadd" data-to="125" data-speed="3000">{{ _timer_data[0] }}</span>
|
||
<p>{{ $t('home.statistics.expert') }}</p>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont"></i>
|
||
<span class="timer numadd" data-to="1250" data-speed="3000">{{ _timer_data[1] }}</span>
|
||
<p>{{ $t('home.statistics.project') }}</p>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont"></i>
|
||
<span class="timer numadd" data-to="850" data-speed="3000">{{ _timer_data[2] }}</span>
|
||
<p>{{ $t('home.statistics.satisfied') }}</p>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont"></i>
|
||
<span class="timer numadd" data-to="135" data-speed="3000">{{ _timer_data[3] }}</span>
|
||
<p>{{ $t('home.statistics.award') }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section>
|
||
<div class="videocard">
|
||
<div class="container">
|
||
<div class="row videocardflex">
|
||
<div class="videocard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
|
||
data-animation="slide-in-blurred-left">
|
||
<div class="videoleftmain">
|
||
<div class="videocard_title">
|
||
<span>{{ $t('home.why.title') }}</span>
|
||
<h2>{{ $t('home.why.company') }}</h2>
|
||
<p>{{ $t('home.why.desc') }}</p>
|
||
</div>
|
||
<div class="videocard_list">
|
||
<ul>
|
||
<li>
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ $t('home.why.series.1') }}</p>
|
||
</li>
|
||
<li>
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ $t('home.why.series.2') }}</p>
|
||
</li>
|
||
<li>
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ $t('home.why.series.3') }}</p>
|
||
</li>
|
||
<li>
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ $t('home.why.series.4') }}</p>
|
||
</li>
|
||
<li>
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ $t('home.why.series.5') }}</p>
|
||
</li>
|
||
<li>
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ $t('home.why.series.6') }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="videocard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
|
||
data-animation="slide-in-blurred-right">
|
||
<div class="videocard_right_img">
|
||
<img src="/img/home/img4.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="videomain">
|
||
<div class="videoclose">
|
||
<img src="/img/home/closeBtn.png" alt="">
|
||
</div>
|
||
<div class="videobox">
|
||
<!--<video src="" controls></video>-->
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qpzCPHUv8g?si=AjSckeq0WxEFPzH1"
|
||
title="YouTube video player" frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section>
|
||
<div class="brand colormove" data-animation="slide-in-elliptic-top-fwd">
|
||
<div class="brandcover"></div>
|
||
<div class="brand_txt">
|
||
<h2>{{ $t('home.for.title') }}</h2>
|
||
<p>{{ $t('home.for.desc') }}</p>
|
||
<a href="products/index.html" class="brand_more">{{ $t('home.for.start') }}</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section>
|
||
<div class="allmain">
|
||
<div class="blog_title right op0" data-animation="slide-in-blurred-left">
|
||
<span>{{ $t('home.products.title') }}</span>
|
||
<h2>{{ $t('home.products.desc') }}</h2>
|
||
</div>
|
||
<div class="allmain_list">
|
||
<div class="row allmainflex">
|
||
|
||
<div class="allmain_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in product_data">
|
||
<div class="allmain_box">
|
||
<div class="allmain_cover"></div>
|
||
<a href="javascript:;" class="allmain_txt">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.abstract }}</p>
|
||
</a>
|
||
<a href="javascript:;" class="allmainimg">
|
||
<img :src="item.img" alt="токарно фрезерный станок с чпу завод" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div>
|
||
<img width=100% src="/img/home/38a0b923.png" alt="图片1">
|
||
</div>
|
||
</section>
|
||
<!-- 新闻 -->
|
||
<section>
|
||
<div class="blog">
|
||
<div class="container">
|
||
<div class="blog_title right" data-animation="slide-in-blurred-left">
|
||
<span>{{ $t('home.news.title') }}</span>
|
||
<h2>{{ $t('home.news.desc') }}</h2>
|
||
</div>
|
||
<div class="blog_main">
|
||
<div class="row blogflex">
|
||
|
||
<div class="blog_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="(item, i) in new_data">
|
||
<div class="blog_box">
|
||
<div class="blogtime">
|
||
<span>{{ item.news_issue_date }}</span>
|
||
<p>{{ item.year }}</p>
|
||
</div>
|
||
<a :href='item.url' class="blog_img">
|
||
<img :src="item.img" alt="" />
|
||
</a>
|
||
<div class="blog_txt">
|
||
<a :href='item.url'>
|
||
<h3> {{ item.title }}</h3>
|
||
</a>
|
||
<p>{{ item.news_intro }}
|
||
</p>
|
||
<a :href='item.url' class="blog_more">
|
||
<span>Читать больше</span>
|
||
<i class="iconfont"> </i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
let new_data = ref([{
|
||
year: '2023',
|
||
blogtime: '08-15',
|
||
title: '2014 год',
|
||
abstract: 'Первый фрезерный станок 4 + 4 с живым циклом был успешно разработан и подал з...',
|
||
img: '/img/home/b50504e1.jpg',
|
||
url: "javascript:;"
|
||
|
||
}, {
|
||
year: '2023',
|
||
blogtime: '08-15',
|
||
title: 'В 2009 году',
|
||
abstract: '2014 годПрервав технические барьеры для встроенных Y – осевых фрезерны...',
|
||
img: '/img/home/b50504e1.jpg',
|
||
url: "javascript:;"
|
||
},
|
||
])
|
||
let product_data = ref([
|
||
// {
|
||
// url: '2023',
|
||
// blogtime: '08-15',
|
||
// title: 'токарный с чпу по металлу Производитель',
|
||
// abstract: 'токарно фрезерный станок с чпуТокарно фрезерный станок с ЧПУ – это высокотехнологичное оборудование, котороеиспользуется вметаллообрабатывающей промышленности для выполнения различных видо...',
|
||
// img: '/img/home/W7-8-6D.jpg'
|
||
|
||
// }
|
||
])
|
||
const { t, locale } = useI18n()
|
||
|
||
let timer_data = reactive(['125', '1250', '850', '135'])
|
||
let _timer_data = reactive(['0', '0', '0', '0'])
|
||
let i = ref('1')
|
||
let key = ref(0)
|
||
onMounted(() => {
|
||
|
||
const totalHeight = document.body.scrollHeight;
|
||
|
||
// 监听滚动事件
|
||
window.addEventListener('scroll', function () {
|
||
// 获取当前视窗的高度
|
||
const viewportHeight = window.innerHeight;
|
||
// 获取当前滚动位置
|
||
const scrollPosition = window.scrollY;
|
||
// 设置关键位置（例如页面高度的一半）
|
||
const keyPosition = 1200
|
||
// console.log(scrollPosition);
|
||
// 检查是否滚动到关键位置
|
||
if (scrollPosition >= keyPosition) {
|
||
if (key.value == 0) {
|
||
handleKeyPosition();
|
||
key.value = 1
|
||
}
|
||
}
|
||
});
|
||
|
||
// 处理到达关键位置的函数
|
||
function handleKeyPosition() {
|
||
for (let i = 0; i < _timer_data.length; i++) {
|
||
if (_timer_data[i] != timer_data[i]) {
|
||
_timer_data[i]++;
|
||
setTimeout(() => {
|
||
handleKeyPosition()
|
||
}, 100);
|
||
}
|
||
}
|
||
}
|
||
|
||
})
|
||
|
||
// const getlist = function () {
|
||
// product_data.value = []
|
||
let data = []
|
||
useFetch('/api/product/getProductList', { params: { locale: locale.value } }).then(res => {
|
||
// total.value = JSON.parse(res.data.value).count || 0
|
||
// product_list.value = JSON.parse(res.data.value).data || []
|
||
// console.log(product_list.value[0],'@@@@@');
|
||
JSON.parse(res.data.value).data.forEach(element => {
|
||
element.product_img = element.product_img.split(",")[0];
|
||
data.push(element)
|
||
});
|
||
console.log(data);
|
||
if (data.length <= 6) {
|
||
product_data.value = data
|
||
for (let s = 0; s <= 6 - data.length; s++) {
|
||
// console.log(data[s], '@@')
|
||
product_data.value.push(data[s])
|
||
}
|
||
|
||
} else {
|
||
|
||
product_data.value = data.slice(0, 6)
|
||
}
|
||
})
|
||
// }
|
||
// getlist()
|
||
</script>
|
||
|
||
|
||
<style scoped src="~/assets/css/IndexDetail/index.scss"></style>
|
||
<style scoped src="~/assets/css/IndexDetail/media.scss"></style>
|
||
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
|
||
<style scoped src="~/assets/css/index/font2/iconfont.css"></style> |