视频模块增加

src/otherPages/courseCatalog/components/courseCatalog.vue

@@ -0,0 +1,132 @@
+<template>
+  <view class="bg">
+    <view class="video">
+      <view class="video-item">
+        <image
+          class="video-item-left"
+          mode="widthFix"
+          src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/video_poster.png"
+        ></image>
+        <view class="video-item-right">
+          <view>福州 | 华威夜间模拟灯光全套 （东南V5）</view>
+          <view class="video-item-right-icon">学习中</view>
+        </view>
+      </view>
+      <view class="video-item">
+        <image
+          class="video-item-left"
+          mode="widthFix"
+          src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/video_poster.png"
+        ></image>
+        <view class="video-item-right">
+          <view>福州 | 华威夜间模拟灯光全套 （东南V5）</view>
+          <view class="video-item-right-icon">学习中</view>
+        </view>
+      </view>
+      <view class="video-item">
+        <image
+          class="video-item-left"
+          mode="widthFix"
+          src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/video_poster.png"
+        ></image>
+        <view class="video-item-right">
+          <view>福州 | 华威夜间模拟灯光全套 （东南V5）</view>
+          <view class="video-item-right-icon">学习中</view>
+        </view>
+      </view>
+    </view>
+    <view class="pay">
+      <view class="pay-text">
+        <text>立即支付&nbsp;&nbsp;¥35.00</text>
+      </view>
+      <image
+        style="width: 100%"
+        mode="widthFix"
+        src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/payBg.png"
+      ></image>
+    </view>
+    <view class="advantage">
+      <view class="advantage-title"> 实拍优势</view>
+      <view class="advantage-img"> 
+        <image mode="widthFix" src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/advantage.png"></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  width: 100%;
+  display: inline-block;
+  height: 100%;
+  .video {
+    white-space: normal;
+    padding: 0 30rpx;
+    padding-top: 40rpx;
+    display: inline-block;
+    width: 100%;
+    .video-item {
+      width: 100%;
+      display: flex;
+      margin-bottom: 40rpx;
+    }
+    .video-item-left {
+      width: 250rpx;
+      font-size: 30rpx;
+      flex-shrink: 0;
+    }
+    .video-item-right {
+      padding-left: 30rpx;
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 30rpx;
+    }
+    .video-item-right-icon {
+      width: 94rpx;
+      height: 40rpx;
+      background: #d6e9fc;
+      border-radius: 8rpx 8rpx 8rpx 8rpx;
+      opacity: 1;
+      color: #498ef5;
+      font-size: 22rpx;
+      line-height: 40rpx;
+      text-align: center;
+    }
+  }
+  .pay {
+    padding: 0 30rpx;
+    position: relative;
+    .pay-text {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      text-align: center;
+      color: white;
+      transform: translateY(-85%);
+    }
+  }
+  .advantage {
+    padding: 0 30rpx;
+    .advantage-title {
+      font-size: 42rpx;
+      color: #0a1a33;
+      font-weight: 600;
+    }
+    .advantage-img {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      flex-shrink: 0;
+      padding-top: 30rpx;
+    }
+  }
+}
+</style>

src/otherPages/courseCatalog/components/courseDesc.vue

@@ -0,0 +1,114 @@
+<template>
+  <view class="bg">
+    <view class="intro">
+      <image
+        class="intro-bg"
+        mode="widthFx"
+        src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/descBg.png"
+      ></image>
+      <view class="intro-title"> 课程介绍 </view>
+      <view class="intro-desc">
+        <text>
+          所有科三考场路线，有资深教练顾问团，结合当地考场科三考试规则，并有诸多当地资深教练共同协助拍摄制作的真实考试路线，
+          视频清晰，各个项目点有文字和语音讲解仔细。让学员能在考前清楚了解考试路线项目点位，能消除学员考前很多疑虑和焦急的心态，是提高通过率，顺利过关！</text
+        >
+      </view>
+    </view>
+    <view class="problem">
+      <image
+        class="intro-bg"
+        mode="widthFx"
+        src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/descBg.png"
+      ></image>
+      <view class="intro-title"> 常见问题 </view>
+      <view class="intro-question">
+        <view class="intro-question-title">视频线路和考试线路完全一样吗？</view>
+        <view class="intro-question-answer"
+          >模拟真实考场拍摄，考试内容与实际考试一致，请放心观看。因考试线路存在多条，请确认好考场线路。
+        </view>
+        <view
+          style="
+            width: 100%;
+            height: 3rpx;
+            background: #e8e8e8;
+            margin-top: 30rpx;
+          "
+        ></view>
+        <view class="intro-question-title">考场视频有效期是多久？</view>
+        <view class="intro-question-answer"
+          >本产品有效期为自购买之日起6个月内有效，在有效期内，可反复观看。
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.bg {
+  padding-top: 50rpx;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  white-space: normal;
+  
+  .intro {
+    position: relative;
+    .intro-bg {
+      width: 100%;
+    }
+    .intro-title {
+      position: absolute;
+      font-size: 38rpx;
+      width: 100%;
+      top: 0;
+      color: #fff;
+      text-align: center;
+      height: 80rpx;
+      line-height: 80rpx;
+    }
+    .intro-desc {
+      position: absolute;
+      width: 100%;
+      top: 100rpx;
+      padding: 0 30rpx;
+      left: 10rpx;
+      color: #5c6066;
+    }
+  }
+  .problem {
+    position: relative;
+    .intro-bg {
+      width: 100%;
+    }
+    .intro-title {
+      position: absolute;
+      font-size: 38rpx;
+      width: 100%;
+      top: 0;
+      color: #fff;
+      text-align: center;
+      height: 80rpx;
+      line-height: 80rpx;
+    }
+    .intro-question {
+      position: absolute;
+      top:70rpx;
+      left: 10rpx;
+      padding: 0 30rpx;
+      color: #5c6066;
+    }
+    .intro-question-title {
+      font-size: 34rpx;
+      color: #333;
+      padding-top: 30rpx;
+    }
+    .intro-question-answer {
+      font-size: 30rpx;
+      color: #5c6066;
+    }
+  }
+}
+</style>

src/otherPages/courseCatalog/index.vue

@@ -1,25 +1,135 @@
 <template>
-    <view>
-
+  <view class="bg">
+    <m-nav-bar :title="navTitle" theme="black"></m-nav-bar>
+    <view class="header">
+      <view
+        class="header-underline"
+        :style="{
+          left: active * 50 + '%',
+        }"
+      >
+        <view class="header-underline-bg"></view>
+      </view>
+      <view
+        @click="
+          () => {
+            active = 0;
+            navTitle = '课程目录';
+          }
+        "
+        class="header-item"
+      >
+        课程目录
+      </view>
+      <view
+        @click="
+          () => {
+            active = 1;
+            navTitle = '课程描述';
+          }
+        "
+        class="header-item"
+      >
+        课程描述
+      </view>
     </view>
+    <scroll-view
+      enable-flex
+      @scrolltoupper="
+        () => {
+          active = 0;
+          navTitle = '课程目录';
+        }
+      "
+      @scrolltolower="
+        () => {
+          active = 1;
+          navTitle = '课程描述';
+        }
+      "
+      :scroll-into-view="'courseCatalog-' + active"
+      scroll-x
+      scroll-y
+      class="content"
+    >
+      <view id="courseCatalog-0" class="">
+        <course-catalog></course-catalog>
+      </view>
+      <view id="courseCatalog-1" class="">
+        <course-desc></course-desc>
+      </view>
+    </scroll-view>
+  </view>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-           
-            }
-        },
-        
-    }
+import mNavBar from "../../components/m-nav-bar/m-nav-bar.vue";
+import CourseDesc from "./components/courseDesc.vue";
+import courseCatalog from "./components/courseCatalog.vue";
+export default {
+  components: { mNavBar, CourseDesc, courseCatalog },
+  data() {
+    return {
+      active: 0,
+      navTitle: "课程目录",
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.bg{
-    background: #fff;
-    width: 100%;
-    min-height: 100vh;
+#courseCatalog-0 {
+  display: inline-block;
+  white-space: nowrap;
+  width: 100%;
+}
+#courseCatalog-1 {
+  display: inline-block;
+  white-space: nowrap;
+  width: 100%;
+}
+.bg {
+  background: #fff;
+  width: 100%;
+  min-height: 100vh;
+  overflow-y: scroll;
 }
 
+.header {
+  width: 100%;
+  display: flex;
+  position: relative;
+  .header-underline {
+    position: absolute;
+    width: 50%;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    height: 8rpx;
+    justify-content: center;
+    box-sizing: border-box;
+
+    .header-underline-bg {
+      width: 64rpx;
+      height: 8rpx;
+      background: #498ef5;
+      transform: translateY(50%);
+    }
+  }
+  .header-item {
+    width: 50%;
+    height: 70rpx;
+    line-height: 70rpx;
+    text-align: center;
+    color: #8a9099;
+    font-size: 38rpx;
+  }
+  .header-item_select {
+    color: #0a1a33;
+  }
+}
+.content {
+  white-space: nowrap;
+  width: 100%;
+}
 </style>

src/pages.json

@@ -221,6 +221,12 @@
             "navigationStyle":"custom"
           }
         },
+        {
+          "path": "courseCatalog/index",
+          "styles": {
+            "navigationStyle":"custom"
+          }
+        },
    
         {
           "path": "userInfoAuth/index",