xcx

config/index.js

@@ -18,7 +18,7 @@ module.exports = {
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
+    port: 8081,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},

src/module/user/majorProjects/index.vue

@@ -6,28 +6,16 @@
     <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
     <div class="list flex-h">
       <div class="flex-item">
-        <div>
-          <span>6月</span>
+        <div v-for="(item,index) in courseList" :key="index">
+          <span>{{item.month+1}}月</span>
           <ul>
-            <li v-for="(item,index) in courseList" :key="index" class="flex-h">
+            <router-link tag="li" :to="{name: 'majorProjectsDetail', query: {}}" v-for="(subItem,subIndex) in item.list" :key="subIndex" class="flex-h">
               <div class="flex-item">
                 <div>
-                  <courseItem :data="item"></courseItem>
+                  <courseItem :data="subItem"></courseItem>
                 </div>
               </div>
-            </li>
-          </ul>
-        </div>
-        <div>
-          <span>5月</span>
-          <ul>
-            <li v-for="(item,index) in courseList" :key="index" class="flex-h">
-              <div class="flex-item">
-                <div>
-                  <courseItem :data="item"></courseItem>
-                </div>
-              </div>
-            </li>
+            </router-link>
           </ul>
         </div>
         <div class="cutLine"></div>
@@ -39,7 +27,7 @@
                 <div class="flex-item flex-h">
                   <div class="flex-item">
                     <div>
-                      <span class="centerLabel">长按下方二维码<br>关注“城的空间”公众号</span>
+                      <span class="centerLabel">长按右方二维码<br>关注“城的空间”公众号</span>
                     </div>
                   </div>
                   <div class="qrCode">
@@ -62,36 +50,55 @@ export default {
   name: '',
   data () {
     return {
-      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:'ticket'
-      },{
-        id:'',
-        title:'课程名称',
-        img:'',
-        time:'2018.04.04 18:30-20:00',
-        address:'南京南',
-        tag:['儿童教育','小小外交官'],
-        courseType:'团体课',
-        defaultPrice:'168/节',
-        getWay:'ticket'
+      courseList: [], // 课程列表
+      initList: [{ // 初始化课程列表
+        id: '',
+        title: '课程名称',
+        img: '',
+        time: '2018.04.04 18:30-20:00',
+        address: '南京南',
+        tag: ['儿童教育', '小小外交官'],
+        courseType: '团体课',
+        defaultPrice: '168/节',
+        getWay: 'ticket',
+        startDate: 1514779200000,
+        endDate: 1514781600000,
+      }, {
+        id: '',
+        title: '课程名称',
+        img: '',
+        time: '2018.04.04 18:30-20:00',
+        address: '南京南',
+        tag: ['儿童教育', '小小外交官'],
+        courseType: '团体课',
+        defaultPrice: '168/节',
+        getWay: 'ticket',
+        startDate: 1514779200000,
+        endDate: 1514781600000,
+      }, {
+        id: '',
+        title: '课程名称',
+        img: '',
+        time: '2018.04.04 18:30-20:00',
+        address: '南京南',
+        tag: ['儿童教育', '小小外交官'],
+        courseType: '团体课',
+        defaultPrice: '168/节',
+        getWay: 'ticket',
+        startDate: 1517460000000,
+        endDate: 1517467200000,
+      }, {
+        id: '',
+        title: '课程名称',
+        img: '',
+        time: '2018.04.04 18:30-20:00',
+        address: '南京南',
+        tag: ['儿童教育', '小小外交官'],
+        courseType: '团体课',
+        defaultPrice: '168/节',
+        getWay: 'ticket',
+        startDate: 1517460000000,
+        endDate: 1517467200000,
       }],
     }
   },
@@ -100,10 +107,34 @@ export default {
     courseItem,
   },
   created () {
-
+    this.initData()
   },
   methods: {
-
+    initData () { // 初始化数据
+      let arr = []
+      for (var n = 0; n < this.initList.length; n++) {
+        arr.push(new Date(this.initList[n].startDate).getMonth())
+      }
+      for (var i = 0; i < arr.length; i++) {
+        if (arr.indexOf(arr[i]) !== i) {
+          arr.splice(i, 1)
+          i--
+        }
+      }
+      for (var i = 0; i < arr.length; i++) {
+        this.courseList.push({
+          month: arr[i],
+          list: []
+        })
+      }
+      for (var n = 0; n < this.initList.length; n++) {
+        for (var i = 0; i < this.courseList.length; i++) {
+          if (new Date(this.initList[n].startDate).getMonth() === this.courseList[i].month) {
+            this.courseList[i].list.push(this.initList[n])
+          }
+        }
+      }
+    },
   }
 }
 </script>

src/module/user/majorProjectsDetail/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="flex-item">
+      <div class="content">
+        <div class="banner">
+          <img src="" class="centerLabel cover" alt="">
+          <div>
+            <span>课程名称</span>
+            <div>
+              <span>￥<em>199</em>.00起/课时</span>
+              <span>参与者<em>30</em>/40人</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex-h">
+      <div class="flex-item">
+        <div>
+
+        </div>
+      </div>
+      <router-link :to="{name: '', query: {}}">去购买</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {}
+  },
+  computed: {},
+  created () {},
+  methods: {}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/majorProjectsDetail/page.scss

@@ -0,0 +1,95 @@
+.mainPage{
+  background: #fff;
+  &>div.flex-item{
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      transform: translateZ(0);
+      -webkit-transform: translateZ(0);
+      .banner{
+        width: 100%;
+        height: 0;
+        padding-bottom: 118%;
+        background: #eee;
+        position: relative;
+        overflow: hidden;
+        img{
+          z-index: 1;
+        }
+        &>div{
+          width: 100%;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          overflow: hidden;
+          z-index: 2;
+          background: linear-gradient(to top, rgba(0,0,0,.1),rgba(0,0,0,0));
+          background: -webkit-linear-gradient(bottom, rgba(0,0,0,.1),rgba(0,0,0,0));
+          &>span{
+            width: 100%;
+            display: block;
+            line-height: .38rem;
+            color: #fff;
+            font-size: .2rem;
+            text-indent: .26rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          &>div{
+            font-size: 0;
+            white-space: nowrap;
+            margin-bottom: .26rem;
+            &>span{
+              display: inline-block;
+              line-height: .32rem;
+              color: #fff;
+              font-size: .11rem;
+              vertical-align: middle;
+              &:first-child{
+                margin-left: .26rem;
+                margin-right: .1rem;
+                em{
+                  font-size: .2rem;
+                  color: #fff;
+                }
+                &+span{
+                  line-height: .24rem;
+                  background: rgba(0,0,0,.2);
+                  padding: 0 .15rem;
+                  border-radius: .32rem;
+                  em{
+                    color: #e8a813;
+                    line-height: .24rem;
+                    font-size: .11rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &>div.flex-h{
+    padding: .1rem 0;
+    background: #fff;
+    position: relative;
+    z-index: 100;
+    box-shadow: 0 0 .2rem .02rem rgba(0,0,0,.05);
+    &>a{
+      line-height: .4rem;
+      padding: 0 .6rem;
+      border-radius: .4rem;
+      color: #fff;
+      font-size: .15rem;
+      margin-right: .2rem;
+      background: #fc6243;
+    }
+  }
+}

src/module/user/router.js

@@ -5,6 +5,7 @@ import mainPage from './mainPage/index' // 主页
 import indexPage from './mainPage/indexPage/index' // 首页
 import fiveA from './fiveA/index' // 5A
 import majorProjects from './majorProjects/index' // 项目专题
+import majorProjectsDetail from './majorProjectsDetail/index' // 项目专题
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
 import userCenter from './mainPage/userCenter/index' // 个人中心
 
@@ -36,6 +37,11 @@ const router = new Router({
     name: 'majorProjects',
     component: majorProjects,
     children: []
+  },{ // 项目专题详情
+    path: '/majorProjectsDetail',
+    name: 'majorProjectsDetail',
+    component: majorProjectsDetail,
+    children: []
   },{ // 5A
     path: '/fiveA',
     name: 'fiveA',