<template>
  <sail-page type="loading-view" title="社区">
    <div slot="content" class="communtity_activity">
        <div class="communtity_title">社区</div>
        <div class="communtity__banner">
          <van-swipe>
            <van-swipe-item v-for="(image, index) in images" :key="index">
               <img :src="image" >
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="go_shopping">
        	<img src="~@/assets/img/bannerImg/Community_pic_banner@3x.jpg">
        </div>
        <div class="hot__project-boxs">
           <p class="hot_project">
              <span class="hot_words">社区活动</span>
              <router-link class="link look_more" to="/communityActivityList">
              查看更多
              <svg class="icon service__icon" aria-hidden="true">
                   <use xlink:href="#icon-qianjin"/>
              </svg>
            </router-link>
           </p>
           <p class="hot_project-instructe">打造不一样的社区生活</p>
           <div class="hot_project_swiper">
              <swiper :options="ActivitySwiperOption">
                <swiper-slide v-for="(activity, index) in communityAllActivityInfo" :key="index">
                  <router-link class="link" :to="`/communityActivityDetail/${activity.id}`">
                   <CommunityActivitiesCard :data="activity" class="community_activities_card"/>
                  </router-link>
                </swiper-slide>                                              
              </swiper> 
           </div>
        </div>
        <footer>
          <div class="weui-tabbar footer-content">
           <NavFooter class="hot__projects"/>
          </div>
        </footer>
    </div>   
  </sail-page>
</template>

<script>
import NavFooter from "@/common/widget/navFooter.vue";
import sailPage from "@/components/sail-page.vue";
import CommunityActivitiesCard from "@/common/widget/communityActivitiesCard.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import imgDemo from "@/assets/img/bannerImg/home_pic_banner@3x.jpg";
import { mapState } from "vuex"; 
export default {
  components: {
    sailPage,
    swiper,
    swiperSlide,
    CommunityActivitiesCard,
    NavFooter,
  },
  computed:{
    ...mapState({
      communityAllActivityInfo:state => state.allActivityModule.communityAllActivityInfo
    })
  },
  data: function(){
    return {
      images: [
        imgDemo	   
      ],
      ActivitySwiperOption: {
        slidesPerView: "auto",
        spaceBetween: -40,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }

    }; 
  },
  asyncData({store,route}) {
    return store.dispatch("allActivityModule/getCommunityActivityInfo",{
      pn : 1,
      pageSize : 10
    }).then(res => {


    });
  },
  methods: {
      
  }
};
</script>
<style lang="less">
     @import "~@/common/less/variable.less";
    .communtity__banner {
        .van-swipe__indicators {
        	left: 85%;
        	bottom: 10%;      	
        	.van-swipe__indicator {
        		width: 9px;
        		height: 9px;
        		background:rgba(0,0,0,0);
        		border:1px solid @nice-bgwhite; 
        	}
        	.van-swipe__indicator--active {
        		background: @nice-bgwhite;
        	}
        }
    }
     
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    .communtity_activity {
        width: 375px;
        background:@nice-bgwhite;
        @nice-hotProject:#585858;
        @nice-lookMore:#868686;
        @nice-intrudute:#D3D3D3;
        .communtity_title {
        	width: 375px;
        	height: 42px;
        	text-align: center;
        	line-height: 42px;
        	font-size: 17px;
        	color: @nice-nameColor;
        }
        .communtity__banner {
        	width: 375px;
        	height: 189px;
        	img {
        		width: 375px;
        		height: 189px;
        	}
        }
        .go_shopping {
        	width: 348px;
        	height: 101px;
        	margin: 20px auto;
        	img {
        	   width: 348px;
        	   height: 101px;
        	}
        }
        .hot__project-boxs {
          width: 375px;
          height: 420px;
          background: @nice-bgwhite;
          margin-top: 13px;
          padding-bottom: 50px;
          .hot_project {
            width: 347px;
            height: 24px;
            padding-top: 30px;
            margin: 0 auto;
            font-size: 17px;
            color: @nice-hotProject;
            text-align: left;
            line-height: 24px;
            .hot_words{
              font-weight: bold;
            }
            .look_more {
              float: right;
              font-size: 13px;
              color: @nice-lookMore;
              margin-top: 3px;
            }
          }
          .hot_house {
            padding-top: 10px;
          }
          .hot_project-instructe {
            width: 347px;
            height: 17px;
            line-height: 17px;
            font-size: 12px;
            color: @nice-intrudute;
            float: left;
            margin-left:14px; 
            text-align: left;
          }
          .hot_project_swiper {
            width: 375px;
            height: 200px;
            margin-top: 40px; 
            .community_activities_card {
            	margin-left: 14px;          	
            }          
            
          }       

        }
    }
</style>