900 lines
24 KiB
PHTML
Executable File
900 lines
24 KiB
PHTML
Executable File
<div class="Container head-nav" id="scroll">
|
|
<div class="nav-1">
|
|
<a href="__ORICOROOT__"><img src="__PUBLIC__/weben/images/indeximg/logo .png" ></a>
|
|
</div>
|
|
<div class="wrapper nav-2">
|
|
<nav id="booNavigation" class="booNavigation">
|
|
<ul>
|
|
|
|
<li class="navItem allbtn tabs-vertical" id="allbtntop">
|
|
<a href="#" title="Products">产品列表</a>
|
|
<img src="__PUBLIC__/weben/images/indeximg/black-down.png" class="downimg">
|
|
<?php if (!empty($productCategory)): ?>
|
|
<div class="navContent jspop">
|
|
<ul>
|
|
<?php foreach ($productCategory as $kp => $cate):?>
|
|
<li>
|
|
<a href="__ORICOROOT__/product/category/<?php echo $cate['id']?>.html" class="tab-active" data-index="<?php echo $kp; ?>" ><?php echo $cate['name']; ?></a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
|
|
<div class="tabs-content-placeholder" >
|
|
<?php foreach ($productCategory as $key => $value):
|
|
if (isset($category['id']) && $category['id'] == $value['id'])
|
|
$oneLevelCategory = isset($value['child']) ? $value['child'] : [];
|
|
$have_3_child = 0;
|
|
if (!empty($value['child']))
|
|
{
|
|
foreach ($value['child'] as $k => $v)
|
|
{
|
|
if (!empty($v['child']))
|
|
{
|
|
$have_3_child = 1;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
<?php if (!empty($value['child'])): ?>
|
|
<div class="tabs-content-placeholder-div tab-content-active">
|
|
<?php foreach ($value['child'] as $k => $v): ?>
|
|
<dl>
|
|
<dt>
|
|
<a class="ui-link" href="__ORICOROOT__/product/subcategory/<?php echo $v['id']?>.html"><img src="<?php echo $v['m_icon']; ?>"><?php echo $v['name']; ?></a>
|
|
</dt>
|
|
<?php if (!empty($v['child'])): ?>
|
|
<?php foreach ($v['child'] as $index => $item): ?>
|
|
<dd><a href="__ORICOROOT__/product/subcategory/<?php echo $item['id']?>.html"><?php echo $item['name']; ?></a></dd>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</dl>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
</li>
|
|
|
|
<?php if ($nav_header):
|
|
foreach ($nav_header as $kn => $nav):
|
|
if(strpos($nav['url'], 'http://') !== false || strpos($nav['url'], 'https://') !== false) {
|
|
$link = $nav['url'];
|
|
}
|
|
else{
|
|
if($nav['url']){
|
|
$link = '__ORICOROOT__/'.$nav['url'];
|
|
}
|
|
else{
|
|
$link = '#';
|
|
}
|
|
}
|
|
if($kn < 7):
|
|
?>
|
|
|
|
<li class="navItem">
|
|
<a href="<?php echo $link; ?>" title="<?php echo $nav['name']; ?>" <?php if($nav['is_new_window_open']){echo "target='_blank'";} ?>><?php echo $nav['name']; ?></a>
|
|
|
|
<?php if (!empty($nav['items'])): ?>
|
|
<img src="__PUBLIC__/weben/images/indeximg/black-down.png" class="downimg">
|
|
<ol class="navContent navContent1">
|
|
|
|
<?php
|
|
foreach ($nav['items'] as $kt => $child):
|
|
if(strpos($child['url'], 'http://') !== false || strpos($child['url'], 'https://') !== false|| strpos($child['url'], 'htencent://') !== false) {
|
|
$childLink = $child['url'];
|
|
}
|
|
else{
|
|
$childLink = '__ORICOROOT__/'.$child['url'];
|
|
}
|
|
?>
|
|
<li style="text-align:center;">
|
|
<a href="<?php echo $child['url']; ?>" <?php if($child['is_new_window_open']){echo "target='_blank'";} ?> title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
|
|
</li>
|
|
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
<?php endif; ?>
|
|
</li>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</ul>
|
|
</nav>
|
|
|
|
</div>
|
|
<div class="nav-3">
|
|
<div>
|
|
<img id="openModalBtn" src="__PUBLIC__/weben/images/indeximg/icon-search.png" class="searchimg">
|
|
</div>
|
|
<div>
|
|
<img src="__PUBLIC__/weben/images/indeximg/icon-language.png" class="checkimg" id="countrycheck">
|
|
<div id="top-country" class="hidden">
|
|
<ul>
|
|
<li class="desktopli1">
|
|
<span class="close-btn1" id="closeModalBtn1">×</span>
|
|
</li>
|
|
<a href="https://www.orico.com.cn/" class="cn" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/CN.png" /></div>
|
|
<div class="desktop-10">China - 中文简体</div>
|
|
</li></a>
|
|
<a href="https://www.orico.cc/us" class="ca" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/US.png" /></div>
|
|
<div class="desktop-10">USA - English</div>
|
|
</li></a>
|
|
<a href="https://www.oricobr.com" class="us" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/BR.png" /></div>
|
|
<div class="desktop-10">Brazil - português</div>
|
|
</li></a>
|
|
<a href="https://www.ORICOPERU.com" class="us" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/MX.png" /></div>
|
|
<div class="desktop-10">Peru - español</div>
|
|
</li></a>
|
|
<a href="https://www.orico.cc/th" class="hk" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/TH.png" /></div>
|
|
<div class="desktop-10">Thailand - ไทย</div>
|
|
</li></a>
|
|
<a href="https://www.orico.cc/id" class="jp" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/ID.png" /></div>
|
|
<div class="desktop-10">Indonesia - bahasa Indonesia</div>
|
|
</li></a>
|
|
<a href="https://www.orico.cc/vn" class="kr" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/VN.png" /></div>
|
|
<div class="desktop-10">Vietnam - Tiếng Việt</div>
|
|
</li></a>
|
|
<a href="https://www.orico.shop/" class="be" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/NL.png" /></div>
|
|
<div class="desktop-10">Netherlands - English</div>
|
|
</li></a>
|
|
<a href="http://www.oricoturkiye.com/" class="tr" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/TR.png" /></div>
|
|
<div class="desktop-10">Türkiye - Cumhuriyeti</div>
|
|
</li></a>
|
|
<a href="https://orico-iran.ir" class="bh" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/IR.png" /></div>
|
|
<div class="desktop-10">Iran - فارسی</div>
|
|
</li></a>
|
|
<a href="http://www.orico.com.au/ " class="au" target="_blank"><li class="desktopli">
|
|
<div class="desktop-2"><img src="__PUBLIC__/web/images/map/AU.png" /></div>
|
|
<div class="desktop-10">Australia - English</div>
|
|
</li></a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="modal" class="modal">
|
|
<div class="modal-content Search">
|
|
<span class="close-btn" id="closeModalBtn">×</span>
|
|
<input type="text" name="keywords" id="search-in" value="" />
|
|
<div id="search" class="search_content search_default"></div>
|
|
<div class="modal_1">
|
|
<p class="tit1">搜索记录</p>
|
|
<div>
|
|
<ul>
|
|
<?php
|
|
$historyList = getBannerList(79, 5);
|
|
if ($historyList):
|
|
?>
|
|
<?php foreach ($historyList as $kh => $history): ?>
|
|
<li><a href="<?php echo $history['url']; ?>"><?php echo $history['name']; ?></a></li>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal_2">
|
|
<p class="tit1">热销产品</p>
|
|
<?php
|
|
if ($popular_list):
|
|
?>
|
|
<?php foreach ($popular_list as $kp => $popular): ?>
|
|
|
|
<div class="picture21">
|
|
<a href="__ORICOROOT__<?php echo url_rewrite('productdetail', ['id' => $popular['id']]); ?>"><img title="<?php echo $popular['name']; ?>" class="picture21-img" src="<?php echo getImage($popular['list_bk_img']); ?>"></a>
|
|
<div class="title"> <?php echo $popular['name']; ?></div>
|
|
<div class="subtitle"><?php echo $popular['shortname']; ?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
// 导航
|
|
$(document).ready(function() {
|
|
var widget = $('.tabs-vertical');
|
|
var tabs = widget.find(' ul a'),
|
|
content = widget.find('.tabs-content-placeholder-div');
|
|
|
|
tabs.on('mouseover', function (e) {
|
|
e.preventDefault();
|
|
// Get the data-index attribute, and show the matching content div
|
|
var index = $(this).data('index');
|
|
tabs.removeClass('tab-active');
|
|
content.removeClass('tab-content-active');
|
|
$(this).addClass('tab-active');
|
|
content.eq(index).addClass('tab-content-active');
|
|
});
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
$('#countrycheck').click(function() {
|
|
$('#top-country').toggleClass('hidden block');
|
|
});
|
|
$('#closeModalBtn1').click(function() {
|
|
$('#top-country').toggleClass('hidden block');
|
|
});
|
|
});
|
|
// 搜索弹窗
|
|
$(document).ready(function() {
|
|
// 点击打开按钮显示弹出框
|
|
$('#openModalBtn').mouseover(function() {
|
|
$('#modal').fadeIn();
|
|
});
|
|
// 点击关闭按钮或背景模态框，隐藏弹出框
|
|
$('#closeModalBtn, .modal').click(function() {
|
|
$('#modal').fadeOut();
|
|
});
|
|
// 防止点击弹出框内容时关闭弹出框
|
|
$('.modal-content').click(function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
/************搜索****************/
|
|
$(function() {
|
|
var search_input = $(".Search input");
|
|
var search_content = $(".search_content");
|
|
|
|
$(search_input).on("keyup", function(e)
|
|
{
|
|
$("#search-in").keyup(function(event) {
|
|
if (event && event.keyCode === 13) {
|
|
var keywords = $("#search-in").val();
|
|
var href = "<?php echo url('/search'); ?>?skeyword=" + encodeURIComponent(keywords);
|
|
location.href = href;
|
|
$("#modal").hide();
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$(".search_content").bind("click", function(event) {
|
|
var skeyword = $(".Search input").val();
|
|
if (skeyword) {
|
|
var href = "<?php echo url('/search'); ?>?skeyword=" + encodeURIComponent(skeyword);
|
|
location.href = href;
|
|
}
|
|
else{
|
|
var href = "<?php echo url('/search'); ?>";
|
|
location.href = href;
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/weben/css/modal.min.css">
|
|
<style type="text/css">
|
|
|
|
#search-in{
|
|
margin-left: 10%;
|
|
margin-top: 5%;
|
|
width: 80%;
|
|
height: 44px;
|
|
border: 1px solid grey;
|
|
border-radius:22px;
|
|
background: url('__PUBLIC__/weben/images/indeximg/sousuo1.png') no-repeat;
|
|
background-position: 95% 50%;
|
|
padding-left: 5%;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.wrapper a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tabs-vertical ul{
|
|
float: left;
|
|
list-style: none;
|
|
text-align: center;
|
|
width: 20%;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tabs-vertical ul li a{
|
|
display: block;
|
|
text-decoration: none;
|
|
color: #656a6d;
|
|
border: 1px solid transparent;
|
|
border-right: 0;
|
|
border-left: 0;
|
|
padding: 16px 40px 16px 20px;
|
|
}
|
|
|
|
.tabs-vertical ul li a.tab-active {
|
|
border-color: #dddddd;
|
|
background-color: #ffffff;
|
|
box-shadow: 0px 2px 0px #EFEFEF;
|
|
}
|
|
|
|
.tabs-vertical ul li:first-child a{
|
|
border-top: 0;
|
|
}
|
|
/* The content */
|
|
.tabs-vertical .tabs-content-placeholder{
|
|
min-height: 460px;
|
|
max-height: 660px;
|
|
overflow: scroll;
|
|
border-left: 1px solid #dddddd;
|
|
font-weight: normal;
|
|
background-color: #fff;
|
|
margin: 0 auto;
|
|
box-shadow: -3px 0 0px #F3F3F3;
|
|
text-align: left;
|
|
}
|
|
.tabs-vertical .tabs-content-placeholder dd a{
|
|
/*margin-left: 1.5%;*/
|
|
}
|
|
|
|
.tabs-vertical .tabs-content-placeholder div{
|
|
display: none;
|
|
}
|
|
|
|
.tabs-vertical .tabs-content-placeholder div.tab-content-active{
|
|
display: block;
|
|
}
|
|
|
|
.tabs-vertical .tabs-content-placeholder div p{
|
|
color: #565a5c;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
margin: 5px 0 20px;
|
|
}
|
|
|
|
.tabs-vertical .tabs-content-placeholder div img{
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.tabs-vertical ul{
|
|
float: none;
|
|
}
|
|
|
|
.tabs-vertical ul li{
|
|
display: inline-block;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tabs-vertical ul li a{
|
|
border: 1px solid transparent;
|
|
border-bottom: 0;
|
|
border-top: 0;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.tabs-vertical ul li a.tab-active {
|
|
border-color: #dddddd;
|
|
background-color: #ffffff;
|
|
box-shadow: 2px 0px 0px #EFEFEF;
|
|
}
|
|
|
|
.tabs-vertical ul li:first-child a{
|
|
border-left: 0;
|
|
}
|
|
|
|
.tabs-vertical .tabs-content-placeholder{
|
|
padding: 15px 30px 30px;
|
|
border-left: 0;
|
|
border-top: 1px solid #dddddd;
|
|
box-shadow: 0px -3px 0px #F3F3F3;
|
|
}
|
|
|
|
}
|
|
/*================================================== */
|
|
.booNavigation {
|
|
position: relative;
|
|
}
|
|
|
|
.booNavigation li.navItem {
|
|
width: 12.5%;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
color: #000000;
|
|
float: left;
|
|
text-decoration: none;
|
|
transition: all .3s ease;
|
|
-webkit-transition: all .5s ease;
|
|
-moz-transition: all .5s ease;
|
|
-ms-transition: all .5s ease;
|
|
-o-transition: all .5s ease;
|
|
}
|
|
|
|
.booNavigation li.navItem:hover {
|
|
cursor: pointer;
|
|
}
|
|
.booNavigation li.navItem:hover .navContent{
|
|
display: block;
|
|
}
|
|
.booNavigation li.navItem > a {
|
|
color: #000;
|
|
padding-right:5px;
|
|
}
|
|
.a1{
|
|
width: 100% !important;
|
|
position: relative;
|
|
}
|
|
.a1 div:first-child{
|
|
background-color: white;
|
|
border-right:1px solid grey;
|
|
width: 30% !important;
|
|
float: left;
|
|
}
|
|
.jspop{
|
|
display: none;
|
|
margin: 0 !important;
|
|
position: fixed;
|
|
height: auto;
|
|
background-color: #f2f2f2 !important;
|
|
max-height: 660px;
|
|
box-shadow: 3px 5px 60px -20px #88909A
|
|
}
|
|
.booNavigation li.navItem .navContent {
|
|
display: none;
|
|
background-color: #fff;
|
|
color: black;
|
|
left: 0;
|
|
top: 60px;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
}
|
|
.booNavigation li.navItem .navContent1 {
|
|
background-color: #fff;
|
|
color: black;
|
|
left: 40.5%;
|
|
position: fixed;
|
|
top: 60px;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
z-index: 9999;
|
|
border-radius: 5px;
|
|
}
|
|
.booNavigation li.navItem .navContent2 {
|
|
background-color: #fff;
|
|
color: black;
|
|
left: 50.5%;
|
|
position: fixed;
|
|
top: 60px;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
z-index: 9999;
|
|
border-radius: 5px;
|
|
}
|
|
.navContent2 li,.navContent1 li,.navContent3 li{
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
.booNavigation li.navItem .navContent3 {
|
|
background-color: #fff;
|
|
color: black;
|
|
left: 60%;
|
|
position: fixed;
|
|
top: 60px;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
z-index: 9999;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.downimg{height:12px;}
|
|
.booNavigation .navContent > li {
|
|
color: #fff;
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
.booNavigation .jspop > li {
|
|
color: #fff;
|
|
float: left;
|
|
width: 30%;
|
|
}
|
|
|
|
.booNavigation .navContent ul li a {
|
|
display: block;
|
|
padding: 0 !important;
|
|
line-height: 2.75rem !important;
|
|
transition: all .3s ease;
|
|
-webkit-transition: all .3s ease;
|
|
-moz-transition: all .3s ease;
|
|
-ms-transition: all .3s ease;
|
|
-o-transition: all .3s ease;
|
|
}
|
|
|
|
.booNavigation .navContent ul li a:hover {
|
|
color: blue;
|
|
}
|
|
|
|
/** Navigation examples
|
|
================================================== */
|
|
.nav-example {
|
|
clear: left;
|
|
}
|
|
.navItem{
|
|
position:relative;
|
|
display: grid;
|
|
grid-template-columns: auto auto; /* 设置两列 */
|
|
align-items: center; /* 垂直居中对齐 */
|
|
/* 可选：如果需要水平居中对齐图片和文字 */
|
|
justify-content: center;
|
|
}
|
|
#allbtntop{
|
|
position: relative;
|
|
}
|
|
|
|
.modal-fade-enter-active {
|
|
animation: dialog-fade-in .3s;
|
|
}
|
|
|
|
.modal-fade-leave-active {
|
|
animation: dialog-fade-out .3s;
|
|
}
|
|
|
|
@keyframes dialog-fade-in {
|
|
0% {
|
|
transform: translate3d(0, -20px, 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes dialog-fade-out {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(0, -20px, 0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.m-modal__wrapper {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: auto;
|
|
margin: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.m-modal__container {
|
|
width: 25%;
|
|
position: relative;
|
|
margin: 0 auto 50px;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
|
box-sizing: border-box;
|
|
margin-top: 15vh;
|
|
animation: dialog-fade-in .3s;
|
|
}
|
|
|
|
.m-modal__header {
|
|
padding: 20px 20px 10px;
|
|
}
|
|
|
|
.m-modal__title {
|
|
line-height: 24px;
|
|
font-size: 18px;
|
|
color: #303133;
|
|
}
|
|
|
|
button {
|
|
-webkit-appearance: button;
|
|
-webkit-writing-mode: horizontal-tb !important;
|
|
text-rendering: auto;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
text-shadow: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
align-items: flex-start;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
.m-modal__headerbtn {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.m-modal__close {
|
|
color: #909399;
|
|
}
|
|
|
|
.m-modal__headerbtn:hover .m-modal__close {
|
|
color: #409EFF;
|
|
}
|
|
|
|
.m-modal__body {
|
|
padding: 30px 20px;
|
|
color: #606266;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.m-modal__footer {
|
|
padding: 10px 20px 20px;
|
|
text-align: right;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.m-modal__footer button:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.m-modal-button {
|
|
display: none;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
border: 1px solid #dcdfe6;
|
|
color: #606266;
|
|
-webkit-appearance: none;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
margin: 0;
|
|
transition: .1s;
|
|
font-weight: 500;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#header{
|
|
height: 60px;
|
|
}
|
|
.head-nav{
|
|
/*position: fixed;*/
|
|
/*top: 0;*/
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
z-index: 99999;
|
|
background-color: white;
|
|
color: black !important;
|
|
}
|
|
|
|
.nav-1{
|
|
position: relative;
|
|
width: 20%;
|
|
background-color: transparent;
|
|
}
|
|
.nav-1 img{
|
|
margin-left: 50%;
|
|
width:45%;
|
|
margin-top:5px;
|
|
}
|
|
|
|
@media screen and (max-width:1459px){
|
|
.nav-1 img{
|
|
margin-top:24px;
|
|
}
|
|
}
|
|
.nav-2{
|
|
width: 60%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nav-3{
|
|
position: relative;
|
|
width: 20%;
|
|
background-color: transparent;
|
|
display: flex;
|
|
}
|
|
.nav-3 div{
|
|
width: 10%;
|
|
position: relative;
|
|
}
|
|
.nav-3 .searchimg{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 5%;
|
|
margin-top: -10px;
|
|
}
|
|
.nav-3 .checkimg{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20%;
|
|
margin-top: -10px;
|
|
cursor: pointer;
|
|
}
|
|
.nav-3 .checkimg:hover .top-country{
|
|
display: block;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.block {
|
|
display: block;
|
|
}
|
|
#top-country{
|
|
width: 250px;
|
|
background-color: white;
|
|
position: fixed;
|
|
right: 5%;
|
|
top: 60px;
|
|
border-radius: 15px;
|
|
box-shadow: 2px 2px 10px 1px #88909A;
|
|
}
|
|
#top-country li{
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
}
|
|
.desktopli{
|
|
display: flex;
|
|
}
|
|
.desktopli1{
|
|
height: 30px !important;
|
|
}
|
|
.desktopli .desktop-2{
|
|
width: 26%;
|
|
margin-left: 0;
|
|
}
|
|
.desktopli .desktop-2 img{
|
|
margin-left: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
.desktopli .desktop-10{
|
|
width: 70%;
|
|
text-align: left;
|
|
margin-left: 10px;
|
|
}
|
|
#openModalBtn{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal_1 {
|
|
margin-top: 5%;
|
|
margin-left: 10%;
|
|
width: 80%;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.modal_2 {
|
|
margin-top: 5%;
|
|
margin-left: 10%;
|
|
width: 80%;
|
|
display: flex;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
.modal_1 div{
|
|
margin-top: 10%;
|
|
margin-left: 1%;
|
|
}
|
|
.modal_2 div{
|
|
text-align: center;
|
|
margin-top: 10%;
|
|
margin-left: 1%;
|
|
}
|
|
.modal_2 .title{
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1; /* 显示两行 */
|
|
overflow: hidden; /* 隐藏溢出部分的文字 */
|
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
}
|
|
.modal_2 .title :hover{
|
|
overflow: visible;
|
|
}
|
|
.modal_2 .subtitle{
|
|
font-size: 10px;
|
|
color: #000000;
|
|
}
|
|
|
|
.tit1{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1%;
|
|
font-size: 16px;
|
|
color: #989898;
|
|
}
|
|
/* 背景模态框样式 */
|
|
.modal {
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* 弹出框内容样式 */
|
|
.modal-content {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
position: absolute;
|
|
right: 2%;
|
|
width: 35%;
|
|
top: 60px;
|
|
height: 80%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* 关闭按钮样式 */
|
|
.close-btn {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
.close-btn1 {
|
|
color: #aaa;
|
|
float: right;
|
|
margin-top: -5px;
|
|
cursor: pointer;
|
|
height: 20px;
|
|
width: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: #000;
|
|
}
|
|
.picture21{
|
|
width: 33%;
|
|
}
|
|
.picture21-img{
|
|
width: 7.1875rem!important;
|
|
height: 7.1875rem!important;
|
|
margin-left: 13%;
|
|
}
|
|
</style>
|