# 外贸易4.6.0 优化样式
# header头部
<header class="header" id="head-index">
<div class="max1600 top-mid-flex flex2 a-center j-space-between">
<div class="logo" {{ inject('visual')->url('config', 'logoes') }}>
<a href="{{ url('/') }}"><img src="{{ inject('setting')->config('logoes') }}"></a>
</div>
<div class="top_right flex2 a-center">
<div class="navbar-nav-box">
<ul class="x-menu d-none d-xl-flex" {{ inject('visual')->url('nav') }}>
@foreach (inject('nav')->nav() as $key => $value)
<li data-id="{{ $key }}">
<a href="{{ $value->linkurl }}">
{{ $value->description->cname or $value->cname }} @if(!$value->children->isEmpty() || $value->content_model)<i class="fa fa-angle-down"></i>@endif
</a>
@if(!$value->children->isEmpty())
<ul class="x-sub-menu">
@foreach ($value->children as $val)
<li><a href="{{ $val->linkurl }}">{{ $val->description->cname }}</a></li>
@endforeach
</ul>
@endif
@if($value->content_model && !inject('category')->cate($value->content_model, $value->content_model_id)->isEmpty())
<ul class="x-sub-menu">
@foreach (inject('category')->cate($value->content_model, $value->content_model_id) as $val)
<li><a href="{{ $val->present()->url($value->content_model) }}">{{ $val->description->cname }}</a></li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</div>
<div class="header-ss hidden-xs hidden-sm">
<div class="ss_btn"></div>
<div class="search-box">
<form action="{{ url('search') }}" method="GET" class="ss-search">
<input type="text" name="keyword" id="keyword" placeholder="" />
<input type="submit" id="s_btn" value="" />
</form>
</div>
</div>
<div class="btn-group language-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
@foreach (inject('lang')->show() as $key => $value)
@if($value->slug == config('lang'))
<img src="{{ url($value->img) }}" alt="{{ $value->title }}" title="{{ $value->title }}" width="16" height="11">
<span>{{ $value->title }}</span>
@endif
@endforeach
</button>
<ul class="dropdown-menu">
@foreach (inject('lang')->show() as $key => $value)
@if($value->slug != config('lang'))
<li><a href="{{ $value->url }}"><img src="{{ url($value->img) }}" width="16" height="11"> {{ $value->title }}</a></li>
@endif
@endforeach
</ul>
</div>
<div class="menu-handler">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</header>
# header头部css
/* */
p{margin:0;}
body{overflow-x:hidden;}
.com-img{ display:block; overflow:hidden;}
.com-img img{ transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
.com-img:hover img{transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);-ms-transform:scale(1.2);}
.com-img2{ display:block; overflow:hidden;}
.com-img2 img{ transition:transform .3s ease-out; -webkit-transition:transform .3s ease-out; -moz-transition:transform .3s ease-out; -o-transition:transform .3s ease-out;}
.com-img2:hover img{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1);-ms-transform:scale(1.1);}
.relative{position: relative;}
.flex2{ display: flex;display: -webkit-flex;}
.wrap{flex-wrap:wrap}
.j-space-between{justify-content:space-between}
.j-flex-start{justify-content:flex-start}
.j-flex-end{justify-content:flex-end}
.j-center{justify-content:center}
.a-j-center{align-items:center;justify-content:center}
.a-center{align-items:center}
.a-flex-start{align-items:flex-start}
.a-flex-end{align-items:flex-end}
.clamp1 {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.clamp2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.clamp3 {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.clamp4 {display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.max1600{max-width: 1600px;width:90.625%;margin:0 auto;}
.max1500{max-width: 1500px;width:90.625%;margin:0 auto;}
.max1400{max-width: 1430px;padding-left: 15px;padding-right: 15px;margin: 0 auto;}
.max1200{max-width: 1230px;padding-left: 15px;padding-right: 15px;margin: 0 auto;}
/* header */
.header{left:0;top:0;width:100%;z-index:999;position:fixed;-webkit-transition:all .3s ease;transition:all .3s ease}
.top-mid-flex{height:110px}
.logo{position:relative}
.logo a{display:block}
.logo a img{max-width:100%;max-height:58px}
.header-ss{margin-left:1.25vw;position:relative;width:36px;height:36px}
.header-ss .ss_btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;background:url(//wm.cdn.cn86.cn/huizhoukerui/2025/03/912029ca77vmcw3b.png) no-repeat center;cursor:pointer}
.search-box{position:absolute;top:100%;right:0;z-index:99;display:none;background:#fff;padding:16px 20px;-webkit-box-shadow:0 0 15px 0 rgb(0 0 0 / 30%);box-shadow:0 0 15px 0 rgb(0 0 0 / 30%)}
.header-ss .ss-search{width:220px;position:relative;background:#fff;border:1px solid var(--main-theme-color);display:flex}
.header-ss .ss-search input{height:34px;line-height:34px;outline:0;border:none;font-size:0}
.header-ss .ss-search #keyword{width:calc(100% - 50px);padding-left:10px;color:#000;font-size:14px}
.header-ss .ss-search #s_btn{width:50px;background-color:var(--main-theme-color);background-position:center center;background-repeat:no-repeat;background-image:url(//cdn.myxypt.com/1a7e079f/24/06/a56ff77c79b014cb5708c10b590703e9baedb3fa.png)}
.x-menu{position:relative}
.x-menu>li{position:relative;text-align:center}
.x-menu>li>a{display:block;font-size:18px;color:#fff;height:110px;line-height:110px;font-weight:400}
.x-menu>li:hover>a{color:var(--main-theme-color)!important}
.x-sub-menu{position:absolute;z-index:999;width:150%;left:-25%;top:100%;display:none;background:#fff;border-radius:0;padding:0 0}
.x-sub-menu>li>a{display:block;text-align:center;font-size:14px;color:#333;line-height:1.5;padding:.6em .3em}
.x-sub-menu>li>a:hover{color:#fff!important;background-color:var(--main-theme-color)}
@media (min-width:1200px){
.x-menu>li{margin-left:15px;margin-right:15px}
}
@media (min-width:1440px){
.x-menu>li{margin-left:22px;margin-right:22px}
}
# main.js 脚本
//返回头部
$(".scroll_to_top2").click(function() { //当点击跳转链接后，回到页面顶部位置
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
$(".ss_btn").click(function() {
$(".search-box").slideToggle();
});
//导航条固定在头部
if ($(window).scrollTop() > 0) {
$('.header').addClass('scroll');
}
$(window).scroll(function() {
var len = $(this).scrollTop();
if (len > 0) {
$('.header').addClass('scroll');
} else {
$('.header').removeClass('scroll')
}
});
/* 导航下拉 */
$(function() {
$(".x-menu>li").hover(function() {
$(this).find('.x-sub-menu').stop(true).slideDown(300);
}, function() {
$(this).find('.x-sub-menu').stop(true).slideUp(300);
});
});
# index 首页
<!--{* banner *}-->
<div class="home-banner overflow" {{ inject('visual')->url('ad', 1) }} data-position-top="80px">
<div class="swiper-wrapper">
@foreach (inject('ad')->ad(1) as $key => $value)
<div class="swiper-slide">
<a href="{{ $value['url'] }}"><img src="{{ $value->img }}" alt="{!! $value['title'] !!}"></a>
</div>
@endforeach
</div>
<div class="swiper-pagination swiper-pagination1"></div>
</div>
<!--Footer-->
@include('theme::common.foot')
<div class="scroll_to_top2 hidden-xs hidden-sm">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</div>
<script src="{{ themePath('js/jquery.SuperSlide.2.1.2.js') }}"></script>
<script src="{{ themePath('js/jquery.countup.min.js') }}"></script>
<script src="{{ themePath('js/jquery.waypoints.min.js') }}"></script>
<script>
$('.counter').countUp();
</script>
<script>
// banner
var banner_swiper = new Swiper(".home-banner", {
speed: 600,
loop: true,
autoplay: {
delay: 8000,
stopOnLastSlide: false,
disableOnInteraction: false,
waitForTransition: false,
},
pagination: {
el: '.swiper-pagination1',
clickable: true,
},
});
</script>
# banner轮播图css
/* banner */
.home-banner {
width: 100%;
position: relative;
}
.home-banner .swiper-slide {
position: relative;
overflow: hidden;
}
.home-banner .swiper-slide a {
display: block;
}
.home-banner .swiper-slide a > img {
display: block;
width: 100%;
}
.home-banner .swiper-pagination1 {
bottom: 30px;
}
.home-banner .swiper-pagination1 .swiper-pagination-bullet {
width: 50px;
height: 3px;
background: #fff;
border-radius: 0%;
margin: 0 10px!important;
transition: width .3s ease;
opacity: 1;
}
.home-banner .swiper-pagination1 .swiper-pagination-bullet-active {
background-color: var(--main-theme-color);
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 0;
}
.home-banner .swiper-button-next1,
.home-banner .swiper-button-prev1 {
position: absolute;
width: 54px;
height: 54px;
top: 50%;
margin-top: -27px;
font-size: 0;
outline: none;
border: none;
background: none;
z-index: 99;
border-radius: 50%;
-webkit-border-radius: 50%;
transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.home-banner .swiper-button-prev1 {
left: 2.083vw;
background: url(//wm.cdn.cn86.cn/xinjiuyang/2025/06/6e38c3b7f5esyobb.png) no-repeat center rgba(255, 255, 255, 0.1);
}
.home-banner .swiper-button-next1 {
right: 2.083vw;
background: url(//wm.cdn.cn86.cn/xinjiuyang/2025/06/cf9ba08e30xu7rnw.png) no-repeat center rgba(255, 255, 255, 0.1);
}
.home-banner .swiper-button-prev1:hover {
background-color: var(--main-theme-color);
}
.home-banner .swiper-button-next1:hover {
background-color: var(--main-theme-color);
}
# 手机弹窗分类
<div class="page-wrap-left xymob-menu-click">
<div class="xymob-left-close-btn"><i class="icon-font icon-close"></i></div>
<div class="xypg-left">
<!-- * 分类 * -->
<div class="xypg-left-box xypg-left-menu">
<div class="xypg-left-title">
<h3>产品中心 <span>Product</span></h3>
</div>
<div class="xypg-left-con">
<ul class="xypg-left-nav">
<li data-id="1">
<a href="http://demo.cn86.cn/product/1/">xxx</a>
<div class="first-nav-btn"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- * 手机弹窗按钮 * -->
<div class="page-mob-tool">
<ul>
<li class="xymob-page-navbtn"><span>菜单</span></li>
<li class="xymob-page-backtop"><i class="icon-font icon-top"></i></li>
</ul>
</div>
# js
// 内页手机端端 做的导航弹出特效
$(".xymob-page-navbtn").click(function(){
$(".xymob-menu-click").addClass('click');
$('html,body').addClass('no-scroll');
});
$(".xymob-left-close-btn").click(function(){
$(".xymob-menu-click").removeClass('click');
$('html,body').removeClass('no-scroll');
});
# css
.icon-font{position:relative}
.icon-font:after{content:"";width:30px;height:30px;background-image:url(https://gcdn.myxypt.com/images/icon_spirit.png);background-repeat:no-repeat;position:absolute;left:calc(50% - 15px);top:calc(50% - 15px)}
.xypg-left-box{margin-bottom:20px}
.xypg-left-title{background:#ffb300;padding:10px 20px;position:relative}
.xypg-left-title h3{font-size:20px;color:#fff;line-height:30px;font-weight:700;position:relative;z-index:9}
.xypg-left-title i{position:absolute;left:-5px;top:-9px;font-style:normal;font-size:67px;font-weight:700;opacity:.1;color:#fff;line-height:1;z-index:1;text-transform:uppercase}
.xypg-left-title span{font-weight:400;font-size:16px;color:#fff;opacity:.6;margin-left:10px;text-transform:capitalize}
.xypg-left-title span:before{content:"/";padding-right:5px}
.xypg-left-con{border:1px solid #d2d2d2;border-top:none}
.page-mob-tool{position:fixed;right:15px;bottom:100px;z-index:9999}
.page-mob-tool li.xymob-page-navbtn span{color:#fff;position:relative;z-index:1}
.page-mob-tool li{width:40px;height:40px;line-height:40px;text-align:center;margin-bottom:1px;cursor:pointer;position:relative}
.page-mob-tool li:before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background:#ffb300;opacity:.7}
.page-mob-tool li i{display:block;width:100%;height:100%}
.page-mob-tool li .icon-dots-horizontal:after{background-position:-30px -390px}
.page-mob-tool li .icon-top:after{background-position:-30px -60px}
@media (min-width:992px){.page-mob-tool{display:none}
}
.xymob-left-close-btn{display:none}
@media (max-width:990px){body.no-scroll,html.no-scroll{height:100vh;overflow:hidden}
.xymob-menu-click{position:fixed;width:100vw;overflow-y:scroll;top:0;left:100%;-webkit-transition:all .5s ease;transition:all .5s ease;z-index:999999;height:100vh;background:rgba(0,0,0,.7)}
.xymob-menu-click .page-message-img,.xymob-menu-click .xypg-left-contact,.xymob-menu-click .xypg-left-keys,.xymob-menu-click .xypg-left-news{display:none}
.xymob-menu-click .xymob-left-close-btn{display:block;position:absolute;top:15px;right:15px;width:32px;height:32px;line-height:32px;border-radius:50%;border:1px solid #fff;text-align:center;background:#000}
.xymob-menu-click .xymob-left-close-btn .icon-font{display:block;width:100%;height:100%}
.xymob-menu-click .xymob-left-close-btn .icon-font:after{background-position:-30px -300px}
.xymob-menu-click .xypg-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:90vh;padding:5vh 0}
.xymob-menu-click .xypg-left .xypg-left-menu{width:90%;background:#fff}
.xymob-menu-click.click{left:0}
}
.xypg-left-nav{margin:0 -1px}
.xypg-left-nav>li{position:relative;border-bottom:1px solid #eee}
.xypg-left-nav>li:last-child{border-bottom:none}
.xypg-left-nav>li>a{display:block;font-size:16px;line-height:22px;color:#2e2e2e;padding:15px 18px}
.xypg-left-nav>li .first-nav-btn{position:absolute;z-index:99;width:30px;height:30px;text-align:center;top:10px;right:20px;cursor:pointer;background:url(https://gcdn.myxypt.com/images/icon_spirit.png) 0 -240px no-repeat}
.xypg-left-nav>li .first-nav-btn.clicked{background-position:0 -270px}
.xypg-left-nav>li.clicked>a,.xypg-left-nav>li:hover>a{color:#ffb300}
.xypg-left-nav>li.clicked .first-nav-btn,.xypg-left-nav>li:hover .first-nav-btn{color:#ffb300}
.xypg-left-nav .xypg-left-subnav{display:none;padding:0 10px}
.xypg-left-nav .xypg-left-subnav>li{border-top:1px dashed #eee}
.xypg-left-nav .xypg-left-subnav>li>a{padding:8px;display:block;line-height:20px;color:#818181;font-size:16px}
.xypg-left-nav .xypg-left-subnav>li>a:hover{color:#ffb300}
.xypg-left-nav .xypg-left-subnav>li.clicked>a{color:#ffb300}
.xypg-left-nav .xypg-left-threenav>li>a{padding:5px 10px;display:block;font-size:14px;line-height:24px;color:#999}
.xypg-left-nav .xypg-left-threenav>li>a:before{content:'\2014 '}
.xypg-left-nav .xypg-left-threenav>li>a:hover{color:#ffb300}
.xypg-left-nav .xypg-left-threenav>li.clicked>a{color:#ffb300}
@media (max-width:990px){.xypg-left-nav .xypg-left-threenav{display:block}
}
@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/c/font_464030_rcu0lm6t1ck.woff2?t=1713424282709) format('woff2'),url(//at.alicdn.com/t/c/font_464030_rcu0lm6t1ck.woff?t=1713424282709) format('woff'),url(//at.alicdn.com/t/c/font_464030_rcu0lm6t1ck.ttf?t=1713424282709) format('truetype')}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-back:before{content:"\e620"}
.icon-close:before{content:"\e61a"}
# 外贸内页分类
# 分类模板
<!--{* 产品分类 *}-->
<div class="nei-cate hidden-xs hidden-sm">
<div class="max1460 clearfix">
<ul class="wmy-cate-list" {{ inject('visual')->url('product-cate') }}>
@foreach (inject('category')->cate() as $value)
<li data-id="{{ $cate->id }}" data-value-id="{{ $value->id }}" @if($value->id == $cate->id ) class="clicked" @endif>
<a href="{{ $value->present()->url }}" title="{{ $value->description->cname }}">{{ $value->description->cname }}</a>
@if(!$value->children->isEmpty())
<ul class="erji-category-list">
@foreach ($value->children as $val)
<li><a href="{{ $val->present()->url }}">{{ $val->description->cname }}</a></li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</div>
</div>
<!--{* 新闻分类 *}-->
<div class="nei-cate hidden-xs hidden-sm">
<div class="max1460 clearfix">
<ul class="wmy-cate-list" {{ inject('visual')->url('news-cate') }}>
@foreach (inject('category')->cate('news') as $value)
<li data-id="{{ $cate->id }}" data-value-id="{{ $value->id }}" @if($value->id == $cate->id ) class="clicked" @endif>
<a href="{{ $value->present()->url('news') }}" title="{{ $value->description->cname }}">{{ $value->description->cname }}</a>
@if(!$value->children->isEmpty())
<ul class="erji-category-list">
@foreach ($value->children as $val)
<li><a href="{{ $val->present()->url('news') }}">{{ $val->description->cname }}</a></li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</div>
</div>
<!-- 分类js -->
<script>
$(function() {
$(".wmy-cate-list>li").hover(function() {
$(this).find('.erji-category-list').stop(true).slideDown(300);
}, function() {
$(this).find('.erji-category-list').stop(true).slideUp(300);
});
});
</script>
<!-- 分类样式 -->
<style>
.nei-cate{position:relative;background:#000}
.wmy-cate-list{display:flex;flex-wrap:wrap}
.wmy-cate-list>li{text-align:center;position:relative}
.wmy-cate-list>li>a{transition:all .2s linear;padding:20px 3.125vw 20px 3.125vw;display:block;font-size:16px;color:#fff}
.wmy-cate-list>li.clicked>a,.wmy-cate-list>li:hover>a{color:#000;background:#fff}
.erji-category-list{display:none;position:absolute;background:#f5f5f5;left:0;top:100%;width:100%;z-index:99}
.erji-category-list>li{position:relative}
.erji-category-list>li>a{display:block;line-height:1.7;padding:.5em 0;font-size:16px;color:#333}
.erji-category-list>li>a:hover{background-color:var(--main-theme-color);color:#fff!important}
</style>
# 新闻列表+高亮
// 列表高亮
<li data-id="{{ $cate->id }}" data-value-id="{{ $value->id }}" @if($value->id == $cate->id ) class="clicked" @endif> </li>
// 新闻顶级id
{{ $rootId }}
// 新闻分类id
{{ $cate->id }}
// 新闻分类别名 (页面路径)
{{ $cate->slug }}
// 新闻分类名称
{{ $cate->description->cname }}
# 新闻详情+高亮
// 详情高亮
<li data-id="{{ $news->cates->id }}" data-value-id="{{ $value->id }}" @if($value->id == $news->cates->id ) class="clicked" @endif> </li>
// 新闻顶级id
{{ $rootId }}
// 新闻分类id
{{ $news->cates->id }}
// 新闻分类别名 (页面路径)
{{ $news->cates->slug }}
// 新闻分类名称
{{ $news->cates->description->cname }}
// 新闻标题
{{ $news->description->title or '' }}
# 外贸内页banner
<div class="page-banner" {{ inject('visual')->url('ad', 4) }} data-position-top="80px">
<img src="{{ inject('ad')->single(4, 2, 'img') }}" alt="{{ inject('ad')->single(4, 2, 'title') }}">
<div class="banner-fix">
<div class="fll-con max1600">
<h4>{{ inject('setting')->langs('web', 'news_center') }}</h4>
<p>{{ inject('ad')->single(4, 2, 'summary') }}</p>
</div>
</div>
</div>
<style>
.page-banner{position:relative}
.page-banner>img{display:block;width:100%}
.banner-fix{position:absolute;left:0;top:0;z-index:99;width:100%;height:100%}
.banner-fix .fll-con{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;height:100%}
.banner-fix h4{font-size:72px;line-height:1;font-family:"思源黑体 CN";margin-bottom:20px;font-weight:400;color:#fff}
.banner-fix p{line-height:1;font-weight:100;letter-spacing:3px;text-transform:uppercase;font-family:"Microsoft Yahei";font-size:36px;color:#fff}
@media (max-width:992px){
.page-banner>img{height:300px;object-fit:cover}
.banner-fix h4{font-size:30px}
.banner-fix p{font-size:16px}
}
</style>
# 外贸易单页banner
@if($page->id == 1)
<div class="nbanner" {{ inject('visual')->url('ad', 4) }} data-position-top="80px">
<img src="{{ inject('ad')->single(4, 3, 'img') }}" alt="{{ inject('ad')->single(4, 3, 'title') }}">
</div>
@else
@if($page->description->present()->image())
<div class="nbanner" {{ inject('visual')->url('ad', 4) }} data-position-top="80px">
<img src="{{ $page->description->present()->image() }}" alt="{{ $page->description->title or '' }}">
</div>
@else
<div class="nbanner" {{ inject('visual')->url('ad', 4) }} data-position-top="80px">
<img src="{{ inject('ad')->single(4, 0, 'img') }}" alt="{{ inject('ad')->single(4, 0, 'title') }}">
</div>
@endif
@endif
# 外贸留言表单
<div class="contact-section2">
<div class="max1500 clearfix">
<div class="c-section2-con">
<div class="lx-title text-center mb-20">
<h3>Leave a Message</h3>
</div>
<div class="hm-message-con mt-30">
{!! Form::open(['route' => 'message.store', 'class'=>'form-horizontal']) !!}
<div class="clearfix">
<div class="mb-20 col-md-12 col-sm-12 pl-10 pr-10">
<div class="form-input relative">
<span class="pr-5" style="color:#222222;">{!! inject('block')->block('contact-zi1', 'title') !!}*</span>
{!! Form::text('name', '', ['class'=>'form-control len-full', 'placeholder'=>inject('block')->block('contact-zi1', 'extend')]) !!}
</div>
</div>
<div class="mb-20 col-md-12 col-sm-12 pl-10 pr-10">
<div class="form-input relative">
<span class="pr-5" style="color:#222222;">{!! inject('block')->block('contact-zi4', 'title') !!}*</span>
{!! Form::text('phone', '', ['class'=>'form-control len-full', 'placeholder'=>inject('block')->block('contact-zi4', 'extend')]) !!}
</div>
</div>
<div class="mb-20 col-md-12 col-sm-12 pl-10 pr-10">
<div class="form-input relative">
<span class="pr-5" style="color:#222222;">{!! inject('block')->block('contact-zi2', 'title') !!}*</span>
{!! Form::text('email', '', ['class'=>'form-control len-full', 'placeholder'=>inject('block')->block('contact-zi2', 'extend')]) !!}
</div>
</div>
<div class="mb-20 col-md-12 col-sm-12 pl-10 pr-10">
<div class="form-input relative">
<span class="pr-5" style="color:#222222;">{!! inject('block')->block('contact-zi5', 'title') !!}*</span>
{!! Form::text('country', '', ['class'=>'form-control len-full', 'placeholder'=>inject('block')->block('contact-zi5', 'extend')]) !!}
</div>
</div>
</div>
<div class="mb-20 pl-10 pr-10">
<div class="form-input">
<span class="pr-5" style="color:#222222;">{!! inject('block')->block('contact-zi3', 'title') !!}</span>
{!! Form::textarea('content', '', ['class'=>'form-control len-full', 'rows'=>5, 'placeholder'=>inject('block')->block('contact-zi3', 'extend')]) !!}
</div>
</div>
<div class="clearfix">
<div class="pl-10 pr-10">
<span class="pr-5" style="color:#222222;">{{ inject('setting')->langs('system', 'captcha') }}</span>
</div>
<div class="mb-20 col-md-12 col-sm-12 pl-10 pr-10">
{{-- 人机验证和验证切换渲染html结构 --}}
@if(inject('setting')->config('message_verify_type') == 1)
{{-- 验证码html结构 --}}
<input type="hidden" name="key" value="{{ $key ?? 'default' }}">
<div class="mb-15 contans">
<div class="form-input relative w100120">
{!! Form::text('captcha', '', ['class'=>'form-control len-full', 'placeholder'=>inject('setting')->langs('system', 'captcha')]) !!}
</div>
<img class="yzmimg" src="{{ captcha_src($key ?? 'default') }}" onclick="this.src='{{ captcha_src($key ?? 'default') }}'+Math.random()"/>
</div>
@else
{{-- 人机验证html结构 --}}
<div class="mb-15 pl-10 pr-10">
<div class="form-title mb-10"></div>
<div class="form-input">
<div id="robot"></div>
</div>
</div>
{{-- 人机验证 JS 代码 --}}
<script src="{{ config('system.re_captcha_url') }}/recaptcha/api.js?onload=onloadCallback&render=explicit&hl={{ config('lang') }}" async defer></script>
<script>
var widgetId;
var sitekey = '{{inject('setting')->config('re_captcha_web_secret')}}';
var onloadCallback = function () {
widgetId = grecaptcha.render('robot', {
'sitekey': sitekey,
'theme': 'light'
});
}
document.body.addEventListener('click', function (e) {
if (e.target.id !== 'subBtn') return
e.preventDefault()
try {
var responseToken = grecaptcha.getResponse(widgetId);
if (responseToken.length) {
var form;
const composedPath = e.composedPath();
for (var i = 0; i < composedPath.length; i++) {
if (composedPath[i].tagName === 'FORM') {
form = composedPath[i]
break
}
}
form.submit()
} else {
alert('{{ inject('setting')->langs('system', 'captcha') }} {{ inject('setting')->langs('system', 'no_null') }}')
}
} catch (e) {
alert(e.message)
}
})
</script>
@endif
</div>
<div class="mb-20 col-md-12 col-sm-12 pl-10 pr-10 text-center">
<button type="submit" id="subBtn" class="x-submit">{{ inject('setting')->langs('system', 'send_inquiry') }}</button>
</div>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
style:
.contact-section2{position:relative;background:url(//wm.cdn.cn86.cn/yzkaisuer/2025/05/fb088fd131q9uod9.jpg) no-repeat;background-size:cover;padding:60px 0}
.c-section2-con{position:relative;background:#fff;padding:50px 40px;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;max-width:1025px;margin:0 auto}
.lx-title h3{font-size:42px;color:#222;font-weight:700;margin-bottom:0;line-height:1}
.hm-message-con{position:relative;margin:0 -10px}
.hm-message-con input[type=text],.hm-message-con textarea{height:55px;background:#f2f2f2;border:none;border-radius:0;font-size:15px;color:#888;box-shadow:inherit}
.hm-message-con input[type=text]::-webkit-input-placeholder,.hm-message-con textarea::-webkit-input-placeholder{color:#888}
.hm-message-con input[type=text]:-ms-input-placeholder,.hm-message-con textarea:-ms-input-placeholder{color:#888}
.hm-message-con input[type=text]::-ms-input-placeholder,.hm-message-con textarea::-ms-input-placeholder{color:#888}
.hm-message-con input[type=text]::placeholder,.hm-message-con textarea::placeholder{color:#888}
.hm-message-con textarea{padding-top:15px;height:190px;resize:none;background:#f2f2f2;color:#888}
.hm-message-con textarea:focus{background:0 0;box-shadow:inherit;color:#888}
.hm-message-con input[type=text]:focus,.hm-message-con textarea:focus{color:#888;background:#f2f2f2}
.hm-message-con .x-submit{width:212px;height:55px;background:var(--main-theme-color);color:#fff;font-size:16px;border:none;outline:0;margin:0 auto;-webkit-transition:all .5s ease;transition:all .5s ease;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}
.hm-message-con .x-submit:hover{background:var(--main-theme-color);color:#fff}
.hm-message-con .contans{height:55px;display:flex;align-items:center;justify-content:space-between;background:#fff}
.hm-message-con .contans input{border:none}
.hm-message-con .pr-5{position:relative;font-size:15px;color:#222;margin-bottom:10px}
.hm-message-con .form-input.relative input[type=text]{padding-left:1.2rem}
.hm-message-con .w100120{width:calc(100% - 120px)!important}
.hm-message-con .contans input[type=text]:focus{border:none}
.hm-message-con .contans .yzmimg{cursor:pointer;margin:0 8px;width:120px;height:55px}
@media (max-width:1280px){
.lx-title h3{font-size:32px}
.c-section2-con{padding:40px 30px}
}
@media (max-width:992px){
.lx-title h3{font-size:24px}
.c-section2-con{padding:30px 20px}
}
@media (max-width:768px){
.hm-message-con input[type=text],.hm-message-con textarea{height:40px;font-size:13px}
.hm-message-con textarea{height:100px}
.hm-message-con .contans .yzmimg{height:40px}
.hm-message-con .x-submit{height:45px;width:160px;font-size:14px}
}
# 外贸易导航nav
<ul class="x-menu h-list d-none d-xl-flex" {{ inject('visual')->url('nav') }}>
@foreach (inject('nav')->nav() as $key => $value)
<li class="h-list-sgl @if($key==1)h-product @elseif($key == 8) header-cart @endif" data-id="{{ $key }}">
<a href="{{ $value->linkurl }}" class="h-list-link @if(!$value->children->isEmpty() || $value->content_model) h-list-down @endif">
{{ $value->description->cname or $value->cname }}
</a>
@if(!$value->children->isEmpty())
<ul class="h-list-sec">
@foreach ($value->children as $val)
<li><a href="{{ $val->linkurl }}">{{ $val->description->cname }}</a></li>
@endforeach
</ul>
@endif
@if($value->content_model && !inject('category')->cate($value->content_model, $value->content_model_id)->isEmpty())
@if($value->content_model == 'product')
<ul class="h-list-sec">
@foreach (inject('category')->cate($value->content_model, $value->content_model_id) as $key2 => $val)
<li data-id="{{ $key2 }}">
<a href="{{ $val->present()->url($value->content_model) }}">
<span class="thum">@if($val->description->present()->image())<img src="{{ $val->description->present()->image() }}" alt="{{ $val->description->cname }}"> @endif</span>
<p><span class="num">@if($key2 < 10)0{{ $key2 }} @else {{ $key2 }} @endif</span>{{ $val->description->cname }}</p>
</a>
@if(!$val->children->isEmpty())
<dl class="h-list-thi">
@foreach ($val->children as $val2)
<dd><a href="{{ $val2->present()->url($value->content_model) }}">{{ $val2->description->cname }}</a></dd>
@endforeach
</dl>
@endif
</li>
@endforeach
</ul>
@else
<ul class="h-list-sec">
@foreach (inject('category')->cate($value->content_model, $value->content_model_id) as $key2 => $val)
<li data-id="{{ $key2 }}">
<a href="{{ $val->present()->url($value->content_model) }}">
<span class="thum"> @if($val->description->present()->image())<img src="{{ $val->description->present()->image() }}" alt="{{ $val->description->cname }}"> @endif</span>
<p><span class="num">@if($key2 < 10)0{{ $key2 }} @else {{ $key2 }} @endif</span>{{ $val->description->cname }}</p>
</a>
</li>
@endforeach
</ul>
@endif
@endif
</li>
@endforeach
</ul>
← 外贸易4.3.0标签文档 外贸易调用文档 →