<template>
  <sail-page type="loading-view" title="服务">
    <div slot="content" class="service_box">
        <div class="service-box__wrapper">
          <div class="service__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="service__project-box">
            <div class="service_project">
              <p class="services">
                <router-link class="link" to="/lifePayManage"><!-- fullBill -->
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-shenghuojiaofei"/>
                   </svg>
                   <b class="icon_title">生活缴费</b>
                   <span class="icon_intruduce">便捷生活缴费</span>
                </router-link>
              </p>
              <p class="services">
                <router-link class="link" to="/mobilePhoneOpenDoor">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujikaimen"/>
                   </svg>
                   <b class="icon_title">手机开门</b>
                   <span class="icon_intruduce">远程轻松开门</span>
                </router-link>
              </p>
              <p class="services">
                <router-link class="link" to="/maintenanceApply/normal/normal">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-weibao1"/>
                   </svg>
                   <b class="icon_title">维保</b>
                   <span class="icon_intruduce">维修师傅上门服务</span>
                </router-link>
              </p>
              <p class="services">
                <router-link class="link" to="/protectClean">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-baojie1"/>
                   </svg>
                   <b class="icon_title">保洁</b>
                   <span class="icon_intruduce">保洁全新上线</span>
                </router-link>
              </p>
            </div>
            <div class="service_project">
              <p class="services">
                <router-link class="link" to="/moveHouse">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-banjia1"/>
                   </svg>
                   <b class="icon_title">搬家</b>
                   <span class="icon_intruduce">轻松搞定搬家</span>
                </router-link>
              </p>
              <p class="services">
                <router-link class="link" to="/checkInGuide">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-ruzhuzhinan1"/>
                   </svg>
                   <b class="icon_title">入住指南</b>
                   <span class="icon_intruduce">如何申请赛嶺公寓</span>
                </router-link>
              </p>
              <p class="services">
                <router-link class="link" to="/complainSuggest">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-tousujianyi1"/>
                   </svg>
                   <b class="icon_title">投诉建议</b>
                   <span class="icon_intruduce">给赛嶺点建议吧</span>
                </router-link>
              </p>
              <p class="services">
                <router-link class="link" to="/helloHouseKeeper">
                   <svg class="icon service__icon" aria-hidden="true">
                        <use xlink:href="#icon-changjianwenti1"/>
                   </svg>
                   <b class="icon_title">常见问题</b>
                   <span class="icon_intruduce">如何绑定房源</span>
                </router-link>
              </p>
            </div>
          </div>
          <div class="hot__project-boxs">
             <p class="hot_project">
                <span class="hot_words">精选活动</span>
                <router-link class="link look_more" to="/selectionOfActivityList">
                查看更多
                <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="(selctActivity, index) in selectionActivityInfo" :key="index">
                    <router-link class="link" :to="`selectionOfActivityDetails/${selctActivity.id}`">
                        <img class="activity_img" :src="`${hostURL}${selctActivity.coverImg}`">
                    </router-link>
                  </swiper-slide>
                                               
                </swiper> 
             </div>
          </div>
          <div class="service__project-boxs">
             <p class="hot_project">
                <span class="hot_words">欢迎加入赛嶺</span>           
             </p>
             <p class="hot_project-instructe">与赛领一起共享高品质生活</p>
             <div class="service__img">
                   <img src="@/assets/img/bannerImg/service_pic_bottom@3x.jpg">
             </div>
          </div>
        </div>
        <footer>
          <div class="weui-tabbar footer-content">
           <NavFooter/>
          </div>
        </footer>
    </div>   
  </sail-page>
</template>

<script>
import NavFooter from "@/common/widget/navFooter.vue";
import sailPage from "@/components/sail-page.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper"; 
import imgDemo1 from "@/assets/img/bannerImg/home_pic_banner@3x.png";
import imgDemo2 from "@/assets/img/bannerImg/service_pic_banner@3x.jpg";
import imgDemo from "@/assets/img/bannerImg/home_pic_banner@3x.jpg";
import { mapState } from "vuex"; 
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage,
    swiper,
    swiperSlide,
    NavFooter,
  },
  computed: {
    ...mapState({
      selectionActivityInfo:state => state.serviceModule.selectionActivityInfo
    })
  },
  data: function(){
    return {
      images: [
        imgDemo,
        //imgDemo2 	  
      ],
      ActivitySwiperOption: {
        slidesPerView: "auto",
        spaceBetween: -30,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      hostURL: URL

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

    });
  },
  methods: {
      
  }
};
</script>
<style lang="less">
     @import "~@/common/less/variable.less";
     @nice-hotProject:#585858;
     @nice-lookMore:#868686;
     @nice-intrudute:#D3D3D3;
    .service__banner {
        .van-swipe__indicators {
        	left: 85%;
        	bottom: 30%;      	
        	.van-swipe__indicator {
        	   width: 7px;
        	   height: 7px;
        	   background: #EFEFEF;
        	   border-radius: 0;
        	}
        	.van-swipe__indicator--active {
        	 background:#EBD211; 
        	}
        }
    }
    .service_box {
    	.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_project-instructe {
    	  width: 347px;
    	  height: 17px;
    	  line-height: 17px;
    	  font-size: 12px;
    	  color: @nice-intrudute;
    	  float: left;
    	  margin-left:14px; 
    	  text-align: left;
    	}
    }
     
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    @nice-hotProject:#585858;
    @nice-lookMore:#868686;
    @nice-intrudute:#D3D3D3;
    @nice-icon-black:#676767;
    @nice-icon-intro-black:#9B9B9B;
    .service-box__wrapper {
      min-height: 100vh;
    }
    .service_box {
        width: 375px;
        background:@nice-bgwhite;
        position: relative;
        // min-height: 100vh;
        overflow: hidden;
        .service_title {
        	width: 375px;
        	height: 42px;
        	text-align: center;
        	line-height: 42px;
        	font-size: 17px;
        	color: @nice-nameColor;
        }
        .service__banner {
        	width: 375px;
        	height: 227px;
        	img {
        		width: 375px;
        	}
        }
        .service__project-box {
        	width: 348px;
        	height: 225px;
        	border-radius:7px;
        	box-shadow: 0 0 10px rgba(0,0,0,.16);
        	position: relative;
        	left: 13.5px;
        	top: -50px;
        	z-index: 999;
        	background: @nice-bgwhite;
        	.service_project {
        		width: 348px;
        		height: 112px;
        		display: flex;
        		.services {
        			width: 87px;
        			height: 112px;
        			.service__icon {
        				width: 24px;
        				height: 24px;
        				padding-top: 20px;
        			}
        			.icon_title {
        				width: 87px;
        				height: 18px;
        				font-size: 13px;
        				color: @nice-icon-black;
        				line-height: 18px;
        				display: block;
        				margin-top: 10px;
                font-weight: 700;
        			}
        			.icon_intruduce {
        				width: 87px;
        				height: 13px;
        				font-size: 9px;
        				color: @nice-icon-intro-black;
        				line-height: 13px;
        				display: block;
        				margin-top: 5px;
        			}

        		}
        	}

        }
        .hot__project-boxs {
          width: 375px;
          background: @nice-bgwhite;
          margin-top: -40px;         
          .hot_project_swiper {
            width: 375px;
            height: 102px;
            margin-top: 30px;
            .activity_img {
            	width: 340px;
            	height: 102px;
              margin:0 10px; 
              float: left;
            } 
                                 
          }                
        }
        .service__project-boxs {
        	width: 375px;
        	background: @nice-bgwhite;
        	padding-bottom: 80px;
        	.service__img {
        		width: 350px;
        		height: 121px;
        		display: block;
        		margin-left: 12.5px;
                margin-top: 20px;
        		img {
        			width: 350px;
        			height: 121px;
        		}
        	}
        }
    }
</style>