129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
|
|
<template>
|
|
<div class="Header " >
|
|
<div class="Header-container" :style="[HeaderStyleOption]">
|
|
<HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
|
|
<HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
|
|
<HeaderSearch :HeaderSearch="HeaderStyleOption.HeaderSearch" :appNav="HeaderStyleOption.appNav" :navList="navList"
|
|
@showSearchBox="showSearchBox"></HeaderSearch>
|
|
</div>
|
|
<div class="search-box ">
|
|
<input type="text" class="search-box-input " @blur="showSearchHideBox([])" @input="searchEvent">
|
|
<div class="search-hide-box ">
|
|
<div class="search-hide-items" v-for="item in searchRes">
|
|
<nuxtLink :to="item.href">
|
|
{{ item.txt }}
|
|
</nuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone-box">
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import HeaderIcon from "./HeaderIcon.vue";
|
|
import HeaderNav from "./HeaderNav.vue";
|
|
import HeaderSearch from "./HeaderSearch.vue";
|
|
|
|
const route = useRouter()
|
|
/**样式配置*/
|
|
const HeaderStyleOption = reactive({
|
|
|
|
/**导航样式*/
|
|
HeaderNav: {
|
|
'padding-left': '25vw'
|
|
},
|
|
/**icon样式*/
|
|
HeaderIcon: {
|
|
},
|
|
/**搜索样式*/
|
|
HeaderSearch: {
|
|
position: ' absolute',
|
|
right: '20px',
|
|
},
|
|
/**手机菜单栏样式*/
|
|
appNav: {
|
|
top: ' 0',
|
|
height: '100%',
|
|
width: '100%'
|
|
}
|
|
})
|
|
|
|
|
|
|
|
let info_article_type_id = ref(0)
|
|
|
|
// '/product'
|
|
// '/product/child'
|
|
// 'child'
|
|
let navList = [
|
|
{
|
|
name: '首页',
|
|
children: [],
|
|
href: '/',
|
|
alias: 'index'
|
|
},
|
|
{
|
|
name: '案例展示',
|
|
children: [],
|
|
href: '',
|
|
alias: ''
|
|
},
|
|
{
|
|
name: '关于我们',
|
|
children: [],
|
|
href: '',
|
|
alias: ''
|
|
},
|
|
{
|
|
name: '新闻咨询',
|
|
children: [],
|
|
href: '/news/1-1',
|
|
alias: 'news'
|
|
},
|
|
{
|
|
name: '联系我们',
|
|
children: [],
|
|
href: '',
|
|
alias: ''
|
|
},
|
|
|
|
|
|
]
|
|
|
|
let searchRes = ref(null)
|
|
|
|
const showSearchBox = function () {
|
|
document.getElementsByClassName('search-box')[0].classList.toggle('search-show')
|
|
document.getElementsByClassName('search-box-input')[0].classList.toggle('search-input-show')
|
|
}
|
|
let timer = null
|
|
const searchEvent = function (e) {
|
|
if (timer) {
|
|
clearTimeout(timer)
|
|
}
|
|
timer = setTimeout(() => {
|
|
let searchVal = e.target.value
|
|
// get('请求接口',searchVal).then((res)=>{
|
|
// showSearchHideBox(res)
|
|
// })
|
|
// showSearchHideBox(res)
|
|
|
|
}, 1000)
|
|
}
|
|
const showSearchHideBox = function (data) {
|
|
searchRes.value = data
|
|
if (data && data.length !== 0) {
|
|
document.getElementsByClassName('search-box-input')[0].classList.add('search-have')
|
|
} else {
|
|
document.getElementsByClassName('search-box-input')[0].classList.remove('search-have')
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped src="~/assets/css/Header/index.scss"></style>
|
|
<style lang="scss" scoped src="~/assets/css/Header/media.scss"></style> |