新增视频页面

src/views/videoKindList/videoKindList.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from "react-redux";
 import './videoKindList.css'
+import { Link } from 'react-router-dom';
 const mapStateToProps = (state) => ({
 
 });
@@ -79,11 +80,19 @@ class VideoKindListViews extends Component {
                 <div className="list">
                     {
                         this.state.list.map((item, index) => {
-                            return (<div className="list-item" key={index}>
-                                <img className="list-item-img" src={item.image} alt="图片" />
-                                <span  className="list-item-text top54 ">{item.title}</span>
-                                <span  className="list-item-text top128 left40">《视频讲解》</span>
-                            </div>)
+                            return (
+                                <Link key={index} to={
+                                    './videoList?subject='+(index+1)
+                                }>
+                                    <div className="list-item" key={index}>
+                                        <img className="list-item-img" src={item.image} alt="图片" />
+                                        <span className="list-item-text top54 ">{item.title}</span>
+                                        <span className="list-item-text top128 left40">《视频讲解》</span>
+                                    </div>
+                                </Link>
+
+
+                            )
                         })
 
                     }

src/views/videoList/videoList.css

@@ -1,4 +1,59 @@
 .container{
     width: 750px;
 
+}
+.list{
+    width: 690px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    position: relative;
+    padding:30px 30px;
+    padding-top: 0px;
+    justify-content: space-between;
+}
+.list-title{
+    width: 100%;
+    color: #0A1A33;
+    font-size: 34px;
+    font-weight: bold;
+    padding: 30px;
+    padding-left: 0px;
+}
+.list-item{
+    width: 334px;
+    height: auto;
+    margin-bottom: 30px;
+    position: relative;
+
+}
+.list-item-name{
+    font-size: 34px;
+    text-align: center;
+    width: 100%;
+    padding: 10px 0px;
+
+}
+.list-item-play{
+    position: absolute;
+    top: 64px;
+    left: 138px;
+}
+.list-item-title{
+    color: #fff;
+}
+.list-item-jiao{
+    position: absolute;
+    top: 0;
+    right: 0;
+
+}
+.left40{
+    left:40px
+}
+.top128{
+    top: 128px;
+}
+.top54{
+    top: 54px;
 }

src/views/videoList/videoList.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from "react-redux";
+import { Link } from 'react-router-dom';
 import './videoList.css'
 const mapStateToProps = (state) => ({
 
@@ -17,17 +18,23 @@ class VideoListViews extends Component {
     constructor() {
         super();
         this.state = {
-            list: [{
-                image: require('./../../assets/images/kemu1.png'),
-                title: "科目一"
+            subject:1,
+            list:[{}],
+            configList: [{
+                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu1jiao.png',
+                title: "科目一",
+                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu1Bg.png"
             }, {
-                image: require('./../../assets/images/kemu2.png'),
+                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu2jiao.png',
+                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu2Bg.png",
                 title: "科目二"
             }, {
-                image: require('./../../assets/images/kemu3.png'),
+                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu3jiao.png',
+                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu3Bg.png",
                 title: "科目三"
             }, {
-                image: require('./../../assets/images/kemu4.png'),
+                jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu4jiao.png',
+                bg:"https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu4Bg.png",
                 title: "科目四"
             }]
 
@@ -67,7 +74,11 @@ class VideoListViews extends Component {
     *
     * */
     componentDidMount() {
-
+       let query= new URLSearchParams(window.location.search);
+       console.log(query)
+       this.setState({
+        subject:query.get('subject')||1
+       })
     }
 
     /*
@@ -77,13 +88,20 @@ class VideoListViews extends Component {
         return (
             <div className="container">
                 <div className="list">
+
+                    <div className="list-title">书籍视频解说</div>
                     {
                         this.state.list.map((item, index) => {
-                            return (<div className="list-item" key={index}>
-                                <img src={item.image} alt="图片" />
-                                <span  className="list-item-text top54 ">{item.title}</span>
-                                <span  className="list-item-text top128 left40">《视频讲解》</span>
-                            </div>)
+                            return (<a key={index} href={'https://mp.weixin.qq.com/s?__biz=Mzg2OTkwMDU0OA==&mid=2247483656&idx=1&sn=61381ded69ebe20d8c0fedc7e77ee0ce&chksm=ce974963f9e0c075bb209fde63d128a97936eb65694d373853c6352584acc645085f42f7b9d5#rd'}>
+                                <div className='list-item'>
+                                    <img className='list-item-jiao' alt='' src={this.state.configList[this.state.subject-1].jiao} />
+                                    <img className='list-item-play' alt='' src='https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/play.png' />
+                                    <img style={{width:'100%'}} alt='' src={this.state.configList[this.state.subject-1].bg} />
+                                    <div className='list-item-name'>ABS题</div>
+                                </div>
+
+
+                            </a>)
                         })
 
                     }