Skip to content

T
test
提交 0151eddc 作者: 陈涛
操作

修改文件

上级 f59d482b
正在显示 包含 248 行增加 和 18 行删除
contactus.html
...@@ -32,8 +32,9 @@ ...@@ -32,8 +32,9 @@
<a href="./index.html#department">招贤纳士</a> <a href="./index.html#department">招贤纳士</a>
<a href="./index.html#cours">发展历程</a> <a href="./index.html#cours">发展历程</a>
<a href="./index.html#product_service">产品服务</a> <a href="./index.html#product_service">产品服务</a>
<a href="./index.html#honors">荣誉资质</a>
<a href="./contactus.html" class="choosed">品牌加盟</a> <a href="./contactus.html" class="choosed">品牌加盟</a>
<a class="nav_last" href="about.html">千家风采</a> <a class="nav_last" href="./about.html">千家风采</a>
</div> </div>
</div> </div>
</div> </div>
......
css/about.css
...@@ -200,7 +200,7 @@ header { ...@@ -200,7 +200,7 @@ header {
height: 580px; height: 580px;
margin:14px; margin:14px;
} }
/* 凤凰园团队 */ /* 龙云楼团队 */
/* 团队名称 */ /* 团队名称 */
#content3 .team2 .top_words{ #content3 .team2 .top_words{
right:0px; right:0px;
...@@ -210,24 +210,28 @@ header { ...@@ -210,24 +210,28 @@ header {
margin-top:175px; margin-top:175px;
} }
#content3 .team4 .team_msg, #content3 .team4 .team_msg,
#content3 .team2 .team_msg { #content3 .team2 .team_msg,
#content3 .team6 .team_msg {
margin: 0px 35px 0px 0px; margin: 0px 35px 0px 0px;
text-align: right; text-align: right;
} }
/* 团队介绍 */ /* 团队介绍 */
#content3 .team2 .team_msg .team_int, #content3 .team2 .team_msg .team_int,
#content3 .team4 .team_msg .team_int{ #content3 .team4 .team_msg .team_int,
#content3 .team6 .team_msg .team_int{
margin: 40px 42px 0px 0px; margin: 40px 42px 0px 0px;
} }
#content3 .team2 .team_int span::before, #content3 .team2 .team_int span::before,
#content3 .team4 .team_int span::before{ #content3 .team4 .team_int span::before,
#content3 .team6 .team_int span::before{
display: none; display: none;
} }
#content3 .team2 .team_int span::after, #content3 .team2 .team_int span::after,
#content3 .team4 .team_int span::after{ #content3 .team4 .team_int span::after,
#content3 .team6 .team_int span::after{
position: absolute; position: absolute;
top:0px; top:0px;
right:-34px; right:-30px;
content: ""; content: "";
width: 10px; width: 10px;
height: 10px; height: 10px;
...@@ -237,10 +241,13 @@ header { ...@@ -237,10 +241,13 @@ header {
margin-top: 6px; margin-top: 6px;
} }
#content3 .team2 .team_msg .line { #content3 .team2 .team_msg .line {
left: 227px; left: 223px;
} }
#content3 .team4 .team_msg .line { #content3 .team4 .team_msg .line {
left: 199px; left: 195px;
}
#content3 .team6 .team_msg .line {
left: 206px;
} }
#content3 .team{ #content3 .team{
margin-bottom:135px; margin-bottom:135px;
...@@ -264,6 +271,10 @@ header { ...@@ -264,6 +271,10 @@ header {
position: relative; position: relative;
height:570px; height:570px;
} }
#person_mien .person_box ul li img{
width: 349px;
height: 509px;
}
#person_mien .person_photo{ #person_mien .person_photo{
position: absolute; position: absolute;
bottom:0px; bottom:0px;
...@@ -298,7 +309,7 @@ header { ...@@ -298,7 +309,7 @@ header {
#person_mien .personage{ #person_mien .personage{
display: none; display: none;
} }
#person_mien .dongzuojin .team_msg h1 { #person_mien .zhaoyue .team_msg h1 {
margin-top:115px; margin-top:115px;
} }
#person_mien .team_msg h1 { #person_mien .team_msg h1 {
......
css/contactus.css
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
#poster .poster_banner{ #poster .poster_banner{
width:100%; width:100%;
height:100%; height:100%;
background: url('../images/company_posters.jpg') center; background: url('../images/company_poster.jpg') center;
background-position: 18px;
} }
#poster .poster_banner .main_body{ #poster .poster_banner .main_body{
position: relative; position: relative;
......
css/index.css
...@@ -1217,7 +1217,7 @@ ...@@ -1217,7 +1217,7 @@
padding-bottom:80px; padding-bottom:80px;
} }
#product_service .product_content{ #product_service .product_content{
margin:0px auto 185px; margin:0px auto;
} }
#product_service .li_single{ #product_service .li_single{
position: relative; position: relative;
...@@ -1275,6 +1275,86 @@ ...@@ -1275,6 +1275,86 @@
margin-left: 50%; margin-left: 50%;
transform: translateX(-128px); transform: translateX(-128px);
} }
/* 荣誉资质 */
#honor {
position: relative;
width: 100%;
margin: 0 auto;
text-align: center;
}
#honor .model_top{
padding-bottom:80px;
}
#honor .swiper-container {
padding-bottom: 60px
}
#honor .swiper-slide {
width: 520px;
height: 408px;
background: #fff;
box-shadow: 0 8px 30px #ddd
}
#honor .swiper-slide img {
display: block
}
#honor .swiper-slide p {
line-height: 98px;
padding-top: 0;
text-align: center;
color: #636363;
font-size: 1.1em;
margin: 0
}
#honor .swiper-pagination {
width: 100%;
bottom: 20px
}
#honor .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
border: 3px solid #fff;
background-color: #d5d5d5;
width: 10px;
height: 10px;
opacity: 1
}
#honor .swiper-pagination-bullets .swiper-pagination-bullet-active {
border: 3px solid #00aadc;
background-color: #fff
}
#honor .swiper-button-prev {
left: -30px;
width: 45px;
height: 45px;
/* background: url(../images/wm_button_icon.png) no-repeat; */
background-position: 0 0;
background-size: 100%
}
#honor .swiper-button-prev:hover {
background-position: 0 -46px;
background-size: 100%
}
#honor .swiper-button-next {
right: -30px;
width: 45px;
height: 45px;
/* background: url(../images/wm_button_icon.png) no-repeat; */
background-position: 0 -93px;
background-size: 100%
}
#honor .swiper-button-next:hover {
background-position: 0 -139px;
background-size: 100%
}
/* 千家大地图 */ /* 千家大地图 */
#qj_map .map_content{ #qj_map .map_content{
width: 100%; width: 100%;
......
css/qj_show.css
...@@ -302,7 +302,7 @@ header { ...@@ -302,7 +302,7 @@ header {
#person_mien .personage{ #person_mien .personage{
display: none; display: none;
} }
#person_mien .dongzuojin .team_msg h1 { #person_mien .zhaoyue .team_msg h1 {
margin-top:115px; margin-top:115px;
} }
#person_mien .team_msg h1 { #person_mien .team_msg h1 {
......
index.html
...@@ -13,12 +13,15 @@ ...@@ -13,12 +13,15 @@
<link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css"> <link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/jquery-3.3.1.slim.min.js"></script> <script src="./js/jquery-3.3.1.slim.min.js"></script>
<script src="./js/popper.min.js"></script> <script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script> <script src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/wow.min.js"></script> <script type="text/javascript" src="./js/wow.min.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<script src="./js/jquery-3.3.1.slim.min.js"></script>
<script src="./js/swiper.min.js"></script>
</head> </head>
<body> <body>
...@@ -36,8 +39,9 @@ ...@@ -36,8 +39,9 @@
<a href="#departmentx">招贤纳士</a> <a href="#departmentx">招贤纳士</a>
<a href="#coursd">发展历程</a> <a href="#coursd">发展历程</a>
<a href="#product_services">产品服务</a> <a href="#product_services">产品服务</a>
<a href="#honors">荣誉资质</a>
<a href="./contactus.html">品牌加盟</a> <a href="./contactus.html">品牌加盟</a>
<a class="nav_last" href="about.html">千家风采</a> <a class="nav_last" href="./about.html">千家风采</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -820,6 +824,65 @@ ...@@ -820,6 +824,65 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 荣誉资质 -->
<div id="honors" style="height:60px;"></div>
<div id="honor">
<div class="model_top">
<div class="model_title wow animated fadeInUp">荣誉资质</div>
<p class="model_eng wow animated fadeInUp">PRODUCT</p>
</div>
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-4860px, 0px, 0px);">
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="transform: translateX(9620px); z-index: 899; opacity: 0; transition-duration: 0ms;"><img
src="images/1.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1" style="transform: translateX(7956px); z-index: 909; opacity: 0; transition-duration: 0ms;"><img
src="images/2.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="transform: translateX(6448px); z-index: 919; opacity: 0; transition-duration: 0ms;"><img
src="images/3.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="transform: translateX(5096px); z-index: 929; opacity: 0; transition-duration: 0ms;"><img
src="images/4.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="4" style="transform: translateX(3900px); z-index: 939; opacity: 0; transition-duration: 0ms;"><img
src="images/5.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0" style="transform: translateX(2860px);-index: 949; opacity: 0; transition-duration: 0ms;"><img
src="images/1.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate-next" data-swiper-slide-index="1" style="transform: translateX(1976px); z-index: 959; opacity: 0; transition-duration: 0ms;"><img
src="images/2.jpg">
</div>
<div class="swiper-slide" data-swiper-slide-index="2" style="transform: translateX(1248px); z-index: 969; opacity: 1; transition-duration: 0ms;"><img
src="images/3.jpg">
</div>
<div class="swiper-slide" data-swiper-slide-index="3" style="transform: translateX(676px); z-index: 979; opacity: 1; transition-duration: 0ms;"><img
src="images/4.jpg">
</div>
<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="4" style="transform: translateX(260px); z-index: 989; opacity: 1; transition-duration: 0ms;"><img
src="images/5.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="0" style="transform: translateX(0px);-index: 999; opacity: 1; transition-duration: 0ms;"><img
src="images/1.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="1" style="transform: translateX(-260px); z-index: 989; opacity: 1; transition-duration: 0ms;"><img
src="images/2.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="transform: translateX(-676px); z-index: 979; opacity: 1; transition-duration: 0ms;"><img
src="images/3.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="transform: translateX(-1248px); z-index: 969; opacity: 1; transition-duration: 0ms;"><img
src="images/4.jpg">
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="4" style="transform: translateX(-1976px); z-index: 959; opacity: 0; transition-duration: 0ms;"><img
src="images/5.jpg">
</div>
</div>
</div>
<!-- <div class="swiper-button-prev icon-you"></div>
<div class="swiper-button-next"></div> -->
</div>
<!-- 底部 --> <!-- 底部 -->
<footer id="footer"> <footer id="footer">
<div class="service_img"> <div class="service_img">
......
js/about.js
...@@ -117,7 +117,7 @@ window.onload = function () { ...@@ -117,7 +117,7 @@ window.onload = function () {
let scroll_one = document.getElementById("scroll_one").offsetTop - 90 let scroll_one = document.getElementById("scroll_one").offsetTop - 90
let scroll_two = document.getElementById("scroll_two").offsetTop - 90 let scroll_two = document.getElementById("scroll_two").offsetTop - 90
let scroll_three = document.getElementById("scroll_three").offsetTop - 90 let scroll_three = document.getElementById("scroll_three").offsetTop - 90
let scroll_four = document.getElementById("scroll_four").offsetTop -180 let scroll_four = document.getElementById("scroll_four").offsetTop -240
let show_sidebar = document.getElementById("show_sidebar") let show_sidebar = document.getElementById("show_sidebar")
let sidebar_li = show_sidebar.getElementsByTagName("a") let sidebar_li = show_sidebar.getElementsByTagName("a")
let show_top = show_sidebar.getElementsByTagName("div")[0] let show_top = show_sidebar.getElementsByTagName("div")[0]
......
js/index.js
...@@ -32,6 +32,7 @@ window.onload = function () { ...@@ -32,6 +32,7 @@ window.onload = function () {
let home_three = document.getElementById("department").offsetTop - 90 let home_three = document.getElementById("department").offsetTop - 90
let home_four = document.getElementById("cours").offsetTop -100 let home_four = document.getElementById("cours").offsetTop -100
let home_five = document.getElementById("product_service").offsetTop - 90 let home_five = document.getElementById("product_service").offsetTop - 90
let home_six = document.getElementById("honor").offsetTop - 120
let nav = document.getElementsByClassName("nav")[0]; let nav = document.getElementsByClassName("nav")[0];
let click_a = nav.getElementsByTagName("a"); let click_a = nav.getElementsByTagName("a");
...@@ -51,9 +52,12 @@ window.onload = function () { ...@@ -51,9 +52,12 @@ window.onload = function () {
case scrollTop >= home_four && scrollTop < home_five: case scrollTop >= home_four && scrollTop < home_five:
click_a[3].classList.add("choosed") click_a[3].classList.add("choosed")
break; break;
case scrollTop >= home_five: case scrollTop >= home_five && scrollTop < home_six:
click_a[4].classList.add("choosed") click_a[4].classList.add("choosed")
break; break;
case scrollTop >= home_six:
click_a[5].classList.add("choosed")
break;
} }
} }
} }
...@@ -306,4 +310,49 @@ window.onload = function () { ...@@ -306,4 +310,49 @@ window.onload = function () {
} }
// 侧边导航代码执行 // 侧边导航代码执行
common(); common();
// 荣誉资质轮播图
certifySwiper = new Swiper('#honor .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
//clickable :true,
},
on: {
progress: function (progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 260 + 'px';
scale = 1 - Math.abs(slideProgress) / 5;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function (transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
} }
\ No newline at end of file
js/swiper.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package-lock.json
{ {
"lockfileVersion": 1 "requires": true,
"lockfileVersion": 1,
"dependencies": {
"dom7": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.2.tgz",
"integrity": "sha512-cGwWtpu7KY3JnbREGqG4EGC/u+1hyLfWVMqrqRjmwiO8d5i4B+0imLZAQ/cJbiXnjbs0pdIUzcUyeI9BbnyKNg==",
"requires": {
"ssr-window": "^1.0.1"
}
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"swiper": {
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.4.6.tgz",
"integrity": "sha512-F9NDtijQt+etiOe6JAEH+Cb+QKzwwFpi08FlOIQv8ALdoQ8tvAX/38a/28E5XxalAkChsHCutwkBCzDxDXTGiA==",
"requires": {
"dom7": "^2.1.2",
"ssr-window": "^1.0.1"
}
}
}
} }
web_common_front @ fcfa8313
Subproject commit fcfa831331c975e8fc31b6ef3e4513f8f506ce88
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论