first
commit
b8b3f190be
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,122 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播样式 */
|
||||||
|
.banner-swiper {
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-swiper .swiper-slide {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分页器 */
|
||||||
|
.banner-swiper .swiper-container-horizontal>.swiper-pagination-bullets,
|
||||||
|
.banner-swiper .swiper-pagination-custom,
|
||||||
|
.banner-swiper .swiper-pagination-fraction {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff !important;
|
||||||
|
bottom: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 指示点默认样式 */
|
||||||
|
.banner-swiper .swiper-pagination-bullet {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
background-color: #d5ddf5;
|
||||||
|
margin: 0 6px !important;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
|
||||||
|
background-color: #f6ab00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容 */
|
||||||
|
.content img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.foot{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.foot img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.back{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
text-decoration: none;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 16.5%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.back>span{
|
||||||
|
display: block;
|
||||||
|
font-family: "仿宋";
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 38px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #cd322e;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
.back>ins{
|
||||||
|
display: block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #cd322e;
|
||||||
|
}
|
||||||
|
@media screen and (max-width:900px){
|
||||||
|
.back>span{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.back>ins{
|
||||||
|
display: block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #cd322e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:780px){
|
||||||
|
.back>span{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.back>ins{
|
||||||
|
display: block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #cd322e;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 651 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
|
|
@ -0,0 +1,61 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-cmn-Hans">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="description" content="北京宇音天下科技有限公司" />
|
||||||
|
<meta name="keywords" content="北京宇音天下科技有限公司" />
|
||||||
|
<meta name="applicable-device" content="pc,mobile" />
|
||||||
|
<meta name="MobileOptimized" content="width" />
|
||||||
|
<meta name="HandheldFriendly" content="true" />
|
||||||
|
<meta name="robots" content="noarchive"/>
|
||||||
|
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
|
||||||
|
<meta name="theme-color" content="#1a73e9">
|
||||||
|
<meta name="google" value="notranslate">
|
||||||
|
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
|
||||||
|
<title>丰谷酒业</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/swiper.min.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/animate.min.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
|
||||||
|
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="./js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="./js/javascript.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<div class="banner-swiper swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/banner01.jpg" width="100%" height="100%" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/banner01.jpg" width="100%" height="100%" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="imgs/banner01.jpg" width="100%" height="100%" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="swiper-pagination"></div> -->
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<div class="content" >
|
||||||
|
<span><img src="imgs/product-01.jpg" alt=""></span>
|
||||||
|
<span><img src="imgs/product-02.jpg" alt=""></span>
|
||||||
|
<span><img src="imgs/product-03.jpg" alt=""></span>
|
||||||
|
<span><img src="imgs/product-04.jpg" alt=""></span>
|
||||||
|
<span><img src="imgs/product-05.jpg" alt=""></span>
|
||||||
|
<span><img src="imgs/product-06.jpg" alt=""></span>
|
||||||
|
<span><img src="imgs/product-07.jpg" alt=""></span>
|
||||||
|
</div>
|
||||||
|
<!-- 底部部分 -->
|
||||||
|
<footer>
|
||||||
|
<div class="foot">
|
||||||
|
<img src="imgs/foot.jpg" alt="">
|
||||||
|
<a class="back" href=""><ins></ins><span>返回首页</span><ins></ins></a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
jQuery(function($){
|
||||||
|
// banner轮播
|
||||||
|
var bannerSwiper = new Swiper('.banner-swiper',{
|
||||||
|
loop:true,//开启循环播放
|
||||||
|
autoplay: {//开启自动播放
|
||||||
|
delay:3000,
|
||||||
|
disableOnInteraction: false,//触摸后不会停止自动滚动
|
||||||
|
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||||||
|
},
|
||||||
|
effect : 'slide',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
|
||||||
|
// fadeEffect: {
|
||||||
|
// crossFade: true,
|
||||||
|
// },
|
||||||
|
on:{
|
||||||
|
init: function(){
|
||||||
|
swiperAnimateCache(this); //隐藏动画元素
|
||||||
|
swiperAnimate(this); //初始化完成开始动画
|
||||||
|
},
|
||||||
|
slideChangeTransitionEnd: function(){
|
||||||
|
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
|
||||||
|
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 数据产品切换
|
||||||
|
$(".product-list li").eq(0).addClass("cur");
|
||||||
|
$('.product-item li').hover(function() {
|
||||||
|
$(".product-item li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||||||
|
$(".product-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 回到顶部
|
||||||
|
$('#toTop').click(function(){$('html,body').animate({scrollTop:$('#top').offset().top}, 600);});
|
||||||
|
|
||||||
|
//暂停&播放
|
||||||
|
$('.experience-audio>.play-btn').click(function() {
|
||||||
|
let audio = $('.experience-audio>.play-btn');
|
||||||
|
for (let i=0;i<audio.length;i++){
|
||||||
|
audio.next()[i].pause();
|
||||||
|
}
|
||||||
|
if(!$(this).hasClass("active")){
|
||||||
|
$('.experience-audio>.play-btn').removeClass("active");
|
||||||
|
$(this).addClass("active");
|
||||||
|
$(this).next()[0].play();//播放
|
||||||
|
}else{
|
||||||
|
$(this).removeClass("active");
|
||||||
|
$(this).next()[0].pause();//暂停
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 产品锚点
|
||||||
|
$('.onExperience').click(function(){$('html,body').animate({scrollTop:$('.experience-bg').offset().top}, 600);});
|
||||||
|
$('.onAdvantage').click(function(){$('html,body').animate({scrollTop:$('.advantage-bg').offset().top}, 600);});
|
||||||
|
$('.onScene').click(function(){$('html,body').animate({scrollTop:$('.scene-bg').offset().top}, 600);});
|
||||||
|
$('.onPrice').click(function(){$('html,body').animate({scrollTop:$('.price').offset().top}, 600);});
|
||||||
|
$('.onDeveloper').click(function(){$('html,body').animate({scrollTop:$('.developer-bg').offset().top}, 600);});
|
||||||
|
|
||||||
|
// 应用场景切换
|
||||||
|
$(".scene-list li").eq(0).addClass("cur");
|
||||||
|
$('.scene-item li').hover(function() {
|
||||||
|
$(".scene-item li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||||||
|
$(".scene-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关于我们
|
||||||
|
$(".about-content-bg>div").eq(0).addClass("cur");
|
||||||
|
$('.about-nav-item li').click(function() {
|
||||||
|
$(".about-nav-item li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||||||
|
$(".about-content-bg>div").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加入我们
|
||||||
|
$(".join-class li").eq(0).addClass("cur");
|
||||||
|
$(".join-list li").eq(0).addClass("cur");
|
||||||
|
$(".join-list li").eq(0).find(".join-list-item").eq(0).addClass("active");
|
||||||
|
$(".join-list li").eq(1).find(".join-list-item").eq(0).addClass("active");
|
||||||
|
$('.join-item li').click(function() {
|
||||||
|
$(".join-item li").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||||||
|
$(".join-class li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||||||
|
$(".join-list li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
|
||||||
|
});
|
||||||
|
$('.join-class li span').click(function() {
|
||||||
|
$(".join-class li.cur span").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||||||
|
$(".join-list li.cur .join-list-item").eq($(this).index()).addClass("active").siblings().removeClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 判断价格图片是否为空
|
||||||
|
if(!$('.price img').attr('src')){
|
||||||
|
$(".price").html("<span>定价图片后台上传</span>");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 手机导航按钮
|
||||||
|
$('.head .head-btn').click(function() {
|
||||||
|
if ($('.head .head-btn').attr('class') == 'head-btn cur') {
|
||||||
|
$('.head .head-btn').removeClass('cur');
|
||||||
|
$('.head .nav').removeClass('active');
|
||||||
|
$('.head .nav-bg').removeClass('active');
|
||||||
|
} else {
|
||||||
|
$('.head .head-btn').addClass('cur');
|
||||||
|
$('.head .nav').addClass('active');
|
||||||
|
$('.head .nav-bg').addClass('active');
|
||||||
|
$('.head .logo').addClass('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$('.head .nav-bg').click(function() {
|
||||||
|
$(this).removeClass('active');
|
||||||
|
$('.head .head-btn').removeClass('cur');
|
||||||
|
$('.head .nav').removeClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// 控制hover背景
|
||||||
|
// $('.nav>li').eq(1).mouseover(function() {
|
||||||
|
// $(".nav-bg.wap-show").show();
|
||||||
|
// }).mouseout(function() {
|
||||||
|
// $(".nav-bg.wap-show").hide();
|
||||||
|
// });
|
||||||
|
// $('.nav>li').eq(2).mouseover(function() {
|
||||||
|
// $(".nav-bg.wap-show").show();
|
||||||
|
// }).mouseout(function() {
|
||||||
|
// $(".nav-bg.wap-show").hide();
|
||||||
|
// });
|
||||||
|
// $('.nav>li').eq(3).mouseover(function() {
|
||||||
|
// $(".nav-bg.wap-show").show();
|
||||||
|
// }).mouseout(function() {
|
||||||
|
// $(".nav-bg.wap-show").hide();
|
||||||
|
// });
|
||||||
|
// $('.nav>li').eq(4).mouseover(function() {
|
||||||
|
// $(".nav-bg.wap-show").show();
|
||||||
|
// }).mouseout(function() {
|
||||||
|
// $(".nav-bg.wap-show").hide();
|
||||||
|
// });
|
||||||
|
|
||||||
|
// $('.side-nav-item>li').mouseover(function() {
|
||||||
|
// $(".nav-bg.wap-show").show();
|
||||||
|
// }).mouseout(function() {
|
||||||
|
// $(".nav-bg.wap-show").hide();
|
||||||
|
// });
|
||||||
|
// $('.side-nav-item>li').eq(4).mouseover(function() {
|
||||||
|
// $(".nav-bg.wap-show").hide();
|
||||||
|
// });
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
||||||
|
//本插件由www.swiper.com.cn提供
|
||||||
|
//版本1.03
|
||||||
|
function swiperAnimateCache(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate(a);var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+" "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue