Skip to content

梁建民 / liebaochHtml

Go to a project
Commit 05508e59 by LJM
Options

add

parent 8a3dde66
Expand all
Inline Side-by-side
Showing with 486 additions and 20 deletions
.gitignore 0 → 100644
/.htaccess
about.html 0 → 100644
This diff is collapsed. Click to expand it.
css/base.less
......@@ -107,6 +107,7 @@ html, body {
body {
overflow-x: hidden;
}
.row {
display: flex;
flex-direction: row;
......@@ -137,3 +138,38 @@ body {
width: 1280px;
margin: 0 auto;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
background: transparent;
}
::-webkit-scrollbar-track {
background: white;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: #E6E6E6;
background-clip: padding-box;
border-radius: 2px;
transition: all 0.5s;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
::-webkit-scrollbar-corner {
background: #f6f6f6;
}
.mini-bar::-webkit-scrollbar {
width: 6px;
height: 6px
}
.mini-bar::-webkit-scrollbar-thumb {
border-radius: 3px
}
\ No newline at end of file
css/font/demo_index.html
......@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe8f1;</span>
<div class="name">进入箭头2</div>
<div class="code-name">&amp;#xe8f1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7b0;</span>
<div class="name">多语言</div>
<div class="code-name">&amp;#xe7b0;</div>
......@@ -174,9 +180,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1712542359775') format('woff2'),
url('iconfont.woff?t=1712542359775') format('woff'),
url('iconfont.ttf?t=1712542359775') format('truetype');
src: url('iconfont.woff2?t=1712558196492') format('woff2'),
url('iconfont.woff?t=1712558196492') format('woff'),
url('iconfont.ttf?t=1712558196492') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -203,6 +209,15 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-jinrujiantou"></span>
<div class="name">
进入箭头2
</div>
<div class="code-name">.icon-jinrujiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duoyuyan"></span>
<div class="name">
多语言
......@@ -384,6 +399,14 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jinrujiantou"></use>
</svg>
<div class="name">进入箭头2</div>
<div class="code-name">#icon-jinrujiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duoyuyan"></use>
</svg>
<div class="name">多语言</div>
......
css/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 4497966 */
src: url('iconfont.woff2?t=1712542359775') format('woff2'),
url('iconfont.woff?t=1712542359775') format('woff'),
url('iconfont.ttf?t=1712542359775') format('truetype');
src: url('iconfont.woff2?t=1712558196492') format('woff2'),
url('iconfont.woff?t=1712558196492') format('woff'),
url('iconfont.ttf?t=1712558196492') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-jinrujiantou:before {
content: "\e8f1";
}
.icon-duoyuyan:before {
content: "\e7b0";
}
......
css/font/iconfont.json
......@@ -6,6 +6,13 @@
"description": "",
"glyphs": [
{
"icon_id": "3088086",
"name": "进入箭头2",
"font_class": "jinrujiantou",
"unicode": "e8f1",
"unicode_decimal": 59633
},
{
"icon_id": "39843205",
"name": "多语言",
"font_class": "duoyuyan",
......
css/font/iconfont.ttf
No preview for this file type
css/font/iconfont.woff
No preview for this file type
css/font/iconfont.woff2
No preview for this file type
css/style.min.css
......@@ -162,46 +162,177 @@ body {
width: 1280px;
margin: 0 auto;
}
.head {
::-webkit-scrollbar {
width: 7px;
height: 7px;
background: transparent;
}
::-webkit-scrollbar-track {
background: white;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: #E6E6E6;
background-clip: padding-box;
border-radius: 2px;
transition: all 0.5s;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
::-webkit-scrollbar-corner {
background: #f6f6f6;
}
.mini-bar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.mini-bar::-webkit-scrollbar-thumb {
border-radius: 3px;
}
.head-wrap {
height: 720px;
}
.head-wrap .head {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
background: url("../images/head-bg.png") no-repeat top center;
z-index: 9;
}
.head .main {
.head-wrap .head.fixedClass {
background: #0D8DDA;
position: fixed;
animation: fadeInDown 0.4s ease;
}
.head-wrap .head .main {
height: 100px;
border-bottom: 1px solid rgba(243, 243, 243, 0.1);
}
.head .main .logo {
.head-wrap .head .main .logo {
width: 122px;
height: 58px;
}
.head .main .menu-box {
.head-wrap .head .main .menu-box {
height: 100%;
}
.head .main .menu-box .menu {
.head-wrap .head .main .menu-box .menu {
height: 100%;
}
.head .main .menu-box .menu li {
.head-wrap .head .main .menu-box .menu li {
position: relative;
height: 100%;
margin-right: 40px;
transition: all 0.4s ease;
}
.head .main .menu-box .menu li a {
.head-wrap .head .main .menu-box .menu li a {
font-size: 16px;
color: #FFFFFF;
}
.head .main .menu-box .simplified-chinese .iconfont {
.head-wrap .head .main .menu-box .menu li.curr:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 5px;
background: #FFFFFF;
content: "";
}
.head-wrap .head .main .menu-box .simplified-chinese .iconfont {
margin-right: 4px;
font-size: 20px;
color: #cbdaeb;
}
.head .main .menu-box .simplified-chinese span {
.head-wrap .head .main .menu-box .simplified-chinese span {
font-size: 16px;
color: #ffffff;
opacity: 0.8;
}
.slide-box {
.head-wrap .slideBox {
position: relative;
width: 100%;
height: 620px;
height: 720px;
overflow: hidden;
background: #365C89;
}
.head-wrap .slideBox .bd {
width: 100%;
height: 720px;
}
.head-wrap .slideBox .bd li {
width: 100%;
height: 720px;
}
.head-wrap .slideBox .bd li img {
display: block;
width: 100%;
height: 720px;
object-fit: cover;
}
.head-wrap .slideBox .hd {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
width: 100px;
margin: 0 auto;
text-align: center;
}
.head-wrap .slideBox .hd ul li {
width: 8px;
height: 8px;
cursor: pointer;
background: #FFFFFF;
border-radius: 4px;
margin-right: 8px;
transition: all 0.4s ease;
}
.head-wrap .slideBox .hd ul li:last-child {
margin-right: 0;
}
.head-wrap .slideBox .hd ul li.on {
width: 28px;
height: 8px;
background: #0D8DDA;
border-radius: 4px;
}
.head-wrap .slideBox .slide-text {
position: absolute;
left: 50%;
top: 200px;
margin-left: -640px;
width: 1280px;
}
.head-wrap .slideBox .slide-text ul li {
display: none;
}
.head-wrap .slideBox .slide-text .t1 {
font-size: 70px;
color: #ffffff;
font-weight: bold;
line-height: 98px;
margin-bottom: 13px;
}
.head-wrap .slideBox .slide-text .t2 {
font-size: 18px;
color: #FFFFFF;
opacity: 0.8;
line-height: 25px;
margin-bottom: 44px;
}
.head-wrap .slideBox .slide-text .btn {
width: 180px;
height: 52px;
background: #F8B62D;
border-radius: 8px;
font-size: 18px;
color: #ffffff;
font-weight: bold;
}
.service {
padding: 70px 0 80px 0;
}
......@@ -217,20 +348,21 @@ body {
width: 416px;
height: 360px;
margin-right: 16px;
overflow: hidden;
}
.service .list li:last-child {
margin-right: 0;
}
.service .list li a {
.service .list li .box {
display: block;
}
.service .list li a img {
.service .list li .box img {
width: 416px;
height: 360px;
object-fit: cover;
display: block;
}
.service .list li a .text {
.service .list li .box .text {
position: absolute;
bottom: 24px;
left: 20px;
......@@ -238,6 +370,50 @@ body {
color: #ffffff;
line-height: 33px;
}
.service .list li .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;
}
.service .list li .show .title {
font-size: 24px;
color: #ffffff;
font-weight: bold;
line-height: 33px;
}
.service .list li .show .text {
font-size: 14px;
color: #ffffff;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service .list li .show .links {
margin-top: 42px;
display: block;
}
.service .list li .show .links span {
font-size: 14px;
color: #FFFFFF;
margin-right: 8px;
}
.service .list li .show .links .iconfont {
color: #FFFFFF;
font-size: 12px;
}
.service .list li:hover .show {
opacity: 1;
transform: translateY(0);
}
.international-logistics-services {
padding: 70px 0 140px 0;
background: url("../images/international-logistics-services.png") no-repeat top center;
......@@ -307,6 +483,7 @@ body {
height: 160px;
background: #F3F3F3;
margin-right: 16px;
transition: all 0.4s ease;
}
.service-categories .list li:last-child {
margin-right: 0;
......@@ -327,6 +504,15 @@ body {
font-weight: bold;
line-height: 28px;
}
.service-categories .list li:hover {
background: #0D8DDA;
}
.service-categories .list li:hover .iconfont {
color: #FFFFFF;
}
.service-categories .list li:hover span {
color: #FFFFFF;
}
.cooperation {
padding: 81px 0 159px 0;
background: url("../images/cooperation.png") top center;
......@@ -358,6 +544,7 @@ body {
color: #000000;
font-weight: bold;
line-height: 33px;
margin-bottom: 9px;
}
.cooperation .cooperation-form-box .box .tip {
font-size: 12px;
......@@ -365,6 +552,11 @@ body {
opacity: 0.8;
line-height: 17px;
}
.cooperation .cooperation-form-box .box .cooperation-form {
margin-top: 19px;
padding-top: 20px;
border-top: 1px solid #F3F3F3;
}
.cooperation .cooperation-form-box .box .cooperation-form .form-input label {
font-size: 14px;
color: #474747;
......@@ -421,4 +613,126 @@ body {
font-weight: bold;
letter-spacing: 2px;
}
.footer {
padding: 68px 0 0px 0;
}
.footer .logo {
width: 200px;
height: 96px;
margin-right: 65px;
}
.footer .logo img {
width: 200px;
height: 96px;
display: block;
}
.footer .link-list {
margin-right: 64px;
}
.footer .link-list dt {
margin-bottom: 26px;
font-size: 16px;
color: #000000;
font-weight: bold;
line-height: 22px;
white-space: nowrap;
}
.footer .link-list dd {
margin-bottom: 10px;
white-space: nowrap;
}
.footer .link-list dd a {
font-size: 14px;
color: #474747;
line-height: 20px;
}
.footer .code {
width: 128px;
height: 128px;
background: #F3F3F3;
}
.footer .copyright {
margin-top: 37px;
padding: 14px 0 20px 0;
border-top: 1px solid #F3F3F3;
font-size: 14px;
color: #989898;
line-height: 20px;
text-align: center;
}
.page-bar {
position: fixed;
right: 0;
bottom: 10%;
z-index: 1;
width: 62px;
background: #FFFFFF;
box-shadow: 0px 2px 12px 0px rgba(125, 162, 185, 0.22);
}
.page-bar ul {
width: 62px;
padding: 16px 0;
}
.page-bar ul li {
position: relative;
}
.page-bar ul li .box {
cursor: pointer;
}
.page-bar ul li .box .iconfont {
font-size: 36px;
color: #0d8dda;
}
.page-bar ul li .box span {
font-size: 12px;
color: #989898;
}
.page-bar ul li .show {
position: absolute;
left: -218px;
top: 0;
width: 198px;
padding: 20px;
box-sizing: border-box;
background: #FFFFFF;
box-shadow: 0px 2px 12px 0px rgba(125, 162, 185, 0.22);
z-index: 9;
display: none;
}
.page-bar ul li .show .title {
font-size: 16px;
color: #000000;
font-weight: bold;
line-height: 22px;
margin-bottom: 12px;
}
.page-bar ul li .show .text p {
font-size: 14px;
color: #474747;
line-height: 20px;
white-space: nowrap;
}
.page-bar ul li .show .code {
width: 158px;
height: 158px;
background: #F3F3F3;
}
.page-bar ul li:first-child:hover .show {
top: -14px;
}
.page-bar ul li:hover .show {
display: block;
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
favicon.ico
No preview for this file type
js/global.js
......@@ -5,10 +5,89 @@
},
created: function () {
new WOW().init();//全局页面动画初始化
$(".slideBox").slide({
mainCell: ".bd ul",
titCell: ".hd li",
autoPlay: true,
trigger: 'click',
interTime: 5000,
delayTime: 5000,
startFun: function (i) {
$(".slide-text li").eq(i).show().addClass('fadeInLeft').siblings('li').hide();
}
});
return this;
},
handleBind: function (opt) {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$(".head").addClass('fixedClass');
} else {
$(".head").removeClass('fixedClass');
}
if ($(this).scrollTop() > 250) {
$(".scollTopClass").show();
} else {
$(".scollTopClass").hide();
}
})
$(document).on('click', '.scollTopClass', function () {
$('html, body').animate({
scrollTop: 0
}, 800);
});
layui.form.on('submit(addCheetahContact)', function (data) {
var selectedValues = [];
$("input[type='checkbox']:checked").each(function () {
selectedValues.push($(this).val());
});
// 将选中的值用逗号分隔成字符串
var selectedString = selectedValues.join(',');
// 将处理后的值添加到 data.field 中
data.field.type_str = selectedString;
//需求判断
if (!selectedString) {
layer.tips('请选择您的需求', $(".typeClass"), {tips: [1, '#000']});
return false;
}
var index = layer.load(1);
// 获取当前域名
var currentDomain = window.location.hostname;
// 判断当前域名是否包含 'liebao'
if (currentDomain.includes('liebao')) {
var apiUrl = 'http://api.liexin.com/supplyopen/addCheetahContact';
} else {
var apiUrl = 'https://api.ichunt.com/supplyopen/addCheetahContact';
}
$.ajax({
type: 'POST',
url: apiUrl,
data: data.field,
xhrFields: {withCredentials: true},
success: function (res) {
layer.close(index);
layer.msg('提交成功', {shift: 0, time: 2000}, function () {
window.location.reload();
});
},
error: function () {
layer.closeAll('loading');
layer.msg('网络出现问题，请重试！');
}
});
});
return this;
},
}, $(function () {
......
nginx.htaccess 0 → 100644
File mode changed
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