'omo'

src/components/zd-arrow/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <view class="em-arrow">
+  </view>  
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.em-arrow {
+  width: 0;
+  height: 0;
+  line-height: 0;
+  font-size: 0;
+  border-top: 8upx solid transparent;
+  border-right: 9upx solid transparent;
+  border-bottom: 8upx solid transparent;
+  border-left: 9upx solid transparent;
+  border-left-color: #333333 ;
+}
+</style>

src/components/zd-open/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class='weapp' id="launch-btn">
+    <wx-open-launch-app
+      id="launch-btn"
+      ref="launchBtn"
+      :appid="appid"
+      :extinfo="extinfo"
+      @error="handleErrorFn"
+      @launch="handleLaunchFn"
+      @ready="handleReadyFn">
+      <script type="text/wxtag-template">
+        {{ content }}
+      </script>
+    </wx-open-launch-app>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    appid: {
+      type: String,
+      default: 'wxeb44a864bdd935be'
+    },
+    apkName: {
+      type: String,
+      default: 'com.zaojiao.app'
+    },
+    extinfo: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  },
+
+  onLoad() {
+  },
+
+  onShow() {},
+
+  methods: {
+    handleErrorFn(e) {
+      if (e.isTrusted == false) {
+        const that = this;
+        setTimeout(function () {
+          window.location.href = `https://android.myapp.com/myapp/detail.htm?apkName=${that.apkName}`;
+        }, 500);
+      }
+    },
+    handleLaunchFn(e) {
+
+    },
+    handleReadyFn() {
+
+    },
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.weapp {
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  #launch-btn {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/main.js

@@ -12,8 +12,8 @@ import $mSettingConfig from '@/config/setting.config.js';
 import $mFormRule from '@/config/formRule.config.js';
 import $mGraceChecker from '@/utils/graceChecker';
 
-import Vconsole from 'vconsole'
-new Vconsole()
+// import Vconsole from 'vconsole'
+// new Vconsole()
 
 Vue.prototype.$http = http;
 Vue.prototype.$mStore = store;

src/pages.json

@@ -8,6 +8,30 @@
 				"onReachBottomDistance": 50
 			}
 		},
+		{
+			"path": "pages/course/index",
+			"style": {
+				"enablePullDownRefresh": false,
+				"navigationBarTitleText": "四大课程",
+				"onReachBottomDistance": 50
+			}
+		},
+		{
+			"path": "pages/omo/index",
+			"style": {
+				"enablePullDownRefresh": false,
+				"navigationBarTitleText": "OMO",
+				"onReachBottomDistance": 50
+			}
+		},
+		{
+			"path": "pages/omo/detail",
+			"style": {
+				"enablePullDownRefresh": false,
+				"navigationBarTitleText": "OMO",
+				"onReachBottomDistance": 50
+			}
+		},
 		{
 			"path": "pages/about/index",
 			"style": {

src/pages/course/detail.vue

@@ -0,0 +1,19 @@
+<template>
+  <view class="detail">
+    
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/course/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <view class="course">
+    <view class="head">
+      <view class="head-top">
+        <image src="/static/img/course/bg_head.png" mode="" />
+      </view>
+      <view class="title">
+        <image class="img-title" src="/static/img/course/head_title.png" mode="aspectFill" />
+      </view>
+    </view>
+    <view class="content">
+      <view class="item" v-for="(item, index) in courseList" :key="index">
+        <view class="item-info flex">
+          <view class="left">
+            <image class="image" :src="item.imgUrl" mode="aspectFill" />
+          </view>
+          <view class="right">
+            <view class="info-title">{{ item.title }}</view>
+            <view class="info-desc">{{ item.desc }}</view>
+            <view class="info-btn">
+              <button class="detail cu-btn block" @tap="navTo(item)">
+                查看详情 <zd-arrow class="btn-arrow"></zd-arrow>
+              </button>
+            </view>
+          </view>
+        </view>
+        <view class="line" v-if="index + 1 != courseList.length"></view>
+      </view>
+      <image class="book" src="/static/img/course/book.png" mode="aspectFill" />
+      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
+      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
+    </view>
+  </view>
+</template>
+
+<script>
+import ZdArrow from '@/components/zd-arrow/index';
+
+export default {
+  data() {
+    return {
+      courseList: [
+        {
+          title: '逻辑狗',
+          desc: '幼儿思维游戏课程',
+          imgUrl: require('@/static/img/course/course_01.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=1&sn=39453b5cad367c8dd048efdecb2d3868&chksm=3eb1c96909c6407f825dbef1e54f5ed6a5f10f4027cea58714348bd7eb180347664cccccb800#rd',
+          type: 'link',
+        },
+        {
+          title: '中华小熊猫',
+          desc: '中华文化思维游戏课程',
+          imgUrl: require('@/static/img/course/course_02.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=2&sn=a6511c18e667048b258bf79ac9909b4c&chksm=3eb1c96909c6407f1c5258ddb47a6df5ef0dce5f043da9774a6af913287ea3e652c0e7d84f0f#rd',
+          type: 'link',
+        },
+        {
+          title: '蚂蚁沙丘·与弗雷德一起探索',
+          desc: '幼儿园情境科学课程',
+          imgUrl: require('@/static/img/course/course_03.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=3&sn=7f5cedae8f4d795f97a5562c7c1863ac&chksm=3eb1c96909c6407f9282b81d84be745f81e311d2168246a6877cdf8c93b5d705fa11541b5ef4#rd',
+          type: 'link'
+        },
+        {
+          title: '学习起跑线思维语言&思维数学',
+          desc: '幼小衔接系列课程',
+          imgUrl: require('@/static/img/course/course_04.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503220137&idx=1&sn=32b69bfa877c2cd72ecc34016e2e0b7b&chksm=3eb1caae09c643b8faf5720c7e9e473285d438e428da2820b3c76643f34b4881cc317538d8ee#rd',
+          type: 'link'
+        }
+      ]
+    }
+  },
+  components: {
+    ZdArrow
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    navTo(item) {
+      if(item.type == 'link') {
+        window.location.href  = item.path;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.course {
+  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
+  background-size: cover;
+  padding-bottom: 116upx;
+  .head-top {
+    image {
+      width: 100%;
+      height: 100upx;
+    }
+  }
+  .title {
+    text-align: center;
+    .img-title {
+      width: 554upx;
+      height: 124upx;
+      vertical-align: middle;
+    }
+  }
+  .content {
+    position: relative;
+    background: url('@/static/img/course/course_bg.png') no-repeat #01A2E8;
+    background-size: cover;
+    height: 1218upx;
+    width: 714upx;
+    padding: 92upx 68upx 0 42upx;
+    margin: 108upx auto 0;
+    .item {
+      .left {
+        margin-right: 10upx;
+        .image {
+          width: 214upx;
+          height: 202upx;
+          vertical-align: middle;
+        }
+      }
+      .right {
+        padding-top: 20upx;
+        .info-title {
+          font-size: 36upx;
+          font-family: HelloFont-WenYiHei, HelloFont;
+          font-weight: normal;
+          color: #050505;
+          line-height: 46upx;
+          letter-spacing: 1upx;
+        }
+        .info-desc {
+          font-size: 26upx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+          line-height: 36upx;
+          margin: 6upx 0 28upx;
+        }
+        .info-btn {
+          .detail {
+            height: 56upx;
+            width: 228upx;
+            border-radius: 34upx;
+            border: 2upx solid #333333;
+            background: #FFFFFF;
+
+            font-size: 26upx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #04040A;
+            line-height: 36upx;
+            // filter: blur(10upx);
+          }
+          .btn-arrow {
+            margin-left: 8upx;
+          }
+        }
+      }
+      .line {
+        height: 2upx;
+        background: rgba(153, 153, 153, 0.5);
+        margin: 20upx 0 18upx 24upx;
+      }
+    }
+    .book {
+      position: absolute;
+      width: 114upx;
+      height: 128upx;
+      vertical-align: middle;
+      left: -18upx;
+      top: 8upx;
+      transform: translateY(-100%);
+    }
+    .path {
+      position: absolute;
+      bottom: -48upx;
+      right: 138upx;
+
+      width: 30upx;
+      height: 26upx;
+      vertical-align: middle;
+    }
+    .teach {
+      position: absolute;
+      width: 140upx;
+      height: 98upx;
+      vertical-align: middle;
+      right: -18upx;
+      top: 10upx;
+      transform: translateY(-100%);
+    }
+
+  }
+}
+</style>

src/pages/index/index.vue

@@ -33,19 +33,21 @@
             title2: '中德智慧', 
             imgUrl: require('@/static/img/index/index_img1.png'),
             bgUrl: require('@/static/img/index/index_card1.png'),
-            path: '/pages/about/index',
+            path: '/pages/about/index'
           },
           {
             title1: '“思维芯”', 
             title2: '四大课程体系', 
             imgUrl: require('@/static/img/index/index_img2.png'),
-            bgUrl: require('@/static/img/index/index_card2.png')
+            bgUrl: require('@/static/img/index/index_card2.png'),
+            path: '/pages/course/index'
           },
           {
             title1: 'OMO教育', 
             title2: '内容服务', 
             imgUrl: require('@/static/img/index/index_img3.png'),
-            bgUrl: require('@/static/img/index/index_card3.png')
+            bgUrl: require('@/static/img/index/index_card3.png'),
+            path: '/pages/omo/index'
           },
           {
             title1: '品牌活动', 

src/pages/omo/component/brand.vue

@@ -0,0 +1,203 @@
+<template>
+  <view class="course">
+    <view class="head">
+      <view class="head-top">
+        <image src="/static/img/course/bg_head.png" mode="" />
+      </view>
+      <view class="title">
+        <image class="img-title" src="/static/img/course/head_title.png" mode="aspectFill" />
+      </view>
+    </view>
+    <view class="content">
+      <view class="item" v-for="(item, index) in courseList" :key="index">
+        <view class="item-info flex">
+          <view class="left">
+            <image class="image" :src="item.imgUrl" mode="aspectFill" />
+          </view>
+          <view class="right">
+            <view class="info-title">{{ item.title }}</view>
+            <view class="info-desc">{{ item.desc }}</view>
+            <view class="info-btn">
+              <button class="detail cu-btn block" @tap="navTo(item)">
+                查看详情 <zd-arrow class="btn-arrow"></zd-arrow>
+              </button>
+            </view>
+          </view>
+        </view>
+        <view class="line" v-if="index + 1 != courseList.length"></view>
+      </view>
+      <image class="book" src="/static/img/course/book.png" mode="aspectFill" />
+      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
+      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
+    </view>
+  </view>
+</template>
+
+<script>
+import ZdArrow from '@/components/zd-arrow/index';
+
+export default {
+  data() {
+    return {
+      courseList: [
+        {
+          title: '逻辑狗',
+          desc: '幼儿思维游戏课程',
+          imgUrl: require('@/static/img/course/course_01.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=1&sn=39453b5cad367c8dd048efdecb2d3868&chksm=3eb1c96909c6407f825dbef1e54f5ed6a5f10f4027cea58714348bd7eb180347664cccccb800#rd',
+          type: 'link',
+        },
+        {
+          title: '中华小熊猫',
+          desc: '中华文化思维游戏课程',
+          imgUrl: require('@/static/img/course/course_02.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=2&sn=a6511c18e667048b258bf79ac9909b4c&chksm=3eb1c96909c6407f1c5258ddb47a6df5ef0dce5f043da9774a6af913287ea3e652c0e7d84f0f#rd',
+          type: 'link',
+        },
+        {
+          title: '蚂蚁沙丘·与弗雷德一起探索',
+          desc: '幼儿园情境科学课程',
+          imgUrl: require('@/static/img/course/course_03.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503219310&idx=3&sn=7f5cedae8f4d795f97a5562c7c1863ac&chksm=3eb1c96909c6407f9282b81d84be745f81e311d2168246a6877cdf8c93b5d705fa11541b5ef4#rd',
+          type: 'link'
+        },
+        {
+          title: '学习起跑线思维语言&思维数学',
+          desc: '幼小衔接系列课程',
+          imgUrl: require('@/static/img/course/course_04.png'),
+          path: 'https://mp.weixin.qq.com/s?__biz=MjM5MTAyMjE4NA==&mid=503220137&idx=1&sn=32b69bfa877c2cd72ecc34016e2e0b7b&chksm=3eb1caae09c643b8faf5720c7e9e473285d438e428da2820b3c76643f34b4881cc317538d8ee#rd',
+          type: 'link'
+        }
+      ]
+    }
+  },
+  components: {
+    ZdArrow
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    navTo(item) {
+      if(item.type == 'link') {
+        window.location.href  = item.path;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.course {
+  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
+  background-size: cover;
+  padding-bottom: 116upx;
+  .head-top {
+    image {
+      width: 100%;
+      height: 100upx;
+    }
+  }
+  .title {
+    text-align: center;
+    .img-title {
+      width: 554upx;
+      height: 124upx;
+      vertical-align: middle;
+    }
+  }
+  .content {
+    position: relative;
+    background: url('@/static/img/course/course_bg.png') no-repeat #01A2E8;
+    background-size: cover;
+    height: 1218upx;
+    width: 714upx;
+    padding: 92upx 68upx 0 42upx;
+    margin: 108upx auto 0;
+    .item {
+      .left {
+        margin-right: 10upx;
+        .image {
+          width: 214upx;
+          height: 202upx;
+          vertical-align: middle;
+        }
+      }
+      .right {
+        padding-top: 20upx;
+        .info-title {
+          font-size: 36upx;
+          font-family: HelloFont-WenYiHei, HelloFont;
+          font-weight: normal;
+          color: #050505;
+          line-height: 46upx;
+          letter-spacing: 1upx;
+        }
+        .info-desc {
+          font-size: 26upx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+          line-height: 36upx;
+          margin: 6upx 0 28upx;
+        }
+        .info-btn {
+          .detail {
+            height: 56upx;
+            width: 228upx;
+            border-radius: 34upx;
+            border: 2upx solid #333333;
+            background: #FFFFFF;
+
+            font-size: 26upx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #04040A;
+            line-height: 36upx;
+            // filter: blur(10upx);
+          }
+          .btn-arrow {
+            margin-left: 8upx;
+          }
+        }
+      }
+      .line {
+        height: 2upx;
+        background: rgba(153, 153, 153, 0.5);
+        margin: 20upx 0 18upx 24upx;
+      }
+    }
+    .book {
+      position: absolute;
+      width: 114upx;
+      height: 128upx;
+      vertical-align: middle;
+      left: -18upx;
+      top: 8upx;
+      transform: translateY(-100%);
+    }
+    .path {
+      position: absolute;
+      bottom: -48upx;
+      right: 138upx;
+
+      width: 30upx;
+      height: 26upx;
+      vertical-align: middle;
+    }
+    .teach {
+      position: absolute;
+      width: 140upx;
+      height: 98upx;
+      vertical-align: middle;
+      right: -18upx;
+      top: 10upx;
+      transform: translateY(-100%);
+    }
+
+  }
+}
+</style>

src/pages/omo/component/down.vue

@@ -0,0 +1,203 @@
+<template>
+  <view class="down">
+    <view class="head">
+      <view class="head-top">
+        <image src="/static/img/course/bg_head.png" mode="" />
+      </view>
+      <view class="title">
+        <image class="img-title" src="/static/img/omo/head_title_down.png" mode="aspectFill" />
+      </view>
+    </view>
+    <view class="content">
+      <view class="item" v-for="(item, index) in downloadList" :key="index">
+        <view class="item-info flex">
+          <view class="left">
+            <image class="image" :src="item.imgUrl" mode="aspectFill" />
+          </view>
+          <view class="right">
+            <view class="info-title">{{ item.title }}</view>
+            <view class="info-desc">{{ item.desc }}</view>
+            <view class="info-btn">
+              <button class="detail cu-btn block">
+                点击下载 <zd-arrow class="btn-arrow"></zd-arrow>
+              </button>
+              <view class="btn btn-right-open" v-if="weappShow">
+                <zd-open :appid="item.appid" :apkName="item.apkName" :exinfo="item.extinfo" :content="conntent"></zd-open>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="line" v-if="index + 1 != downloadList.length"></view>
+      </view>
+      <image class="book" src="/static/img/course/book.png" mode="aspectFill" />
+      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
+      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
+    </view>
+  </view>
+</template>
+
+<script>
+import ZdArrow from '@/components/zd-arrow/index';
+import ZdOpen from '@/components/zd-open/index';
+
+export default {
+  data() {
+    return {
+      weappShow: process.env.NODE_ENV === 'production' ? true : false,
+      downloadList: [
+        {
+          title: '逻辑狗一起成长APP',
+          desc: '家庭',
+          imgUrl: require('@/static/img/omo/down_01.png'),
+          appid: 'wxeb44a864bdd935be',
+          apkName: 'com.zaojiao.app.parent',
+          extinfo: ''
+        },
+        {
+          title: '逻辑狗家园共育APP',
+          desc: '幼儿园',
+          imgUrl: require('@/static/img/omo/down_02.png'),
+          appid: 'wxf6e96c65ba6116d4',
+          apkName: 'com.zaojiao.app',
+          extinfo: ''
+        }
+      ],
+      conntent: '<div class="btn" style="width:100%; min-height:28px; display:block; font-size:14px;color: #ffffff;">打开app</div>',
+    }
+  },
+  components: {
+    ZdArrow,
+    ZdOpen
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss">
+.down {
+  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
+  background-size: cover;
+  padding-bottom: 116upx;
+  height: 100vh;
+  .head-top {
+    image {
+      width: 100%;
+      height: 100upx;
+    }
+  }
+  .title {
+    text-align: center;
+    .img-title {
+      width: 387upx;
+      height: 56upx;
+      vertical-align: middle;
+    }
+  }
+  .content {
+    position: relative;
+    background: url('@/static/img/omo/down_bg.png') no-repeat #01A2E8;
+    background-size: cover;
+    height: 628upx;
+    width: 714upx;
+    padding: 92upx 68upx 0 42upx;
+    margin: 108upx auto 0;
+    .item {
+      .left {
+        margin-right: 36upx;
+        .image {
+          width: 186upx;
+          height: 166upx;
+          vertical-align: middle;
+        }
+      }
+      .right {
+        .info-title {
+          font-size: 36upx;
+          font-family: HelloFont-WenYiHei, HelloFont;
+          font-weight: normal;
+          color: #050505;
+          line-height: 46upx;
+          letter-spacing: 1upx;
+        }
+        .info-desc {
+          font-size: 26upx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #999999;
+          line-height: 36upx;
+          margin: 6upx 0 28upx;
+        }
+        .info-btn {
+          position: relative;
+          .detail {
+            height: 56upx;
+            width: 228upx;
+            border-radius: 34upx;
+            border: 2upx solid #333333;
+            background: #FFFFFF;
+
+            font-size: 26upx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #04040A;
+            line-height: 36upx;
+            // filter: blur(10upx);
+          }
+          .btn-arrow {
+            margin-left: 8upx;
+          }
+          .btn-right-open {
+            position: absolute;
+            z-index: 100;
+            width: 228upx;
+            height: 56upx;
+            right: 100upx;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            overflow: hidden;
+          }
+        }
+      }
+      .line {
+        height: 2upx;
+        background: rgba(153, 153, 153, 0.5);
+        margin: 38upx 0 42upx 24upx;
+      }
+    }
+    .book {
+      position: absolute;
+      width: 114upx;
+      height: 128upx;
+      vertical-align: middle;
+      left: -18upx;
+      top: 8upx;
+      transform: translateY(-100%);
+    }
+    .path {
+      position: absolute;
+      bottom: -64upx;
+      left: 66upx;
+      width: 30upx;
+      height: 26upx;
+      vertical-align: middle;
+    }
+    .teach {
+      position: absolute;
+      width: 140upx;
+      height: 98upx;
+      vertical-align: middle;
+      right: -18upx;
+      top: 10upx;
+      transform: translateY(-100%);
+    }
+
+  }
+}
+</style>

src/pages/omo/component/mba.vue

@@ -0,0 +1,23 @@
+<template>
+  <view class='container'>
+    mba
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+
+  onLoad() {},
+
+  onShow() {},
+
+  methods: {}
+
+}
+</script>
+
+<style>
+</style>

src/pages/omo/component/media.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class='container'>
+    自媒体
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+
+  onLoad() {},
+
+  onShow() {},
+
+  methods: {}
+
+}
+</script>
+
+<style>
+</style>

src/pages/omo/detail.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class='detail'>
+    <component :is="componentType"></component>
+  </view>
+</template>
+
+<script>
+import OmoDownload from './component/down';
+import OmoBrand from './component/brand';
+import OmoMba from './component/mba';
+import OmoMedia from './component/media';
+export default {
+  data() {
+    return {
+      type: '1'
+    }
+  },
+  components: {
+    OmoDownload,
+    OmoBrand,
+    OmoMba,
+    OmoMedia
+  },
+  computed: {
+    componentType() {
+      if (this.type == 1) {
+        return 'omo-download'
+      } else if (this.type == 2) {
+        return 'omo-brand'
+      } else if (this.type == 3) {
+        return 'omo-mba'
+      } else if (this.type == 4) {
+        return 'omo-media'
+      }
+      return ''
+    }
+  },
+
+  onLoad(options) {
+    this.type = options.type
+  },
+
+  onShow() {
+
+  },
+
+  methods: {
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
+

src/pages/omo/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <view class="course">
+    <view class="head">
+      <view class="head-top">
+        <image src="/static/img/common/bg_head.png" mode="" />
+      </view>
+      <view class="title">
+        <image class="img-title" src="/static/img/course/head_title.png" mode="aspectFill" />
+      </view>
+    </view>
+    <view class="content">
+      <view class="item flex" 
+        v-for="(item, index) in omoList" :key="index"
+          :style="{backgroundImage: `url(${item.bgUrl})`,backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}">
+        <view class="left">
+          <image :src="item.imgUrl" mode="aspectFill" />
+        </view>
+        <view class="right">
+          <view class="info-title">{{ item.title }}</view>
+          <view class="info-btn">
+            <button class="detail cu-btn block" @tap="navTo(item)">
+              查看详情 <zd-arrow class="btn-arrow"></zd-arrow>
+            </button>
+          </view>
+        </view>
+      </view>
+      <image class="book" src="/static/img/omo/pen.png" mode="aspectFill" />
+      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
+      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
+    </view>
+  </view>
+</template>
+
+<script>
+import ZdArrow from '@/components/zd-arrow/index';
+
+export default {
+  data() {
+    return {
+      omoList: [
+        {
+          title: '逻辑狗APP',
+          imgUrl: require('@/static/img/omo/omo_01.png'),
+          bgUrl: require('@/static/img/common/card_bg01.png'),
+          path: '/pages/omo/detail?type=1'
+        },
+        {
+          title: '品牌教学运营全方案',
+          imgUrl: require('@/static/img/omo/omo_02.png'),
+          bgUrl: require('@/static/img/common/card_bg02.png'),
+          path: '/pages/omo/detail?type=2'
+        },
+        {
+          title: '园长MBA课程',
+          imgUrl: require('@/static/img/omo/omo_03.png'),
+          bgUrl: require('@/static/img/common/card_bg03.png'),
+          path: '/pages/omo/detail?type=3'
+        },
+        {
+          title: '自媒体平台',
+          imgUrl: require('@/static/img/omo/omo_04.png'),
+          bgUrl: require('@/static/img/common/card_bg04.png'),
+          path: '/pages/omo/detail?type=4'
+        }
+      ]
+    }
+  },
+  components: {
+    ZdArrow
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    navTo(item) {
+      this.$mRouter.push({
+        route: item.path
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.course {
+  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
+  background-size: cover;
+  padding-bottom: 116upx;
+  .head-top {
+    image {
+      width: 100%;
+      height: 100upx;
+    }
+  }
+  .title {
+    text-align: center;
+    .img-title {
+      width: 554upx;
+      height: 124upx;
+      vertical-align: middle;
+    }
+  }
+  .content {
+    position: relative;
+    margin: 118upx auto 0;
+    .item {
+      margin: 0 auto 28upx;
+      width: 714upx;
+      height: 262upx;
+      padding: 52upx 0 0 44upx;
+      .left {
+        margin-right: 56upx;
+        image {
+          width: 166upx;
+          height: 150upx;
+          vertical-align: middle;
+        }
+      }
+      .right {
+        padding-top: 8upx;
+        .info-title {
+          font-size: 40upx;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #050505;
+          line-height: 56upx;
+          letter-spacing: 1upx;
+        }
+        .info-btn {
+          margin-top: 22upx;
+          .detail {
+            height: 56upx;
+            width: 228upx;
+            border-radius: 34upx;
+            border: 2upx solid #333333;
+            background: #FFFFFF;
+            font-size: 26upx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #04040A;
+            line-height: 36upx;
+          }
+          .btn-arrow {
+            margin-left: 8upx;
+          }
+        }
+      }
+    }
+    .book {
+      position: absolute;
+      width: 114upx;
+      height: 128upx;
+      vertical-align: middle;
+      left: 0px;
+      top: 0upx;
+      transform: translateY(-100%);
+    }
+    .path {
+      position: absolute;
+      bottom: -48upx;
+      right: 138upx;
+      width: 30upx;
+      height: 26upx;
+      vertical-align: middle;
+    }
+    .teach {
+      position: absolute;
+      width: 140upx;
+      height: 98upx;
+      vertical-align: middle;
+      right: 0upx;
+      top: 0upx;
+      transform: translateY(-100%);
+    }
+  }
+}
+</style>