xzrkz-web/src/pages/Exhibition/Exhibition.vue

<template>
    <div>
      <Header></Header>
      <div class="location">
        <div class="location-content">
          您的位置：<router-link to="/">首页</router-link> > 展览展示
        </div>
      </div>
      <div class="select">
        <div class="select-container">
          <div class="select-line">
            <span>展览分类></span>
            <button :class="{active: selectedType == '00'}" @click="selectedType = '00'">全部</button>
            <button v-for="btn in typeList" :key="btn.id" :class="{active: selectedType == btn.id}" @click="selectedType = btn.id">展览展示</button>
          </div>
        </div>
      </div>
      <div class="exhibition">
        <ul>
          <router-link :to="{path: '/exhibitionDetail/' + list.id}" tag="li" v-for="list in exhibition" :key="list.id">
            <div class="exhibition-img">
              <img :src="list.poster" alt="">
            </div>
            <div class="exhibition-info">
              <h1>{{list.exhibitionName}}</h1>
              <div class="exhibition-info-bottom">
                <span class="good">{{list.good}}</span>
                <span class="view">{{list.view}}</span>
              </div>
            </div>
          </router-link>
        </ul>
      </div>
      <div class="pager">
        <span>首页</span>
        <span>上一页</span>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>...</li>
          <li>59</li>
          <li>60</li>
        </ul>
        <span>下一页</span>
        <span>尾页</span>
        <input type="text" value="1">
        <i>/58页</i>
        <button>跳转</button>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/common/components/Header'
import Footer from '@/common/components/Footer'
import axios from 'axios'
export default {
  name: 'Exhibition',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      selectedType: '00',
      typeList: [],
      exhibition: []
    }
  },
  methods: {
    getExhibitionData () {
      var self = this
      axios.get('/api/exhibition.json').then(function (res) {
        res = res.data
        const data = res.data
        console.log(data)
        self.typeList = data.typeList
        self.exhibition = data.exhibition
      })
    }
  },
  mounted () {
    this.getExhibitionData()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.location
  background #e5e5e5
  line-height 30px
  .location-content
    width 1200px
    margin 0 auto
    font-size 14px
    color #565656
.select
  padding 10px 0 0
  background #f0f0f0
  overflow hidden
  .select-container
    width 1200px
    margin 0 auto
    .select-line
      margin-bottom 10px
      font-size 14px
      span
        color #565656
      button
        width 80px
        height 30px
        padding 0 5px
        box-sizing border-box
        border none
        background none
        outline none
        color #565656
        border-radius 4px
        cursor pointer
        white-space nowrap
        overflow hidden
        text-overflow: ellipsis
        &.active
          color #fff
          background #01a9f8
.exhibition
  width 1200px
  min-height 400px
  margin 20px auto
  ul
    overflow hidden
    li
      width 280px
      border 1px solid #a8a8a8
      box-sizing border-box
      float left
      margin-right 25px
      margin-bottom 25px
      cursor pointer
      &:nth-child(4n)
        margin-right 0
      .exhibition-img
        width 100%
        height 185px
        img
          width 100%
          height 100%
      .exhibition-info
        padding 10px 20px
        h1
          text-align center
          font-size 18px
          color #565656
          font-weight normal
          white-space nowrap
          overflow hidden
          text-overflow: ellipsis
          margin-bottom 5px
        .exhibition-info-bottom
          span
            font-size 14px
            color #a8a8a8
            &.view
              float right
.pager
  width 1200px
  margin 0 auto 20px
  text-align center
  font-size 0
  span
    display inline-block
    padding 0 15px
    line-height 25px
    color #676767
    border 1px solid #d2d2d2
    font-size 14px
    margin 0 5px
    vertical-align middle
  ul
    display inline-block
    overflow hidden
    vertical-align middle
    li
      width 45px
      line-height 25px
      float left
      margin-right 10px
      border 1px solid #d2d2d2
      cursor pointer
      text-align center
      font-size 14px
      color #676767
  input
    width 50px
    height 25px
    border 1px solid #d2d2d2
    text-align center
    vertical-align middle
  i
    font-style normal
    color #676767
    font-size 14px
    line-height 25px
    display inline-block
    vertical-align middle
    margin 0 5px
  button
    border none
    outline none
    background #4792C2
    width 50px
    height 25px
    vertical-align middle
    color #fff
    font-size 14px
</style>