Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/wechat into dev

package.json

@@ -11,8 +11,10 @@
   "dependencies": {
     "node-sass": "^4.9.3",
     "sass-loader": "^7.1.0",
+    "swiper": "^4.3.5",
     "vant": "^1.1.16",
     "vue": "^2.0.1",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/components/newsItem/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="newsItem flex-h">
+    <div class="img">
+      <a><img :src="data.img" class="centerLabel cover" alt=""></a>
+    </div>
+    <div class="flex-item flex-v">
+      <div class="flex-item">
+        <div>
+          <span>{{data.title}}</span>
+        </div>
+      </div>
+      <span>{{data.time}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+    
+  },
+  components: {
+    
+  },
+  created () {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/newsItem/page.scss

@@ -0,0 +1,46 @@
+.newsItem{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  padding: .15rem 0;
+  .img{
+    width: .86rem;
+    position: relative;
+    overflow: hidden;
+    margin-right: .1rem;
+    a{
+      width: 100%;
+      display: block;
+      padding-bottom: 60%;
+      background: #eee;
+      border-radius: .04rem;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+  &>div.flex-item{
+    div{
+      div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        span{
+          width: 100%;
+          line-height: .18rem;
+          font-size: .14rem;
+          display: block;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    &>span{
+      width: 100%;
+      line-height: .14rem;
+      font-size: .1rem;
+      display: block;
+      color: #b0b0b0;
+    }
+  }
+}

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

@@ -1,23 +1,137 @@
 <template>
   <div class="mainPage">
-    首页
+    <div class="topBanner">
+      <!-- <img src="" class="centerLabel cover" alt=""> -->
+      <swiper :options="swiperOption" ref="mySwiper">
+        <swiper-slide class="swiper-slide" v-for="(item,index) in 5" :key="index">
+          {{index}}
+        </swiper-slide>
+        <div class="swiper-pagination"  slot="pagination"></div>
+      </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:'',query:{}}" v-for="(item,index) in 5" :key="index">
+          <a>
+            <!-- <img src="" class="centerLabel cover" alt=""> -->
+          </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:'',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'
 
 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: {
-    
+    MySwiper() {
+      return this.$refs.mySwiper.swiper
+    },
+    MySwiperMsg() {
+      return this.$refs.MySwiperMsg.swiper
+    },
   },
   components: {
-    
+    newsItem,
+    swiper,
+    swiperSlide,
   },
   created () {
     

src/module/user/mainPage/indexPage/page.scss

@@ -0,0 +1,166 @@
+.mainPage{
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  background: #fff;
+  &>*:last-child{
+    margin-bottom: .2rem;
+  }
+  .topBanner{
+    width: 100%;
+    height: 0;
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 54%;
+    background: #eee;
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      top: 0;
+    }
+  }
+  .pageTitle{
+    margin: .18rem auto 0;
+    position: relative;
+    overflow: hidden;
+    h5{
+      &::after{
+        content: '';
+        width: 100%;
+        height: .01rem;
+        background: #eee;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        z-index: 1;
+      }
+      width: 100%;
+      display: block; 
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+      margin: 0 .2rem;
+      span{
+        display: inline-block; 
+        line-height: .26rem;
+        font-size: .14rem;
+        font-weight: normal;
+        background: #fff;
+        position: relative;
+        z-index: 2;
+        padding: 0 .15rem;
+      }
+    }
+  }
+  .pageNav{
+    margin: 0 .1rem;
+    font-size: 0;
+    &>a{
+      width: 20%;
+      display: inline-block;
+      position: relative;
+      overflow: hidden;
+      margin-top: .15rem;
+      vertical-align: top;
+      a{
+        width: 70%;
+        display: block;
+        padding-bottom: 70%;
+        position: relative;
+        overflow: hidden;
+        background: #eee;
+        margin: 0 auto;
+        border-radius: 100%;
+      }
+      span{
+        width: 70%;
+        display: block;
+        margin: .1rem auto 0;
+        line-height: .16rem;
+        font-size: .1rem;
+        text-align: center;
+        color: #666;
+      }
+    }
+  }
+  .MsgBanner{
+    width: 100%;
+    height: .44rem;
+    position: relative;
+    overflow: hidden;
+    background: #f8f8f8;
+    margin: .25rem auto 0;
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      align-items: center;
+      &>i,
+      &>span{
+        color: #f05a3f;
+        font-size: .12rem;
+        margin-left: .08rem;
+      }
+      &>i{
+        font-size: .16rem;
+        margin-left: .3rem;
+      }
+      &>div{
+        margin-left: .1rem;
+        height: 100%;
+        margin-right: .2rem;
+        &>div{
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+          &>div{
+            width: 100%;
+            height: 100%;
+            a{
+              width: 100%;
+              display: inline-block;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              line-height: .44rem;
+              color: #f05a3f;
+            }
+          }
+        }
+      }
+    }
+  }
+  .projectList{
+    margin: .1rem .1rem 0;
+    li{
+      width: 100%;
+      position: relative;
+      height: 0;
+      padding-bottom: 30%;
+      background: #eee;
+      overflow: hidden;
+      margin: .08rem auto 0;
+    }
+  }
+  .newsList{
+    margin: .15rem .2rem .2rem;
+    &>li{
+      width: 100%;
+      display: block;
+      position: relative;
+      overflow: hidden;
+      border-top: .01rem solid #eee;
+      &:first-child{
+        border-top:none
+      }
+    }
+  }
+}