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 {
.head-wrap .slideBox .slide-text-other {
position: absolute;
left: 50%;
bottom: 58px;
top: 200px;
margin-left: -640px;
width: 1280px;
}
......@@ -401,14 +401,14 @@ body {
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
margin-bottom: 8px;
}
.head-wrap .slideBox .slide-text-other .t2 {
width: 1064px;
font-size: 18px;
color: #FFFFFF;
line-height: 25px;
margin-bottom: 44px;
line-height: 35px;
opacity: 0.8;
}
.head-wrap.head-wrap-pic {
height: 880px;
......@@ -417,14 +417,14 @@ body {
height: 880px;
}
.brand {
padding: 70px 0 80px 0;
padding: 70px 0 70px 0;
}
.brand .title {
font-size: 38px;
color: #000;
font-weight: bold;
line-height: 53px;
margin-bottom: 23px;
margin-bottom: 50px;
}
.brand .list li {
position: relative;
......@@ -438,64 +438,42 @@ body {
}
.brand .list li .box {
display: block;
overflow: hidden;
}
.brand .list li .box img {
width: 620px;
height: 360px;
object-fit: cover;
display: block;
transition: transform 0.4s linear;
}
.brand .list li .box .text {
position: absolute;
bottom: 24px;
left: 20px;
font-size: 24px;
color: #ffffff;
line-height: 33px;
}
.brand .list li .show {
position: absolute;
bottom: 0px;
left: 0px;
right: 0;
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;
height: 123px;
background: linear-gradient(220deg, #2B618B 0%, #2A3138 50%, #373F50 0.5%);
}
.brand .list li .show .title {
.brand .list li .box .text .t1 {
margin-top: 22px;
padding-left: 46px;
font-size: 24px;
color: #ffffff;
font-weight: bold;
line-height: 33px;
line-height: 36px;
margin-bottom: 4px;
}
.brand .list li .show .text {
font-size: 14px;
.brand .list li .box .text .t2 {
padding-left: 46px;
width: 496px;
font-size: 16px;
color: #ffffff;
line-height: 20px;
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;
line-height: 25px;
}
.brand .list li:hover .show {
opacity: 1;
transform: translateY(0);
.brand .list li .box:hover img {
transform: scale(1.1);
}
.about {
padding: 70px 0 80px 0;
......@@ -534,6 +512,120 @@ body {
color: #ffffff;
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 {
background: #262626;
padding: 68px 0 0px 0;
......
css/style.less
......@@ -246,7 +246,7 @@
.slide-text-other {
position: absolute;
left: 50%;
bottom: 58px;
top: 200px;
margin-left: -640px;
width: 1280px;
......@@ -255,15 +255,15 @@
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
margin-bottom: 8px;
}
.t2 {
width: 1064px;
font-size: 18px;
color: #FFFFFF;
line-height: 25px;
margin-bottom: 44px;
line-height: 35px;
opacity: 0.8;
}
}
}
......@@ -278,14 +278,14 @@
}
.brand {
padding: 70px 0 80px 0;
padding: 70px 0 70px 0;
.title {
font-size: 38px;
color: #000;
font-weight: bold;
line-height: 53px;
margin-bottom: 23px;
margin-bottom: 50px;
}
.list {
......@@ -303,75 +303,48 @@
.box {
display: block;
overflow: hidden;
img {
width: 620px;
height: 360px;
object-fit: cover;
display: block;
transition: transform 0.4s linear;
}
.text {
position: absolute;
bottom: 24px;
left: 20px;
font-size: 24px;
color: #ffffff;
line-height: 33px;
}
}
.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;
bottom: 0px;
left: 0px;
right: 0;
width: 100%;
height: 123px;
background: linear-gradient(220deg, #2B618B 0%, #2A3138 50%, #373F50 0.5%);
span {
font-size: 14px;
color: #FFFFFF;
margin-right: 8px;
.t1 {
margin-top: 22px;
padding-left: 46px;
font-size: 24px;
color: #ffffff;
font-weight: bold;
line-height: 36px;
margin-bottom: 4px;
}
.iconfont {
color: #FFFFFF;
font-size: 12px;
.t2 {
padding-left: 46px;
width: 496px;
font-size: 16px;
color: #ffffff;
line-height: 25px;
}
}
}
&:hover {
.show {
opacity: 1;
transform: translateY(0);
&:hover {
img {
transform: scale(1.1);
}
}
}
}
......@@ -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 {
background: #262626;
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 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="猎豹出海">
<meta name="description" content="猎豹出海">
<meta name="keywords" content="香港富事达">
<meta name="description" content="香港富事达">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;">
<meta name="baidu-site-verification" content="B1YyUdsoGu">
<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/animate.css">
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
......@@ -25,8 +25,8 @@
<ul class="menu row verCenter">
<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="/contact.html">联系我们</a></li>
</ul>
</div>
</div>
......@@ -64,60 +64,24 @@
<ul class="list row rowCenter verCenter" style="margin-bottom: 16px;">
<li class="row wow fadeInDown">
<div class="box">
<img src="./images/service-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>
<img src="./images/index-1.png" alt="">
</div>
</li>
<li class="row wow fadeInDown" data-wow-delay="0.2s">
<li class="row wow fadeInDown">
<div class="box">
<img src="./images/service-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>
<img src="./images/index-2.png" alt="">
</div>
</li>
</ul>
<ul class="list row rowCenter verCenter">
<li class="row wow fadeInDown">
<div class="box">
<img src="./images/service-4.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>
<img src="./images/index-3.png" alt="">
</div>
</li>
<li class="row wow fadeInDown" data-wow-delay="0.2s">
<li class="row wow fadeInDown">
<div class="box">
<img src="./images/service-5.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>
<img src="./images/index-4.png" alt="">
</div>
</li>
</ul>
......@@ -130,12 +94,16 @@
<ul class="list row rowCenter verCenter" style="margin-bottom: 16px;">
<li class="row wow fadeInDown">
<div class="box">
<img src="./images/service-1.png" alt="">
<a href="contact.html">
<img src="./images/index-5.png" alt="">
</a>
</div>
</li>
<li class="row wow fadeInDown" data-wow-delay="0.2s">
<div class="box">
<img src="./images/service-2.png" alt="">
<a href="product.html">
<img src="./images/index-6.png" alt="">
</a>
</div>
</li>
</ul>
......@@ -146,7 +114,7 @@
<div class="main">
<div class="row bothSide verCenter">
<div class="row">
<p class="title">香港富事达</p>
<p class="title">香港富事达</p>
<div class="row">
<dl class="link-list">
<dt>关于我们</dt>
......@@ -164,9 +132,9 @@
</dl>
<dl class="link-list" style="margin-right: 0">
<dt>联系我们</dt>
<dd>咨询：13434595320 (9:00 ~ 22:00 周一到周六)</dd>
<dd>邮箱：tdp@ichunt.com</dd>
<dd>地址：深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋10楼</dd>
<dd>咨询：+852 35808309</dd>
<dd>邮箱：info@hopsdahk.com</dd>
<dd>地址：香港九龙观塘成业街27号日昇中心3楼301B 室</dd>
</dl>
</div>
</div>
......@@ -187,32 +155,8 @@
<div class="show">
<p class="title">业务咨询</p>
<div class="text">
<p style="margin-bottom: 6px;">电话：13434595320</p>
<p>邮箱：tdp@ichunt.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="">
<p style="margin-bottom: 6px;">电话：+852-3468-4620</p>
<p>info@hopsdahk.com</p>
</div>
</div>
</li>
......
js/global.js
......@@ -20,6 +20,7 @@
});
this.menuChnage();
this.mapChange();
return this;
},
......@@ -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) {
$(document).on('click', '.customerBtn', function (event) {
event.preventDefault();
var cooperationPosition = $('.cooperation').offset().top-150;
var cooperationPosition = $('.cooperation').offset().top - 150;
$('html, body').animate({
scrollTop: cooperationPosition
}, '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