| |
<!DOCTYPE html> |
| |
<html> |
| |
<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,chrome=1"> |
| |
<title></title> |
| |
<link rel="stylesheet" href="js/css/reset.css"> |
| |
|
| |
<link rel="stylesheet" href="js/swiper.css"/> |
| |
<style> |
| |
|
| |
#tou { |
| |
max- 640px; |
| |
height: 99px; |
| |
margin: 0 auto; |
| |
position: relative; |
| |
} |
| |
|
| |
#tou .heads { |
| |
620px; |
| |
margin: auto; |
| |
overflow: hidden; |
| |
height: 99px; |
| |
} |
| |
|
| |
#logo { |
| |
float: left; |
| |
120px; |
| |
height: 57px; |
| |
|
| |
} |
| |
|
| |
#logo img { |
| |
max- 100%; |
| |
} |
| |
|
| |
#tou #tel { |
| |
position: absolute; |
| |
top: 0; |
| |
left: 325px; |
| |
float: left; |
| |
display: block; |
| |
height: 99px; |
| |
line-height: 99px; |
| |
36%; |
| |
color: #000; |
| |
font-size: 24px; |
| |
font-weight: bold; |
| |
|
| |
text-align: center; |
| |
|
| |
} |
| |
|
| |
#tel span { |
| |
display: inline-block; |
| |
max- 100%; |
| |
} |
| |
|
| |
.xia { |
| |
|
| |
position: absolute; |
| |
top: 21px; |
| |
right: 9px; |
| |
display: inline-block; |
| |
float: right; |
| |
|
| |
} |
| |
|
| |
#wei { |
| |
max- 640px; |
| |
border: 1px solid #ccc; |
| |
margin: 0 auto; |
| |
} |
| |
|
| |
#wei .foots h3 { |
| |
text-align: center; |
| |
} |
| |
|
| |
.slide { |
| |
max- 640px; |
| |
border: 1px solid #ccc; |
| |
margin: 0 auto; |
| |
} |
| |
|
| |
.slide img { |
| |
100%; |
| |
height: 180px; |
| |
|
| |
} |
| |
|
| |
/*----jieshaomokuai-----*/ |
| |
|
| |
#jieshao { |
| |
max- 640px; |
| |
margin: 10px auto; |
| |
border: 1px solid #ccc; |
| |
} |
| |
|
| |
#jieshao .jie { |
| |
height: 420px; |
| |
background: red; |
| |
} |
| |
|
| |
#culture { |
| |
max- 640px; |
| |
} |
| |
|
| |
#culture img { |
| |
100%; |
| |
} |
| |
</style> |
| |
|
| |
</head> |
| |
<body> |
| |
|
| |
<div id="tou"> |
| |
|
| |
</div> |
| |
|
| |
<div class="slide"> |
| |
<div class="swiper-container"> |
| |
<div class="swiper-wrapper"> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</div> |
| |
|
| |
<div class="swiper-pagination"></div> |
| |
|
| |
</div> |
| |
</div> |
| |
|
| |
<div id="jieshao"> |
| |
<div class="jie"> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</div> |
| |
</div> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
<div id="wei"> |
| |
|
| |
</div> |
| |
|
| |
<script src="js/css/remScale.js"></script> |
| |
<script src="js/css/respond.js"></script> |
| |
<script src="js/jquery.js"></script> |
| |
<script src="js/swiper.js"></script> |
| |
</body> |
| |
</html> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
<script> |
| |
$(function () { |
| |
// ------引入头部和尾部模块 |
| |
$("#tou").load("template/heads.html"); |
| |
$("#wei").load("template/footer.html"); |
| |
// ----- |
| |
// 写轮播 |
| |
function createPromise(url) { |
| |
return new Promise(function (resolve, reject) { |
| |
$.ajax({ |
| |
url, |
| |
dataType: 'json', |
| |
success(arr) { |
| |
resolve(arr); |
| |
}, |
| |
error(err) { |
| |
reject(err); |
| |
} |
| |
}) |
| |
}); |
| |
} |
| |
|
| |
// createPromise("http://127.0.0.1:3000/slide").then(function(res){ |
| |
// console.log(res) |
| |
// },function(){console.log(请求失败)}) |
| |
|
| |
Promise.all([ |
| |
createPromise("http://127.0.0.1:3000/slide"), |
| |
createPromise("http://127.0.0.1:3000/qiye") |
| |
]).then(function (res) { |
| |
// res 是一个数组 |
| |
|
| |
// 第一个轮播 |
| |
var str = "" |
| |
for (var i = 0; i < res[0].length; i++) { |
| |
str += "<div class='swiper-slide'>" |
| |
str += "<img src='" + res[0][i].src + "' />" //<img src="imgse/2.jpg"/> <img src=img/2.jpg/> |
| |
str += "</div>" |
| |
} |
| |
$(".swiper-wrapper").html(str); |
| |
|
| |
///////////////////////////////////////// |
| |
var mySwiper = new Swiper('.swiper-container', { |
| |
direction: 'horizontal', |
| |
loop: true, |
| |
autoplay: 1000, |
| |
observer: true, |
| |
observerParents: true, |
| |
|
| |
// 如果需要分页器 |
| |
pagination: { |
| |
el: '.swiper-pagination', |
| |
}, |
| |
}); |
| |
/////////////////////////////////////////////// |
| |
// ---------轮播结束 企业介绍 |
| |
var strs = ""; |
| |
strs += "<h3>" |
| |
strs += res[1][0].title |
| |
strs += "</h3>" |
| |
strs += "<p>" |
| |
strs += res[1][0].content |
| |
strs += "</p>" |
| |
$(".jie").html(strs) |
| |
|
| |
console.log(res), |
| |
|
| |
function () { |
| |
console.log("qingqiushibai") |
| |
} |
| |
}) |
| |
|
| |
/////////////////////////////////////////// |
| |
// $.ajax({ |
| |
// type:"get", |
| |
// url:"http://127.0.0.1:3000/slide", //首页轮播的接口 |
| |
// async:true, |
| |
// success:function(res){ |
| |
// var str="" |
| |
// for(var i=0;i<res.length;i++){ |
| |
// str+="<div class='swiper-slide'>" |
| |
// str+="<img src='"+res[i].src+"' />" //<img src="imgse/2.jpg"/> <img src=img/2.jpg/> |
| |
// str+="</div>" |
| |
// } |
| |
// $(".swiper-wrapper").html(str) |
| |
// console.log(res) |
| |
// |
| |
// |
| |
// |
| |
// var mySwiper = new Swiper ('.swiper-container', { |
| |
// direction: 'horizontal', |
| |
// loop: true, |
| |
// |
| |
// // 如果需要分页器 |
| |
// pagination: { |
| |
// el: '.swiper-pagination', |
| |
// }, |
| |
// }) |
| |
// } |
| |
// }); |
| |
//// ---- |
| |
// $.ajax({ |
| |
// type:"get", |
| |
// url:"http://127.0.0.1:3000/qiye", |
| |
// async:true, |
| |
// success:function(res){ |
| |
// console.log(res) |
| |
// var str=""; |
| |
// str+="<h3>" |
| |
// str+=res[0].title |
| |
// str+="</h3>" |
| |
// str+="<p>" |
| |
// str+=res[0].content |
| |
// str+="</p>" |
| |
// $(".jie").html(str) |
| |
// } |
| |
// }); |
| |
|
| |
|
| |
}) |
| |
|
| |
// $.ajax({ |
| |
// type:"get", |
| |
// url:"", |
| |
// async:true, |
| |
// success:function(res){ |
| |
// $.ajax({ |
| |
// type:"get", |
| |
// url:"", |
| |
// async:true |
| |
// }); |
| |
// } |
| |
// }); |
| |
|
| |
</script> |
| |
|
| |
|