xcx

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

@@ -46,7 +46,7 @@
     </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">
+        <router-link tag="li" :to="{name:'majorProjects',query:{}}" v-for="(item,index) in 3" :key="index">
           <img src="" class="centerLabel cover" alt="">
         </router-link>
       </ul>

src/module/user/majorProjects/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="mainPage">
+    <div class="banner">
+      <img src="" class="centerLabel cover" alt="">
+    </div>
+    <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
+    <div class="list flex-h">
+      <div class="flex-item">
+        <div>
+          <span>6月</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>
+          </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>
+          </ul>
+        </div>
+        <div class="cutLine"></div>
+        <div>
+          <span>关注我们</span>
+          <ul>
+            <li class="flex-h">
+              <div class="bottom flex-item flex-h">
+                <div class="flex-item flex-h">
+                  <div class="flex-item">
+                    <div>
+                      <span class="centerLabel">长按下方二维码<br>关注“城的空间”公众号</span>
+                    </div>
+                  </div>
+                  <div class="qrCode">
+                    <a><img src="" class="centerLabel cover" alt=""></a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import courseItem from '../../../components/courseItem/index'
+
+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'
+      }],
+    }
+  },
+  computed: {},
+  components: {
+    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/majorProjects/page.scss

@@ -0,0 +1,137 @@
+.mainPage{
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  .banner{
+    width: 100%;
+    height: 0;
+    padding-bottom: 65%;
+    background: #eee;
+    position: relative;
+    overflow: hidden;
+  }
+  p{
+    width: 100%;
+    box-sizing: border-box;
+    border-left: .2rem solid transparent;
+    border-right: .2rem solid transparent;
+    line-height: .25rem;
+    font-size: .16rem;
+    color: #555;
+    margin: .22rem auto 0;
+  }
+  .list{
+    margin: .34rem auto 0;
+    overflow: visible;
+    .cutLine{
+      box-sizing: border-box;
+      height: .7rem;
+      border-left: .01rem dashed #b57f4e;
+      margin: 0 auto;
+      &::after{
+        display: none;
+      }
+    }
+    &>div.flex-item{
+      margin: 0 .2rem;
+      overflow: visible;
+      &>div{
+        width: 100%;
+        position: relative;
+        overflow: visible;
+        padding-bottom: .4rem;
+        &::after{
+          content: '';
+          width: .01rem;
+          height: 100%;
+          background: #b57f4e;
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1;
+        }
+        &>span{
+          display: inline-block;
+          line-height: .3rem;
+          color: #fff;
+          padding: 0 .2rem;
+          background: #b57f4e;
+          font-size: .15rem;
+          border-top-right-radius: .3rem;
+          border-bottom-right-radius: .3rem;
+        }
+        &>ul{
+          box-sizing: border-box;
+          border-left: .2rem solid transparent;
+          &>li{
+            margin: .2rem auto 0;
+            position: relative;
+            overflow: visible;
+            box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);
+            border-radius: .06rem;
+            padding: .1rem 0;
+            &::after{
+              content: '';
+              width: .15rem;
+              height: .15rem;
+              border: .01rem solid #b57f4e;
+              position: absolute;
+              left: -.28rem;
+              top: 50%;
+              transform: translateY(-50%);
+              -webkit-transform: translateY(-50%);
+              background: #fff;
+              z-index: 2;
+              border-radius: 100%;
+            }
+            &::before{
+              content: '';
+              width: .09rem;
+              height: .09rem;
+              position: absolute;
+              left: -.24rem;
+              top: 50%;
+              transform: translateY(-50%);
+              -webkit-transform: translateY(-50%);
+              background: #b57f4e;
+              z-index: 3;
+              border-radius: 100%;
+            }
+            &>div{
+              margin: 0 .1rem;
+              &.bottom{
+                &>div{
+                  &>div{
+                    margin-right: .2rem;
+                    span{
+                      width: 100%;
+                      text-align: center;
+                      border-right: .01rem dashed #ccc;
+                      line-height: .2rem;
+                      font-size: .11rem;
+                    }
+                  }
+                }
+              }
+            }
+            .qrCode{
+              width: .7rem;
+              position: relative;
+              overflow: hidden;
+              a{
+                width: 100%;
+                display: block;
+                padding-bottom: 100%;
+                background: #eee;
+                position: relative;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/module/user/router.js

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