158 lines
4.3 KiB
JavaScript
158 lines
4.3 KiB
JavaScript
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
index: 1,
|
|
mobileShow: false,//移动端显示
|
|
aboutFix: "",
|
|
aboutEventI: 1,
|
|
videoShowFlag: false,
|
|
videoSrc: "/assets/images/about_video1.mp4",
|
|
aboutMapI: 1,
|
|
},
|
|
created() {
|
|
if (screen.width < 768) {//如果是移动端
|
|
this.mobileShow = true;
|
|
}
|
|
const aboutLink = location.href;
|
|
const about = aboutLink.substr(aboutLink.length - 1, 1);
|
|
if (!isNaN(about)) {
|
|
this.index = about;
|
|
} else {
|
|
this.index = 1;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.allSwiper();
|
|
window.addEventListener("scroll", this.aboutFixClass)
|
|
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
|
new WOW().init();
|
|
};
|
|
},
|
|
mixins: [mixins],
|
|
methods: {
|
|
aboutFixClass() {
|
|
if (
|
|
!!document.documentElement.scrollTop &&
|
|
document.documentElement.scrollTop > 200 || document.body.scrollTop > 200
|
|
) {
|
|
this.headerCss = false
|
|
this.aboutFix = "about-fix";
|
|
} else {
|
|
this.aboutFix = "";
|
|
}
|
|
},
|
|
tab(index) {
|
|
this.index = index;
|
|
},
|
|
aboutLinkTo: function () {
|
|
location.href = "/aboutus/contact/"
|
|
},
|
|
allSwiper: function () {
|
|
new Swiper(".about-video-swiper", {
|
|
initialSlide: 0, //初始化时slide的索引
|
|
slidesPerView: "auto",
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
stopOnLastSlide: false
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true
|
|
}
|
|
})
|
|
new Swiper(".about-honor-swiper", {
|
|
loop: true,
|
|
initialSlide: 0, //初始化时slide的索引
|
|
slidesPerView: "auto",
|
|
centeredSlides: true,
|
|
speed: 5000,
|
|
autoplay: {
|
|
delay: 0,
|
|
stopOnLastSlide: false
|
|
},
|
|
})
|
|
new Swiper(".about-logo-swiper-box", {
|
|
initialSlide: 1, //初始化时slide的索引
|
|
slidesPerView: "auto",
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
stopOnLastSlide: false
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true
|
|
}
|
|
})
|
|
},
|
|
videoPlay(i) {
|
|
this.videoSrc = `/assets/images/about_video${i}.mp4`
|
|
if (i === 2) {
|
|
this.videoSrc = `/assets/images/call_honor.mp4`
|
|
}
|
|
this.videoShowFlag = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.aboutVideo.load()
|
|
this.$refs.aboutVideo.play()
|
|
})
|
|
},
|
|
videoClose() {
|
|
this.videoShowFlag = false
|
|
if (this.$refs.aboutVideo.play()) {
|
|
this.$refs.aboutVideo.pause()
|
|
}
|
|
},
|
|
aboutEvent(i) {
|
|
this.aboutEventI = i;
|
|
},
|
|
aboutMap(i) {
|
|
this.aboutMapI = i;
|
|
}
|
|
}
|
|
});
|
|
// if (screen.width > 768) {
|
|
// //创建和初始化地图函数：
|
|
// function initMap() {
|
|
// createMap();//创建地图
|
|
// setMapEvent();//设置地图事件
|
|
// addMapControl();//向地图添加控件
|
|
// addMapOverlay();//向地图添加覆盖物
|
|
// }
|
|
// function createMap() {
|
|
// map = new BMap.Map("map");
|
|
// map.centerAndZoom(new BMap.Point(116.330475, 39.965234), 16);
|
|
// }
|
|
// function setMapEvent() {
|
|
// map.enableScrollWheelZoom();
|
|
// map.enableKeyboard();
|
|
// map.enableDragging();
|
|
// map.enableDoubleClickZoom()
|
|
// }
|
|
// function addClickHandler(target, window) {
|
|
// target.addEventListener("click", function () {
|
|
// target.openInfoWindow(window);
|
|
// });
|
|
// }
|
|
// function addMapOverlay() {
|
|
// var labels = [
|
|
// { position: { lng: 116.330798, lat: 39.965897 }, content: "合力亿捷总部" }
|
|
// ];
|
|
// for (var index = 0; index < labels.length; index++) {
|
|
// var opt = { position: new BMap.Point(labels[index].position.lng, labels[index].position.lat) };
|
|
// var label = new BMap.Label(labels[index].content, opt);
|
|
// map.addOverlay(label);
|
|
// };
|
|
// }
|
|
// //向地图添加控件
|
|
// function addMapControl() {
|
|
// var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
|
|
// scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
|
|
// map.addControl(scaleControl);
|
|
// var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: 1 });
|
|
// map.addControl(navControl);
|
|
// }
|
|
// var map;
|
|
// initMap();
|
|
// }
|