|
|
|
|
@ -3,6 +3,8 @@ |
|
|
|
|
<a class="logo" @click="toIndex"> |
|
|
|
|
<img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt=""> |
|
|
|
|
</a> |
|
|
|
|
<!-- pc端 --> |
|
|
|
|
<template v-if="$store.getters.getModelType"> |
|
|
|
|
<navbar ref="nav" :isHome.sync="isHome"></navbar> |
|
|
|
|
<div class="tools"> |
|
|
|
|
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"> |
|
|
|
|
@ -13,6 +15,24 @@ |
|
|
|
|
<i class="el-icon-close close-icon" @click="showSearch = false"></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<!-- 手机端 --> |
|
|
|
|
<template v-else> |
|
|
|
|
<i class="rightBox" :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' " @click="updateModelType"></i> |
|
|
|
|
<div class="contentBox" v-show="modelType"> |
|
|
|
|
<navbar ref="nav" :isHome.sync="isHome" :updateModelType="updateType"></navbar> |
|
|
|
|
<div class="modelBox"> |
|
|
|
|
<div class="searchBox"><img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"></div> |
|
|
|
|
<div class="languageBox"><img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"></div> |
|
|
|
|
<div v-if="showSearch" class="search-wrap" @click.stop="stop"> |
|
|
|
|
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title"> |
|
|
|
|
<img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch"> |
|
|
|
|
<i class="el-icon-close close-icon" @click="showSearch = false"></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
@ -24,7 +44,8 @@ export default { |
|
|
|
|
isHome: this.$route.path === '/home' || this.$route.path === '/sfel', |
|
|
|
|
showSearch: false, |
|
|
|
|
title: '', |
|
|
|
|
searchTimer: null |
|
|
|
|
searchTimer: null, |
|
|
|
|
modelType: false |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
@ -84,10 +105,18 @@ export default { |
|
|
|
|
// 全局搜索 |
|
|
|
|
handleSearch() { |
|
|
|
|
this.setKeyword(this.title) |
|
|
|
|
this.modelType = !this.modelType |
|
|
|
|
if (this.title) { |
|
|
|
|
this.showSearch = false |
|
|
|
|
this.$router.push(`/column/result`) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 更改右侧盒子样式 |
|
|
|
|
updateModelType() { |
|
|
|
|
this.modelType = !this.modelType |
|
|
|
|
}, |
|
|
|
|
updateType(type) { |
|
|
|
|
this.modelType = type |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -100,7 +129,7 @@ $height: 90px; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
min-width: $min-width; |
|
|
|
|
// min-width: $min-width; |
|
|
|
|
height: $height; |
|
|
|
|
box-sizing: content-box; |
|
|
|
|
&:not(.channel) { |
|
|
|
|
@ -111,7 +140,7 @@ $height: 90px; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 5%; |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-size: 1.428rem; |
|
|
|
|
color: #333330; |
|
|
|
|
line-height: $height; |
|
|
|
|
cursor: pointer; |
|
|
|
|
@ -144,7 +173,7 @@ $height: 90px; |
|
|
|
|
width: 300px; |
|
|
|
|
height: 40px; |
|
|
|
|
padding: 0 40px 0 15px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-size: 1.14rem; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 46px; |
|
|
|
|
border: 0; |
|
|
|
|
@ -158,10 +187,43 @@ $height: 90px; |
|
|
|
|
border-right: 1px solid #ccc; |
|
|
|
|
} |
|
|
|
|
.close-icon { |
|
|
|
|
font-size: 28px; |
|
|
|
|
font-size: 2rem; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.menu-child { |
|
|
|
|
/deep/ .el-submenu__title{ |
|
|
|
|
font-size: 1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.rightBox{ |
|
|
|
|
font-size: 3.57rem; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 10px; |
|
|
|
|
top: 20px; |
|
|
|
|
} |
|
|
|
|
.contentBox{ |
|
|
|
|
width: 100%; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 90px; |
|
|
|
|
left: 0; |
|
|
|
|
background-color: white; |
|
|
|
|
z-index: 9999; |
|
|
|
|
max-height: 30rem; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
} |
|
|
|
|
.searchBox, .languageBox{ |
|
|
|
|
padding-left: 20px; |
|
|
|
|
height: 56px; |
|
|
|
|
line-height: 56px; |
|
|
|
|
} |
|
|
|
|
.modelBox{ |
|
|
|
|
position: relative; |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
.search-wrap{ |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1660px) { |
|
|
|
|
.header { |
|
|
|
|
.logo { |
|
|
|
|
@ -175,4 +237,24 @@ $height: 90px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (min-width: 280px) and (max-width: 750px) { |
|
|
|
|
.contentBox{ |
|
|
|
|
.searchBox, .languageBox{ |
|
|
|
|
padding-left: 20px; |
|
|
|
|
height: 40px; |
|
|
|
|
line-height: 40px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.search-wrap { |
|
|
|
|
right: 10px; |
|
|
|
|
top: 0; |
|
|
|
|
width: 70%; |
|
|
|
|
input { |
|
|
|
|
width: 15rem; |
|
|
|
|
padding: 0 .5rem 0 .1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
