|
|
|
@ -3,21 +3,29 @@ |
|
|
|
|
<div class="articles"> |
|
|
|
|
<div class="top"> |
|
|
|
|
<div class="search"> |
|
|
|
|
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title"> |
|
|
|
|
<input ref="search" |
|
|
|
|
type="text" |
|
|
|
|
:placeholder="$t('column.titlePlaceholder')" |
|
|
|
|
v-model="title"> |
|
|
|
|
<i class="el-icon-search icon"></i> |
|
|
|
|
</div> |
|
|
|
|
<p class="result">包含 “{{ title }}” 的搜索结果</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<ul v-if="articles.length" class="list"> |
|
|
|
|
<li v-for="(item, i) in articles" :key="i"> |
|
|
|
|
<ul v-if="articles.length" |
|
|
|
|
class="list"> |
|
|
|
|
<li v-for="(item, i) in articles" |
|
|
|
|
:key="i"> |
|
|
|
|
<h6 @click="toArtice(item)">{{ item.title }}</h6> |
|
|
|
|
<div class="des" v-html="item.mainBody"></div> |
|
|
|
|
<div class="des" |
|
|
|
|
v-html="item.mainBody"></div> |
|
|
|
|
<Breadcrumb :data.sync="item.routes" /> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div v-else class="none"> |
|
|
|
|
<img src="@/assets/images/none.png" alt=""> |
|
|
|
|
<div v-else |
|
|
|
|
class="none"> |
|
|
|
|
<img src="@/assets/images/none.png" |
|
|
|
|
alt=""> |
|
|
|
|
<p class="text">没有找到您搜索的内容,您可尝试搜索其他关键词。</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -90,12 +98,11 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.wrap { |
|
|
|
|
background: url(../../assets/images/result-bg1.png) no-repeat, |
|
|
|
|
url(../../assets/images/result-bg2.png) bottom right/auto no-repeat; |
|
|
|
|
background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat; |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
.articles { |
|
|
|
|
width: 100%; |
|
|
|
|
width: 70%; |
|
|
|
|
padding-top: 47px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
@ -121,7 +128,7 @@ export default { |
|
|
|
|
color: #333; |
|
|
|
|
border: 0; |
|
|
|
|
outline: none; |
|
|
|
|
background: #F7F7F7; |
|
|
|
|
background: #f7f7f7; |
|
|
|
|
} |
|
|
|
|
.icon { |
|
|
|
|
position: absolute; |
|
|
|
@ -140,7 +147,7 @@ export default { |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 22px; |
|
|
|
|
color: #1583FF; |
|
|
|
|
color: #1583ff; |
|
|
|
|
line-height: 30px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
@ -163,9 +170,19 @@ export default { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (min-width: 280px) and (max-width: 750px) { |
|
|
|
|
@media (max-width: 1100px) { |
|
|
|
|
.top { |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
} |
|
|
|
|
.search { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: 750px) { |
|
|
|
|
.articles { |
|
|
|
|
width: 100%; |
|
|
|
|
width: 90%; |
|
|
|
|
.top { |
|
|
|
|
flex-direction: column; |
|
|
|
|
.search { |
|
|
|
@ -176,7 +193,7 @@ export default { |
|
|
|
|
.none { |
|
|
|
|
margin-top: 50px; |
|
|
|
|
.text { |
|
|
|
|
font-size: .5rem; |
|
|
|
|
font-size: 0.5rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|