php/www/vue/src/components/home.vue

<template>
  <div class="home">
    <swiper></swiper>
    <div class='home-img-1'>
      <img :src='homeImg1' alt="">
      <div class="home-nav">
        <!--品牌-->
        <div class=""></div>
        <!--管家-->
        <div class=""></div>
        <!--证件-->
        <div class=""></div>
        <!--工具-->
        <div class=""></div>
        <!--赔退-->
        <div class=""><a href="http://commontest.yiguanjia.me/webapp/o2o/module/pay/"></a></div>
      </div>
    </div>
    <homeList></homeList>
    <navigation></navigation>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import { XSwitch } from 'vux'
  export default {
    name: 'home',
    data () {
      return {
        homeImg1: 'http://odulvej8l.bkt.clouddn.com/%E5%9B%BE%E6%A0%87-01.jpg'
      }
    },
    components: {
      XSwitch
    },
    computed: mapState({
      userInfo: state => state.userInfo,
      productInfo: state => state.product.productInfo
    }),
    created () {
      this.USERINFO()
      this.PRODUCT()
    },
    methods: {
      ...mapActions([
        'USERINFO',
        'PRODUCT'
      ])
    }
  }
</script>

<!-- 添加“scoped”属性来限制CSS到此组件 -->
<style scoped>
  .home-img-1 {
    background-color: #fff;
    margin-top: 3%;
    padding: 3% 0;
    position: relative;
  }

  .home-img-1 img {
    display: block;
    width: 100%;
  }

  .home-img-1 .home-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 3%;
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
  }

  .home-img-1 .home-nav div {
    width: 20%;
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.5);
    line-height: 54px;
  }
</style>