移植了课程的页面

cert/nbjk-h5.zzxcx.net.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC371mVBWMa3hoi
-PbzJ6t+JZYZeyY5EnvxEmsWjSKBOF0ZvOK1t9CjlJzIdBccQqVKvZGxy7a6LbE33
-/2aJ2hu1Pj6OWbukCqMYke1bCsu9mYU2QMK15HTbqvIJZ3EKXS4poYuMY3o35DZD
-iSH4AaymdCsL2W7v0Z8r6pBArKNrsVmlWNrDz/ALBA1l1oMECRUWNVzKSzk96LPU
-NZMv6S7RG6qNIKssgXCxx4NPUiK1WPWbVYJbYPAOCo6w9Lty1cltX+PBSktTDpTd
-S2pXXIJQ1yZVlAf6B+S0TM3pec4qJL1lcsk78pJQAJ6Kw3WBIYE9CJmGbOXPTUHA
-pudx6/UTAgMBAAECggEAOT44NvSSP05X+8gS9RQvtWbvRpibuidwgzlXwNVdbnA3
-721ILCwMfiSQqA+gQEMyBHvQdIQcCjAOo9vMYaKLdQCGH281wnu8/myL3gWiGsOo
-fZXyAwGyjJrK8LpMp9kQAMzRzUM4SiSv7pzDAZgjzzngG7PznpcyXkyF0FrqER19
-GKcHOihRo7kU4xlM2PZbAuibX0jb7KK7VkfbdYkYd3r+uxFI2XmHqqmHT00J+yy+
-kiVrXycd0eK21bqgSDusSzM0C49QyJ5946iXfJuf24ofpmyju0tVPfR4+ZRLGONG
-7ZwJbFnweLoFY25i2M73Oa8r12+ogTpoOTt8QCd14QKBgQDtWuEx6iwP4S3qeUOc
-t7xeT8Xceqt+R+XXyLU5saiYgPC91E3gXtbcwZG/JYfmfR0icRIZIgMSPGAEJKFT
-C4TEgWY83yctbAZqXpC0dTukHKoQVLH1YubS3wDaLf6NfDk6iwxMhsJ371BQCfyw
-scg1yNgH7kUcWnWFEF/K6mCVHwKBgQDGYjaYHeAs7YFH35fe46421acZyrnY6kek
-WpX3bGwXLz1Ftg/X+RCIIzRJGR4DSJENd9TjhL6muwRACXiI84rMtI3ehuvJGwEO
-M72iFk2yLwe+L7i54JeZX334eeWHtLfZ/93wbXOeoweWlJxQ8d4joeWxSrGnNHEy
-xwZTwrDNjQKBgGN/smFrShdKDSZ6uSYsO7HJfSdE4TkpyKchgx7xY7yyaLkbE55Y
-A3g9SOy5PfQYRKtYfP6+LE1rs9BozpvyezCpEgO4hELdQv86Ly0G6/6K6Zu49XTp
-hdumEkRj/Y6wIYlyGrDF2SXP03oKBbzIeiZZ0H3am2wcW6FxUMbOY7h/AoGBAKg4
-F7sdej4elwVvH8Sso8lzmeJQ+Q5qep1vAsNveKigMgCuxPiKBe6qi2eAmOaH3hfh
-iO/0XAXdh1kVrtPST9wNLk+HcOByuY5laWPMLc3t+07WAHn9bA9t3c+Y7X0JTOzZ
-/kQlS2k1LPYOxg4NSiRE4BRaFhKGcYZxJXhZGrrxAoGAYLfluLlsKXBveVfewFAN
-EReIlCjoqtcMS/d+kaRaXqqc8Ive1e/8s5lGZuIAgRq8kgeRQIUG2Ug6rY36sjWJ
-faVbV6GyVyRaVVnGwW7kAuTVgzofRy1gYgAS6Sx/HSU83pb6F2+M2nmK2wWaY5wD
-qhEubEuUXqYT7sDnhMtGLis=
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDBxbdOD7Hn25HM
+i9TD9R02GoNgFY1O9U1B3mEuMUb6N7rTcRsQaLBPaarCA8z0PT+bj4xXb0qvWIjO
+FTW4IBfEuEfyPy39KtEdgNnJc21kU4YGOu7sdrzUh6boFONmwfnKsauewBeNTyBo
+Tz7jo1y8d2u585/vT1FeH1/poQE6ZJOssS8K62jed9NbaCncHxq8ThfI0lQMIaw3
+7XsK9IzDEElC5EuToR0zCDRHUcUQAXh/epMp4abqq3r2O9Pi3c6rFr6vhouHGKGa
+LjS1atSHTTCmQIBVs9N0xPDO+1PHrbsbvgiPOYCqxO9Euz0i/egfHZTRyXislXPL
+xHV4au77AgMBAAECggEADNpLdU8PMtzah+HChBjvDhamHipvzAvzSuowMfssxQ4L
+Q1kePXFkOHA+1k2gO5cQcAYOfgIwxv6tXFYF0Se3y+GZTBUqvL8pTbatO3J/kAcG
+PcWM8XxSvBofVQeFqdw18F7mjkoZhdL4yFJxTnIYhZu6NoRVWG8/a2nTV9DJHxFN
+KmGPvFud5KzFfoUIusP53Yw692ITnHVOnCn1jCVEiVxoB8QG1wS2Kr10C98bAAWN
++iD/dJUnUzJDTZz7jnwbnUYgAsBFQb1gWDYPRBMvWytj1vLKlzh3UF11WERSdJqw
+Jwk5+X1ikYv+2sv2/zQVtRds0bIKg0GDyehU82kaEQKBgQDtsQE47QygqMp/UtmG
+/EQ+ypLKRKaLhSPCsMDFJcPAi9l6qvRayD1WyrvcJ+S4VJMUyf2+s1Nlafxo0+ie
+uEsSIL0t6filyyBiRZ1ztivtBVxJ17cXcGTg/S05UcG8EFlW0lYE9eppFMecvwvY
+sWOd2zx/xvz/QNrkHQZ6pR+gcwKBgQDQsq2oYpNT4eUHhEGmmKw9M6AQljBvoQbM
+/zhjUttdhakXfZwLO+X49+W1n3JMceb/q+PL1K/UTDxwbRmaIx0f/DOuhOAM1l/k
+EsKbTHwCC/Aird+2ZVWhFugezOyjYYRI3BT6E0Bdq6DW6/1gXs/Ev5oQjzHBQCXM
+q0Krg5x9WQKBgH5mCXNfQ77P49dvlHPfBN+rVAIyHarGI20uF2T/nyhudjlwXb9F
+CrFz4BDEOjH377s3azOVIz0j7nFEd0ioUmuSc2fOK0bnTRJVWNSmxJcnqZsvFpNl
+Vo/6sqjvnCnJO+kas1mx+HTm8vuc8MzMEGBqrLJ6fCG1OHHkKYTg+H+XAoGAYo4O
+rjcnBfTmeH8/lZIBvME1dL/ITd8IXCSml1kYmPi22o4J89AskT9YLkYG7wzXHqQo
+5ighhKsf26PZ9E1iwqkSKvc66zUNgaJOXpJm+XxzwZzEydje8DzmDy2NDrbNhq7Q
+BSy0N8gGI5i8RhdgHLSy5+EHiRBnCVlTGbYEX7kCgYA1/WNYusFvp4ugIvLU3bDa
+7re33XCSdFc/QF2V5esFTBdPeRpzqFQvYthCT5DvMPySvdy3LRCqMJQmtpclqX98
+FPN4BOo2je00IKdJnFHICs+Mg1VBbA+bENF3OFq9nOW2a0aiAZaRupZpcWp9iy11
+4A32RmO9n9Yw+OzZMCIRPQ==
 -----END PRIVATE KEY-----

cert/nbjk-h5.zzxcx.net.pem

@@ -1,35 +1,34 @@
 -----BEGIN CERTIFICATE-----
-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
+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
-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
+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
+q+HfCRbZBw3/hDAfEjmpXcjMVK1Ijj3iAk4=
 -----END CERTIFICATE-----
 
-
 -----BEGIN CERTIFICATE-----
 MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
 TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
@@ -60,3 +59,35 @@ HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
 MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
 nLRbwHOoq7hHwg==
 -----END CERTIFICATE-----
+
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
++tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----

src/App.tsx

@@ -6,6 +6,7 @@ import { User } from "~/views/user/index";
 import { VideoList } from "~/views/videoList/index";
 import { Layout } from "~/views/Layout";
 import { VideoKindList } from "./views/videokindList";
+import {CourseCatalog} from './views/courseCatalog'
 import { DownloadCaigong1 } from "./views/downloadCaigong1";
 import { DownloadCaigong2 } from "./views/downloadCaigong2";
 import { PdfImages } from './views/pdfImages'
@@ -37,6 +38,9 @@ export function App() {
       <Route path="/marked">
         <Marked />
       </Route>
+      <Route path="/courseCatalog">
+        <CourseCatalog />
+      </Route>
 
       <Route path="/downloadCaigong1">
         <DownloadCaigong1 />
@@ -44,6 +48,7 @@ export function App() {
       <Route path="/downloadCaigong2">
         <DownloadCaigong2 />
       </Route>
+      {/* 宣传上印成了downloadCaigong3 */}
       <Route path="/downloadCaigong3">
         <DownloadCaigong2 />
       </Route>

src/api/index.ts

@@ -50,7 +50,25 @@ const api = {
             
         })
 
+    },
+    //查询考场视频列表
+    studentVipVideoList(params:{
+        city?:string,
+        cityId?:string,
+        examId?:string,
+        examName?:string,
+        videoSubject?:number,
+        provinceId?:string,
+        province?:string
+    }):AxiosPromise<studentVipVideoList>{
+        return request({
+            params,
+            url:"/student/vip/video/list",
+            method:'get'
+        })
+
     }
+
     
 
 }

src/api/type.d.ts

@@ -51,4 +51,28 @@ interface openapiSystemDictDataTypeRes extends Res {
         "status": string
     }[]
 
+}
+interface studentVipVideoList extends Res {
+    rows: {
+        "createTime": string,
+        "updateTime": string,
+        "id": number,
+        "videoName": string,
+        "seq": number,
+        "videoCover": string,
+        "videoUrl": string,
+        "videoSubject": number,
+        "state": number,
+        "horizontal": number,
+        "provinceId": string,
+        "province": string,
+        "cityId": string,
+        "city": string,
+        "countyId": null,
+        "county": null,
+        "examId": number,
+        "examName": string,
+        "permission": number
+    }[]
+
 }

src/views/courseCatalog/components/courseCatalog/index.less

@@ -0,0 +1,85 @@
+.courseCatalog {
+    width: 100%;
+    display: inline-block;
+    height: 100%;
+    .video {
+      white-space: normal;
+      padding: 0 30px;
+      padding-top: 40px;
+      display: inline-block;
+      width: 100%;
+      .video-item {
+        width: 100%;
+        display: flex;
+        margin-bottom: 40px;
+        position: relative;
+      }
+      .video-item-angle {
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .video-item-left {
+        width: 250px;
+        font-size: 30px;
+        flex-shrink: 0;
+      }
+      .video-item-right {
+        padding-left: 30px;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 30px;
+      }
+      .video-item-right-icon {
+        width: 94px;
+        height: 40px;
+        background: #d6e9fc;
+        border-radius: 8px 8px 8px 8px;
+        opacity: 1;
+        color: #498ef5;
+        font-size: 22px;
+        line-height: 40px;
+        text-align: center;
+      }
+      .video-item-right-icon_vip {
+        background: rgba(255, 77, 83, 0.3);
+        color: rgba(255, 77, 83, 1);
+      }
+    }
+    .pay {
+      padding: 0 30px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      .pay-text {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        text-align: center;
+        color: white;
+        transform: translateY(-85%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30px;
+      }
+    }
+    .advantage {
+      padding: 0 30px;
+      .advantage-title {
+        font-size: 42px;
+        color: #0a1a33;
+        font-weight: 600;
+      }
+      .advantage-img {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-shrink: 0;
+        padding-top: 30px;
+      }
+    }
+  }

src/views/courseCatalog/components/courseCatalog/index.tsx

@@ -0,0 +1,103 @@
+import './index.less'
+import React, { useEffect, useState } from "react";
+import api from '~/api'
+import vip_angle from "./../../../../assets/images/vip_angle.png";
+import try_angle from "./../../../../assets/images/try_angle.png";
+import Item from 'antd/lib/list/Item';
+export const CourseCatalog: React.FC = (props: any) => {
+    const [list, setList] = useState([{
+        "createTime": "2023-05-09 21:43:53",
+        "updateTime": "2023-05-11 13:42:22",
+        "id": 9,
+        "videoName": "试看深圳坂田科目三1号线详细讲解",
+        "seq": 1,
+        "videoCover": "http://mmbiz.qpic.cn/mmbiz_jpg/PCA2R9DFFILRpZY3xNycNdV5DJNMQyS8WYW2cEOMxhNEDHTllEpz7vYMdyaQq3W5YuYXa7hXxqIpHEicIRQIwdQ/0?wx_fmt=jpeg",
+        "videoUrl": "https://mp.weixin.qq.com/s?__biz=Mzk0ODQ4ODkwNw==&mid=2247483893&idx=1&sn=d92411084d17d3de9d0cf3345fc2e497&chksm=c3679e51f4101747538f1822522392ada6c2b18aac597429e1ac63507891021abf7186fba338#rd",
+        "videoSubject": 3,
+        "state": 1,
+        "horizontal": 1,
+        "provinceId": "44",
+        "province": "广东省",
+        "cityId": "4403",
+        "city": "深圳市",
+        "countyId": null,
+        "county": null,
+        "examId": 3,
+        "examName": "深圳坂田考场",
+        "permission": 1
+    }])
+    useEffect(() => {
+        api.studentVipVideoList({
+            province: '上海市'
+
+        }).then(res => {
+            setList(res.data.rows)
+
+
+        })
+    }, [])
+
+    return (
+        <div className='courseCatalog'>
+            <div className="video">
+                {list.map(Item => {
+                    return (<div
+                        className="video-item"
+                    >
+                        {Item.permission == 1 ? <img
+                            src={try_angle}
+                            className="video-item-angle"
+                        ></img> :
+                            <img
+                                src={vip_angle}
+                                className="video-item-angle"
+                            ></img>}
+                        <img
+                            className="video-item-left"
+                            src={Item.videoCover}
+                        ></img >
+                        <div className="video-item-right">
+                            <div style={{ width: '100%' }}>{Item.videoName}</div>
+                            <div className="video-item-right-icon">学习中</div>
+                        </div>
+                    </div >)
+
+                })}
+
+
+            </div >
+            <div
+
+                className="pay"
+            >
+                <div className="pay-text">
+                    <span
+                    >立即支付&nbsp;&nbsp;</span>
+
+                    {/* <span >已购买</span> */}
+                </div>
+                <img
+
+                    style={{ width: '100%' }}
+
+                    src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/payBg.png"
+                ></img>
+                {/* <img
+                    style={{ width: '100%' }}
+
+                    src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/alreadyPay.png"
+                ></img> */}
+            </div>
+            <div className="advantage">
+                <div className="advantage-title"> 实拍优势</div>
+                <div className="advantage-img">
+                    <img
+                        style={{ width: '75%' }}
+                        src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/advantage.png"
+                    ></img>
+                </div>
+            </div>
+        </div>
+    )
+
+}

src/views/courseCatalog/components/courseDesc/index.less

@@ -0,0 +1,64 @@
+.courseDesc {
+  padding-top: 50px;
+  padding-left: 30px;
+  padding-right: 30px;
+  white-space: normal;
+  
+  .intro {
+    position: relative;
+    .intro-bg {
+      width: 100%;
+    }
+    .intro-title {
+      position: absolute;
+      font-size: 38px;
+      width: 100%;
+      top: 0;
+      color: #fff;
+      text-align: center;
+      height: 80px;
+      line-height: 80px;
+    }
+    .intro-desc {
+      position: absolute;
+      width: 100%;
+      top: 100px;
+      padding: 0 30px;
+      left: 10px;
+      color: #5c6066;
+      font-size: 30px;
+    }
+  }
+  .problem {
+    position: relative;
+    .intro-bg {
+      width: 100%;
+    }
+    .intro-title {
+      position: absolute;
+      font-size: 38px;
+      width: 100%;
+      top: 0;
+      color: #fff;
+      text-align: center;
+      height: 80px;
+      line-height: 80px;
+    }
+    .intro-question {
+      position: absolute;
+      top:70px;
+      left: 10px;
+      padding: 0 30px;
+      color: #5c6066;
+    }
+    .intro-question-title {
+      font-size: 34px;
+      color: #333;
+      padding-top: 30px;
+    }
+    .intro-question-answer {
+      font-size: 30px;
+      color: #5c6066;
+    }
+  }
+}

src/views/courseCatalog/components/courseDesc/index.tsx

@@ -0,0 +1,50 @@
+import './index.less'
+import React from "react";
+export const CourseDesc: React.FC = (props: any) => {
+    return (
+        <div className="courseDesc">
+            <div className="intro">
+                <img
+                    className="intro-bg"
+
+                    src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/descBg.png"
+                ></img>
+                <div className="intro-title"> 课程介绍 </div>
+                <div className="intro-desc">
+                    <span>
+                        所有科三考场路线，有资深教练顾问团，结合当地考场科三考试规则，并有诸多当地资深教练共同协助拍摄制作的真实考试路线，
+                        视频清晰，各个项目点有文字和语音讲解仔细。让学员能在考前清楚了解考试路线项目点位，能消除学员考前很多疑虑和焦急的心态，是提高通过率，顺利过关！</span
+                    >
+                </div>
+            </div>
+            <div className="problem">
+                <img
+                    className="intro-bg"
+
+                    src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/descBg.png"
+                ></img>
+                <div className="intro-title"> 常见问题 </div>
+                <div className="intro-question">
+                    <div className="intro-question-title">视频线路和考试线路完全一样吗？</div>
+                    <div className="intro-question-answer"
+                    >模拟真实考场拍摄，考试内容与实际考试一致，请放心观看。因考试线路存在多条，请确认好考场线路。
+                    </div>
+                    <div style={{
+                        width: '100%',
+                        height: '3rpx',
+                        background: '#e8e8e8',
+                        marginTop: '30px'
+                    }}>
+
+
+                    </div>
+                    <div className="intro-question-title">考场视频有效期是多久？</div>
+                    <div className="intro-question-answer"
+                    >本产品有效期为自购买之日起6个月内有效，在有效期内，可反复观看。
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+
+}

src/views/courseCatalog/index.less

@@ -0,0 +1,59 @@
+#courseCatalog-0 {
+    display: inline-block;
+    white-space: nowrap;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+  }
+  #courseCatalog-1 {
+    display: inline-block;
+    white-space: nowrap;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+  }
+  .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: 8px;
+      justify-content: center;
+      box-sizing: border-box;
+  
+      .header-underline-bg {
+        width: 64px;
+        height: 8px;
+        background: #498ef5;
+        transform: translateY(50%);
+      }
+    }
+    .header-item {
+      width: 50%;
+      height: 70px;
+      line-height: 70px;
+      text-align: center;
+      color: #8a9099;
+      font-size: 38px;
+    }
+    .header-item_select {
+      color: #0a1a33;
+    }
+  }
+  .content {
+    white-space: nowrap;
+    width: 100%;
+    height: calc(100vh - 180px);
+  }

src/views/courseCatalog/index.tsx

@@ -0,0 +1,55 @@
+import './index.less'
+import React, { useEffect, useState } from "react";
+import { CourseDesc } from './components/courseDesc';
+import { CourseCatalog as CourseCata } from './components/courseCatalog';
+import api from '~/api'
+export const CourseCatalog: React.FC = (props: any) => {
+    const [active, setActive] = useState(0)
+    useEffect(() => {
+        let query = new URLSearchParams(window.location.search)
+        if (query.get("state") == 'LOGIN') {
+            api.loginGzhcode({
+                authorizationCode: query.get("code") || ""
+            }).then(res => {
+                window.localStorage.setItem("token", res.data.data.token)
+                window.location.replace('/courseCatalog')
+                console.log(res.data.data.token)
+            })
+        }
+    }, [])
+    return (
+        <view>
+            <view className="header">
+                <view
+                    className="header-underline"
+                    style={{
+                        left: active * 50 + '%',
+                    }}
+                >
+                    <view className="header-underline-bg"></view>
+                </view>
+                <view
+                    onClick={() => {
+                        setActive(0)
+                    }}
+                    className="header-item"
+                >
+                    课程目录
+                </view>
+                <view
+                    onClick={() => {
+                        setActive(1)
+                    }}
+
+                    className="header-item"
+                >
+                    课程描述
+                </view>
+            </view>
+
+            {active == 1 ? <CourseDesc></CourseDesc> : <CourseCata></CourseCata>}
+        </view>
+
+    )
+
+}

src/views/home/index.less

@@ -1,42 +1,42 @@
 .Home {
-  text-align: center;
-}
-
-.Home-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
+    text-align: center;
+  }
+  
   .Home-logo {
-    animation: Home-logo-spin infinite 20s linear;
+    height: 40vmin;
+    pointer-events: none;
+  }
+  
+  @media (prefers-reduced-motion: no-preference) {
+    .Home-logo {
+      animation: Home-logo-spin infinite 20s linear;
+    }
+  }
+  
+  .Home-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
   }
-}
-
-.Home-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.Home-link {
-  color: #61dafb;
-}
-
-@keyframes Home-logo-spin {
-  from {
-    transform: rotate(0deg);
+  
+  .Home-link {
+    color: #61dafb;
   }
-  to {
-    transform: rotate(360deg);
+  
+  @keyframes Home-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
-}
-
-button {
-  font-size: calc(10px + 2vmin);
-}
+  
+  button {
+    font-size: calc(10px + 2vmin);
+  }

src/views/videokindList/index.tsx

@@ -37,6 +37,7 @@ export const VideoKindList: React.FC = (props: any) => {
         }
         else {
             api.studentUserInfo().then(res => {
+                
 
                
             })