|
|
@@ -1,99 +1,12 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <main role="main" class="von-in-main">
|
|
|
- <div class="swiper-container von-in-ban">
|
|
|
- <swiper class="swiper-wrapper" :options="swiperOptionTop">
|
|
|
- <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><a href=""><img src="../assets/img/index_banner02.png" width="100%"></a></swiper-slide>
|
|
|
- </swiper>
|
|
|
- <!-- <div class="swiper-pagination"></div> -->
|
|
|
- </div>
|
|
|
- <div class="von-in">
|
|
|
- <div class="von-in-one">
|
|
|
- <img src="../assets/img/index00.png" width="100%">
|
|
|
- <a href="">以及更多</a>
|
|
|
- <button type="button" class="btn btn-warning">了解更多</button>
|
|
|
- </div>
|
|
|
- <div class="mt-5">
|
|
|
- <img src="../assets/img/index11.png" width="100%">
|
|
|
- </div>
|
|
|
- <div class="swiper-container mt-5 von-in-cpbo">
|
|
|
- <swiper class="swiper-wrapper" :options="swiperOptionBtm">
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- <swiper-slide class="swiper-slide"><img src="../assets/img/index12.png" width="100%"></swiper-slide>
|
|
|
- </swiper>
|
|
|
- <!-- <div class="swiper-button-next"></div>
|
|
|
- <div class="swiper-button-prev"></div> -->
|
|
|
- </div>
|
|
|
- <div class="row mb-3 mt-5 von-in-text d-flex justify-content-between">
|
|
|
- <div class="themed-grid-col">
|
|
|
- <h1 class="yellow">种类与规格齐全</h1>
|
|
|
- <p>提供涵盖金属切削领域所有主要的系列产品，<br> 使客户能够根据自己的生产规格
|
|
|
- <br> 灵活地选择和搭配刀具
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="themed-grid-col mt-6">
|
|
|
- <h4><span></span>刀具种类：高性能标准钻头、高性价比铣刀、可转位刀具</h4>
|
|
|
- <h4><span></span>刀具材料有：高速钢、硬质合金、PCD、CBN</h4>
|
|
|
- <h4><span></span>提供全面的产品清单供客户选择自己所需的刀具</h4>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mt-5">
|
|
|
- <img src="../assets/img/index14.png" width="100%">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
|
|
|
|
|
-export default {
|
|
|
- name: "app",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- swiperOptionTop: {
|
|
|
- spaceBetween: 30,
|
|
|
- centeredSlides: true,
|
|
|
- autoplay: {
|
|
|
- delay: 2500,
|
|
|
- disableOnInteraction: false,
|
|
|
- },
|
|
|
- // pagination: {
|
|
|
- // el: '.swiper-pagination',
|
|
|
- // clickable: true,
|
|
|
- // },
|
|
|
- },
|
|
|
- swiperOptionBtm: {
|
|
|
- slidesPerView: 4,
|
|
|
- spaceBetween: 30,
|
|
|
- slidesPerGroup: 4,
|
|
|
- loop: true,
|
|
|
- loopFillGroupWithBlank: true,
|
|
|
- // navigation: {
|
|
|
- // nextEl: '.swiper-button-next',
|
|
|
- // prevEl: '.swiper-button-prev',
|
|
|
- // },
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- Swiper,
|
|
|
- SwiperSlide
|
|
|
- },
|
|
|
-
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
