利用swiper，fullPage.js，vue实现全屏纵向滚动，嵌套横向滚动的首页，导航栏滚屏，适应部分手机端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='full-screen' content='true' />
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />
<link rel="stylesheet" href="css/lib/reset.css">
<link rel="stylesheet" href="css/index.css">
<link href="css/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lib/swiper.min.css">
<link rel="stylesheet" href="./css/lib/animate.css">
<link rel="stylesheet" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">
<script src="./js/lib/vue.js"></script>
<script src="./js/lib/flexible.js"></script>
<script src="js/lib/swiper.min.js"></script>
<script src="js/lib/swiper.animate1.0.3.min.js"></script>
<script src="js/lib/jquery.min.js"></script>
<script src="css/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/lib/vue-fullpage.js"></script>
<title>这是一个利用swiper，fullPage.js，vue实现全屏纵向滚动嵌套横向滚动的首页，导航栏滚屏，适应iphone6~iphonex</title>
</head>
<body>
<!--class="container"则自动居中-->
<div id="appAll">
<!-- <div v-if="bodyType" class="loadingBg">-->
<!-- <img src="./imgs/start_bg.png" alt="">-->
<!-- </div>-->
<div id="app">
<full-page :options="options" id="fullpage">
<div class="section section1 onLeave1_content" data-anchor="1">
<!-- 第一屏 -->
<div id="home">
<div class="swiper-container" id="swiper1">
<!-- 轮播 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img
id="itemsImg1"
class="ani"
src="./imgs/index(1).png"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"
style="visibility: visible;">
</div>
<div>
<img
class="ani itemsImg1"
src="./imgs/index(10).png"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="0.3s"
style="visibility: visible;">
</div>
</div>
<div class="swiper-slide">
<div class="homeImg2">
<img class="HomePhoneEndBackground" src="./imgs/HomePhoneEndBackground.png" alt="">
<img
id="itemsImg2"
class="ani"
src="./imgs/index(7).png"
swiper-animate-effect="fadeInLeft"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
style="visibility: visible;"
>
<img
class="ani itemsImg2"
src="./imgs/index(9).png"
swiper-animate-effect="fadeInLeft"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
style="visibility: visible;"
>
<img
id="itemsImg3"
class="ani"
src="./imgs/index(8).png"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="0.1s"
style="visibility: visible;"
>
<img
v-if="callType"
id="itemsImg4"
class="ani"
src="./imgs/call_white.png"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
style="visibility: visible;"
@click="jumpProduct(6)"
>
<img
v-else
id="itemsImg4Change"
class="ani"
src="./imgs/index(3).png"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
style="visibility: visible;"
@click="jumpProduct(6)"
>
<a href="javascript:">
<img
v-if="playType"
class="ani" id="itemsImg5"
src="./imgs/index(4).png"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
style="visibility: visible;"
@click="jumpEG"
>
<img
v-else
class="ani" id="itemsImg5Change"
src="./imgs/play_orange.png"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
style="visibility: visible;"
@click="jumpEG"
>
</a>
</div>
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination" id="swiperPaginationOne"></div>
<div class="indexIcon">
<img src="./imgs/index_Icon.png" @click="jumpProduct(2)">
</div>
<!-- 背景视频 -->
<video src="./imgs/indexbgc.mp4" loop autoplay muted></video>
<video v-if="Number(myId) === 1" src="./imgs/indexbgc.mp4" loop autoplay muted></video>
<!-- 左右按钮 -->
<div>
<img class="swiper-button-next" src="./imgs/index(6).png" alt="">
</div>
<div>
<img class="swiper-button-prev" src="./imgs/index(5).png" alt="">
</div>
</div>
</div>
</div>
<div class="section section2 onLeave2_content" data-anchor="2">
<!-- 第二屏-->
<div id="product" class="product">
<div class="topText">
<h3>
这里可以放置标题文字
</h3>
<span>
这里可以放置标题文字<br>
</span>
</div>
<div class="topText2">
<h3>
这里可以放置标题文字
</h3>
<span>
这里可以放置标题文字
</span>
</div>
<div class="swiper-container" id="swiper2">
<!-- 轮播 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img
src="./imgs/Product_chat_room.png"
class="productImage1"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/cp-gsjh-xgt.png"
class="productImage2"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/Balance_treasure_renderings.png"
class="productImage3"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/Product_second_open.png"
class="productImage4"
>
</div>
</div>
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination" id="swiperPaginationTwo"></div>
<!-- 左右按钮 -->
<div>
<img class="swiper-button-next productLeftButton" src="./imgs/index(6).png" alt="">
</div>
<div>
<img class="swiper-button-prev productRightButton" src="./imgs/index(5).png" alt="">
</div>
<!-- PC端文字底部 -->
<div>
<div id="text_Product" class="bottomTextPcOne"></div>
</div>
<!-- 手机端底部文字 -->
<div>
<div id="productWapText" class="bottomText2"></div>
</div>
</div>
</div>
<div class="section section3 onLeave3_content" data-anchor="3">
<!-- 第三屏 -->
<div id="Characteristic">
<div class="featuredTopText">
<h3>
这里可以放置标题文字
</h3>
<span>
这里可以放置标题文字
</span>
</div>
<!-- 轮播 -->
<div class="swiper-container" id="swiper3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img
src="./imgs/Characteristic(5).png"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/Characteristic(3).png"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/Characteristic(2).png"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/Characteristic(4).png"
>
</div>
</div>
<div class="swiper-slide">
<div>
<img
src="./imgs/Characteristic(1).png"
>
</div>
</div>
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination" id="swiperPaginationThree"></div>
<div class="featuredBottomText">
<!-- PC端底部文字 -->
<div id="featuresText"></div>
<!-- WAP端底部文字 -->
<div id="featuresTextWap"></div>
<div class="featuresBottomTextTwo" @click="jumpProduct(6)">
<b>这里可以放置底部文字</b><br>这里可以放置底部文字
</div>
</div>
</div>
</div>
<div class="section section4 onLeave4_content" data-anchor="4">
<!-- 第四屏 -->
<div id="section4">
<div class="section4_content">
<div class="section4_content-head animated fadeInDown">
<span>这里放置标题文字</span>
<h4>这里放置标题文字</h4>
</div>
<div v-for="val in list" class="contents" @mouseenter="enter(val.id)" @mouseleave="leave(val.id)">
<p class="content_img">
<img :src="val.img">
</p>
<div class="content_text" :class="num === val.id ? 'class1':'class2'">
<p>{{val.title}}</p>
<em></em>
<span>{{ val.content }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="section section5 onLeave5_content" data-anchor="5">
<!-- 第五屏 -->
<div class=" bgFive" >
<div class="fiveMaxBig">
<div class="fiveFirst animated fadeInDown">
<p>这里放置标题文字</p>
<p style="margin:0">这里放置标题文字</p>
</div>
<div class="fiveSecond outer" >
<div class="seccondMax">
<div class="fiveALL" v-for="(item, i) in fiveList" :key="i">
<img :src="item.imgNum" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section6 onLeave6_content" data-anchor="6">
<!-- 第六屏 -->
<div class="bgSix" >
<div class="sixMaxBig">
<div class="SixFirst">
<span>这里放置标题文字</span>
<p>这里放置标题文字</p>
</div>
<div class="SixSecond animated fadeInUp">
<div @click="getSkype">
<img src="./imgs/skpe.png" alt="">
<p>Skype</p>
<p style="margin-top: 15px">earlgamecs</p>
</div>
<div>
<img src="./imgs/QQ.png" alt="">
<p>QQ</p>
<p>97133111 <em>/</em>
<span>97133222</span></p>
</div>
<div @click="getEmail">
<img src="./imgs/email.png">
<p>邮箱</p>
<p>eg66666666 @gmail.com</p>
</div>
</div>
<div class="SixThird">
<span>这里放置版权信息 </span>
<p>版权所有 伪冒必究哦亲</p>
<p>推荐使用谷歌 火狐 IE9以上浏览器哦亲</p>
</div>
</div>
</div>
</div>
</full-page>
<!--头部导航-->
<nav class=" navbar-default navFirst" role="navigation">
<div class="container-fluid containTop disTop">
<div class="navbar-header" >
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#example-navbar-collapse"
@click="openNav = !openNav"
>
<!-- 切换导航 -->
<img
v-if="!openNav && !navColor"
src="./imgs/Fill1.png"
@click="navShow = true"
style="background:local; width: 0.533rem; height: 0.48rem"
>
<img
v-else-if="!openNav && navColor"
src="./imgs/change_nav_blue .png"
@click="navShow = true"
style="background:local; width: 0.533rem; height: 0.48rem"
>
<img
v-else
src="./imgs/Fill2.png"
@click="navShow = false"
style="background:local; width: 20px"
>
</button>
<img
v-if="navColor"
src="./imgs/nav_blue.png"
class="navBlue"
>
<img
v-else
src="./imgs/nav_white.png"
class="navBlue"
>
<span
class="textSpan"
:style="navColor? 'color: #3f86e9' : 'color: #fff'"
>
顶部标题信息
</span>
<img
v-if="!navColor"
src="./imgs/nav_logo_wap.png"
class="navLogoWap"
>
<img
v-else
src="./imgs/wap_logo_blue.png"
class="navLogoWap"
>
</div>
<div v-show="navShow" class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav"
id="menu"
>
<li
v-for="(item,index) in nav"
:key="index"
class="activeNav"
>
<a :href="`#${item.id}`"
@click="navBarLic(index)"
:class="navColor? 'classBlue' : 'classWhite'"
:style="navType === index ? 'color: rgba(14, 77, 155, 0.7)' : ''"
>{{item.name}}</a>
</li>
</ul>
</div>
</div>
</nav>
<!--侧边导航-->
<div class="sideNav">
<div>
<ul >
<li
v-for="(item,i) in nav"
:key="i"
:class="navType === i ? 'pitchNavLeft' : ''"
>
<a :href="`#${item.id}`"
:class="navColor ? 'classA' : 'classB'"
:style="navType === i ? 'color: #347fe8; text-decoration: none' : ''"
@click="navBarLic(i)"
>{{item.name}}</a>
</li>
</ul>
</div>
</div>
<div id="dialog" v-if="coverPicture">
<div class="dialogPng">
<img src="./imgs/dialog.jpg" alt="">
<div class="disClosed">
<img class="closed" src="./imgs/Fill2.png" alt="" @click="closePick">
</div>
</div>
</div>
</div>
</div>
<!---->
</body>
<script src="js/lib/jquery.min.js"></script>
<script src="css/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () {
//第一屏组件
var swiper1 = new Swiper('#swiper1', {
//循环
loop: true,
observer : true,
observeParents : true,
grabCursor: true,
//水平切换
direction: 'horizontal',
//active slide会居中
centeredSlides: true,
//第一个和最后一个Slide 始终贴合边缘
centeredSlidesBounds: true,
loadOnTransitionStart: true,
autoplay: {
delay: 6000,
//用户操作后是否停止自动循环
disableOnInteraction: false,
},
pagination: {
el: '#swiperPaginationOne',
//点击分页器控制显示的图片
clickable: true,
paginationType: 'custom',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function () {
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');
}
}
});
//给分页器添加鼠标移入时间
for (i = 0; i < swiper1.pagination.bullets.length; i++) {
swiper1.pagination.bullets[i].onmouseover = function () {
this.click();
};
}
//第二屏页底部文字
var productText = [
{id:0,name:`内容文字`},
{id:1,name:`内容文字`},
{id:2,name:`内容文字`},
{id:3,name:`内容文字`}
];
var productWapText = [
{id:0,name:`内容文字`},
{id:1,name:`内容文字`},
{id:2,name:`内容文字`},
{id:3,name:`内容文字`}
];
//鼠标放上暂停轮播
swiper1.el.onmouseover = function(){
swiper1.autoplay.stop();
};
swiper1.el.onmouseleave = function(){
swiper1.autoplay.start();
};
//第二屏组件
var swiper2 = new Swiper('#swiper2', {
loop: true,
direction: 'horizontal',
centeredSlides: true,
watchSlidesProgress : true,
setWrapperSize :true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
waitForTransition: true,
},
pagination: {
el: '#swiperPaginationTwo',
paginationType: 'custom',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function () {
swiperAnimate(this);
this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');
},
//回调函数，轮播图过度到下一个时立即执行
slideChangeTransitionStart() {
//PC端底部文字轮播
productText.forEach(i => {
if (i.id === this.realIndex) {
document.getElementById("text_Product").innerHTML = i.name;
}
});
//Wap端底部文字轮播
productWapText.forEach(i => {
if (i.id === this.realIndex) {
document.getElementById("productWapText").innerHTML = i.name;
}
});
//分页器轮播&点击效果
for (let i in this.pagination.bullets) {
swiper2.pagination.bullets[0].className = 'swiper-pagination-bullet smallDots1';
swiper2.pagination.bullets[1].className = 'swiper-pagination-bullet smallDots2';
swiper2.pagination.bullets[2].className = 'swiper-pagination-bullet smallDots3';
swiper2.pagination.bullets[3].className = 'swiper-pagination-bullet smallDots4';
if (this.realIndex === 0) {
swiper2.pagination.bullets[0].classList.replace('smallDots1','smallDots5');
swiper2.pagination.bullets[0].classList.add('swiper-pagination-bullet-active')
} else if (this.realIndex === 1) {
swiper2.pagination.bullets[1].classList.replace('smallDots2','smallDots6');
swiper2.pagination.bullets[1].classList.add('swiper-pagination-bullet-active')
} else if (this.realIndex === 2) {
swiper2.pagination.bullets[2].classList.replace('smallDots3','smallDots7');
swiper2.pagination.bullets[2].classList.add('swiper-pagination-bullet-active')
} else {
swiper2.pagination.bullets[3].classList.replace('smallDots4','smallDots8');
swiper2.pagination.bullets[3].classList.add('swiper-pagination-bullet-active')
}
}
}
}
});
//第二屏的分页器的初始图片
swiper2.pagination.bullets[0].className = 'swiper-pagination-bullet smallDots1';
swiper2.pagination.bullets[1].className = 'swiper-pagination-bullet smallDots2';
swiper2.pagination.bullets[2].className = 'swiper-pagination-bullet smallDots3';
swiper2.pagination.bullets[3].className = 'swiper-pagination-bullet smallDots4';
swiper2.el.onmouseover = function(){
swiper2.autoplay.stop();
};
swiper2.el.onmouseleave = function(){
swiper2.autoplay.start();
};
//第三屏PC端底部文字
var featuresText = [
{
id:0,
name:`这里放置标题文字
内容文字
`
},
{
id:1,
name:`这里放置
内容文字
`
},
{
id:2,
name:`这里放置
内容文字
`
},
{
id:3,
name:`这里放置
内容文字
`
},
{
id:4,
name:`这里放置
内容文字
`
}
];
//第三屏Wap端底部文字
var featuresTextWap = [
{
id:0,
name:`这里放置内容文字内容文字
内容文字
`
},
{
id:1,
name:`这里放置内容文字`
},
{
id:2,
name:`这里放置内容文字`
},
{
id:3,
name:`这里放置内容文字`
},
{
id:4,
name:`这里放置内容文字`
}
];
//第三屏组件
var swiper3 = new Swiper('#swiper3', {
loop: true,
direction: 'horizontal',
centeredSlides: true,
centeredSlidesBounds: true,
watchSlidesProgress : true,
watchSlidesVisibility : true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '#swiperPaginationThree',
paginationType: 'custom',
clickable: true,
renderBullet: function (index, className) {
switch(index){
case 0:
text='内容文字';
break;
case 1:
text='内容文字';
break;
case 2:
text='内容文字';
break;
case 3:
text='内容文字';
break;
case 4:
text='内容文字';
break;
}
return '+ className + '">' + text + '';
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function () {
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');
},
slideChangeTransitionStart () {
featuresText.forEach(k => {
if (k.id === this.realIndex) {
document.getElementById("featuresText").innerHTML = k.name;
}
});
featuresTextWap.forEach(k => {
if (k.id === this.realIndex) {
document.getElementById("featuresTextWap").innerHTML = k.name;
}
})
},
resize: function () {
if (document.getElementById('Characteristic').offsetWidth < 760) {
for (let i in spans) {
spans[i].innerText = '';
}
} else {
for (let i in spans) {
spans[i].innerText = swiperPaginationThreeList[i]
}
}
}
},
});
var pg = document.getElementById('swiperPaginationThree');
var spans = pg.querySelectorAll('span');
var swiperPaginationThreeList = ['第三屏文字信息','第三屏文字信息','第三屏文字信息','第三屏文字信息','第三屏文字信息'];
window.addEventListener('load', () => innerHTML());
function innerHTML() {
if (document.getElementById('Characteristic').offsetWidth < 760) {
for (let i in spans) {
spans[i].innerText = '';
}
} else {
for (let i in spans) {
spans[i].innerText = swiperPaginationThreeList[i]
}
}
}
swiper3.el.onmouseover = function(){
swiper3.autoplay.stop();
};
swiper3.el.onmouseleave = function(){
swiper3.autoplay.start();
};
});
</script>
<script>
new Vue({
el: "#appAll",
data() {
return {
nav: [
{name:"第一屏", id:1 },
{name:"第二屏", id:2 },
{name:"第三屏", id:3 },
{name:"第四屏", id:4 },
{name:"第五屏", id:5 },
{name:"第六屏", id:6 },
],
openNav: false, // logo切换
navColor: false,
navType: 0, //切换状态
navShow: true,
fiveList: [
{imgNum: "./imgs/five1.png"},
{imgNum: "./imgs/five2.png"},
{imgNum: "./imgs/five3.png"},
{imgNum: "./imgs/five4.png"},
{imgNum: "./imgs/five5.png"},
{imgNum: "./imgs/five6.png"}
],
list:[
{id:1,img:"imgs/service1.png",title:"内容文字",content:"内容文字"},
{id:2,img:"imgs/service2.png",title:"内容文字",content:"内容文字"},
{id:3,img:"imgs/service3.png",title:"内容文字",content:"内容文字"},
{id:4,img:"imgs/service4.png",title:"内容文字",content:"内容文字"},
{id:5,img:"imgs/service5.png",title:"内容文字",content:"内容文字"},
{id:6,img:"imgs/service6.png",title:"内容文字",content:"内容文字"}
],
num: 1,
options: {
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
navigation: true,
scrollOverflow: true,
scrollBar: true,
menu: '#menu',
showActiveTooltip: true,
afterLoad: function(link, index) {
switch (index.index) {
case 1:
$(".topText").addClass("animated fadeInDown");
$(".topText2").addClass("animated fadeInDown");
// $(".productImage1").addClass("animated bounceInRight");
break;
case 2:
$(".featuredTopText").addClass("animated fadeInDown");
break;
case 3:
$(".section4_content-head").addClass("animated fadeInDown");
break;
case 4:
$(".fiveFirst").addClass("animated fadeInDown");
break;
case 5:
$(".SixFirst").addClass("animated fadeInDown");
$(".SixSecond").addClass("animated fadeInUp");
break;
}
},
onLeave:function (link,index) {
switch (index.index) {
case 1:
$(".topText").removeClass("animated fadeInDown");
$(".topText2").removeClass("animated fadeInDown");
// $(".productImage1").removeClass("animated bounceInRight");
break;
case 2:
$(".featuredTopText").removeClass("animated fadeInDown");
break;
case 3:
$(".section4_content-head").removeClass("animated fadeInDown");
break;
case 4:
$(".fiveFirst").removeClass("animated fadeInDown");
break;
case 5:
$(".SixFirst").removeClass("animated fadeInDown");
$(".SixSecond").removeClass("animated fadeInUp");
break;
}
}
},
clientHeight: '',
myId: "",
callType: false,
playType: true,
coverPicture: false,
bodyType: true
}
},
watch: {
realIndex(n) {
console.log("xxx", n)
}
},
created() {
let self = this;
self.bodyType = false;
self.coverPicture = true;
self.refresh(self);
},
mounted() {
let self = this;
window.addEventListener('hashchange', () => {
self.myId = window.location.href.split("#")[1];
self.navBarLic(Number(self.myId) - 1);
});
},
methods: {
closePick() {
this.coverPicture = false;
},
getQQ(n) {
if (n === 2) {
window.open("tencent://message/?uin=123456789");
window.location.href="mqqwpa://im/chat?chat_type=crm&uin=123456789&version=1&src_type=web&web_src=http:://wpa.b.qq.com";
} else {
window.open("tencent://message/?uin=123456789");
window.location.href="mqqwpa://im/chat?chat_type=crm&uin=123456789&version=1&src_type=web&web_src=http:://wpa.b.qq.com";
}
},
getSkype() {
window.open("skype:earlgamecs?chat");
},
getEmail() {
window.open("mailto: [email protected]");
},
jumpEG() {
let yy = this;
yy.callType = true;
yy.playType = false;
let newWindow = window.open("https://123456789.com", "width=1000", "height=800");
},
navBarLic(i) {
let self = this;
self.navType = i;
self.navColor = this.navType === 2 || this.navType === 4;
self.navShow = false;
self.openNav = false;
},
enter(i) {
this.num = i;
},
leave(i) {
i = 0;
this.num = i;
},
jumpProduct(n) {
let self = this;
let url = window.location.href;
let num = window.location.href.split("#")[1];
if (url.indexOf("#") === -1) {
if (n === 6) {
window.location.href = `${url}#6`;
self.callType = false;
self.playType = true;
} else {
window.location.href = url + `#${n}`;
}
} else {
if (n === 6) {
self.callType = false;
self.playType = true;
}
window.location.href = `${window.location.href.split("#")[0]}#${n}`;
}
},
refresh() {
if (window.location.href.indexOf("#") === -1) {
this.navType = 0;
} else {
let urlNum = window.location.href.split("#")[1];
this.navBarLic(Number(urlNum) - 1);
}
setTimeout(() => {
document.getElementsByTagName("html")[0].style.overflow = 'hidden';
let height = document.documentElement.clientHeight;
this.clientHeight = String(Number(height) + 20);
}, 200);
},
}
});
</script>
</html>
/*导航*/
body, html {
overflow: hidden !important;
}
#app {
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
font-family: "微软雅黑";
}
#app #home {
width: 100%;
height: 100%;
}
#app #Characteristic {
max-width: 1600px;
height: 100%;
margin: 0 auto;
}
#app #product {
width: 100%;
height: 100%;
}
.onLeave2_content {
background: url("../imgs/Product_background.png") no-repeat;
background-size: 100% 100%;
}
.onLeave3_content {
background: url("../imgs/background(2).png") no-repeat;
background-size: 100%;
}
#app > .navFirst {
background: rgba(57, 129, 228,0.2);
border-radius: 0
}
.loadingBg img{
width: 100%;
height: 100%;
z-index: 100;
}
#dialog {
background: #222222 50% 50% repeat;
opacity: .97;
position: fixed;
width: 100%;
height: 100vh;
padding-top: 90px;
text-align: center;
left: 0;
top: 0;
z-index: 80;
}
.dialogPng {
margin: 200px auto;
width: 580px;
position: relative;
}
.disClosed {
cursor: pointer;
position: absolute;
top: 7px;
right: 25px;
width: 18px;
}
.disClosed img {
width: 20px;
}
#app .navbar {
margin-bottom: 0;
}
#app > .navFirst .textSpan{
color: #fff;
padding: 20px 0 0 8px;
float: right;
font-size: 18px;
}
#app ul li .navA {
color: #fff;
background: none;
}
#app .containTop {
display: flex;
justify-content: center;
height: 74px;
}
#example-navbar-collapse {
padding-left: 230px;
font-size: 20px;
}
#app .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
#app .navbar-default {
border-color: transparent;
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
#app .sideNav {
position: fixed;
top: 270px;
z-index: 88;
}
#app .sideNav li{
padding: 10px 0 10px 35px;
}
#app .sideNav a{
font-size: 12px;
list-style: none;
cursor: pointer;
}
.navbar-default .navbar-nav ul > li > a {
color: #fff;
padding: 28px 27px;
}
#app .activeNav .classBlue {
color: #3f86e9;
}
#app .activeNav .classWhite {
color: #fff;
}
.activeNav a:hover {
transition: all 0.5s;
border-top: 5px solid rgba(14, 77, 155, 0.7);
padding-top: 23px;
color: #0e4d9b;
}
#app .sideNav a:hover{
text-decoration: none;
color: #347fe8;
transition: all 0.3s;
}
#app .activeNav a{
padding: 28px;
}
#app .sideNav .classA {
color: #494949;
}
#app .sideNav .classB {
color: #fff;
}
#fp-nav.fp-right {
display: none;
}
@media only screen and (max-width: 760px) {
.navFirst .navBlue {
display: none;
}
.navLogoWap {
height: 26px;
padding-left: 20px;
}
#app .disTop {
padding-top: 0.3125rem;
}
#app .containTop {
display: block;
height: inherit;
}
#example-navbar-collapse {
padding-left: 0;
font-size: 12px;
text-align: center;
background-color: rgba(0,0,0,0.68);
border-color: transparent;
}
.navbar-header .navbar-toggle {
border: none;
padding: 0;
margin-top: 3px;
}
#app .navbar-default {
height:1.173rem;
}
#app .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color:transparent;
}
.sideNav {
display: none;
}
#app .activeNav a {
padding: 4px;
}
#app .activeNav a:hover {
transition: all 0.5s;
border-top: none;
color: #0e4d9b;
}
.dialogPng {
margin: 90px auto;
width: 80%;
}
.dialogPng img {
width: 90%;
}
.loadingBg img {
width: 100%;
height: 100vh;
}
.bgSix .sixMaxBig .SixSecond {
margin-top: 3.731rem;
}
.bgSix .sixMaxBig {
padding-top: 60px;
}
}
@media only screen and (min-width: 760px) {
.navLogoWap {
display: none;
}
.navbar-header {
padding-top: 16px;
}
}
@media only screen and (max-width: 940px) {
.navFirst .textSpan {
display: none;
}
}
@media only screen and (max-width: 1400px) {
.sixMaxBig .SixSecond {
margin-top: 140px;
}
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.swiper-container {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
/*第一屏*/
.homeImg2 {
width: 100%;
height: 100%;
}
#itemsImg1 {
/*position: absolute;*/
/*top: -14%;*/
/*left: -2%;*/
width: 100%;
}
.itemsImg1 {
display: none;
}
#itemsImg2 {
position: absolute;
left: 13%;
top: 38%;
width: 46%;
height: 20%;
transform: translateY(-50%);
}
.itemsImg2 {
display: none;
}
#itemsImg3 {
position: absolute;
top: 20%;
left: 56%;
height: 80%;
right: 11%;
}
#itemsImg4, #itemsImg4Change {
position: absolute;
top: 60%;
left: 16%;
width: 11%;
}
#itemsImgTwo {
position: absolute;
top: 60%;
left: 16%;
width: 11%;
}
#itemsImg5, #itemsImg5Change {
position: absolute;
top: 60%;
left: 29%;
width: 11%;
}
#itemsImgPlay {
position: absolute;
top: 52%;
left: 32%;
width: 15%;
}
video {
position: absolute;
object-fit: fill;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.productBackGTwo {
display: none;
}
.HomePhoneEndBackground {
display: none;
}
#swiperPaginationOne {
bottom: 110px !important;
text-align: center;
cursor: pointer;
}
#swiperPaginationOne > .swiper-pagination-bullet {
width: 40px;
height: 5px;
border-radius: 8%;
background-color: #ffffff;
margin-left: 24px;
cursor: pointer;
text-align: center;
opacity: 1;
}
#swiperPaginationOne > .swiper-pagination-bullet-active {
background-color: #00ffff !important;
}
.swiper-button-next {
right: 120px !important;
}
.swiper-button-prev {
left: 120px !important;
}
/*第二屏*/
#swiper2 {
max-width: 1600px;
width: 100%;
top: 11%;
margin: 0 auto!important;
}
.topText {
position: absolute;
width: 100%;
top: 130px;
z-index: 1;
text-align: center;
border: none;
padding: 0;
}
.topText2 {
display: none;
}
.topText > h3:nth-child(1) {
font-size: 28px;
color: #ffffff;
margin: 0;
}
.topText > span:nth-child(2) {
display: block;
font-size: 18px;
color: #ffffff;
margin-top: 14px;
margin-bottom: 18px;
}
.topText > span:nth-child(3) {
display: block;
font-size: 16px;
color: #ffffff;
}
.productBackG {
position: absolute;
width: 100%;
height: 100%;
}
.swiper-paginationTwo {
position: absolute;
}
#swiperPaginationTwo {
width: 100%;
position: absolute;
top: 24%;
}
/*左右按钮*/
.productLeftButton, .productRightButton {
top: 65% !important;
}
/*分页器*/
.smallDots1 {
background: url('../imgs/Chat_room_not_selected.png') center !important;
}
.smallDots2 {
background: url('../imgs/Unchecked_master_plan.png') center !important;
}
.smallDots3 {
background: url('../imgs/Unchecked_balance.png') center !important;
}
.smallDots4 {
background: url('../imgs/Unchecked_second_open_plan.png') center !important;
}
.smallDots5 {
background: url('../imgs/Chat_room_selected.png') center !important;
}
.smallDots6 {
background: url('../imgs/Master_plan_selected.png') center !important;
}
.smallDots7 {
background: url('../imgs/Balance_treasure_selection.png') center !important;
}
.smallDots8 {
background: url('../imgs/Second_open_plan_selected.png') center !important;
}
#swiperPaginationTwo > .swiper-pagination-bullet {
width: 100px;
height: 100px;
border-radius: 100%;
margin-left: 106px;
cursor: pointer;
text-align: center;
border: none;
opacity: 1;
}
#swiperPaginationTwo > .swiper-pagination-bullet:nth-child(1) {
margin-left: 0;
}
.bottomTextPcOne {
position: absolute;
width: 100%;
top: 86%;
font-size: 16px;
color: #ffffff;
text-align: center;
border: none;
margin: 0 auto;
padding: 0;
z-index: 1;
}
.bottomText2 {
display: none;
}
/*第三屏*/
.CharacteristicBG {
position: absolute;
}
/*分页器*/
#swiperPaginationThree {
position: absolute;
left: 19%;
top: 28%;
}
#swiperPaginationThree > .swiper-pagination-bullet {
display: block;
width: 169px;
height: 50px;
border-radius: 0;
text-align: center;
line-height: 43px;
font-size: 16px;
font-weight: 600;
border: 3px solid #347fe8;
margin: 45px 0 0 8px;
color: #347fe8;
background-color: #ffffff;
opacity: 1;
}
#swiperPaginationThree > .swiper-pagination-bullet-active {
background-color: #347fe8 !important;
color: #ffffff;
}
.featuredTopText {
position: absolute;
z-index: 1;
top: 10%;
left: 44%;
text-align: center;
}
.featuredTopText > h3 {
color: #3982e5;
font-size: 28px;
}
.featuredTopText > span {
font-size: 18px;
color: #494949;
}
#featuresText {
z-index: 99;
font-size: 18px;
}
#featuresTextWap {
z-index: 99;
display: none;
}
#swiper3 {
max-width: 1600px;
width: 100%;
margin: 0 auto !important;
}
.featuredBottomText {
position: absolute;
bottom: 3px;
left: 42%;
text-align: center;
z-index: 79;
}
.featuredBottomText > span:nth-child(1) {
display: none;
}
.featuredBottomText > span:nth-child(2) {
font-size: 18px;
color: #494949;
}
.featuresBottomTextTwo {
cursor: pointer;
display: inline-block;
width: 326px;
height: 60px;
/*设置渐变色*/
background: linear-gradient(#035fd6, #1c96ee);
/*私有属性将背景色应用到文字上*/
-webkit-background-clip: text;
color: rgba(255, 255, 255, 0.1);
margin-top: 26px;
margin-bottom: 45px;
padding-top: 9px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-image: linear-gradient(#035fd6, #1c96ee) 2 2;
}
.featuresBottomTextTwo:hover {
display: inline-block;
background: linear-gradient(#035fd6, #1c96ee);
color: #ffffff;
margin-bottom: 45px;
}
.featuredBottomTex b:nth-child(1), b:nth-child(2) {
font-weight: 900;
}
.indexIcon {
position: absolute;
bottom: 38px;
left: 50.4%;
transform: translateX(-50%);
z-index: 1;
cursor: pointer;
}
@media only screen and (max-width: 760px) {
/* 手机端第一屏 */
.row {
width: 100%;
height: 100vh;
}
#swiper1 {
background: url("../imgs/indexBgc.png") no-repeat;
background-size: 100% 100%;
}
.swiper-button-next, .swiper-button-prev {
display: none !important;
}
video {
display: none!important;
}
.productBackGTwo {
position: absolute;
width: 100%;
height: 100vh;
}
#itemsImg1 {
display: none;
}
.itemsImg1 {
display: block;
width: 100%;
height: 30vh;
top: 21%;
}
#itemsImg2 {
display: none;
}
.itemsImg2 {
display: block;
position: absolute;
width: 94%;
height: 16vh;
top: 30%;
left: 6%;
}
#itemsImg3 {
display: none;
}
#itemsImg4, #itemsImg4Change, #itemsImgTwo {
position: absolute;
width: 27%;
/*height: 5vh;*/
top: 52%;
left: 19%;
}
#itemsImg5, #itemsImg5Change, #itemsImgPlay {
position: absolute;
width: 27%;
/*height: 5vh;*/
top: 52%;
left: 52%;
}
#swiperPaginationOne > .swiper-pagination-bullet {
border-radius: 0;
margin: 0.133rem;
cursor: pointer;
}
.HomePhoneEndBackground {
position: absolute;
display: block;
width: 98%;
height: 77vh;
top: 11%;
left: 0;
}
/*手机端第二屏*/
.product {
width: 100%;
height: 100vh;
}
/*顶部标题*/
.topText {
display: none;
}
.topText2 {
display: block;
position: absolute;
width: 100%;
margin: 0 auto;
top: 8%;
z-index: 1;
text-align: center;
border: none;
padding: 0;
color: #ffffff;
}
.topText2 > h3 {
font-size: 0.533rem;
margin-top: 1.333rem;
margin-bottom: 0.533rem;
}
.topText2 > span {
font-size: 0.32rem;
}
#swiper2 {
width: 100%!important;
height: 100%;
left: auto;
margin: 0 auto !important;
}
.productImage1, .productImage2, .productImage3, .productImage4 {
width: 100%;
height: 5.2rem;
margin-bottom: 44%;
}
#text_Product {
display: none;
}
.bottomText {
display: none;
}
.bottomText2 {
display: block;
position: absolute;
width: 100%;
bottom: 12%;
z-index: 1;
text-align: center;
border: none;
margin-bottom: 1.333rem;
padding: 0;
color: #ffffff;
}
.bottomText2 > h3 {
font-size: 0.533rem;
margin-bottom: 0.05rem;
}
.bottomText2 > span {
font-size: 0.32rem;
}
/* 分页器 */
.smallDots1, .smallDots2, .smallDots3, .smallDots4, .smallDots5, .smallDots6, .smallDots7, .smallDots8 {
background: #ffffff !important;
width: 0;
height: 0;
}
#swiperPaginationTwo {
top: 88%;
}
#swiperPaginationTwo > .swiper-pagination-bullet-active {
background: #045ad8 !important;
}
#swiperPaginationTwo > .swiper-pagination-bullet {
width: 0.213rem;
height: 0.213rem;
border-radius: 100%;
margin-left: 0.133rem;
text-align: center;
border: none;
opacity: 1;
display: inline-block !important;
}
/*第三屏手机端*/
.featuredTopText {
width: 100%;
margin: 0 auto;
text-align: center;
position: absolute;
top: 1.147rem;
left: 0;
}
.CharacteristicBG {
position: absolute;
width: 100%;
height: 30%;
}
#swiper3 {
width: 100%!important;
height: 106%;
left: auto;
}
#swiper3 .swiper-slide {
height: 82% !important;
}
#Characteristic .swiper-slide img {
width: 100%;
height: 5.413rem;
}
.featuredTopText > h3 {
font-size: 0.533rem;
color: #3982e5;
margin-top: 1.066rem!important;
margin-bottom: 0.533rem;
}
.featuredTopText > span {
font-size: 0.32rem;
color: #333333;
}
#swiperPaginationThree {
width: 100%;
top: 76%;
left: auto;
}
#swiperPaginationThree > .swiper-pagination-bullet {
display: inline-block;
width: 0.213rem;
height: 0.213rem;
border-radius: 100%;
background-color: #dddddd;
border: none;
margin-left: 0.133rem;
margin-top: 17%;
}
.featuredBottomText {
position: absolute;
bottom: 20%;
left: 0;
text-align: center;
z-index: 78;
width: 100%;
height: 60px;
}
#featuresText {
z-index: 99;
display: none;
}
#featuresTextWap {
z-index: 99;
display: block;
}
#featuresTextWap > span {
font-weight: 700;
font-size: 20px;
}
#featuresTextWap > p {
margin: 0.267rem 0 0.267rem 0;
}
#featuresTextWap b {
color: red;
}
.featuredBottomText > span:nth-child(1) {
display: block;
font-size: 0.625rem;
font-weight: 600;
color: #333333;
margin-bottom: 0.267rem;
}
.featuredBottomText > p {
margin-bottom: 2.933rem;
}
.featuresBottomTextTwo {
display: block;
font-size: 0.32rem;
background: linear-gradient(to right, #035fd6, #1c96ee);
color: #ffffff;
width: 5.093rem;
height: 1.093rem;
margin: 14% auto 0.4rem auto;
padding-top: 0.08rem;
border: none;
}
.featuresBottomTextTwo:hover {
margin-top: 14%;
}
}
@media only screen and (max-width: 1300px) {
.topText h3 {
margin: 15px 0 0;
}
.topText > span:nth-child(2) {
margin: 10px 0 7px;
}
}
/*第五屏*/
.bgFive {
background: url('../imgs/background.png') center center no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.fiveFirst {
margin: 100px 0 20px 0;
padding-top: 30px;
}
.fiveFirst p:first-child {
font-size: 28px;
text-align: center;
color: #3982e5;
}
.fiveFirst p:last-child {
font-size: 18px;
text-align: center;
color: #4b4b4b;
letter-spacing: 3px;
}
.fiveSecond {
text-align: center;
max-width: 1600px;
margin: 0 auto;
}
.fiveALL {
display: inline-block;
cursor: pointer;
position: relative;
}
.fiveALL img {
margin: 10px 50px 20px 50px;
box-sizing:border-box;
}
@media only screen and (max-width: 760px) {
#app .fiveFirst {
padding: 0px 0 5px 0;
margin: 50px 0 0 0;
}
.fiveFirst p:first-child{
font-size: 0.533rem;
margin-bottom: 0.25rem;
}
.fiveFirst p:last-child{
font-size: 0.32rem;
}
.fiveSecond {
width: 100%;
padding: 0 10px;
}
.seccondMax .fiveALL img {
width: 96%;
margin: 5px;
}
.fiveALL {
width: 50%;
}
}
@media only screen and (max-width: 1600px) {
.fiveSecond {
max-width: 1200px;
}
.fiveALL img {
margin: 10px 30px 20px 30px;
}
}
/*第六屏*/
.bgSix {
background: url(../imgs/Contact_background.png) center center no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.sixMaxBig {
padding-top: 80px;
}
.sixMaxBig div:last-child {
border-right: none;
}
.SixFirst {
color: #fff;
font-family: "Microsoft YaHei";
text-align: center;
position: relative;
cursor: pointer;
padding-top: 50px;
}
.SixFirst span {
font-size: 28px;
letter-spacing: 2px;
}
.SixFirst p {
font-size: 18px;
letter-spacing: 4px;
}
.SixSecond {
display: flex;
justify-content: center;
margin-top: 140px;
}
.SixSecond div {
height: 212px;
width: 350px;
color: #fff;
border-right: 4px solid #fff;
text-align: center;
padding-top: 10px;
cursor: pointer;
}
.SixSecond > div > p:nth-child(2) {
margin-top: 30px;
font-size: 16px;
font-weight: 600;
}
.SixSecond > div > p:nth-child(3) {
margin: 0;
}
.SixThird {
color: #fff;
height: 60px;
font-size: 14px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
width: 101%;
padding-top: 12px;
}
.SixThird P:nth-child(2) {
display: initial;
}
@media only screen and (max-width: 760px) {
.SixSecond > div:nth-child(2) > p:nth-child(3) {
width: 80px;
margin: 0 auto;
}
.SixFirst {
font-size: 20px;
padding-top: 35px;
}
.SixFirst > span{
font-size: 0.533rem;
}
.SixFirst p{
padding-top: 0.48rem;
font-size: 0.32rem;
}
.SixSecond >div {
border-right: none;
width: 2.799rem;
}
.SixSecond >div >img {
width: 50px;
}
.SixSecond div p {
font-size: 0.32rem !important;
}
.SixSecond p> em {
display: none;
}
.SixThird {
font-size: 0.32rem;
padding-top: 5px;
width: 104%;
}
.SixThird P:nth-child(2) {
display: block;
margin-bottom: 1px;
}
.SixThird P:last-child {
margin-bottom: 1px;
}
}
/*第四屏*/
#section4 {
width: 100%;
height: 100%;
background: url("../imgs/service-logo.png") center center no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.section4_content {
width: 1200px;
margin: 0 auto;
margin-top: 50px;
padding-top: 50px;
}
.section4_content p, div {
padding: 0;
margin: 0;
}
.section4_content-head {
text-align: center;
color: #fff;
padding-top: 30px;
letter-spacing: 3px;
}
.section4_content-head > span {
font-size: 28px;
}
.section4_content-head h4 {
margin-bottom: 30px;
}
.contents {
float: left;
position: relative;
overflow: hidden;
}
.contents p img {
width: 100%;
cursor: pointer;
transition: all 0.6s;
}
.content_text {
font-size: 17px;
color: #fff;
padding-left: 5%;
padding-right: 10%;
cursor: pointer;
}
.content_text p{
height: 50px;
line-height: 50px;
/*padding-left: 5%;*/
font-size: 18px;
}
.content_text em {
width: 35%;
display: block;
border-bottom: 1px solid #fff;
/*margin-left: 5%;*/
}
.content_text span {
line-height: 22px;
padding-top: 6%;
display: inline-block;
}
.class1 {
position: absolute;
bottom: 0;
height: 100%;
color: #fff;
background: #0055d0;
opacity: 0.66;
overflow: hidden;
padding-top: 4%;
transition: all 0.6s;
}
.class2 {
position: absolute;
bottom: 0;
height: 50px;
color: #fff;
background: #0055d0;
overflow: hidden;
opacity: 0.66;
transition: all 0.6s;
}
@media screen and (max-width: 760px){
#section4 {
width: 100%;
margin: 0 auto;
}
.section4_content {
width: 100%;
margin: 0 auto;
padding: 50px 20px 0 20px;
}
.section4_content-head {
font-size: 0.625rem;
}
.section4_content-head > span {
font-size: 0.533rem;
}
.section4_content-head h4{
font-size: 0.32rem;
margin-top: 0.15625rem;
margin-bottom: 0.25rem;
}
.section4_content div:nth-child(2n-1) {
margin-left: 2%;
}
/* .contentInfo div:nth-child(2n) {
margin-left: 10px;
margin-right: 20px;
*float: right;
}*/
/* .contentInfo {
width: 100%;
!*height: 100%;*!
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 0 0.4rem;
}*/
.contents {
float: left;
width: 49%;
position: relative;
margin-bottom: 0.3rem;
}
/* .contents p img {
width: 100%;
!*height: 3.865rem;*!
}*/
.contents p img:hover {
transform: scale(1);
}
.content_text {
font-size: 0.32rem;
}
.content_text p{
height: 25px;
line-height: 28px;
/*padding-left: 5%;*/
font-size: 0.375rem;
}
.content_text em {
width: 55%;
display: block;
border-bottom: 1px solid #fff;
/*margin-left: 5%;*/
}
.content_text span {
line-height: 0.373rem;
padding-top: 5px;
display: inline-block;
}
.class1 {
position: absolute;
bottom: 0;
height: 100%;
color: #fff;
background: #0055d0;
opacity: 0.66;
overflow: hidden;
padding-top: 0;
transition: all 0.6s;
}
.class2 {
position: absolute;
bottom: 0;
height: 25px;
color: #fff;
background: #0055d0;
overflow: hidden;
opacity: 0.66;
transition: all 0.6s;
}
}
自写的一个首页，因为要求是单页面，没有用Vue分布式组件来做，中间包含了swiper，fullPage，animate来制作动画效果和全屏嵌套轮播效果，且做了760PX的媒体查询适应手机端，因为才学习前端不长时间，所以代码粗糙，CSS重复，且命名…很菜=。=，不好滴地方望指点一下，拒绝口吐芬芳。
导航栏可以切换至任意一屏，自带动画效果，鼠标滚轮是一屏一屏切换
第一屏的轮播是多张小图组成一张大图，然后多张大图进行轮播，每一张小图都自带动画效果。
第二屏的轮播底部都可以自动切换文字，分页器是八张不同图片，可根据轮播索引切换分页器的图片
第三屏，第四屏，第五屏，第六屏功能类似
页面是纯前端开发，没有任何数据，所有img标签可替换成自己想要的图片，整个HTML只有一个视频标签，可以替换成自己想要的，且都自适应iphone6 ~ iphonex
代码是一个一个敲的，不懂的地方是请教了很多人，百度了很多地方，互相尊重你我都是大佬，有问题私信，虽然不一定能立刻看见