新课包编写

297827bb · wangwei · e30b86dd · 297827bb · 297827bb · 297827bb
Commit 297827bb authored Dec 04, 2018 by wangwei
35 changed files
--- a/config/index.js
+++ b/config/index.js
@@ -12,8 +12,8 @@ module.exports = {
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
-        target: 'http://local.base-api.sing.com', // 接口的域名
-        // target: 'https://wechat-test.changchangenglish.com',
+        // target: 'http://local.base-api.sing.com', // 接口的域名
+        target: 'https://wechat-test.changchangenglish.com',
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
      }
    },

--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
+<!--<html manifest="/static/cache/demo.appcache">-->
 <html>
  <head>
    <meta charset="utf-8">

--- a/src/assets/guide/Page 1 Copy 2@2x.png
+++ b/src/assets/guide/Page 1 Copy 2@2x.png
--- a/src/assets/guide/Page 1 Copy 3@2x.png
+++ b/src/assets/guide/Page 1 Copy 3@2x.png
--- a/src/assets/guide/b7c71fcb897c3ede1a400fe9f1f7330c-02 copy@2x.png
+++ b/src/assets/guide/b7c71fcb897c3ede1a400fe9f1f7330c-02 copy@2x.png
--- a/src/assets/guide/go-down.png
+++ b/src/assets/guide/go-down.png
--- a/src/assets/guide/go.png
+++ b/src/assets/guide/go.png
--- a/src/assets/guide/iKnow.png
+++ b/src/assets/guide/iKnow.png
--- a/src/assets/guide/star.png
+++ b/src/assets/guide/star.png
--- a/src/assets/mould/look1/bank.png
+++ b/src/assets/mould/look1/bank.png
--- a/src/assets/mould/look1/go.png
+++ b/src/assets/mould/look1/go.png
--- a/src/assets/mould/look1/r3.png
+++ b/src/assets/mould/look1/r3.png
--- a/src/assets/mould/look1/radio.png
+++ b/src/assets/mould/look1/radio.png
--- a/src/assets/mould/look1/title1.png
+++ b/src/assets/mould/look1/title1.png
--- a/src/assets/mould/look1/title2.png
+++ b/src/assets/mould/look1/title2.png
--- a/src/assets/mould/radio1/last.png
+++ b/src/assets/mould/radio1/last.png
--- a/src/assets/mould/radio1/moerduo.png
+++ b/src/assets/mould/radio1/moerduo.png
--- a/src/assets/mould/radio1/title.png
+++ b/src/assets/mould/radio1/title.png
--- a/src/assets/mould/refueling1/finish.png
+++ b/src/assets/mould/refueling1/finish.png
--- a/src/assets/mould/refueling1/next.png
+++ b/src/assets/mould/refueling1/next.png
--- a/src/assets/mould/refueling1/title.png
+++ b/src/assets/mould/refueling1/title.png
--- a/src/assets/mould/show1/backBtn.png
+++ b/src/assets/mould/show1/backBtn.png
--- a/src/assets/mould/show1/jiayoubao.png
+++ b/src/assets/mould/show1/jiayoubao.png
--- a/src/assets/mould/show1/title.png
+++ b/src/assets/mould/show1/title.png
--- a/src/components/guide/audio.vue
+++ b/src/components/guide/audio.vue
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "audio"
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/guide/content.vue
+++ b/src/components/guide/content.vue
+<template>
+  <div>
+    <div class="off" v-if="show" @click="show=false">跳过>></div>
+    <div class="guide" v-if="show">
+      <div class="guide-content">
+        <div class="title">
+          The Bear Went Over the Mountain
+        </div>
+        <img class="toTitle" :src="goDownUrl"/>
+        <div class="title-test">
+          该天<span class="color-red">歌曲名称</span>
+        </div>
+        <img :src="goUrl" class="toLesson"/>
+        <div class="lesson-text">点击<span class="color-red">开始课程</span></div>
+        <div class="lesson-block">
+          开始课程
+        </div>
+        <img class="i-know" :src="iKnowUrl" @click="show=false"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import iKnowUrl from '../../assets/guide/iKnow.png'
+  import goUrl from '../../assets/guide/go.png'
+  import goDownUrl from '../../assets/guide/go-down.png'
+  import starUrl from '../../assets/guide/star.png'
+
+  export default {
+    name: "guide",
+    data(){
+      return{
+        iKnowUrl:iKnowUrl,
+        goDownUrl:goDownUrl,
+        goUrl:goUrl,
+        starUrl:starUrl,
+        show:false
+      }
+    },
+    mounted(){
+      this.show=true;
+      if(!localStorage.getItem('mapGuide')){
+        localStorage.setItem('mapGuide','1')
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @import "../../util/public";
+  .star{
+    width: 23*@toVw;
+  }
+  .guide-content{
+    width: 276*@toVw;
+    height: 468*@toVw;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-top: -234*@toVw;
+    margin-left: -138*@toVw;
+  }
+  .off{
+    position: absolute;
+    top: 9*@toVw;
+    z-index: 99999;
+    right: 20*@toVw;
+    font-size:12*@toVw;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+  }
+  .title{
+    width:237*@toVw;
+    height:58*@toVw;
+    padding: 10*@toVw;
+    font-size:24*@toVw;
+    font-family:PingFangSC-Semibold;
+    font-weight:600;
+    color:rgba(255,255,255,1);
+    line-height:29*@toVw;
+    border-radius:8*@toVw;
+    border:1*@toVw solid rgba(255,255,255,1);
+    position: absolute;
+    text-align: center;
+    border-radius: 8*@toVw;
+    top: 20*@toVw;
+    left: 10*@toVw;
+    padding-top:10*@toVw ;
+    border-radius:8*@toVw;
+  }
+  .title-test{
+    font-size:14*@toVw;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    line-height:26*@toVw;
+    position: absolute;
+    width:144*@toVw;
+    height:26*@toVw;
+    border-radius:8*@toVw;
+    border:1*@toVw solid rgba(255,255,255,1);
+    text-align: center;
+    top: 120*@toVw;
+    left: 110*@toVw;
+  }
+  .toTitle{
+    width: 45*@toVw;
+    position: absolute;
+    top: 110*@toVw;
+    left: 60*@toVw ;
+  }
+  .guide{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    color: white;
+    background:rgba(0,0,0,0.8);
+    z-index: 9999;
+    .i-know{
+      position: absolute;
+      width: 129*@toVw;
+      left: 50%;
+      margin-left: -64.5*@toVw;
+      margin-top: -32*@toVw;
+      top: 50%;
+    }
+    .toLesson{
+      width: 45*@toVw;
+      position: absolute;
+      bottom: 90*@toVw;
+      left: 91*@toVw;
+      transform: rotate(-20deg);
+    }
+    .color-red{
+      color: #FF6477;
+    }
+    .lesson-block{
+      width:134px;
+      height:57px;
+      border-radius:29px;
+      border:1px solid rgba(255,255,255,1);
+      font-size:20px;
+      font-family:PingFangSC-Semibold;
+      font-weight:600;
+      color:rgba(255,255,255,1);
+      line-height: 57*@toVw;
+      text-align: center;
+      position: absolute;
+      bottom: 20*@toVw;
+      left: 50%;
+      margin-left: -67*@toVw;
+    }
+    .lesson-text{
+      width:114*@toVw;
+      height:26*@toVw;
+      line-height: 26*@toVw;
+      font-family:PingFang-SC-Medium;
+      font-weight:500;
+      font-size: 14*@toVw;
+      border-radius:8*@toVw;
+      position: absolute;
+      bottom: 110*@toVw;
+      left: 137*@toVw;
+      text-align: center;
+      border:1*@toVw solid rgba(255,255,255,1)
+    }
+  }
+</style>
--- a/src/components/guide/index.vue
+++ b/src/components/guide/index.vue
+<template>
+  <div>
+    <div class="off" v-if="show" @click="show=false">跳过>></div>
+    <div class="guide" v-if="show">
+      <img class="i-know" :src="iKnowUrl"/>
+      <img class="go" @click="show=false" :src="goUrl"/>
+      <div class="tips">
+        已购课程，点击<span>开始上课!</span>
+      </div>
+      <img class="banner" src="https://cdn.singsingenglish.com/new-sing/20181018/3dd8d55b0b6e9bf4fa1f96d500b69f6b2145640b1539836003313.jpeg"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import iKnowUrl from '../../assets/guide/iKnow.png'
+  import goUrl from '../../assets/guide/go.png'
+  export default {
+    name: "index",
+    data(){
+      return{
+        iKnowUrl:iKnowUrl,
+        goUrl:goUrl,
+        show:false
+      }
+    },
+    mounted(){
+      if(!localStorage.getItem('indexGuide')){
+        this.show=true;
+        localStorage.setItem('indexGuide','1')
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @import "../../util/public";
+  .off{
+    position: absolute;
+    top: 9*@toVw;
+    z-index: 99999;
+    right: 20*@toVw;
+    font-size:12*@toVw;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+  }
+  .guide{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    color: white;
+    background:rgba(0,0,0,0.8);
+    z-index: 9999;
+    .i-know{
+      position: absolute;
+      width: 129*@toVw;
+      left: 123*@toVw;
+      bottom: 351*@toVw;
+    }
+    .go{
+      width: 67*@toVw;
+      position: absolute;
+      bottom: 254*@toVw;
+      left: 83*@toVw;
+    }
+    .banner{
+      position: absolute;
+      left: 19*@toVw;
+      bottom: 49*@toVw;
+      width: 336*@toVw;
+      height: 215*@toVw;
+      border-radius: 8*@toVw;
+      border: 1*@toVw solid #fff;
+    }
+    .tips{
+      padding: 5*@toVw 7*@toVw;
+      left: 155*@toVw;
+      bottom: 275*@toVw;
+      border-radius: 8*@toVw;
+      border: 1*@toVw solid #fff;
+      position: absolute;
+      font-size:16*@toVw;
+      font-family:PingFang-SC-Medium;
+      font-weight:500;
+      color:rgba(255,255,255,1);
+      span{
+        color: #FF6477;
+      }
+    }
+  }
+</style>
--- a/src/components/guide/look.vue
+++ b/src/components/guide/look.vue
+<template>
+  <div>
+    <div class="off" v-if="show" @click="show=false">跳过>></div>
+    <div class="guide" v-if="show">
+      <div class="Unit">
+        Unit
+        <br>
+        我家农场
+      </div>
+      <img class="toUntil" :src="goDownUrl"/>
+      <div class="until-test">
+        点击切换<span class="color-red">月份主题</span>
+      </div>
+      <img :src="goUrl" class="toLesson"/>
+      <div class="lesson-text">点击进入<span class="color-red">单天课程</span></div>
+      <div class="lesson-block">
+        <div>
+          DAY 1 Bingo
+          <div>
+            lesson 1·唱动体验
+          </div>
+        </div>
+        <div>
+          <img class="star" :src="starUrl"/>
+          <img class="star" :src="starUrl"/>
+          <img class="star" :src="starUrl"/>
+        </div>
+      </div>
+      <img class="i-know" :src="iKnowUrl" @click="show=false"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import iKnowUrl from '../../assets/guide/iKnow.png'
+  import goUrl from '../../assets/guide/go.png'
+  import goDownUrl from '../../assets/guide/go-down.png'
+  import starUrl from '../../assets/guide/star.png'
+
+  export default {
+    name: "guide",
+    data(){
+      return{
+        iKnowUrl:iKnowUrl,
+        goDownUrl:goDownUrl,
+        goUrl:goUrl,
+        starUrl:starUrl,
+        show:false
+      }
+    },
+    mounted(){
+      this.show=true;
+      if(!localStorage.getItem('mapGuide')){
+        localStorage.setItem('mapGuide','1')
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @import "../../util/public";
+  .star{
+    width: 23*@toVw;
+  }
+  .off{
+    position: absolute;
+    top: 9*@toVw;
+    z-index: 99999;
+    right: 20*@toVw;
+    font-size:12*@toVw;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+  }
+  .Unit{
+    font-size:14px;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    border: 1*@toVw solid #fff;
+    position: absolute;
+    text-align: center;
+    border-radius: 8*@toVw;
+    width:69*@toVw;
+    top: 7*@toVw;
+    left: 20*@toVw;
+    padding-top:10*@toVw ;
+    height:55*@toVw;
+    border-radius:8*@toVw;
+  }
+  .until-test{
+    font-size:14px;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    line-height:26*@toVw;
+    position: absolute;
+    width:144*@toVw;
+    height:26*@toVw;
+    border-radius:8*@toVw;
+    border:1*@toVw solid rgba(255,255,255,1);
+    text-align: center;
+    top: 87*@toVw;
+    left: 93*@toVw;
+  }
+  .toUntil{
+    width: 45*@toVw;
+    position: absolute;
+    top: 77*@toVw;
+    left: 43*@toVw ;
+  }
+  .guide{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    color: white;
+    background:rgba(0,0,0,0.8);
+    z-index: 9999;
+    .i-know{
+      position: absolute;
+      width: 129*@toVw;
+      left: 123*@toVw;
+      bottom: 110*@toVw;
+    }
+    .toLesson{
+      width: 45*@toVw;
+      position: absolute;
+      top: 190*@toVw;
+      left: 91*@toVw;
+    }
+    .color-red{
+      color: #FF6477;
+    }
+    .lesson-block{
+      width:336px;
+      height:82px;
+      display: flex;
+      border-radius:8px;
+      border:1px solid rgba(255,255,255,1);
+      position: absolute;
+      top: 230*@toVw;
+      left: 19*@toVw;
+    }
+    .lesson-text{
+      width:144*@toVw;
+      height:26*@toVw;
+      line-height: 26*@toVw;
+      font-family:PingFang-SC-Medium;
+      font-weight:500;
+      font-size: 14*@toVw;
+      border-radius:8*@toVw;
+      position: absolute;
+      top: 187*@toVw;
+      left: 137*@toVw;
+      text-align: center;
+      border:1*@toVw solid rgba(255,255,255,1)
+    }
+    .go{
+      width: 67*@toVw;
+      position: absolute;
+      bottom: 254*@toVw;
+      left: 83*@toVw;
+    }
+  }
+</style>
--- a/src/components/guide/map.vue
+++ b/src/components/guide/map.vue
+<template>
+  <div>
+    <div class="off" v-if="show" @click="show=false">跳过>></div>
+    <div class="guide" v-if="show">
+      <div class="Unit">
+        Unit
+        <br>
+        我家农场
+      </div>
+      <img class="toUntil" :src="goDownUrl"/>
+      <div class="until-test">
+        点击切换<span class="color-red">月份主题</span>
+      </div>
+      <img :src="goUrl" class="toLesson"/>
+      <div class="lesson-text">点击进入<span class="color-red">单天课程</span></div>
+      <div class="lesson-block">
+        <div>
+          DAY 1 Bingo
+          <div>
+            lesson 1·唱动体验
+          </div>
+        </div>
+        <div>
+          <img class="star" :src="starUrl"/>
+          <img class="star" :src="starUrl"/>
+          <img class="star" :src="starUrl"/>
+        </div>
+      </div>
+      <img class="i-know" :src="iKnowUrl" @click="show=false"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import iKnowUrl from '../../assets/guide/iKnow.png'
+  import goUrl from '../../assets/guide/go.png'
+  import goDownUrl from '../../assets/guide/go-down.png'
+  import starUrl from '../../assets/guide/star.png'
+
+  export default {
+    name: "guide",
+    data(){
+      return{
+        iKnowUrl:iKnowUrl,
+        goDownUrl:goDownUrl,
+        goUrl:goUrl,
+        starUrl:starUrl,
+        show:false
+      }
+    },
+    mounted(){
+      if(!localStorage.getItem('mapGuide')){
+        this.show=true;
+        localStorage.setItem('mapGuide','1')
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @import "../../util/public";
+  .star{
+    width: 23*@toVw;
+  }
+  .off{
+    position: absolute;
+    top: 9*@toVw;
+    z-index: 99999;
+    right: 20*@toVw;
+    font-size:12*@toVw;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+  }
+  .Unit{
+    font-size:14px;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    border: 1*@toVw solid #fff;
+    position: absolute;
+    text-align: center;
+    border-radius: 8*@toVw;
+    width:69*@toVw;
+    top: 7*@toVw;
+    left: 20*@toVw;
+    padding-top:10*@toVw ;
+    height:55*@toVw;
+    border-radius:8*@toVw;
+  }
+  .until-test{
+    font-size:14px;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    line-height:26*@toVw;
+    position: absolute;
+    width:144*@toVw;
+    height:26*@toVw;
+    border-radius:8*@toVw;
+    border:1*@toVw solid rgba(255,255,255,1);
+    text-align: center;
+    top: 87*@toVw;
+    left: 93*@toVw;
+  }
+  .toUntil{
+    width: 45*@toVw;
+    position: absolute;
+    top: 77*@toVw;
+    left: 43*@toVw ;
+  }
+  .guide{
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    color: white;
+    background:rgba(0,0,0,0.8);
+    z-index: 9999;
+    .i-know{
+      position: absolute;
+      width: 129*@toVw;
+      left: 123*@toVw;
+      bottom: 110*@toVw;
+    }
+    .toLesson{
+      width: 45*@toVw;
+      position: absolute;
+      top: 190*@toVw;
+      left: 91*@toVw;
+    }
+    .color-red{
+      color: #FF6477;
+    }
+    .lesson-block{
+      width:336px;
+      height:82px;
+      display: flex;
+      border-radius:8px;
+      border:1px solid rgba(255,255,255,1);
+      position: absolute;
+      top: 230*@toVw;
+      left: 19*@toVw;
+    }
+    .lesson-text{
+      width:144*@toVw;
+      height:26*@toVw;
+      line-height: 26*@toVw;
+      font-family:PingFang-SC-Medium;
+      font-weight:500;
+      font-size: 14*@toVw;
+      border-radius:8*@toVw;
+      position: absolute;
+      top: 187*@toVw;
+      left: 137*@toVw;
+      text-align: center;
+      border:1*@toVw solid rgba(255,255,255,1)
+    }
+    .go{
+      width: 67*@toVw;
+      position: absolute;
+      bottom: 254*@toVw;
+      left: 83*@toVw;
+    }
+  }
+</style>
--- a/src/components/guide/video.vue
+++ b/src/components/guide/video.vue
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "video"
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -68,10 +68,12 @@
      </div>
    </mt-popup>
    <bottom-tab></bottom-tab>
+    <guide-page></guide-page>
  </div>
 </template>

 <script>
+  import guidePage from './guide/index'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {getBannerListApi,getUserDetailApi,getUserLessonApi,getTeacherApi,getNewApi} from "../service/api";
@@ -83,7 +85,8 @@
    components:{
      swiper,
      swiperSlide,
-      bottomTab
+      bottomTab,
+      guidePage
    },
    data(){
      return {

--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -2,7 +2,7 @@
  <div>
    <div class="unit-block">
      <swiper :options="swiperOption" class="banner" v-if="$route.query.course_type==0" ref="mySwiper">
-        <swiper-slide v-for="index in 3" >
+        <swiper-slide v-for="a in 3" :key="a*10">
          <div class="unit-li">
            <div>
            </div>
@@ -54,6 +54,7 @@
        </div>
      </div>
    </div>
+    <guide-content v-if="popupVisible && thisLesson"/>
    <mt-popup
      v-model="popupVisible" style="background: transparent">
      <div v-if="thisLesson" class="popup-block">
@@ -81,7 +82,7 @@
        </div>

        <div class="content" v-if="!thisLesson.content.tips">
-          <div style="color: #cccccc;padding: 20px;font-size: 20px">快去开始课程吧!</div>
+          <div style="color: #cccccc;padding: 21.3333vw 0;font-size: 5.3333vw;">快去开始课程吧!</div>
        </div>
        <div>
          <i class="map goLesson" @click="goDetail()"></i>
@@ -89,11 +90,14 @@
      </div>
    </mt-popup>
    <bottom-tab></bottom-tab>
+    <guide-page></guide-page>
  </div>
 </template>

 <script>
  import {getCourseListApi,getLessonDetailApi,getLessonListApi} from "../../service/api";
+  import guidePage from '../guide/map'
+  import guideContent from '../guide/content'
  import diaBGI from '../../assets/newLesson/diaBG.png'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
@@ -105,7 +109,9 @@
    components:{
      swiper,
      swiperSlide,
-      bottomTab
+      bottomTab,
+      guidePage,
+      guideContent
    },
    data() {
      return {
@@ -324,6 +330,7 @@
    text-align: center;
    background: white;
    border-radius: 8*@toVw;
+    width: 276 * @toVw;
    .header{
      width: 276 * @toVw;
      height: 137 * @toVw;

--- a/src/components/newLesson/look.vue
+++ b/src/components/newLesson/look.vue
 <template>
  <div class="look-content">
+    <guide-block/>
    <div class="content" v-html="content">
    </div>
  </div>
 </template>

 <script>
+  import guideBlock from '../guide/look'
  export default {
    name: "look",
    props:[
      'contentData'
    ],
+    components:{
+      guideBlock
+    },
    computed:{
      content(){
        return this.contentData.content.content.replace(/video/g,'audio')

--- a/src/components/newLesson/video.vue
+++ b/src/components/newLesson/video.vue
@@ -6,7 +6,7 @@
        <img :src="imgURL.luolacoming" class="text">
      </div>
      <div class="video-block" v-for="data in showObj.video">
-        <video :src="data.url" controls ></video>
+        <video :src="data.url" controls :poster="data.url+'?vframe/jpg/offset/3'"></video>
      </div>
      <div class="btn-block">
        <div v-if="contentData.content.age" class="age-block" @click="ageShow = !ageShow">

--- a/static/cache/demo.appcache
+++ b/static/cache/demo.appcache
+CACHE MANIFEST
+# 2010-06-18:v2
+CACHE:
+NETWORK:
+https://cdn.singsingenglish.com/
+FALLBACK: