提交
This commit is contained in:
gaofeng
284
app/home/view/public/nav.html
Normal file
284
app/home/view/public/nav.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<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('contact/index')}">{:lang('contact.menu_contact')}</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>
|
||||
Reference in New Issue
Block a user