mall-web-ssr/components/home/floor/FloorList.vue

<template>
  <div class="floor-list">
    <div class="container">
      <floor-bar :floors="floors"></floor-bar>
      <floor :floor="defaultFloors[0]" :isDefault="true"></floor>
      <floor :floor="defaultFloors[1]" :isDefault="true"></floor>
      <floor v-for="(floor, index) in floors.data" :floor="floor" :isDefault="false" :key="index"></floor>
    </div>
  </div>
</template>
<script>
  import Floor from './Floor.vue'
  import FloorBar from './FloorBar.vue'
  export default {
    name: 'floor-list',
    components: {
      Floor,
      FloorBar
    },
    data () {
      return {
        defaultFloors: [
          {
            items: [
              {
                backGroundColor: '',
                body: '',
                hrefUrl: '',
                pictureUrl: '/images/floor/banner1.jpg',
                size: 'large'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'medium',
                price: 1.111111,
                currency: 'RMB'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RRR015P03TL',
                pictureUrl: '/images/floor/RRR015P03TL.png',
                size: 'small',
                price: 1.111111,
                currency: 'RMB'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'small',
                price: 1.111111,
                currency: 'RMB'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'medium',
                price: 1.111111,
                currency: 'RMB'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'small',
                price: 1.111111,
                currency: 'RMB'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'small',
                price: 1.111111,
                currency: 'RMB'
              }
            ]
          },
          {
            items: [
              {
                backGroundColor: '',
                body: '',
                hrefUrl: 'https://www.usoftmall.com/product/kind/11',
                pictureUrl: '/images/floor/banner2.jpg',
                size: 'large'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'medium'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RRR015P03TL',
                pictureUrl: '/images/floor/RRR015P03TL.png',
                size: 'small'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'small'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'medium'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'small'
              },
              {
                backGroundColor: '',
                body: 'Rohm<br>晶体管',
                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
                name: 'RHU002N06T106',
                pictureUrl: '/images/floor/RHU002N06T106.png',
                size: 'small'
              }
            ]
          }
        ]
      }
    },
//    mounted () {
//      this.$http.get('/api/floors/home')
//        .then(response => {
//          this.floors = response
//        })
//    }
    computed: {
      floors () {
        return this.$store.state.floor.list
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  /*add*/
  .floor-list .container{
    padding: 0;
  }
  .floor-list {
    margin-bottom: $xlg-pad;
  }
</style>