<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>