284 lines
8.1 KiB
HTML
284 lines
8.1 KiB
HTML
<style>
|
||
.zh_top {
|
||
display: flex;
|
||
padding-top: 5px;
|
||
padding-bottom: 10px;
|
||
}
|
||
.zh_head {
|
||
width: 40%;
|
||
justify-content: right;
|
||
}
|
||
.zh_hcon {
|
||
margin: unset;
|
||
width: unset;
|
||
}
|
||
.zh_nav {
|
||
width: 50%;
|
||
height: 70px;
|
||
position: relative;
|
||
}
|
||
@media (max-width: 1620px) and (min-width: 1201px){
|
||
.zh_nav {
|
||
width: 68%;
|
||
height: 70px;
|
||
position: relative;
|
||
}
|
||
}
|
||
@media (max-width: 1200px) {
|
||
.language-switcher {
|
||
top: 20%;
|
||
}
|
||
.zh_nav_btn {
|
||
display: block;
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 20px;
|
||
cursor: pointer;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.zh_nav {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
background-color: var(--main-color);
|
||
display: none;
|
||
z-index: 1001;
|
||
}
|
||
|
||
/* 点击展开时显示 */
|
||
.zh_nav.active {
|
||
display: block;
|
||
}
|
||
|
||
.nav_con {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.nav_con li {
|
||
width: 100%;
|
||
border-bottom: 1px solid #eee;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav_con li a {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
background-color: var(--main-color);
|
||
}
|
||
|
||
.nav_con li a:hover {
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/* 语言切换按钮放在导航底部 */
|
||
.nav-language-switcher {
|
||
position: unset !important;
|
||
width: 100%;
|
||
padding: 10px 15px;
|
||
background-color: var(--main-color);
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.language-btn {
|
||
font-size: 13px;
|
||
padding: 5px 10px;
|
||
height: auto;
|
||
}
|
||
|
||
.language-dropdown {
|
||
position: relative;
|
||
width: auto;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.language-dropdown a {
|
||
padding: 8px 10px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
/* 语言切换按钮容器 */
|
||
.language-switcher {
|
||
position: absolute;
|
||
display: inline-block;
|
||
right: 20%;
|
||
}
|
||
/* 语言切换按钮样式 */
|
||
.language-btn {
|
||
background-color: #f8f8f8;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
padding: 5px 10px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40px;
|
||
}
|
||
.language-btn:hover {
|
||
background-color: #e8e8e8;
|
||
}
|
||
/* 下拉菜单样式 */
|
||
.language-dropdown {
|
||
display: none;
|
||
position: absolute;
|
||
/*right: 0;*/
|
||
top: 100%;
|
||
background-color: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
/*width: 100%;*/
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||
z-index: 1000;
|
||
}
|
||
.language-dropdown a {
|
||
padding: 5px;
|
||
width: 100%;
|
||
display: block;
|
||
text-decoration: none;
|
||
color: #333;
|
||
font-size: 14px;
|
||
float: unset;
|
||
line-height: 40px;
|
||
}
|
||
.language-dropdown a:hover {
|
||
background-color: #f5f5f5;
|
||
display: block;
|
||
text-decoration: none;
|
||
color: #333;
|
||
font-size: 14px;
|
||
width: 100%;
|
||
float: unset;
|
||
line-height: 40px;
|
||
}
|
||
/* 显示下拉菜单 */
|
||
.show-dropdown {
|
||
display: block;
|
||
}
|
||
ol, ul, dl {
|
||
margin-bottom: 0;
|
||
}
|
||
.nav_con {
|
||
padding: 0;
|
||
}
|
||
/* ===== 手机端语言切换显示控制 ===== */
|
||
@media (max-width: 1200px) {
|
||
/* 手机端显示 languageBtn1（顶部） */
|
||
#language-switcher1 {
|
||
display: inline-flex !important;
|
||
}
|
||
/* 隐藏导航栏中的 languageBtn */
|
||
#languageBtn {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* ===== PC端反向控制 ===== */
|
||
@media (min-width: 1201px) {
|
||
/* PC端隐藏顶部语言切换，显示导航栏内的 */
|
||
#language-switcher1 {
|
||
display: none !important;
|
||
}
|
||
#languageBtn {
|
||
display: inline-flex !important;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
<div class="zh_top">
|
||
<div class="zh_head">
|
||
<div class="zh_hcon">
|
||
<div class="zh_logo"><a href="/"><img src="/static/image/logo.png" alt=""></a></div>
|
||
</div>
|
||
</div>
|
||
<div class="language-switcher clearfix-language-switcher" id="language-switcher1" style="display:none;">
|
||
<button class="language-btn" id="languageBtn1">
|
||
<span>{if $think_lang == 'en-us'}English{else/}中文 {/if}</span>
|
||
<span style="margin-left: 5px;">▼</span>
|
||
</button>
|
||
<div class="language-dropdown" id="languageDropdown1">
|
||
<a class="language" href="#" data-id="zh-cn">中文</a>
|
||
<a class="language" href="#" data-id="en-us">English</a>
|
||
</div>
|
||
</div>
|
||
<img class="zh_nav_btn" src="/static/image/menu.png" alt="">
|
||
<div class="zh_nav">
|
||
<ul class="nav_con">
|
||
<li class=""><a href="/">{:lang('index.home')}</a></li>
|
||
<li class=""><a href="{:url('visa/index')}">{:lang('index.online_application')}</a></li>
|
||
<li class=""><a href="{:url('lookup/index')}">{:lang('index.entry_card_query')}</a></li>
|
||
<li class=""><a href="{:url('news/index')}">{:lang('index.usage_help')}</a></li>
|
||
<div class="language-switcher nav-language-switcher">
|
||
<button class="language-btn" id="languageBtn">
|
||
<span>{if $think_lang == 'en-us'}English{else/}中文 {/if}</span>
|
||
<span style="margin-left: 5px;">▼</span>
|
||
</button>
|
||
<div class="language-dropdown" id="languageDropdown">
|
||
<a class="language" href="#" data-id="zh-cn">中文</a>
|
||
<a class="language" href="#" data-id="en-us">English</a>
|
||
</div>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$('.zh_nav_btn').click(function () {
|
||
$('.zh_nav').toggleClass('active');
|
||
});
|
||
</script>
|
||
<div class="swiper" style="height: 100px;background: var(--main-color)">
|
||
</div>
|
||
<script>
|
||
const languageBtn = document.getElementById('languageBtn');
|
||
const languageDropdown = document.getElementById('languageDropdown');
|
||
// 切换下拉菜单显示/隐藏
|
||
languageBtn.addEventListener('click', function() {
|
||
languageDropdown.classList.toggle('show-dropdown');
|
||
});
|
||
// 点击页面其他地方关闭下拉菜单
|
||
document.addEventListener('click', function(e) {
|
||
if (!languageBtn.contains(e.target) && !languageDropdown.contains(e.target)) {
|
||
languageDropdown.classList.remove('show-dropdown');
|
||
}
|
||
});
|
||
const languageBtn1 = document.getElementById('languageBtn1');
|
||
const languageDropdown1 = document.getElementById('languageDropdown1');
|
||
// 切换下拉菜单显示/隐藏
|
||
languageBtn1.addEventListener('click', function() {
|
||
languageDropdown1.classList.toggle('show-dropdown');
|
||
});
|
||
// 点击页面其他地方关闭下拉菜单
|
||
document.addEventListener('click', function(e) {
|
||
if (!languageBtn1.contains(e.target) && !languageDropdown1.contains(e.target)) {
|
||
languageDropdown1.classList.remove('show-dropdown');
|
||
}
|
||
});
|
||
$('.language').click(function () {
|
||
const lang = $(this).attr('data-id');
|
||
$.ajax({
|
||
url: '/home/index/langset',
|
||
type: 'post',
|
||
data: {
|
||
lang: lang
|
||
},
|
||
success: function (res) {
|
||
if (res.code === 1) {
|
||
window.location.reload();
|
||
}
|
||
}
|
||
})
|
||
})
|
||
</script>
|