240 lines
7.0 KiB
Vue
240 lines
7.0 KiB
Vue
<template>
|
||
<div>
|
||
<Header></Header>
|
||
<div class="main">
|
||
<div class="left">
|
||
<div class="left-title">
|
||
<div class="title">
|
||
内容搜索
|
||
</div>
|
||
</div>
|
||
<div class="tab-list">
|
||
<ul>
|
||
<li :class="{active: tab == 0}" @click="tab = 0">内容搜索</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="location">
|
||
当前位置：<router-link to="/">首页</router-link> > 内容搜索
|
||
</div>
|
||
<div class="right-content news-list">
|
||
<ul>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
<li>
|
||
<router-link to="/detail">企业复工给员工发口罩</router-link>
|
||
<span>2020-04-08</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pager">
|
||
<span @click="paging(1)">首页</span>
|
||
<span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
|
||
<ul v-if="page.totalPage > 0 && page.totalPage <= 5">
|
||
<li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||
{{cpage}}
|
||
</li>
|
||
</ul>
|
||
<ul v-if="page.totalPage > 5">
|
||
<li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||
{{cpage}}
|
||
</li>
|
||
<li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
|
||
{{page.totalPage - 5 + cpage}}
|
||
</li>
|
||
<li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
|
||
{{page.page - (3 - cpage)}}
|
||
</li>
|
||
</ul>
|
||
<span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
|
||
<span @click="paging(page.totalPage)">尾页</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Footer></Footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/assets/components/Header'
|
||
import Footer from '@/assets/components/Footer'
|
||
export default {
|
||
name: 'Search',
|
||
components: {
|
||
Header,
|
||
Footer
|
||
},
|
||
data () {
|
||
return {
|
||
tab: 0,
|
||
page: {
|
||
page: 1,
|
||
rows: 10,
|
||
totalPage: 10
|
||
}
|
||
}
|
||
},
|
||
methods: {},
|
||
mounted: function () {}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
.main
|
||
width 1200px
|
||
margin 20px auto
|
||
overflow hidden
|
||
.left
|
||
width 350px
|
||
float left
|
||
padding 0 20px
|
||
box-sizing border-box
|
||
border 1px solid #e3e3e3
|
||
border-bottom 3px solid #e3e3e3
|
||
.left-title
|
||
height 50px
|
||
font-size 16px
|
||
color #333
|
||
border-bottom 1px solid #e3e3e3
|
||
.title
|
||
display inline-block
|
||
border-top 4px solid #ff4f01
|
||
line-height 46px
|
||
box-sizing border-box
|
||
.tab-list
|
||
padding 20px 0
|
||
ul
|
||
li
|
||
border-bottom 1px dashed #e3e3e3
|
||
padding-left 30px
|
||
height 45px
|
||
line-height 45px
|
||
box-sizing border-box
|
||
font-size 16px
|
||
color #333
|
||
position relative
|
||
cursor pointer
|
||
&.active
|
||
background #ededed
|
||
color #ff4f01
|
||
&:after
|
||
content ''
|
||
display block
|
||
width 3px
|
||
height 100%
|
||
background #ff4f01
|
||
position absolute
|
||
top 0
|
||
left 0
|
||
.right
|
||
float right
|
||
width 830px
|
||
padding 0 20px
|
||
box-sizing border-box
|
||
border 1px solid #e3e3e3
|
||
border-bottom 3px solid #e3e3e3
|
||
.location
|
||
height 50px
|
||
line-height 50px
|
||
border-bottom 1px solid #e3e3e3
|
||
font-size 14px
|
||
color #333
|
||
a
|
||
color #333
|
||
.right-content
|
||
margin 20px 0
|
||
.news-list
|
||
padding 0 20px
|
||
ul
|
||
min-height 460px
|
||
li
|
||
padding-left 15px
|
||
height 45px
|
||
line-height 45px
|
||
border-bottom 1px dashed #e3e3e3
|
||
background url("~@/assets/images/list-icon.png") left center no-repeat
|
||
a
|
||
font-size 16px
|
||
color #333
|
||
display inline-block
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
max-width 65%
|
||
&:hover
|
||
color #ff4f01
|
||
span
|
||
float right
|
||
color #999
|
||
font-size 14px
|
||
.pager
|
||
text-align center
|
||
font-size 0
|
||
margin-bottom 20px
|
||
span
|
||
display inline-block
|
||
padding 0 15px
|
||
line-height 30px
|
||
color #333
|
||
font-size 14px
|
||
margin 0 5px
|
||
vertical-align middle
|
||
cursor pointer
|
||
border 1px solid #CCCCCC
|
||
ul
|
||
display inline-block
|
||
overflow hidden
|
||
vertical-align middle
|
||
li
|
||
width 30px
|
||
line-height 30px
|
||
float left
|
||
margin-right 10px
|
||
cursor pointer
|
||
text-align center
|
||
font-size 14px
|
||
color #333
|
||
border 1px solid #CCCCCC
|
||
&.active
|
||
color: #ff4f01
|
||
border 1px solid #ff4f01
|
||
box-sizing border-box
|
||
&:last-child
|
||
margin 0
|
||
</style>
|