xcx

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,94 @@
 <template>
   <div class="mainPage">
-    首页
+    <div class="topBanner">
+      <!-- <img src="" class="centerLabel cover" alt=""> -->
+    </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>
+    <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'
 
 export default {
   name: '',
   data () {
     return {
-      
+      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: {
     
   },
   components: {
-    
+    newsItem,
   },
   created () {
     

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

@@ -0,0 +1,117 @@
+.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;
+  }
+  .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;
+  }
+  .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
+      }
+    }
+  }
+}