wechat/src/module/user/mainPage/indexPage/index.vue

<template>
  <div class="mainPage">
    <div class="topBanner">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide class="swiper-slide" v-for="(item,index) in 5" :key="index">
          <img src="" class="cover" alt="">
        </swiper-slide>
      </swiper>
    </div>
    <div class="pageTitle flex-h">
      <h5 class="flex-item">
        <span>银城5A全龄生活体验平台</span>
      </h5>
    </div>
    <div class="flex-h">
      <nav class="pageNav flex-item">
        <router-link :to="{name:'fiveA',query:{}}" v-for="(item,index) in 5" :key="index">
          <a>
            <img src="" class="centerLabel cover" alt="">
            <em>标题</em>
          </a>
          <span>备注内容</span>
        </router-link>
      </nav>
    </div>
    <div class="MsgBanner">
      <div class="flex-h">
        <i class="iconfont icon-xiaoxi"></i>
        <span>最新消息：</span>
        <div class="flex-item">
          <div>
            <swiper :options="swiperOptionMsg" ref="mySwiperMsg">
              <swiper-slide class="swiper-slide" v-for="(item,index) in 5" :key="index">
                <router-link :to="{name:'',query:{}}">这是一条消息</router-link>
              </swiper-slide>
              <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="pageTitle flex-h">
      <h5 class="flex-item">
        <span>售楼处项目专题</span>
      </h5>
    </div>
    <div class="flex-h">
      <ul class="projectList flex-item">
        <router-link tag="li" :to="{name:'majorProjects',query:{}}" v-for="(item,index) in 3" :key="index">
          <img src="" class="centerLabel cover" alt="">
        </router-link>
      </ul>
    </div>
    <div style="width:100%;height:.1rem;background:#f8f8f8;margin:.25rem auto 0;"></div>
    <div class="pageTitle flex-h">
      <h5 class="flex-item">
        <span>活动资讯</span>
      </h5>
    </div>
    <div class="flex-h">
      <ul class="newsList flex-item">
        <router-link tag="li" :to="{name:'',query:{}}" v-for="(item,index) in newsList" :key="index">
          <newsItem :data="item"></newsItem>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import newsItem from '../../../../components/newsItem/index'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
export default {
  name: '',
  data () {
    return {
      swiperOption: {
        observer: true,
        loop: true,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      swiperOptionMsg: {
        observer: true,
        direction: 'vertical',
        loop: true,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      newsList: [{ // 资讯列表
        title: '我是标题我是标题我是标题我是标题我是标题我是标题',
        time: '2018年5月25日',
        img: '',
        id: ''
      }, {
        title: '我是标题我是标题我是标题我是标题我是标题我是标题',
        time: '2018年5月25日',
        img: '',
        id: ''
      }, {
        title: '我是标题我是标题我是标题我是标题我是标题我是标题',
        time: '2018年5月25日',
        img: '',
        id: ''
      }, {
        title: '我是标题我是标题我是标题我是标题我是标题我是标题',
        time: '2018年5月25日',
        img: '',
        id: ''
      }, {
        title: '我是标题我是标题我是标题我是标题我是标题我是标题',
        time: '2018年5月25日',
        img: '',
        id: ''
      }]
    }
  },
  computed: {
    ...mapState({
      banner: x => x.index.banner
    }),
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
    MySwiperMsg () {
      return this.$refs.MySwiperMsg.swiper
    }
  },
  components: {
    newsItem,
    swiper,
    swiperSlide,
  },
  created () {
    this.getIndexInfo({ orgId: '1' })
  },
  methods: {
    ...mapIndexActions(['getIndexInfo'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>