页面改版1

src/components/m-nav-bar/m-nav-bar.vue

@@ -2,6 +2,7 @@
   <div
     :class="{
       fixed: fixed,
+      transparent:transparent
     }"
     class="header"
   >
@@ -70,6 +71,9 @@ export default {
   top: 0;
 
 }
+.transparent{
+  background: transparent;
+}
 .header {
   position: sticky;
   top: 0;

src/otherPages/courseCatalog/components/courseCatalog.vue

@@ -7,23 +7,27 @@
         :key="index"
         class="video-item"
       >
+        <!-- <view class="video-item-leftBorder"></view> -->
+     
         <image
           v-if="item.permission == 1"
           class="video-item-angle"
-          :src="try_angle"
+          :src="shikan"
         ></image>
         <image
           v-if="item.permission == 2"
           class="video-item-angle"
-          :src="vip_angle"
+          :src="vip"
         ></image>
         <image
           class="video-item-left"
-          mode="widthFix"
+          mode="heightFix"
           :src="item.videoCover"
         ></image>
         <view class="video-item-right">
-          <view style="width: 100%">{{ item.videoName }}</view>
+          <view style="width: 100%; font-size: 30rpx">{{
+            item.videoName
+          }}</view>
           <view class="video-item-right-icon">学习中</view>
         </view>
       </view>
@@ -52,7 +56,7 @@
     </view>
     <view
       v-if="!roadExamIds.includes(examId)"
-      v-show="isVideoFree=='0'"
+      v-show="isVideoFree == '0'"
       style="width: 100%; padding-left: 30rpx"
     >
       <van-checkbox-group :value="userAgreement" @change="changeUserAgreement">
@@ -137,8 +141,8 @@
 <script>
 import api from "@/api";
 import { mapGetters, mapState } from "vuex";
-import vip_angle from "@/assets/img/vip_angle.png";
-import try_angle from "@/assets/img/try_angle.png";
+import vip from "@/assets/img/vip.png";
+import shikan from "@/assets/img/shikan.png";
 export default {
   data() {
     return {
@@ -146,8 +150,8 @@ export default {
       query: {
         price: 0,
       },
-      vip_angle,
-      try_angle,
+      vip,
+      shikan,
       userAgreement: [],
       userAgree: false,
     };
@@ -252,26 +256,36 @@ export default {
   .video {
     white-space: normal;
     padding: 0 30rpx;
-    padding-top: 40rpx;
+    padding-top: 54rpx;
     display: inline-block;
     width: 100%;
     .video-item {
       width: 100%;
       display: flex;
-      margin-bottom: 40rpx;
+      padding: 30rpx;
+      margin-bottom: 20rpx;
       position: relative;
+      height: 200rpx;
+      border-radius: 20rpx 20rpx 20rpx 20rpx;
+      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(5, 61, 26, 0.1);
+      border-left: 10rpx solid #3AC770;
+    }
+    .video-item-leftBorder {
+      width: 8rpx;
+      background: linear-gradient(360deg, #3ac770 0%, #6be69b 100%);
+      height: 100%;
     }
     .video-item-angle {
-      width: 60rpx;
-      height: 60rpx;
+      width: 68rpx;
+      height: 32rpx;
       position: absolute;
-      top: 0;
-      left: 0;
+      top: 30;
+      left: 30;
     }
     .video-item-left {
       width: 250rpx;
       font-size: 30rpx;
-      flex-shrink: 0;
+      height: 138rpx;
     }
     .video-item-right {
       padding-left: 30rpx;
@@ -285,10 +299,11 @@ export default {
       background: #d6e9fc;
       border-radius: 8rpx 8rpx 8rpx 8rpx;
       opacity: 1;
-      color: #498ef5;
+      color: #3AC770;
       font-size: 22rpx;
       line-height: 40rpx;
       text-align: center;
+      background: #E6FFEF;
     }
     .video-item-right-icon_vip {
       background: rgba(255, 77, 83, 0.3);

src/otherPages/courseCatalog/components/courseDesc.vue

@@ -9,20 +9,22 @@
       <view class="intro-title"> 课程介绍 </view>
       <view class="intro-desc">
         <text>
-          所有科三考场路线，有资深教练顾问团，结合当地考场科三考试规则，并有诸多当地资深教练共同协助拍摄制作的真实考试路线，
-          视频清晰，各个项目点有文字和语音讲解仔细。让学员能在考前清楚了解考试路线项目点位，能消除学员考前很多疑虑和焦急的心态，是提高通过率，顺利过关！</text
+          所有科三考场路线，有资深教练顾问团，结合当地考场科三考试规则，并有诸多当地资深教练共同协助拍摄制作的真实考试路线，视频清晰，各个项目点有文字和语音讲解仔细。让学员能在考前清楚了解考试路线项目点位，能消除学员考前很多疑虑和焦急的心态，是提高通过率，顺利过关！</text
         >
       </view>
     </view>
     <view class="problem">
-      <image
+      <!-- <image
         class="intro-bg"
         mode="widthFx"
         src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/descBg.png"
-      ></image>
+      ></image> -->
       <view class="intro-title"> 常见问题 </view>
       <view class="intro-question">
-        <view class="intro-question-title">视频线路和考试线路完全一样吗？</view>
+        <view class="intro-question-title"
+          >
+          <!-- <image src="" class=""></image> -->
+          视频线路和考试线路完全一样吗？</view>
         <view class="intro-question-answer"
           >模拟真实考场拍摄，考试内容与实际考试一致，请放心观看。因考试线路存在多条，请确认好考场线路。
         </view>
@@ -53,9 +55,15 @@ export default {};
   padding-left: 30rpx;
   padding-right: 30rpx;
   white-space: normal;
-  
+
   .intro {
+    width: 690rpx;
+    height: 476rpx;
+    background: #e6ffef;
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+    opacity: 1;
     position: relative;
+    margin-bottom: 40rpx;
     .intro-bg {
       width: 100%;
     }
@@ -72,7 +80,7 @@ export default {};
     .intro-desc {
       position: absolute;
       width: 100%;
-      top: 100rpx;
+      top: 120rpx;
       padding: 0 30rpx;
       left: 10rpx;
       color: #5c6066;
@@ -80,6 +88,11 @@ export default {};
   }
   .problem {
     position: relative;
+    width: 690rpx;
+    height: 756rpx;
+    background: #e6ffef;
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+    opacity: 1;
     .intro-bg {
       width: 100%;
     }
@@ -95,16 +108,20 @@ export default {};
     }
     .intro-question {
       position: absolute;
-      top:70rpx;
+      top: 70rpx;
       left: 10rpx;
       padding: 0 30rpx;
       color: #5c6066;
     }
     .intro-question-title {
       font-size: 34rpx;
-      color: #333;
+      color: #0c1c12;
       padding-top: 30rpx;
     }
+    .intro-question-wen {
+      width: 45rpx;
+      height: 45rpx;
+    }
     .intro-question-answer {
       font-size: 30rpx;
       color: #5c6066;

src/pages.json

@@ -463,8 +463,8 @@
     }
   ],
   "tabBar": {
-    "color": "#7A7E83",
-    "selectedColor": "#498EF5",
+    "color": "#79807C",
+    "selectedColor": "#3AC770",
     "borderStyle": "white",
     "backgroundColor": "#ffffff",
     "list": [