4dkankan_official/src/page/navs/search/index.vue

<template>
<div>
  <div class="search-con">
    <div class="search-ban">
      <div class="search-txt">
        <vcenter>
          <span>25</span>
          <div></div>
        </vcenter>
      </div>
      <div class="search-input">
        <div class="input">
          <vcenter>
            <input placeholder="请输入关键字查找" type="text">
          </vcenter>
        </div>
      </div>
    </div>
    <div class="search-btn">
      <div class="img-con">
        <img :src="require('@/assets/images/search.png')" alt="">
      </div>
    </div>
    </div>
    <Item :data='items' />
    <div class="more">
      <div class="result">
        <div class="result-btn">查看所有结果</div>
      </div>
    </div>
    <div class="page-con">
      <div class="page-body">
        <div class="page-title">页码</div>
          <div class="paging">
            <vcenter>
                <Paging @clickHandle="pageChange" :total="total" :equable="pageSize" />
            </vcenter>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import Item from './item/'
import vcenter from '@/components/vcenter'
import Paging from '@/components/Paging'

const items = [{
  title: 'Oin Bar 露天吧台',
  img: '',
  type: '餐饮',
  username: 'VannyShen',
  date: '2019年4月13日'
}, {
  title: 'Oin Bar 露天吧台',
  img: '',
  type: '餐饮',
  username: 'VannyShen',
  date: '2019年4月13日'
}, {
  title: 'Oin Bar 露天吧台',
  img: '',
  type: '餐饮',
  username: 'VannyShen',
  date: '2019年4月13日'
}, {
  title: 'Oin Bar 露天吧台',
  img: '',
  type: '餐饮',
  username: 'VannyShen',
  date: '2019年4月13日'
}, {
  title: 'Oin Bar 露天吧台',
  img: '',
  type: '餐饮',
  username: 'VannyShen',
  date: '2019年4月13日'
}]

export default {
  components: {
    Item,
    vcenter,
    Paging
  },
  data () {
    return {
      items,
      total: 90,
      pageSize: 10
    }
  },
  computed: {},
  watch: {},
  // 方法集合
  methods: {
    pageChange () {

    }
  },
  created () {

  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
@import './style.scss'
</style>