Skip to content

梁建民 / fsd

Go to a project
Commit a73e7991 by LJM
Options

add

parent 0c63dec9
Expand all
Inline Side-by-side
Showing with 384 additions and 187 deletions
css/style.css
...@@ -392,7 +392,7 @@ body { ...@@ -392,7 +392,7 @@ body {
.head-wrap .slideBox .slide-text-other { .head-wrap .slideBox .slide-text-other {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 58px; top: 200px;
margin-left: -640px; margin-left: -640px;
width: 1280px; width: 1280px;
} }
...@@ -401,14 +401,14 @@ body { ...@@ -401,14 +401,14 @@ body {
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
line-height: 98px; line-height: 98px;
margin-bottom: 13px; margin-bottom: 8px;
} }
.head-wrap .slideBox .slide-text-other .t2 { .head-wrap .slideBox .slide-text-other .t2 {
width: 1064px; width: 1064px;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #FFFFFF;
line-height: 25px; line-height: 35px;
margin-bottom: 44px; opacity: 0.8;
} }
.head-wrap.head-wrap-pic { .head-wrap.head-wrap-pic {
height: 880px; height: 880px;
...@@ -417,14 +417,14 @@ body { ...@@ -417,14 +417,14 @@ body {
height: 880px; height: 880px;
} }
.brand { .brand {
padding: 70px 0 80px 0; padding: 70px 0 70px 0;
} }
.brand .title { .brand .title {
font-size: 38px; font-size: 38px;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
line-height: 53px; line-height: 53px;
margin-bottom: 23px; margin-bottom: 50px;
} }
.brand .list li { .brand .list li {
position: relative; position: relative;
...@@ -438,64 +438,42 @@ body { ...@@ -438,64 +438,42 @@ body {
} }
.brand .list li .box { .brand .list li .box {
display: block; display: block;
overflow: hidden;
} }
.brand .list li .box img { .brand .list li .box img {
width: 620px; width: 620px;
height: 360px; height: 360px;
object-fit: cover; object-fit: cover;
display: block; display: block;
transition: transform 0.4s linear;
} }
.brand .list li .box .text { .brand .list li .box .text {
position: absolute; position: absolute;
bottom: 24px; bottom: 0px;
left: 20px; left: 0px;
font-size: 24px; right: 0;
color: #ffffff;
line-height: 33px;
}
.brand .list li .show {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 123px;
background: #0D8DDA; background: linear-gradient(220deg, #2B618B 0%, #2A3138 50%, #373F50 0.5%);
box-sizing: border-box;
padding-top: 172px;
padding-left: 20px;
transition: transform 0.4s ease;
transform: translateY(360px);
opacity: 0;
} }
.brand .list li .show .title { .brand .list li .box .text .t1 {
margin-top: 22px;
padding-left: 46px;
font-size: 24px; font-size: 24px;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
line-height: 33px; line-height: 36px;
margin-bottom: 4px;
} }
.brand .list li .show .text { .brand .list li .box .text .t2 {
font-size: 14px; padding-left: 46px;
width: 496px;
font-size: 16px;
color: #ffffff; color: #ffffff;
line-height: 20px; line-height: 25px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.brand .list li .show .links {
margin-top: 42px;
display: block;
}
.brand .list li .show .links span {
font-size: 14px;
color: #FFFFFF;
margin-right: 8px;
}
.brand .list li .show .links .iconfont {
color: #FFFFFF;
font-size: 12px;
} }
.brand .list li:hover .show { .brand .list li .box:hover img {
opacity: 1; transform: scale(1.1);
transform: translateY(0);
} }
.about { .about {
padding: 70px 0 80px 0; padding: 70px 0 80px 0;
...@@ -534,6 +512,120 @@ body { ...@@ -534,6 +512,120 @@ body {
color: #ffffff; color: #ffffff;
line-height: 33px; line-height: 33px;
} }
.abouts {
padding: 63px 0 168px 0;
background: url("../images/about-1.png") no-repeat center top;
background-size: cover;
}
.abouts .title {
font-size: 38px;
color: #FFFFFF;
font-weight: bold;
line-height: 53px;
margin-bottom: 58px;
}
.abouts .main .pic {
width: 620px;
height: 360px;
transition: all 0.4s ease;
}
.abouts .main .pic img {
width: 620px;
height: 360px;
object-fit: cover;
transition: all 0.4s ease;
}
.abouts .main .text {
margin-left: 49px;
}
.abouts .main .text .t1 {
width: 611px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
}
.contact {
padding: 60px 0 160px 0;
}
.contact .title {
text-align: center;
font-size: 38px;
color: #000000;
line-height: 53px;
font-weight: bold;
margin-bottom: 58px;
}
.contact .contact-wrap .pic {
width: 620px;
height: 360px;
}
.contact .contact-wrap .pic #map {
width: 620px;
height: 360px;
}
.contact .contact-wrap .text {
margin-left: 50px;
}
.contact .contact-wrap .text .t1 {
font-size: 24px;
color: #000000;
font-weight: bold;
line-height: 33px;
margin-bottom: 37px;
}
.contact .contact-wrap .text .t2 {
font-size: 20px;
color: #000000;
line-height: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.product {
padding: 62px 0 97px 0;
background: url("../images/product.png") no-repeat center top;
background-size: cover;
}
.product .main .title {
font-size: 38px;
color: #000000;
font-weight: bold;
text-align: center;
}
.product .main .brand-list li {
width: 266px;
height: 174px;
overflow: hidden;
}
.product .main .brand-list li:last-child {
margin-right: 0;
}
.product .main .brand-list li img {
width: 266px;
height: 174px;
object-fit: cover;
transition: all 0.4s ease;
}
.product .main .brand-list li:hover img {
transform: scale(1.1);
}
.product .main .business li {
width: 305px;
height: 260px;
margin-right: 20px;
overflow: hidden;
}
.product .main .business li:last-child {
margin-right: 0;
}
.product .main .business li img {
width: 305px;
height: 260px;
object-fit: cover;
transition: all 0.4s ease;
}
.product .main .business li:hover img {
transform: scale(1.1);
}
.footer { .footer {
background: #262626; background: #262626;
padding: 68px 0 0px 0; padding: 68px 0 0px 0;
......
css/style.less
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
.slide-text-other { .slide-text-other {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 58px; top: 200px;
margin-left: -640px; margin-left: -640px;
width: 1280px; width: 1280px;
...@@ -255,15 +255,15 @@ ...@@ -255,15 +255,15 @@
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
line-height: 98px; line-height: 98px;
margin-bottom: 13px; margin-bottom: 8px;
} }
.t2 { .t2 {
width: 1064px; width: 1064px;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #FFFFFF;
line-height: 25px; line-height: 35px;
margin-bottom: 44px; opacity: 0.8;
} }
} }
} }
...@@ -278,14 +278,14 @@ ...@@ -278,14 +278,14 @@
} }
.brand { .brand {
padding: 70px 0 80px 0; padding: 70px 0 70px 0;
.title { .title {
font-size: 38px; font-size: 38px;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
line-height: 53px; line-height: 53px;
margin-bottom: 23px; margin-bottom: 50px;
} }
.list { .list {
...@@ -303,75 +303,48 @@ ...@@ -303,75 +303,48 @@
.box { .box {
display: block; display: block;
overflow: hidden;
img { img {
width: 620px; width: 620px;
height: 360px; height: 360px;
object-fit: cover; object-fit: cover;
display: block; display: block;
transition: transform 0.4s linear;
} }
.text { .text {
position: absolute; position: absolute;
bottom: 24px; bottom: 0px;
left: 20px; left: 0px;
font-size: 24px; right: 0;
color: #ffffff; width: 100%;
line-height: 33px; height: 123px;
} background: linear-gradient(220deg, #2B618B 0%, #2A3138 50%, #373F50 0.5%);
}
.show {
position: absolute;
width: 100%;
height: 100%;
background: #0D8DDA;
box-sizing: border-box;
padding-top: 172px;
padding-left: 20px;
transition: transform 0.4s ease;
transform: translateY(360px);
opacity: 0;
.title {
font-size: 24px;
color: #ffffff;
font-weight: bold;
line-height: 33px;
}
.text {
font-size: 14px;
color: #ffffff;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.links {
margin-top: 42px;
display: block;
span { .t1 {
font-size: 14px; margin-top: 22px;
color: #FFFFFF; padding-left: 46px;
margin-right: 8px; font-size: 24px;
color: #ffffff;
font-weight: bold;
line-height: 36px;
margin-bottom: 4px;
} }
.iconfont { .t2 {
color: #FFFFFF; padding-left: 46px;
font-size: 12px; width: 496px;
font-size: 16px;
color: #ffffff;
line-height: 25px;
} }
} }
}
&:hover {
&:hover { img {
.show { transform: scale(1.1);
opacity: 1; }
transform: translateY(0);
} }
} }
} }
...@@ -428,6 +401,157 @@ ...@@ -428,6 +401,157 @@
} }
} }
.abouts {
padding: 63px 0 168px 0;
background: url("../images/about-1.png") no-repeat center top;
background-size: cover;
.title {
font-size: 38px;
color: #FFFFFF;
font-weight: bold;
line-height: 53px;
margin-bottom: 58px;
}
.main {
.pic {
width: 620px;
height: 360px;
transition: all 0.4s ease;
img {
width: 620px;
height: 360px;
object-fit: cover;
transition: all 0.4s ease;
}
}
.text {
margin-left: 49px;
.t1 {
width: 611px;
font-size: 16px;
color: #ffffff;
line-height: 30px;
}
}
}
}
.contact {
padding: 60px 0 160px 0;
.title {
text-align: center;
font-size: 38px;
color: #000000;
line-height: 53px;
font-weight: bold;
margin-bottom: 58px;
}
.contact-wrap {
.pic {
width: 620px;
height: 360px;
#map {
width: 620px;
height: 360px;
}
}
.text {
margin-left: 50px;
.t1 {
font-size: 24px;
color: #000000;
font-weight: bold;
line-height: 33px;
margin-bottom: 37px;
}
.t2 {
font-size: 20px;
color: #000000;
line-height: 28px;
font-weight: bold;
margin-bottom: 10px;
}
}
}
}
.product {
padding: 62px 0 97px 0;
background: url("../images/product.png") no-repeat center top;
background-size: cover;
.main {
.title {
text-align: center;
font-size: 38px;
color: #000000;
font-weight: bold;
text-align: center;
}
.brand-list{
li{
width: 266px;
height: 174px;
overflow: hidden;
&:last-child {
margin-right: 0;
}
img {
width: 266px;
height: 174px;
object-fit: cover;
transition: all 0.4s ease;
}
&:hover {
img {
transform: scale(1.1);
}
}
}
}
.business {
li {
width: 305px;
height: 260px;
margin-right: 20px;
overflow: hidden;
&:last-child {
margin-right: 0;
}
img {
width: 305px;
height: 260px;
object-fit: cover;
transition: all 0.4s ease;
}
&:hover {
img {
transform: scale(1.1);
}
}
}
}
}
}
.footer { .footer {
background: #262626; background: #262626;
padding: 68px 0 0px 0; padding: 68px 0 0px 0;
......
images/s1.png
images/s1.png

391 KB | W: | H:

images/s1.png

1.98 MB | W: | H:

images/s1.png
images/s1.png
images/s1.png
images/s1.png
  • 2-up
  • Swipe
  • Onion skin
index.html
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="猎豹出海"> <meta name="keywords" content="香港富事达">
<meta name="description" content="猎豹出海"> <meta name="description" content="香港富事达">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"> <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;">
<meta name="baidu-site-verification" content="B1YyUdsoGu"> <meta name="baidu-site-verification" content="B1YyUdsoGu">
<link href="/favicon.ico" rel="icon"> <link href="/favicon.ico" rel="icon">
<title>猎豹出海</title> <title>香港富事达 </title>
<link rel="stylesheet" type="text/css" href="css/font/iconfont.css"> <link rel="stylesheet" type="text/css" href="css/font/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/animate.css"> <link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<ul class="menu row verCenter"> <ul class="menu row verCenter">
<li class="curr row verCenter"><a href="/">首页</a></li> <li class="curr row verCenter"><a href="/">首页</a></li>
<li class="row verCenter"><a href="/about.html">关于我们</a></li> <li class="row verCenter"><a href="/about.html">关于我们</a></li>
<li class="row verCenter"><a href="/about.html">产品展示</a></li> <li class="row verCenter"><a href="/product.html">产品展示</a></li>
<li class="row verCenter"><a href="/about.html">联系我们</a></li> <li class="row verCenter"><a href="/contact.html">联系我们</a></li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -64,60 +64,24 @@ ...@@ -64,60 +64,24 @@
<ul class="list row rowCenter verCenter" style="margin-bottom: 16px;"> <ul class="list row rowCenter verCenter" style="margin-bottom: 16px;">
<li class="row wow fadeInDown"> <li class="row wow fadeInDown">
<div class="box"> <div class="box">
<img src="./images/service-1.png" alt=""> <img src="./images/index-1.png" alt="">
<p class="text">国际海运</p>
</div>
<div class="show">
<p class="title">国际海运</p>
<p class="text">国际海运是国际贸易中最主要的运输方式，价格实惠、载运量大、安全可靠。我国大部分进出口货物，都是通过</p>
<a class="links" href="/internationalShipping.html">
<span>查看详情</span>
<i class="iconfont icon-jinrujiantou"></i>
</a>
</div> </div>
</li> </li>
<li class="row wow fadeInDown" data-wow-delay="0.2s"> <li class="row wow fadeInDown">
<div class="box"> <div class="box">
<img src="./images/service-2.png" alt=""> <img src="./images/index-2.png" alt="">
<p class="text">国际空运</p>
</div>
<div class="show">
<p class="title">国际空运</p>
<p class="text">国际海运是国际贸易中最主要的运输方式，价格实惠、载运量大、安全可靠。我国大部分进出口货物，都是通过</p>
<a class="links" href="/internationaAir.html">
<span>查看详情</span>
<i class="iconfont icon-jinrujiantou"></i>
</a>
</div> </div>
</li> </li>
</ul> </ul>
<ul class="list row rowCenter verCenter"> <ul class="list row rowCenter verCenter">
<li class="row wow fadeInDown"> <li class="row wow fadeInDown">
<div class="box"> <div class="box">
<img src="./images/service-4.png" alt=""> <img src="./images/index-3.png" alt="">
<p class="text">国际铁路</p>
</div>
<div class="show">
<p class="title">国际铁路</p>
<p class="text">国际海运是国际贸易中最主要的运输方式，价格实惠、载运量大、安全可靠。我国大部分进出口货物，都是通过</p>
<a class="links" href="internationaRailway.html">
<span>查看详情</span>
<i class="iconfont icon-jinrujiantou"></i>
</a>
</div> </div>
</li> </li>
<li class="row wow fadeInDown" data-wow-delay="0.2s"> <li class="row wow fadeInDown">
<div class="box"> <div class="box">
<img src="./images/service-5.png" alt=""> <img src="./images/index-4.png" alt="">
<p class="text">进出口报关</p>
</div>
<div class="show">
<p class="title">进出口报关</p>
<p class="text">国际海运是国际贸易中最主要的运输方式，价格实惠、载运量大、安全可靠。我国大部分进出口货物，都是通过</p>
<a class="links" href="inoutCustomsDeclaration.html">
<span>查看详情</span>
<i class="iconfont icon-jinrujiantou"></i>
</a>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -130,12 +94,16 @@ ...@@ -130,12 +94,16 @@
<ul class="list row rowCenter verCenter" style="margin-bottom: 16px;"> <ul class="list row rowCenter verCenter" style="margin-bottom: 16px;">
<li class="row wow fadeInDown"> <li class="row wow fadeInDown">
<div class="box"> <div class="box">
<img src="./images/service-1.png" alt=""> <a href="contact.html">
<img src="./images/index-5.png" alt="">
</a>
</div> </div>
</li> </li>
<li class="row wow fadeInDown" data-wow-delay="0.2s"> <li class="row wow fadeInDown" data-wow-delay="0.2s">
<div class="box"> <div class="box">
<img src="./images/service-2.png" alt=""> <a href="product.html">
<img src="./images/index-6.png" alt="">
</a>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -146,7 +114,7 @@ ...@@ -146,7 +114,7 @@
<div class="main"> <div class="main">
<div class="row bothSide verCenter"> <div class="row bothSide verCenter">
<div class="row"> <div class="row">
<p class="title">香港富事达</p> <p class="title">香港富事达</p>
<div class="row"> <div class="row">
<dl class="link-list"> <dl class="link-list">
<dt>关于我们</dt> <dt>关于我们</dt>
...@@ -164,9 +132,9 @@ ...@@ -164,9 +132,9 @@
</dl> </dl>
<dl class="link-list" style="margin-right: 0"> <dl class="link-list" style="margin-right: 0">
<dt>联系我们</dt> <dt>联系我们</dt>
<dd>咨询：13434595320 (9:00 ~ 22:00 周一到周六)</dd> <dd>咨询：+852 35808309</dd>
<dd>邮箱：tdp@ichunt.com</dd> <dd>邮箱：info@hopsdahk.com</dd>
<dd>地址：深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋10楼</dd> <dd>地址：香港九龙观塘成业街27号日昇中心3楼301B 室</dd>
</dl> </dl>
</div> </div>
</div> </div>
...@@ -187,32 +155,8 @@ ...@@ -187,32 +155,8 @@
<div class="show"> <div class="show">
<p class="title">业务咨询</p> <p class="title">业务咨询</p>
<div class="text"> <div class="text">
<p style="margin-bottom: 6px;">电话：13434595320</p> <p style="margin-bottom: 6px;">电话：+852-3468-4620</p>
<p>邮箱：tdp@ichunt.com</p> <p>info@hopsdahk.com</p>
</div>
</div>
</li>
<li class="row rowCenter verCenter">
<div class="box column rowCenter verCenter">
<i class="iconfont icon-weixin"></i>
<span>微信</span>
</div>
<div class="show">
<p class="title">微信咨询</p>
<div class="code">
<img src="./images/weixin.png" alt="">
</div>
</div>
</li>
<li class="row rowCenter verCenter">
<div class="box column rowCenter verCenter">
<i class="iconfont icon-qq"></i>
<span>QQ</span>
</div>
<div class="show">
<p class="title">QQ咨询</p>
<div class="code">
<img src="./images/qq.png" alt="">
</div> </div>
</div> </div>
</li> </li>
......
js/global.js
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
}); });
this.menuChnage(); this.menuChnage();
this.mapChange();
return this; return this;
}, },
...@@ -64,11 +65,47 @@ ...@@ -64,11 +65,47 @@
}); });
}); });
}, },
mapChange: function () {
if ($("#map").length > 0) {
// 初始化地图
var map = new BMap.Map("map");
var point = new BMap.Point(114.23859, 22.313236); // 香港九龙观塘成业街27号日昇中心的经纬度
map.centerAndZoom(point, 18); // 设置中心点和缩放级别
// 添加标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 设置标注跳动
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
// 信息窗口内容
var infoContent = "<div style='line-height:1.5;'>" +
"<p style='font-weight: bold;color: #000;'>富事达香港有限公司</p>" +
"<p>电话：+852 34684620</p>" +
"<p>联系人：钟润华 先生 ( MR.CHUNG)</p>" +
"<p>地址：香港九龙观塘成业街27号日昇中心12楼1216室</p>" +
"</div>";
// 添加信息窗口
var infoWindow = new BMap.InfoWindow(infoContent);
map.openInfoWindow(infoWindow, point); // 页面加载时打开信息窗口
// 点击标注时再次打开信息窗口
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point);
});
}
},
handleBind: function (opt) { handleBind: function (opt) {
$(document).on('click', '.customerBtn', function (event) { $(document).on('click', '.customerBtn', function (event) {
event.preventDefault(); event.preventDefault();
var cooperationPosition = $('.cooperation').offset().top-150; var cooperationPosition = $('.cooperation').offset().top - 150;
$('html, body').animate({ $('html, body').animate({
scrollTop: cooperationPosition scrollTop: cooperationPosition
}, 'slow'); }, 'slow');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment