xcx

src/components/courseItem/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="courseItem 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 class="content">
+          <div class="title flex-h">
+            <div class="flex-item">
+              <span>{{data.title}}</span>
+            </div>
+            <div v-if="data.getWay=='ticket'">
+              <span>{{data.defaultPrice}}</span><br>
+              <span>优惠券体验</span>
+            </div>
+          </div>
+          <span>时间：{{data.time}}</span>
+          <span>地点：{{data.address}}</span>
+        </div>
+      </div>
+      <ul v-if="data.getWay=='ticket'">
+        <li v-for="(item,index) in data.tag" :key="index">{{item}}</li>
+      </ul>
+      <div v-if="data.getWay=='free'" class="flex-h">
+        <div class="flex-item">
+          <i class="iconfont icon-kecheng"></i>
+          <span>团体课</span>  
+        </div>
+        <span>免费体验</span>
+      </div>
+    </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/courseItem/page.scss

@@ -0,0 +1,94 @@
+.courseItem{
+  .img{
+    width: .8rem;
+    position: relative;
+    overflow: hidden;
+    a{
+      width: 100%;
+      padding-bottom: 125%;
+      display: block;
+      background: #eee;
+      border-radius: .06rem;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+  &>div.flex-item{
+    position: relative;
+    overflow: hidden;
+    margin-left: .15rem;
+    &>div.flex-item{
+      .title{
+        align-items: center;
+        &>.flex-item{
+          span{
+            width: 100%;
+            font-size: .15rem;
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #323b45;
+          }
+          &+div{
+            text-align: right;
+            *{
+              display: inline-block;
+              line-height: .14rem;
+              font-size: .11rem;
+              color: #ff1414;
+            }
+            &>*:first-child{
+              text-decoration: line-through;
+              color: #ccc;
+            }
+          }
+        }
+      }
+      &>div.content{
+        &>span{
+          width: 100%;
+          display: block;
+          line-height: .16rem;
+          font-size: .11rem;
+          color: #565656;
+        }
+      }
+    }
+    &>ul{
+      white-space: nowrap;
+      font-size: 0;
+      li{
+        display: inline-block;
+        line-height: .2rem;
+        background: #f2f4f7;
+        color: #92a7c9;
+        font-size: .11rem;
+        margin-right: .05rem;
+        padding: 0 .05rem;
+        border-radius: .04rem;
+      }
+    }
+    &>div.flex-h{
+      div{
+        font-size: 0;
+        white-space: nowrap;
+        *{
+          font-size: .11rem;
+          vertical-align: middle;
+          line-height: .2rem;
+          display: inline-block;
+          margin-right: .05rem;
+          color: #fa2a00;
+        }
+        i{
+          font-size: .13rem;
+        }
+      }
+      &>span{
+        line-height: .2rem;
+        color: #fa2a00;
+        font-size: .11rem;
+      }
+    }
+  }
+}

src/module/user/fiveA/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="mainPage flex-v">
+    <nav class="flex-h">
+      <a class="flex-item" v-for="(item,index) in 6" :key="index" :class="{'active':index==active}">导航{{index+1}}</a>
+    </nav>
+    <div class="flex-item">
+      <div>
+        <div v-for="(item,index) in 6" :key="index" v-if="index==active">
+          <div class="banner flex-h">
+            <div class="flex-item">
+              <swiper :options="swiperOption" ref="mySwiper">
+                <swiper-slide class="swiper-slide" v-for="(item,index) in 5" :key="index">{{index}}
+                  <!-- <img src="" class="cover" alt=""> -->
+                </swiper-slide>
+              </swiper>
+            </div>
+          </div>
+          <h5>结识更多朋友</h5>
+          <div class="courseList flex-h">
+            <ul class="flex-item">
+              <router-link tag="li" :to="{name:'',query:{}}" v-for="(item,index) in courseList" :key="index">
+                <courseItem :data="item"></courseItem>
+              </router-link>
+            </ul>
+          </div>
+          <router-link :to="{name:'',query:{}}" class="more">查看更多</router-link>
+          <div style="width:100%;height:.1rem;background:#f8f8f8;margin:0 auto;"></div>
+          <h5>资讯</h5>
+          <div class="newsList flex-h">
+            <ul class="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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import courseItem from '../../../components/courseItem/index'
+import newsItem from '../../../components/newsItem/index'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+
+export default {
+  name: '',
+  data () {
+    return {
+      active: 1,
+      swiperOption: {
+        observer: true,
+        loop: true,
+        autoplay: {
+          disableOnInteraction: false,
+        }
+      },
+      courseList: [{ // 课程列表
+        id:'',
+        title:'课程名称',
+        img:'',
+        time:'2018.04.04 18:30-20:00',
+        address:'南京南',
+        tag:['儿童教育','小小外交官'],
+        courseType:'团体课',
+        defaultPrice:'168/节',
+        getWay:'ticket'
+      },{
+        id:'',
+        title:'课程名称',
+        img:'',
+        time:'2018.04.04 18:30-20:00',
+        address:'南京南',
+        tag:['儿童教育','小小外交官'],
+        courseType:'团体课',
+        defaultPrice:'168/节',
+        getWay:'free'
+      },{
+        id:'',
+        title:'课程名称',
+        img:'',
+        time:'2018.04.04 18:30-20:00',
+        address:'南京南',
+        tag:['儿童教育','小小外交官'],
+        courseType:'团体课',
+        defaultPrice:'168/节',
+        getWay:'free'
+      }],
+      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,
+    courseItem,
+  },
+  created () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/fiveA/page.scss

@@ -0,0 +1,107 @@
+.mainPage{
+  background: #fff;
+  &>nav{
+    white-space: nowrap;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    font-size: 0;
+    padding: .09rem 0;
+    background: #fff;
+    z-index: 100;
+    position: relative;
+    a{
+      line-height: .32rem;
+      text-align: center;
+      position: relative;
+      &.active::after{
+        content: '';
+        width: 50%;
+        height: .02rem;
+        display: block;
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        background: #fc6243;
+      }
+    }
+  }
+  &>div.flex-item{
+    position: relative;
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      &>div{
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        transform: translateZ(0);
+        -webkit-transform: translateZ(0);
+        .banner{
+          margin: .2rem auto 0;
+          overflow: visible;
+          &>div{
+            margin: 0 .2rem;
+            position: relative;
+            overflow: hidden;
+            border-radius: .12rem;
+            padding-bottom: 46%;
+            background: #eee;
+            box-shadow: 0 0 .2rem .01rem rgba(0, 0, 0, .1);
+            &>div{
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
+              bottom: 0;
+              overflow: hidden;
+            }
+          }
+        }
+        h5{
+          width: 100%;
+          display: block;
+          line-height: .26rem;
+          font-size: .14rem;
+          text-indent: .2rem;
+          margin: .2rem auto 0;
+        }
+        .courseList{
+          &>ul{
+            margin: 0 .2rem;
+            &>li{
+              padding: .15rem 0;
+              border-bottom: .01rem solid #eee;
+            }
+          }
+        }
+        .more{
+          width: 100%;
+          display: block;
+          text-align: center;
+          font-size: .12rem;
+          line-height: .4rem;
+        }
+      }
+      .newsList{
+        &>ul{
+          margin: 0 .2rem;
+          &>li{
+            padding: .15rem 0;
+            border-top: .01rem solid #eee;
+            &:first-child{
+              border-top: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,12 +1,10 @@
 <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}}
+          <img src="" class="cover" alt="">
         </swiper-slide>
-        <div class="swiper-pagination"  slot="pagination"></div>
       </swiper>
     </div>
     <div class="pageTitle flex-h">
@@ -16,9 +14,10 @@
     </div>
     <div class="flex-h">
       <nav class="pageNav flex-item">
-        <router-link :to="{name:'',query:{}}" v-for="(item,index) in 5" :key="index">
+        <router-link :to="{name:'fiveA',query:{}}" v-for="(item,index) in 5" :key="index">
           <a>
-            <!-- <img src="" class="centerLabel cover" alt=""> -->
+            <img src="" class="centerLabel cover" alt="">
+            <em>标题</em>
           </a>
           <span>备注内容</span>
         </router-link>
@@ -48,7 +47,7 @@
     <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=""> -->
+          <img src="" class="centerLabel cover" alt="">
         </router-link>
       </ul>
     </div>

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

@@ -76,6 +76,21 @@
         background: #eee;
         margin: 0 auto;
         border-radius: 100%;
+        img{
+          z-index: 1;
+        }
+        em{
+          width: 100%;
+          display: block;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          line-height: .3rem;
+          font-size: .11rem;
+          text-align: center;
+          color: #fff;
+          z-index: 2;
+        }
       }
       span{
         width: 70%;

src/module/user/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 
 import mainPage from './mainPage/index' // 主页
 import indexPage from './mainPage/indexPage/index' // 首页
+import fiveA from './fiveA/index' // 5A
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
 import userCenter from './mainPage/userCenter/index' // 个人中心
 
@@ -13,22 +14,27 @@ const router = new Router({
     path: '/mainPage',
     name: 'mainPage',
     component: mainPage,
-    children: [{
+    children: [{ // 首页
       path: 'indexPage',
       name: 'indexPage',
       component: indexPage,
       children: []
-    },{
+    },{ // 城咖啡
       path: 'coffeeIndex',
       name: 'coffeeIndex',
       component: coffeeIndex,
       children: []
-    },{
+    },{ // 个人中心
       path: 'userCenter',
       name: 'userCenter',
       component: userCenter,
       children: []
     }]
+  },{ // 5A
+    path: '/fiveA',
+    name: 'fiveA',
+    component: fiveA,
+    children: []
   }],
   linkActiveClass: 'active',
 })