修改评论

project.config.json

+{
+  "appid": "wxcef7a1d8753d619b",
+  "compileType": "miniprogram",
+  "libVersion": "3.6.3",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  },
+  "simulatorPluginLibVersion": {}
+}
\ No newline at end of file

project.private.config.json

+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "saas-weichat",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}
\ No newline at end of file

src/components/App.jsx

@@ -552,7 +552,7 @@ class App extends React.Component {
                                                         selectedIcon={
                                                             <IconfontD code={"iconhometabbar-training-selected"} style={{ fontSize: 48 }} />
                                                         }
-                                                        title={<span>{intl.get("TrainingProgram2") || "项目"}</span>}
+                                                        title={<span>{intl.get("TrainingProgram2") || "活动"}</span>}
                                                         key="train"
                                                         selected={this.state.selectedTab === 'menutrain'}
                                                         onPress={() => {

src/components/Training/TrainingSteps/TrainingReview.jsx

@@ -177,7 +177,6 @@ class TrainReviewList extends Component {
                     onEndReached={this.onEndReached}
                     isLoading={this.state.isLoading}
                     page={this.props.page}
-                    listStyle={-150}
                     footText={intl.get('PublishKey47')||'没有更多了'}
                 />
                 <div className="train-footer-box">

src/components/Training/TrainingSteps/TrainingSteps copy.jsx

+import React, { Component, Fragment } from 'react';
+import { Icon, List } from 'antd';
+import {
+  Accordion,
+  ListView,
+  Modal,
+  Tabs,
+  TextareaItem,
+  Toast,
+} from 'antd-mobile';
+import API from '../../../util/urlconfig';
+import { Sticky, StickyContainer } from 'react-sticky';
+import MediaDisplay from '../../../common/mediaDisplay/index';
+
+import trainExam from '../../../image/train-exam.png';
+import trainHomeowrk from '../../../image/train-homework.png';
+import trainLesson from '../../../image/train-lesson.png';
+import trainSurvery from '../../../image/train-survey.png';
+import trainVote from '../../../image/train-vote.png';
+import trainSign from '../../../image/train-sign.png';
+import trainCer from '../../../image/train-cer.png';
+import trainLink from '../../../image/train-link.png';
+import trainOffline from '../../../image/train-offline.png';
+import trainLive from '../../../image/train-live.png';
+import trainExamGray from '../../../image/train-exam-gray.png';
+import trainHomeowrkGray from '../../../image/train-homework-gray.png';
+import trainLessonGray from '../../../image/train-lesson-gray.png';
+import trainSurveryGray from '../../../image/train-survey-gray.png';
+import trainVoteGray from '../../../image/train-vote-gray.png';
+import trainSignGray from '../../../image/train-sign-gray.png';
+import trainLinkGray from '../../../image/train-link-gray.png';
+import blackPage from '../../../common/mediaDisplay/black-bg.png';
+import '../../menumarketing/MarketingDetail.less';
+import inCompleteIcon from './train-in-complete-icon.png';
+import progressIcon from './train-progress-icon.png';
+import completeIcon from './train-complete-icon.png';
+import trainComment from './comment-icon.jpg';
+import trainCommentReplay from '../../../image/train-comment.png';
+import trainCase from '../../../image/train-case.png';
+import tarinData from '../../../image/train-data.png';
+import forumIcon from '../../../image/forumIcon2.png';
+import intl, { init } from "react-intl-universal";
+import { hashHistory } from 'react-router';
+import FontAwesome from 'react-fontawesome';
+import './index.less';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import * as TrainingStepsAction from './TrainingStepsAction';
+import func from '../../../util/commonFunc';
+import { Circle } from 'rc-progress';
+import SecListView from '../../common/listview/secListView';
+import ReactEcharts from 'echarts-for-react';
+import $ from 'jquery';
+import Footer from '../../../common/footer/footer';
+import zan from '../../../image/zan.png';
+import alreadyzan from '../../../image/alreadyzan.png';
+import myIcon from '../../../image/my.png';
+import jumpToLive from '../../../util/jumpToLive';
+import DataLibraryList from './trainningDataLibrary/DataLibraryList';
+import certificateIcon
+  from '../../course/courseplay/plugin/courseFooter/certificateIcon.png';
+import location from './signing-location.png';
+
+const TabPane = Tabs.TabPane;
+
+class TrainingSteps extends Component {
+  constructor(props) {
+    super(props);
+    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+
+    this.state = {
+      displayProgress: false,
+      courseInfo: 'IC1金融法规与银行从业人员职业操守认证考试试题20170901项目名称项目名称项目名称项...', //课程信息
+      successTimer: '2018-02-28 至 2018-03-28', //报名成功时间
+      successTxt: '开始时间:', //开始时间
+      learningCountTxt: '总学习时长', //学习时长
+      hour: '10', //总共小时
+      minute: '30', //总共分钟
+      loading: false,
+      visible: false,
+      confirmLoading: false,
+      commitContent: '',
+      currentType: 1,
+      //showEnroll :0评论   >=1:报名  （具体处理到下周接口出来）
+      showEnroll: 1,
+      showComment: false,
+      comment: '',
+      dataSource: ds,
+      isLoading: false,
+      commentType: 1,
+      replyCommentTypeId: 0,
+      hiddenUp: false,
+      showProgress: true,
+      defaultTabKey: '1',
+      trainLogoHeight: 400,
+      commentHasMore: true,
+      showContentOccupy: false,
+      isNative: false,
+      enablePosition: 0,
+      refreshTrainComment: ""
+    };
+    this.tabClick = this.tabClick.bind(this);
+    this.logoHeightListen = this.logoHeightListen.bind(this);
+    this.contentDomHeightSetForSticky = this.contentDomHeightSetForSticky.bind(
+      this
+    );
+  }
+
+  componentWillMount() {
+    const { tabkey } = this.props.location.query;
+
+    this.setState({
+      defaultTabKey: tabkey ? tabkey + '' : '1',
+    });
+  }
+
+  componentDidMount() {
+
+    let _this = this;
+    if (parseInt(terminalMp) == 0 || parseInt(terminalMp) == 1) {
+      console.log("原生", terminalMp)
+      _this.setState({ isNative: true })
+    }
+    this.logoHeightListen();
+    this.props.initailData();
+    let { id, finished, tabkey } = this.props.location.query;
+    let params = {
+      id: id,
+    };
+
+    this.props.trainStepsData(finished, params, () => {
+      let { introductionVo } = _this.props.TrainingStepsReducer;
+      let { needEnroll, needAudit, hasEnrolled, audited, enablePosition, enableSign } = introductionVo;
+      console.log("did-introductionVo", introductionVo)
+      _this.setState({
+        showProgress: this.showProgressJudge(
+          needEnroll,
+          hasEnrolled,
+          needAudit,
+          audited
+        ),
+        enablePosition,
+        enableSign,
+      });
+      if (!tabkey) {
+        if (eval(finished) == true) {
+        } else if (
+          introductionVo.auditStatus == 2 ||
+          (!introductionVo.needAudit && introductionVo.hasEnrolled)
+        ) {
+          _this.setState({
+            defaultTabKey: '2',
+          });
+        }
+      }
+      _this.contentDomHeightSetForSticky();
+    });
+    this.setState({
+      isLoading: true,
+    });
+    this.props.reviewListData(
+      { ...params, pageNo: 1, pageSize: 10 },
+      false,
+      () => {
+        const {
+          reviewListTotle,
+          reviewPageNo,
+          reviewListData,
+        } = _this.props.TrainingStepsReducer;
+        this.setState({
+          isLoading: false,
+          commentHasMore: (reviewPageNo - 2) * 10 + reviewListData.length <
+            reviewListTotle
+            ? true
+            : false,
+        });
+      }
+    );
+    func.changeDocumentTitle(intl.get("TrainingProgram2") || '项目');
+  }
+  logoHeightListen() {
+    this.setState({
+      trainLogoHeight: document.body.clientWidth * (225 / 375),
+    });
+  }
+
+  contentDomHeightSetForSticky() {
+    let domHeight = document.getElementById('train-contain-list-sticky-div')
+      .offsetHeight;
+    let bodyHeight = document.body.clientHeight;
+    if (
+      bodyHeight - (domHeight + 88) < 50 &&
+      bodyHeight - (domHeight + 88) > 0
+    ) {
+      this.setState({
+        showContentOccupy: true,
+      });
+    }
+  }
+
+  showProgressJudge(needEnroll, hasEnrolled, needAudit, audited) {
+    if (needEnroll) {
+      if (hasEnrolled) {
+        if (needAudit) {
+          if (audited) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return true;
+        }
+      } else {
+        return false;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  onLoadMore = () => {
+    let { id } = this.props.location.query;
+    let _this = this;
+    let { reviewPageNo } = this.props.TrainingStepsReducer;
+    let params = {
+      id: id,
+    };
+    if (this.state.isLoading) {
+      return;
+    }
+    if (!this.state.commentHasMore) {
+      return;
+    }
+    this.setState({
+      isLoading: true,
+    });
+
+    this.props.reviewListData(
+      { ...params, pageNo: reviewPageNo, pageSize: 10 },
+      true,
+      () => {
+        const {
+          reviewListTotle,
+          reviewPageNo,
+          reviewListData,
+        } = _this.props.TrainingStepsReducer;
+        this.setState({
+          isLoading: false,
+          commentHasMore: (reviewPageNo - 2) * 10 + reviewListData.length <
+            reviewListTotle
+            ? true
+            : false,
+        });
+      }
+    );
+  };
+
+  goToBuy = ()=>{
+    let { id } = this.props.location.query;
+    hashHistory.push({
+      pathname: func.routerBefore() + '/settleAccounts',
+      query: { id: id },
+    });
+  }
+
+  showInputView = () => {
+    console.log('出现');
+    this.setState({ showEnroll: 0 });
+  };
+  hiddenInputView = () => {
+    if (this.state.commitContent == '') {
+      this.setState({ showEnroll: 1 });
+    }
+  };
+
+  //提交评论
+  trainCommitVerb = () => {
+    if (!this.state.commitContent) {
+      Toast.info(intl.get("PublishKey73") || '评论不能为空');
+      return;
+    }
+    let _this = this;
+
+    if (this.state.commentType == 1) {
+      let { id } = this.props.location.query;
+
+      let param = { trainingProjectId: id, content: this.state.commitContent };
+      this.props.commitVerb(param, () => {
+        this.setState({ commitContent: '' });
+        let params = {
+          id: id,
+        };
+        this.props.reviewListData({ ...params, pageNo: 1, pageSize: 10 }, false, () => {
+          _this.setState({
+            refreshTrainComment: new Date().getTime()
+          })
+        });
+      });
+      this.setState({ showEnroll: 1, showComment: false });
+    } else if (this.state.commentType == 2) {
+      let { id } = this.props.location.query;
+      let param = {
+        trainingProjectId: id,
+        tpCommentId: this.state.replyCommentTypeId,
+        content: this.state.commitContent,
+      };
+      this.props.reviewReplyCommit(param, () => {
+        this.setState({ commitContent: '' });
+
+        let params = {
+          id: id,
+        };
+        this.props.reviewListData(
+          { ...params, pageNo: 1, pageSize: 10 },
+          false,
+          () => {
+            this.setState({
+              isLoading: false,
+            });
+          }
+        );
+        Toast.info(intl.get("CommentSuccess") || '评论成功');
+      });
+      this.setState({ showEnroll: 1, showComment: false });
+    }
+  };
+
+  tabClick(tabs, tab) {
+    console.log(tabs, tab,'```````````````````````111111111111111111',this.props.location.pathname)
+    if (Number(tab) == tabs.length) {
+      this.setState({ hiddenUp: true });
+    } else {
+      this.setState({ hiddenUp: false });
+    }
+    let { query } = this.props.location;
+    query.tabkey = parseInt(tab);
+    this.setState({
+      defaultTabKey: String(tab),
+    });
+    hashHistory.replace({
+      pathname: this.props.location.pathname,
+      query: this.props.location.query,
+    });
+  }
+
+  jumpToSigningLocation = () => {
+    let { id } = this.props.location.query;
+    hashHistory.push({
+      pathname: func.routerBefore() + '/signingLocation',
+      query: {
+        id
+      }
+    });
+  }
+
+  renderTabBar = (props) => {
+    return <Tabs.DefaultTabBar {...props} />;
+  }
+  renderContent = (tab) => {
+    let i = parseInt(tab.key) - 1;
+    let {
+      introductionVo = {},
+      hasEnrolled,
+      contentVo,
+      reviewListData,
+      isMore,
+      reviewListTotle,
+      progressVo,
+    } = this.props.TrainingStepsReducer;
+    let { visible, confirmLoading, showEnroll } = this.state;
+    let { finished, id } = this.props.location.query;
+
+
+    let loadMore = isMore
+      ? <button className="load-more" onClick={() => this.onLoadMore()}>
+        {intl.get("PublishKey74") || "点击加载更多"}
+      </button>
+      : <button className="load-more">{intl.get("PublishKey30") || "没有更多数据"}</button>;
+    let enrollEnable = !hasEnrolled;
+    let enrollTitle = enrollEnable ? intl.get("msg.immediately.enroll") || "立即报名" : intl.get("ApplyNotStarted") || "报名未开始";
+    let now = new Date();
+    let number = Number(now);
+    let signUpEnable = false;
+    let signUpShow = false;
+    let signUpTitle = intl.get("msg.immediately.enroll") || '立即报名';
+    let signUpColor = '#999999';
+    //判断底部报名按钮状态，是否显示，及标题颜色，是否允许点击
+    if (introductionVo) {
+      if (introductionVo.needEnroll) {
+        //需要报名-- 判断是否已报名
+        signUpShow = true;
+        if (introductionVo.hasEnrolled) {
+          //已报名
+          if (introductionVo.audited) {
+            //已审核
+
+            if (introductionVo.auditStatus == 2) {
+              //审核通过
+              signUpShow = false;
+              signUpTitle = intl.get("PublishKey70") || '报名成功';
+              signUpEnable = false;
+            } else if (introductionVo.auditStatus == 3) {
+              //审核未通过
+              signUpShow = true;
+              signUpColor = '#EA554E';
+              signUpTitle = intl.get('PublishKey75') || '报名未通过';
+              signUpEnable = false;
+            }
+          } else {
+            if (introductionVo.auditStatus == 1) {
+              //待审核
+              signUpShow = true;
+              signUpTitle = intl.get('msg.audit.ing') || '报名审核中';
+              signUpColor = '#54C246';
+              signUpEnable = false;
+            } else if (introductionVo.auditStatus == 0) {
+              //不需要审核
+              signUpShow = false;
+            }
+          }
+        } else {
+          //未报名
+          signUpShow = true;
+          if (number > introductionVo.enroll.endTime) {
+            //报名结束
+            signUpEnable = false;
+            signUpTitle = intl.get('ApplyExpired') || '报名已结束';
+            signUpColor = '#999999';
+          } else if (number < introductionVo.enroll.startTime) {
+            //报名未开始
+            signUpEnable = false;
+            signUpTitle = intl.get('ApplyNotStarted') || '报名未开始';
+            signUpColor = '#999999';
+          } else {
+            //正常报名 -- 判断人数条件
+            if (
+              introductionVo.enrollLimit == 0 ||
+              introductionVo.enrollLimit == '' ||
+              introductionVo.enrollLimit > introductionVo.hasEnrolledNum
+            ) {
+              //人数无限制
+              signUpEnable = true;
+              signUpTitle = intl.get('enjoin') || '立即报名';
+              signUpColor = '#4285F4';
+            } else if (
+              introductionVo.enrollLimit <= introductionVo.hasEnrolledNum
+            ) {
+              //报名人额已满
+              signUpEnable = false;
+              signUpTitle = intl.get('msg.quota.full') || '名额已满';
+              signUpColor = '#EA554E';
+            }
+          }
+        }
+      } else {
+        //没有报名
+        signUpShow = false;
+      }
+    }
+
+    this.state.dataSource = this.state.dataSource.cloneWithRows(
+      this.props.TrainingStepsReducer.reviewListData
+    );
+
+    return <Fragment>
+      {eval(finished) == true
+        ? //完成时显示统计
+        i == 0
+          ? this.renderPlan(progressVo, introductionVo)
+          : i == 1
+            ? this.renderIntroduction(introductionVo)
+            : i == 2
+              ? this.renderContain(contentVo)
+              : i == 3
+                ? this.renderDataLibraryList(id)
+                : i == 4
+                  ? this.renderComment(
+                    reviewListData,
+                    loadMore
+                  )
+                  : ''
+        : //不完成时不显示统计
+        i == 0
+          ? this.renderIntroduction(introductionVo)
+          : i == 1
+            ? this.renderContain(contentVo)
+            : i == 2
+              ? this.renderDataLibraryList(id)
+              : i == 3
+                ? this.renderComment(
+                  reviewListData,
+                  loadMore
+                )
+                : ''}
+    </Fragment>
+
+  }
+
+  render() {
+    let {
+      introductionVo = {},
+      hasEnrolled,
+      contentVo,
+      reviewListData,
+      isMore,
+      reviewListTotle,
+      progressVo,
+    } = this.props.TrainingStepsReducer;
+    let { visible, confirmLoading, showEnroll } = this.state;
+    let { finished, id } = this.props.location.query;
+
+
+    let loadMore = isMore
+      ? <button className="load-more" onClick={() => this.onLoadMore()}>
+        {intl.get('PublishKey74') || "点击加载更多"}
+      </button>
+      : <button className="load-more">{intl.get('PublishKey30') || "没有更多数据"}</button>;
+    let enrollEnable = !hasEnrolled;
+    let enrollTitle = enrollEnable ? intl.get('msg.immediately.enroll') || '立即报名' : intl.get('ApplyNotStarted') || '报名未开始';
+    let now = new Date();
+    let number = Number(now);
+    let signUpEnable = false;
+    let signUpShow = false;
+    let signUpTitle = intl.get('msg.immediately.enroll') || '立即报名';
+    let signUpColor = '#999999';
+    //判断底部报名按钮状态，是否显示，及标题颜色，是否允许点击
+    if (introductionVo) {
+      if (introductionVo.needEnroll) {
+        //需要报名-- 判断是否已报名
+        signUpShow = true;
+        if (introductionVo.hasEnrolled) {
+          //已报名
+          if (introductionVo.audited) {
+            //已审核
+
+            if (introductionVo.auditStatus == 2) {
+              //审核通过
+              signUpShow = false;
+              signUpTitle = intl.get('PublishKey70') || '报名成功';
+              signUpEnable = false;
+            } else if (introductionVo.auditStatus == 3) {
+              //审核未通过
+              signUpShow = true;
+              signUpColor = '#EA554E';
+              signUpTitle = intl.get('PublishKey75') || '报名未通过';
+              signUpEnable = false;
+            }
+          } else {
+            if (introductionVo.auditStatus == 1) {
+              //待审核
+              signUpShow = true;
+              signUpTitle = intl.get('msg.audit.ing') || '报名审核中';
+              signUpColor = '#54C246';
+              signUpEnable = false;
+            } else if (introductionVo.auditStatus == 0) {
+              //不需要审核
+              signUpShow = false;
+            }
+          }
+        } else {
+          //未报名
+          signUpShow = true;
+          if (number > introductionVo.enroll.endTime) {
+            //报名结束
+            signUpEnable = false;
+            signUpTitle = intl.get('ApplyExpired') || '报名已结束';
+            signUpColor = '#999999';
+          } else if (number < introductionVo.enroll.startTime) {
+            //报名未开始
+            signUpEnable = false;
+            signUpTitle = intl.get('ApplyNotStarted') || '报名未开始';
+            signUpColor = '#999999';
+          } else {
+            //正常报名 -- 判断人数条件
+            if (
+              introductionVo.enrollLimit == 0 ||
+              introductionVo.enrollLimit == '' ||
+              introductionVo.enrollLimit > introductionVo.hasEnrolledNum
+            ) {
+              //人数无限制
+              signUpEnable = true;
+              signUpTitle = intl.get('enjoin') || '立即报名';
+              signUpColor = '#4285F4';
+            } else if (
+              introductionVo.enrollLimit <= introductionVo.hasEnrolledNum
+            ) {
+              //报名人额已满
+              signUpEnable = false;
+              signUpTitle = intl.get('msg.quota.full') || '名额已满';
+              signUpColor = '#EA554E';
+            }
+          }
+        }
+      } else {
+        //没有报名
+        signUpShow = false;
+      }
+    }
+
+    this.state.dataSource = this.state.dataSource.cloneWithRows(
+      this.props.TrainingStepsReducer.reviewListData
+    );
+
+    let tabsData = [];
+
+    //tabs适配，因为antd-mobile版本原因，Tabs组件定制表头api无法使用,所以根据className更改样式满足功能
+    tabsData = [
+      {
+        key: '1',
+        title: (
+          <Sticky>
+            {({ style, distanceFromTop }) => {
+              return <span className="tabspan" >{intl.get('Overview') || "简介"}</span>;
+            }}
+          </Sticky>
+        ),
+      },
+      {
+        key: '2',
+        title: (
+          <Sticky>
+            {({ style, distanceFromTop }) => {
+              return <span className="tabspan" >{intl.get('PublishKey56') || "内容"}</span>;
+            }}
+          </Sticky>
+        ),
+      },
+      {
+        key: '3',
+        title: (
+          <Sticky>
+            {({ style, distanceFromTop }) => {
+              return <span className="tabspan" >{intl.get('document') || "资料"}</span>;
+            }}
+          </Sticky>
+        ),
+      },
+      {
+        key: '4',
+        title: (
+          <Sticky>
+            {({ style, distanceFromTop }) => {
+              if (distanceFromTop < 0) {
+                let tab = document.getElementsByClassName('am-tabs-default-bar')[0];
+                tab.style.top = '0px';
+                tab.style.width = '100%';
+                tab.style.position = 'fixed';
+              } else if (distanceFromTop >= 0) {
+                let tab = document.getElementsByClassName('am-tabs-default-bar')[0];
+                tab.style.top = '';
+                tab.style.width = '';
+                tab.style.position = '';
+              }
+
+              return <span className="tabspan" >{intl.get('Comment') || "评论"}({reviewListTotle})</span>;
+            }}
+          </Sticky>
+        ),
+      },
+    ];
+    //如果完成则显示统计
+    if (eval(finished) == true) {
+      tabsData = tabsData.map((item, index) => {
+        return {
+          key: String(parseInt(item.key) + 1),
+          title: item.title
+        }
+      });
+      tabsData.unshift({
+        key: "1",
+        title: (
+          <Sticky>
+            {({ style, distanceFromTop }) => {
+              return <span className="tabspan" >{intl.get('PublishKey76') || "统计"}</span>;
+            }}
+          </Sticky>
+        ),
+      });
+    }
+    console.log(tabsData, this.state.defaultTabKey);
+    return (
+      <div
+        className="train-contain"
+        style={{ backgroundColor: '#f4f4f4', width: '100%', height: '100%' }}
+      >
+        <div
+          className="train-logo"
+          style={{ height: this.state.trainLogoHeight }}
+        >
+          <img
+            id="train-logo-image"
+            style={{ height: this.state.trainLogoHeight }}
+            src={introductionVo && introductionVo.logoImg}
+            alt=""
+          />
+          {
+            this.state.isNative && this.state.enablePosition == 1 ?
+              <div className={"signing_location_container"} onClick={this.jumpToSigningLocation}>
+                <div className={"signing_icon_container"}>
+                  <img src={location} className={"signing_icon"} />
+                </div>
+                <div className={"signing_location_text"}>{intl.get('CheckIn') || "签到"}</div>
+              </div>
+              : null
+          }
+        </div>
+        <div style={{ width: '100%', marginTop: 0 }}>
+          <StickyContainer>
+            <Tabs
+              page={this.state.defaultTabKey}
+              swipeable={false}
+              pageSize={5}
+              style={{ marginBottom: signUpShow ? '0.75rem' : '0px' }}
+              onTabClick={tab => {
+                console.log(tab,'22222222222222222222222~~~~~~~~~~~~~')
+                this.tabClick(tabsData, tab.key);
+              }}
+              tabs={tabsData}
+              renderTabBar={(props) => this.renderTabBar(props)}
+            >
+              {this.renderContent}
+            </Tabs>
+
+          </StickyContainer>
+        </div>
+
+        {this.state.hiddenUp
+          ? ''
+          : '' ||
+            introductionVo && introductionVo.enablePay == 1 ?
+            !introductionVo.hasEnrolled ?
+              <Fragment>
+                <div style={{ width: "100%", height: 128 }}></div>
+                <div className="train-pay-button-container">
+                  <div className="train-pay-button" onClick={this.goToBuy}>
+                    {intl.get("buy") || "购买"}:
+                    <span className="train-actualPrice">
+                      {introductionVo.actualPrice || 0}
+                    </span>
+                    {window.virtualCurrencyUnit}
+                    {
+                      parseInt(introductionVo.originalPrice || 0) > 0 ?
+                        <span className="train-originalPrice">
+                          {introductionVo.originalPrice || 1}{window.virtualCurrencyUnit}
+                        </span> : ""
+                    }
+
+                  </div>
+                </div>
+              </Fragment> : ""
+            :
+            <Fragment>
+              <div style={{ width: "100%", height: 88 }}></div>
+              <div
+                disabled={signUpEnable ? true : false}
+                style={{
+                  display: signUpShow ? 'block' : 'none',
+                  backgroundColor: signUpColor,
+                }}
+                type="primary"
+                className="signup-button"
+                onClick={() => {
+                  if (signUpEnable) {
+                    this.handleOk(tabsData);
+                  }
+                }}
+              >
+                {signUpTitle}
+              </div>
+            </Fragment>
+        }
+      </div>
+    );
+  }
+
+  //报表
+  renderPlan = (planData, introductionVo) => {
+    let xArr = [], yArr = [], dataArr = [];
+    if (planData.courseRecentVos) {
+      planData.courseRecentVos.map((rowData, index) => {
+        let introStartTime = moment(rowData.date)
+          .format('YYYY-MM-DD HH:ss')
+          .substring(5, 10);
+        xArr.push(introStartTime);
+        let second = Number(rowData.seconds);
+        dataArr.push(Math.floor(second / 60));
+      });
+    }
+
+    var option = {
+      title: {
+        text: intl.get("PublishKey77") || '最近7天的学习时长 (单位:分钟)',
+      },
+      tooltip: {},
+
+      xAxis: {
+        data: xArr,
+      },
+      yAxis: {},
+      series: [
+        {
+          type: 'bar',
+          data: dataArr,
+        },
+      ],
+    };
+
+    // 使用刚指定的配置项和数据显示图表。
+    // myChart.setOption(option);
+    if (!introductionVo) return;
+    let startTime = moment(introductionVo.startTime).format('YYYY-MM-DD');
+    let endTime = moment(introductionVo.endTime).format('YYYY-MM-DD');
+
+    let totleLearn = Number(planData.totalStudySeconds);
+    let learnHour = parseInt(totleLearn / 3600);
+    let learnMin = parseInt(totleLearn % 3600 / 60);
+
+    return (
+      <div style={{ paddingBottom: '0.5rem', backgroundColor: 'white' }}>
+        <div className="train-info-view">
+          <div className="train-info">
+            <p>{introductionVo.name}</p>
+            <div style={{ marginTop: '20px' }}>
+              <span>{intl.get("TrainingTime") || "项目时间"}: </span>
+              <span>{`${startTime} ${intl.get("To") || "至"} ${endTime}`}</span>
+            </div>
+          </div>
+          <div className="segement" />
+        </div>
+        <div className="train-plan-studytime">
+          <span>{intl.get("TotalLearnTime") || "总学习时长"}</span>
+          <div>
+            <span style={{ color: '#4285F4 ' }}>{learnHour}</span><span>{intl.get("Hours") || "小时"}</span>
+            <span style={{ color: '#4285F4 ' }}>{learnMin}</span><span>{intl.get("Pts") || "分"}</span>
+          </div>
+        </div>
+        <div style={{ paddingLeft: 26, paddingRight: 26 }}>
+          <ReactEcharts style={{ fontSize: 30 }} option={option} />
+        </div>
+        <div>
+          <div className="train-plan-row">
+            <div className="train-plan-cell">
+              <div>{this.itemIcon(0, 1)}<span>{intl.get("Course") || "课程"}</span></div>
+
+              <div>
+                <span style={{ color: '#4285F4 ' }}>{planData.totalCourse}</span>
+                {' '}
+                <span>门</span>
+              </div>
+            </div>
+            <div className="train-plan-cell">
+              <div>{this.itemIcon(1, 1)}<span>{intl.get("Exam") || "考试"}</span></div>
+              <div>
+                <span style={{ color: '#4285F4 ' }}>{planData.totalExam}</span>
+                {' '}
+                <span>门</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="train-plan-row">
+            <div className="train-plan-cell">
+              <div>{this.itemIcon(5, 1)}<span>{intl.get("Assignment") || "作业"}</span></div>
+
+              <div>
+                <span style={{ color: '#4285F4 ' }}>
+                  {planData.totalAssignment}
+                </span>
+                {' '}
+                <span>门</span>
+              </div>
+            </div>
+            <div className="train-plan-cell">
+              <div>{this.itemIcon(8, 1)}<span>{intl.get("CheckIn") || "签到"}</span></div>
+              <div>
+                <span style={{ color: '#4285F4 ' }}>{planData.totalSign}</span>
+                {' '}
+                <span>门</span>
+              </div>
+            </div>
+          </div>
+          <div className="train-plan-row">
+            <div className="train-plan-cell">
+              <div>{this.itemIcon(2, 1)}<span>{intl.get("Research") || "调研"}</span></div>
+
+              <div>
+                <span style={{ color: '#4285F4 ' }}>
+                  {planData.totalResearch}
+                </span>
+                {' '}
+                <span>{intl.get("men") || "门"}</span>
+              </div>
+            </div>
+            {/* <div className='train-plan-cell'>
+                            <div>{this.itemIcon(4, 1)}<span>投票</span></div>
+                            <div><span style={{color: '#4285F4 '}}>{planData.totalVote}</span> <span>门</span></div>
+                        </div>
+                         */}
+            <div className="train-plan-cell" style={{ background: '#fff' }}>
+              <div><span /></div>
+              <div><span /> <span /></div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    );
+  };
+  //简介
+  renderIntroduction = introductionVo => {
+    let now = new Date();
+    let number = Number(now);
+    let signUpEnable = false;
+    let signUpShow = false;
+    let signUpTitle = '立即报名';
+
+    let startTime = moment(introductionVo && introductionVo.startTime).format(
+      'YYYY-MM-DD'
+    );
+    let endTime = moment(introductionVo && introductionVo.endTime).format(
+      'YYYY-MM-DD'
+    );
+    let { reviewListTotle } = this.props.TrainingStepsReducer;
+    // console.log('========================================');
+    let introStartTime = moment(
+      introductionVo && introductionVo.enroll.startTime
+    ).format('YYYY-MM-DD HH:mm');
+    let introEndTime = moment(
+      introductionVo && introductionVo.enroll.endTime
+    ).format('YYYY-MM-DD HH:mm');
+
+    $('#train-marketId video').each((index, item) => {
+      $(item)
+        .attr('controls', true)
+        .attr('preload', true)
+        .css('width', '100%')
+        .attr('poster', blackPage);
+    });
+    $('#train-marketId audio').each((index, item) => {
+      $(item)
+        .attr('controls', true)
+        .css('width', '100%')
+        .attr('preload', true);
+    });
+    $('#train-marketId img').each((index, item) => {
+      $(item).css('width', '100%');
+    });
+
+    return (
+      <div id="train-marketId" style={{ height: '100%', zIndex: 999 }}>
+
+        <div
+          className="train-header"
+          style={{
+            // 简介内容为空不需要设置样式 任务919
+            paddingBottom: introductionVo && !introductionVo.description.trim()
+              ? 0
+              : '0.5rem',
+          }}
+        >
+          {/*课程信息*/}
+          <div className="train-info-view">
+            <div className="train-info">
+              <p>{introductionVo && introductionVo.name}</p>
+              <div style={{ marginTop: '20px' }}>
+                <span>{intl.get("TrainingTime") || "项目时间"}: </span>
+                <span>{`${startTime} ${intl.get("To") || "至"} ${endTime}`}</span>
+              </div>
+              {introductionVo &&
+                introductionVo.enablePoint &&
+                <div style={{ marginTop: '8px' }}>
+                  <span>
+                    {intl.get("ProjectPoint") || "项目积分"}:
+                    <span style={{ marginLeft: '3px' }}>
+                      {introductionVo.point}
+                    </span>
+                  </span>
+                </div>}
+              {introductionVo &&
+                introductionVo.trainingDurationShow &&
+                <div>
+                  <span>
+                    {intl.get("period") || "学时"}:
+                    <span style={{ marginLeft: '3px' }}>
+                      {introductionVo.period}
+                    </span>
+                  </span>
+                </div>}
+            </div>
+            <div className="segement-slider" />
+          </div>
+          {/*项目介绍*/}
+          {String(introductionVo && introductionVo.description) === '' ||
+            (introductionVo && introductionVo.description === null) ||
+            !introductionVo
+            ? null
+            : // 简介内容为空不追加product-info-view 任务919
+            introductionVo && !introductionVo.description.trim()
+              ? null
+              : <div>
+                <div className="product-info-view">
+                  <div className="train-info-view">
+                    <div className="train-info">
+                      <div>
+                        <List className="train-info-contain">
+                          <List.Item>
+                            <MediaDisplay
+                              width={document.body.clientWidth - 80}
+                              content={introductionVo.description}
+                            />
+                          </List.Item>
+                        </List>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="segement" />
+              </div>}
+
+          {/*项目须知*/}
+          {introductionVo && introductionVo.needEnroll
+            ? <div className="train-info-view">
+              <div className="train-up-info">
+                <p style={{ fontSize: '0.32rem', paddingBottom: '0.1rem' }}>
+                  {intl.get("ApplyNotice") || "报名须知"}
+                </p>
+                {introductionVo &&
+                  <div>
+                    <p
+                    >{`${intl.get("PublishKey78") || '项目名额'}：${introductionVo && introductionVo.enroll.limit ? introductionVo && introductionVo.enroll.limit + intl.get("People") || '人' : intl.get('PublishKey79') || '无限制'} `}</p>
+                    <p>
+                      {intl.get('ApplyTime') || '报名时间'}：
+                        {`${introStartTime && introStartTime} ${intl.get("To") || "至"} ${introEndTime && introEndTime}`}
+                    </p>
+                    <div style={{ display: 'flex' }}>
+                      <p style={{ minWidth: '120px' }}>{intl.get("PublishKey80") || "注意事项"}：</p>
+                      <p
+                        dangerouslySetInnerHTML={{
+                          __html: introductionVo &&
+                            introductionVo.enroll.notice.replace(
+                              /\r?\n/g,
+                              '</br>'
+                            ),
+                        }}
+                      />
+                    </div>
+                  </div>}
+              </div>
+            </div>
+            : null}
+        </div>
+        <Footer
+          page={{ pageTotle: 5 }}
+          currentNumber={10}
+          isLoading={false}
+          isEnd={true}
+          footText={intl.get('PublishKey47') || '没有更多了'}
+        />
+      </div>
+    );
+  };
+  //内容
+  renderContain = contentVo => {
+    let { introductionVo } = this.props.TrainingStepsReducer;
+    let now = new Date().getTime();
+    //判断内容显示状态
+    let isStarted = false;
+
+    if (introductionVo) {
+      if (introductionVo.needEnroll) {
+        //需要报名-- 判断是否已报名
+
+        if (introductionVo.hasEnrolled) {
+          //已报名
+          if (introductionVo.audited) {
+            //已审核
+          } else {
+            if (introductionVo.auditStatus == 1) {
+              //待审核
+            } else if (introductionVo.auditStatus == 2) {
+              //审核通过
+              if (introductionVo.startTime < now) {
+                isStarted = true;
+              }
+            } else if (introductionVo.auditStatus == 3) {
+              //审核未通过
+            } else if (introductionVo.auditStatus == 0) {
+              //不需要审核
+            }
+          }
+        } else {
+          //未报名
+        }
+      } else {
+        //没有报名
+        if (introductionVo.startTime < now) {
+          isStarted = true;
+        }
+      }
+    }
+    let id = this.props.location.query.id;
+    let activeKeyGroup = contentVo.plans.map((item, index) => {
+      return item.id;
+    });
+
+    //图标没写完
+    return (
+      <div
+        className="train-contain-list"
+        id={'train-contain-list-sticky-div'}
+        style={{ marginBottom: '0.5rem', backgroundColor: 'white' }}
+      >
+        <Accordion activeKey={activeKeyGroup}>
+          {contentVo.plans.map((acItem, index) => {
+            let startTime = moment(acItem.startTime).format('YYYY-MM-DD');
+            let endTime = moment(acItem.endTime).format('YYYY-MM-DD');
+            let header = (
+              <div className="train-contain-header">
+                <div style={{ position: 'relative', paddingRight: 100 }}>
+                  {`${acItem.name}`}
+                  {this.state.showProgress
+                    ? <div className={'train-progress-count'}>
+                      {acItem.percentageOfCompletion}
+                    </div>
+                    : ''}
+                </div>
+                <div
+                  style={{
+                    width: '100%',
+                    position: 'relative',
+                    paddingRight: 200,
+                  }}
+                >
+                  {`${intl.get('PlanTime') || '学习时间'}：${startTime}  ${intl.get("To") || "至"} ${endTime}`}
+                  <div className="train-compete-tag">
+                    {acItem.toFinishedActivityIds.length != 0
+                      ? acItem.toFinishedActivityIds.length + intl.get("ContentRequired") || '个必修活动'
+                      : acItem.toFinishedActivityNum == 0
+                        ? intl.get("FinishAllContentNotice") || '需完成全部活动'
+                        : (intl.get('AtLeastFinish1') || '至少完成') + acItem.toFinishedActivityNum + (intl.get('AtLeastFinish2') || '个活动')}
+                  </div>
+                </div>
+              </div>
+            );
+
+            return (
+              <Accordion.Panel header={header} key={acItem.id}>
+                <List>
+                  {acItem.activities.map((item, index) => {
+                    //计划是否开始---》（具体活动）计划内活动是否开始----》活动状态
+                    if (item.type == 14) {
+                      item.status = 'none'; // 帖子不需要状态；
+                    }
+                    let statuSub = item.status == '未导入'
+                      ? <div className={'train-content-status-cell'}>
+                        <img
+                          src={inCompleteIcon}
+                          alt=""
+                          className="train-in-complete-icon"
+                        />
+                        <br />
+                        <span style={{ fontSize: 20, color: '#999' }}>
+
+                          {"(" + intl.get('data.not.imported') + ")" || '(数据未导入)'}
+                        </span>
+                      </div>
+                      : item.status == '已完成'
+                        ? <div className={'train-content-status-cell'}>
+                          <img
+                            src={completeIcon}
+                            alt=""
+                            className="train-complete-icon"
+                          />
+                          <br />
+                          {acItem.toFinishedActivityIds.indexOf(item.id) !=
+                            -1
+                            ? <span
+                              style={{
+                                fontSize: 20,
+                                color: '#999',
+                              }}
+                            >
+                              ({item.type == 10 ? item.status : '必修'})
+                                  </span>
+                            : <span
+                              style={{
+                                fontSize: 20,
+                                color: item.type == 10
+                                  ? '#999'
+                                  : 'transparent',
+                              }}
+                            >
+                              ({item.status})
+                                  </span>}
+                        </div>
+                        : item.status == '未完成' && item.type == 10
+                          ? <div className={'train-content-status-cell'}>
+                            <img
+                              src={inCompleteIcon}
+                              alt=""
+                              className="train-in-complete-icon"
+                            />
+                            <br />
+                            <span
+                              style={{
+                                fontSize: 20,
+                                color: '#999',
+                              }}
+                            >
+                              ({item.status})
+                                  </span>
+                          </div>
+                          : acItem.toFinishedActivityIds.indexOf(
+                            item.id
+                          ) != -1
+                            ? <div
+                              className={'train-content-status-cell'}
+                            >
+                              {item.status == '进行中'
+                                ? <img
+                                  src={progressIcon}
+                                  alt=""
+                                  className="train-progress-icon"
+                                />
+                                : <img
+                                  src={inCompleteIcon}
+                                  alt=""
+                                  className="train-in-complete-icon"
+                                />}
+                              <br />
+                              <span
+                                style={{
+                                  fontSize: 20,
+                                  color: '#999',
+                                }}
+                              >
+                                {intl.get('RequiredTag') || '(必修)'}
+
+                              </span>
+                            </div>
+                            : item.status == '进行中'
+                              ? <div
+                                className={
+                                  'train-content-status-cell'
+                                }
+                              >
+                                <img
+                                  src={progressIcon}
+                                  alt=""
+                                  className="train-progress-icon"
+                                />
+                                <br />
+                                <span
+                                  style={{
+                                    fontSize: 20,
+                                    color: 'transparent',
+                                  }}
+                                >
+                                  ({item.status})
+                                          </span>
+                              </div>
+                              : item.status == '已获得'
+                                ? <span
+                                  className="tip-text"
+                                  style={{}}
+                                >
+                                  {intl.get('certificate.has.obtained') || '已获取证书'}
+
+                                </span>
+                                : item.status == '未获得'
+                                  ? <span
+                                    className="tip-text"
+                                    style={{}}
+                                  >
+
+                                    {intl.get('get.the.certificate') || '获取证书'}
+                                  </span>
+                                  : item.status == 'none'
+                                    ? ''
+                                    : item.status
+                                      ? <span className="tip-text">
+                                        {item.status}
+                                      </span>
+                                      : <div
+                                        className={
+                                          'train-content-status-cell'
+                                        }
+                                      >
+                                        <img
+                                          src={inCompleteIcon}
+                                          alt=""
+                                          className="train-in-complete-icon"
+                                        />
+                                        <br />
+                                        <span
+                                          style={{
+                                            fontSize: 20,
+                                            color: 'transparent',
+                                          }}
+                                        >
+
+                                          {intl.get('PublishKey82') || '未知情况'}
+                                        </span>
+                                      </div>;
+                    // let statuSub =isStarted?acItem.started?item.started?item.finished? <span className="tip-text-green" style={{}}>已完成</span>:<span className="tip-text">进行中</span> :'':'':'';
+                    return (
+                      <List.Item
+                        key={index}
+                        onClick={() => this.contentItemClick(acItem, item, id, contentVo)}
+                      >
+                        <div className="train-content-cell">
+                          <div className="train-contain-listcell">
+                            {this.itemIcon(item.type)}
+                            <p
+                              className="training-done-info-name"
+                              style={{ marginBottom: 0, WebkitBoxOrient: 'vertical' }}
+                            >{`${item.name}`}</p>
+                            <img
+                              style={{
+                                display: item.hasCertificate ? 'block' : 'none',
+                              }}
+                              className={'certificate-icon'}
+                              src={certificateIcon}
+                              alt=""
+                            />
+                          </div>
+                          {this.state.showProgress ? statuSub : ''}
+                        </div>
+                      </List.Item>
+                    );
+                  })}
+                </List>
+              </Accordion.Panel>
+            );
+          })}
+        </Accordion>
+        <Footer
+          page={{ pageTotle: 5 }}
+          currentNumber={10}
+          isLoading={false}
+          isEnd={true}
+          footText={intl.get('PublishKey47') || '没有更多了'}
+        />
+        {this.state.showContentOccupy
+          ? <div style={{ height: 100, backgroundColor: '#f4f4f4' }} />
+          : ''}
+      </div>
+    );
+  };
+  // 资料
+  renderDataLibraryList = id => {
+    console.log('TrainingSteps-renderDataLibraryList-id', id);
+    let { introductionVo } = this.props.TrainingStepsReducer;
+    return (
+      <List style={{ height: '' }}>
+        <DataLibraryList relationId={id} data={introductionVo} />
+      </List>
+    );
+  };
+  //评论
+  renderComment = (reviewListData, loadMore) => {
+    let { reviewPageNo, reviewListTotle } = this.props.TrainingStepsReducer;
+
+    let row = (item, section, row) => {
+      let imgsrc = item.userAvatar == '' ? myIcon : item.userAvatar;
+      const imageStyle = {
+        backgroundImage: `url(${imgsrc})`,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'contain',
+      };
+
+      return (
+        <div className="list-item-div">
+          <div className="list-item-img-box">
+            <div className="list-item-img" style={imageStyle} />
+          </div>
+          <div className="list-item-content">
+            <h2 className="item-title-style">{item.commentator}</h2>
+            <p
+              className="item-text-style"
+              dangerouslySetInnerHTML={{
+                __html: item.content.replace(/\r?\n/g, '</br>'),
+              }}
+            />
+            <div className="item-footer-box">
+              <p className="item-time-style">
+                {item.createTime.length > 16
+                  ? item.createTime.substring(0, 16)
+                  : item.createTime}
+                {' '}
+              </p>
+              <span
+                className="item-zhan-style"
+                style={{ marginLeft: '2rem' }}
+                onClick={() => this.reviewDetail(item)}
+              >
+                <span>{item.replys == '0' ? '0' : item.replys}</span>
+                <img
+                  src={trainCommentReplay}
+                  style={{ marginTop: 10 }}
+                  className="cell-left-icon"
+                  alt=""
+                />
+              </span>
+              <span
+                className="item-zhan-style"
+                onClick={() => this.laudClick(item, row)}
+              >
+                <span>{item.thumbsUps}</span>
+                <img
+                  src={String(item.status) === '1' ? alreadyzan : zan}
+                  alt=""
+                />
+              </span>
+            </div>
+            {item.tpCommentReplies.length > 0
+              ? <div className="train-comment-replay">
+                <div>{item.tpCommentReplies[0].createByName}:</div>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: item.tpCommentReplies[0].content.replace(
+                      /\r?\n/g,
+                      '</br>'
+                    ),
+                  }}
+                />
+                {item.tpCommentReplies.length > 1
+                  ? <div onClick={() => this.reviewDetail(item)}>
+                    {`${intl.get('PublishKey83') || '查看全部'}${item.replys}${intl.get("PublishKey84") || '条回复'}>`}
+                  </div>
+                  : ''}
+              </div>
+              : ''}
+
+          </div>
+        </div>
+      );
+    };
+
+
+    return (
+      <div
+        className="train-comment"
+        style={{ paddingBottom: '1rem', backgroundColor: '#F4F4F4' }}
+      >
+
+        <div className="train-comment-contain">
+          <img src={trainComment} className="cell-left-icon" alt="" />
+          <div className="comment-slider" onClick={() => this.commentShow(1)}>
+            {' '}{intl.get('PublishKey85') || "说点什么吧~"}
+          </div>
+        </div>
+        <p style={{ padding: '0.3rem 0.2rem', fontSize: '0.3rem' }}>{intl.get('all_comment') || "全部评论"}</p>
+        {/*  */}
+        <SecListView
+          key={this.state.refreshTrainComment}
+          dataSource={this.state.dataSource}
+          renderRow={row.bind(this)}
+          onEndReached={this.onLoadMore}
+          listStyle={50}
+          isLoading={this.state.isLoading}
+          page={{
+            pageTotal: reviewListTotle,
+            pageNo: reviewPageNo,
+            pageSize: 10,
+          }}
+          footText={intl.get('PublishKey47') || "没有更多了"}
+        />
+        <Modal
+          title={intl.get('Comment') || "评论"}
+          visible={this.state.showComment}
+          transparent
+          maskClosable={false}
+          className={'train-comment-input'}
+          onClose={this.commentHidden}
+          footer={[
+            {
+              text: intl.get('Cancel') || "取消",
+              onPress: () => {
+                this.commentHidden();
+              },
+            },
+            {
+              text: intl.get('Yes') || '确定',
+              onPress: () => {
+                this.trainCommitVerb(1, 0);
+              },
+            },
+          ]}
+        >
+          <div className="comment-body">
+            <TextareaItem
+              maxLength={800}
+              placeholder={intl.get('WriteComment') || "写评论"}
+              rows={4}
+              value={this.state.commitContent}
+              style={{ backgroundColor: 'clear' }}
+              onChange={txt => {
+                let value = txt;
+                if (value.length > 800) {
+                  value = value.slice(0, 800);
+                }
+                this.setState({ commitContent: value });
+              }}
+              ref={el => (this.autoFocusInst = el)}
+            />
+          </div>
+        </Modal>
+      </div>
+    );
+  };
+  reachEnd = () => { };
+  commentShow = (type, id) => {
+    //type=1为项目评论，2为项目评论回复
+
+    this.setState({
+      showComment: true,
+      commentType: type,
+      replyCommentTypeId: id,
+    });
+  };
+  commentHidden = () => {
+    this.setState({
+      showComment: false,
+      commitContent: '',
+    });
+  };
+  handleCancel = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+  //确认报名
+  handleOk = tabs => {
+    let { id, finished } = this.props.location.query;
+    let params = {
+      id: id,
+    };
+    let _this = this;
+    let contentTab = 0;
+    tabs.map((item, index) => {
+      if (item.title == 'Second Tab') {
+        contentTab = index + 1;
+      }
+      return item;
+    });
+    this.props.lessonEnrollEvent(params, () => {
+      _this.props.trainStepsData(finished, params, () => {
+        let { introductionVo } = _this.props.TrainingStepsReducer;
+        let { needEnroll, needAudit, hasEnrolled, audited } = introductionVo;
+        _this.setState({
+          showProgress: _this.showProgressJudge(
+            needEnroll,
+            hasEnrolled,
+            needAudit,
+            audited
+          ),
+        });
+        if (introductionVo.auditStatus == 2 || !introductionVo.needAudit) {
+          _this.tabClick(tabs, contentTab);
+        }
+      });
+    });
+  };
+  //报名
+  jumpComment = () => {
+    let arr = document.getElementsByClassName('list-item-div');
+    console.log(arr);
+    arr[0].scrollIntoView();
+  };
+  //列表item
+  reviewItem = item => {
+    let imgsrc = item.userAvatar == '' ? '' : item.userAvatar;
+    const imageStyle = {
+      backgroundImage: `url(${imgsrc})`,
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'contain',
+    };
+    return (
+      <List.Item>
+        <div className="list-item-div">
+          <div className="list-item-img-box">
+            <div className="list-item-img" style={imageStyle} />
+          </div>
+          <div className="list-item-content">
+            <h2 className="item-title-style">{item.commentator}</h2>
+            <p className="item-text-style">{item.content}</p>
+            <div className="item-footer-box">
+              <p className="item-time-style">
+                {item.createTime.length > 16
+                  ? item.createTime.substring(0, 16)
+                  : item.createTime}
+                <button
+                  className={
+                    item.replys <= 0
+                      ? 'item-btn-style'
+                      : 'item-btn-style-active'
+                  }
+                  onClick={() => {
+                    this.reviewDetail(item);
+                  }}
+                >{`${item.replys <= 0 ? '' : item.replys} ${intl.get('Reply') || '回复'}`}</button>
+              </p>
+              <button
+                className="item-zhan-style"
+                onClick={() => this.laudClick(item)}
+              >
+                <FontAwesome
+                  className={
+                    String(item.status) === '1'
+                      ? 'item-zhan-icon-active'
+                      : 'item-zhan-icon'
+                  }
+                  style={{ fontSize: '0.3rem' }}
+                  name="thumbs-up"
+                />
+                {item.thumbsUps}
+              </button>
+            </div>
+          </div>
+        </div>
+      </List.Item>
+    );
+  };
+  reviewDetail = item => {
+    console.log(item);
+    // let time = moment(item.createTime).format("YYYY-MM-DD HH:hh:SS");
+    let time = moment(item.createTime).format('YYYY-MM-DD HH:mm');
+    hashHistory.push({
+      pathname: func.routerBefore() + '/train/trainingReview',
+      query: {
+        targeId: this.props.location.query.id,
+        commentId: item.id,
+        headsrc: item.userAvatar,
+        time: time,
+        title: item.commentator,
+        content: item.content,
+        lauNumber: item.thumbsUps,
+        status: item.status,
+      },
+    });
+  };
+  //点赞
+  laudClick = (item, index) => {
+    let params = {
+      tpCommentId: item.id,
+    };
+    let { id } = this.props.location.query;
+    let param = { id: id };
+    let _this = this;
+    if (String(item.status) === '0') {
+      // item.thumbsUps++;
+      // this.props.TrainingStepsReducer.reviewListData[index].thumbsUps++;
+      this.props.laudSaveEnrollEvent(params, () => {
+        Toast.info(intl.get('LikeSuccess') || "点赞成功");
+        this.props.reviewListData(
+          { ...param, pageNo: 1, pageSize: 10 },
+          false,
+          () => {
+            _this.setState({
+              refreshTrainComment: new Date().getTime()
+            })
+          }
+        );
+      });
+    } else {
+      this.props.laudDeleEnrollEvent(params, () => {
+        Toast.info(intl.get('Unlike') || "取消点赞");
+        this.props.reviewListData(
+          { ...param, pageNo: 1, pageSize: 10 },
+          false,
+          () => {
+            _this.setState({
+              refreshTrainComment: new Date().getTime()
+            })
+          }
+        );
+      });
+    }
+  };
+
+  //项目详情tab
+  panelItem = (data, id) => {
+    return data.map((item, index) => {
+      return (
+        <Accordion.Panel
+          header={this.trainContentItemHeader(item)}
+          key={index}
+        >
+          {this.trainContentItemInner(item, id)}
+        </Accordion.Panel>
+      );
+    });
+  };
+  trainContentItemHeader = item => {
+    let startTime = moment(item.startTime).format('YYYY-MM-DD');
+    let endTime = moment(item.endTime).format('YYYY-MM-DD');
+    return (
+      <div className="training-element">
+        <div className="training-icon-steps">
+          <Circle
+            className="icon-doc"
+            trailColor="#0076FF"
+            percent={item.ratio * 100}
+            trailWidth="4"
+            strokeWidth="20"
+            strokeColor="#0076FF"
+          />
+          <span className="line-row" />
+        </div>
+        <div className="training-header-con">
+          <h2>{`${item.name}`}</h2>
+          <div className="training-timing">{`${intl.get("PlanTime") || "学习时间"}：${startTime} ${intl.get("To") || "至"} ${endTime}`}</div>
+        </div>
+      </div>
+    );
+  };
+  // 项目内容活动
+  contentItemClick = (data, item, id, contentVo) => {
+
+    let _this = this;
+    let { introductionVo } = this.props.TrainingStepsReducer;
+    if (introductionVo.needEnroll) {
+      //需要报名
+      if (introductionVo.hasEnrolled) {
+        //已报名
+        if (introductionVo.audited || !introductionVo.needAudit) {
+          //已审核
+          if (introductionVo.auditStatus == 3 && introductionVo.needAudit) {
+            //审核不通过
+            return Toast.info(intl.get("caseStatus3") || '审核不通过', 1);
+          }
+        } else {
+          //未审核
+          return Toast.info('等待审核', 1);
+        }
+      } else {
+        //未报名
+        return Toast.info('请先报名', 1);
+      }
+    }
+    if (data.started) {
+      let { finished, expired, started, status } = item;
+      let oDateTime = new Date().getTime();
+      if (oDateTime < data.startTime) {
+        Toast.info(intl.get("PublishKey86") || '还没有开始');
+        return;
+      } else if (oDateTime > data.endTime) {
+        Toast.info(intl.get("PublishKey87") || '已经结束');
+        return;
+      }
+
+      if (!expired && started) {
+        //如果计划：已结束||开始未截止也未完成------ 跳界面------除此之外都不挑界面并给提示
+        this.props.trainClickLog(item.id);
+        // debugger
+        switch (Number.parseInt(item.type)) {
+          case 0: //return str="课程";
+            if (parseInt(item.valid) == 0) {
+              func.ToastForOverTime('课程已过期', 2);
+            } else {
+              hashHistory.push({
+                pathname: func.routerBefore() + '/courseplay',
+                query: { id: item.relationId, tpId: id },
+              });
+            }
+            break;
+          case 1:
+            //考试
+            hashHistory.push({
+              pathname: func.routerBefore() + '/examdetail',
+              query: { id: item.relationId, type: 0, tpId: id },
+            });
+            break;
+          case 2:
+            //调研（未做）
+            if (status === '已完成') {
+              hashHistory.push({
+                pathname: func.routerBefore() + '/mysurvey/SurveyAnswer',
+                query: { ...item, id: item.relationId, data: 1 },
+              });
+              return;
+            } else {
+              hashHistory.push({
+                pathname: func.routerBefore() + '/mysurvey/SurveyDetails',
+                query: { id: item.relationId, tpId: id },
+              });
+            }
+
+            break;
+          // live
+          case 3:
+            //直播（外链）
+
+            //此处要做判断，公开直播还是站内直播，站内直播不变，公开直播要跳到新的播放地址
+            if (item.viewType == 0) { //viewType  0公开直播  1站内直播
+              if (item.url) {
+                window.location.href = `https://live.polyv.cn/watch/${item.url}` //应军哥要求，此处地址写死
+              } else {
+                Toast.info(intl.get("PublishKey89") || '直播频道号不存在', 2);
+              }
+              break;
+            }
+
+            if (item.url) {
+              jumpToLive.jumpToLive(item.url, id);
+            } else {
+              Toast.info(intl.get("PublishKey89") || '直播频道号不存在', 2);
+            }
+            break;
+          case 4:
+            //投票（外链）
+            hashHistory.push({
+              pathname: func.routerBefore() + '/vote',
+              query: { id: item.relationId },
+            });
+
+            break;
+          case 5:
+            //作业（未做
+            hashHistory.push({
+              pathname: func.routerBefore() + '/homework/homeworkdetail',
+              query: { id: item.relationId, tpId: id },
+            });
+            break;
+          case 6:
+            //证书
+
+            if (item.finished) {
+              hashHistory.push({
+                pathname: func.routerBefore() + '/mycred/details/',
+                query: { id: item.relationId, projectId: id },
+              });
+            } else {
+              this.props.trainCertificateGet(
+                {
+                  planId: data.id,
+                  certificateId: item.relationId,
+                },
+                response => {
+                  Toast.info(response.data, 1);
+                }
+              );
+            }
+            break;
+          case 7: //签 到  8外部
+            window.location.href = item.url;
+            break;
+          case 8:
+            window.location.href = item.url;
+            // hashHistory.push({
+            //     pathname: func.routerBefore() + '/course/courseplay',
+            //     query: { id: item.relationId,type:2},
+            // });
+            break;
+          case 10:
+            //线下课程
+            //let {id} = _this.props.location.query;
+            hashHistory.push({
+              pathname: func.routerBefore() + '/course/courseplay',
+              query: { id: item.relationId, type: 2, tpId: id },
+            });
+            break;
+          case 11:
+            // 作品
+            hashHistory.push({
+              pathname: func.routerBefore() + '/MyCaseSubmittingRecord',
+              query: {
+                caseLibraryId: item.relationId,
+                tpId: id,
+                isFromTraining: 1,
+              },
+            });
+            break;
+          case 12:
+            const requestUrl = API.pickOutCaseDetail;
+            const requestParams = {
+              studentCaseId: item.relationId,
+              type: 1,
+            };
+            this.props.validatePickOutCaseDetail(
+              requestUrl,
+              requestParams,
+              function (response) {
+                if (response.code == 1000) {
+                  //精选作品
+                  hashHistory.push({
+                    pathname: func.routerBefore() + '/CaseLibraryDetail',
+                    query: {
+                      id: item.relationId,
+                      type: 1,
+                      tpId: id,
+                    },
+                  });
+                } else {
+                  Toast.info(intl.get(response.subMsg), 1);
+                }
+              }
+            );
+
+            break;
+          case 13:
+            //资料任务-872-cwj
+            hashHistory.push({
+              pathname: func.routerBefore() + '/dataView', /* feature1123资料的预览或下载统一处理，zhouzhongyan20200526 */
+              query: {
+                id: item.relationId,
+                type: 1,
+              },
+            });
+            break;
+          case 14:
+            hashHistory.push({
+              pathname: func.routerBefore() + '/postDetail',
+              query: {
+                postId: item.relationId,
+                tpId: id,
+              },
+            });
+            break;
+          default:
+            window.location.href = item.url;
+            break;
+        }
+      } else {
+        Toast.info(item.status);
+      }
+    } else {
+      if (data.prePlanNames.length == 0) {
+        //没有前置计划提示status
+        Toast.info(data.status);
+      } else {
+        let text = ''
+        data.conditionPrePlanIds.map((ids, index) => {
+          contentVo.plans.map(plan => {
+            if (plan.id === ids && plan.status !== "已完成") {
+              return text = data.prePlanNames[index]
+            }
+          })
+        })
+        //有前置计划提示前置计划prePlanNames
+        Toast.info(text + intl.get("PublishKey90") || '学习计划未完成，无法开始新计划');
+      }
+    }
+  };
+  itemType = type => {
+    //0课程 1考试 2调研 3直播 4投票 5作业 6证书 7外部链接
+    let str = '';
+    switch (Number.parseInt(type)) {
+      case 0:
+        return (str = '课程');
+      case 1:
+        return (str = '考试');
+      case 2:
+        return (str = '调研');
+      case 3:
+        return (str = '直播');
+      case 4:
+        return (str = '投票');
+      case 5:
+        return (str = '作业');
+      case 6:
+        return (str = '证书');
+      case 7:
+        return (str = '外部链接');
+      case 8:
+        return (str = '签到');
+      case 10:
+        return (str = '线下课程');
+    }
+    return str;
+  };
+
+  isShowUnComplete(type, hasPre) {
+    //0课程 1考试 2调研 3直播 4投票 5作业 6证书 7外部链接 10 线下课程
+    if (hasPre.length == 0) {
+      switch (type) {
+        case 1:
+          return true;
+        case 2:
+          return true;
+        case 3:
+          return true;
+        case 5:
+          return true;
+        case 7:
+          return true;
+        case 10:
+          return true;
+        default:
+          return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  itemIcon = (type, isGray) => {
+    //0课程 1考试 2调研 3直播 4投票 5作业 6证书 7外部链接 10 线下课程 11 作品 12精选作品 13资料,14论坛
+    let str = '';
+    switch (Number.parseInt(type)) {
+      case 0:
+        return (
+          <img
+            className="cell-left-icon"
+            src={isGray ? trainLessonGray : trainLesson}
+            alt=""
+          />
+        );
+      case 1:
+        return (
+          <img
+            className="cell-left-icon"
+            src={isGray ? trainExamGray : trainExam}
+            alt=""
+          />
+        );
+      case 2:
+        return (
+          <img
+            className="cell-left-icon"
+            src={isGray ? trainSurveryGray : trainSurvery}
+            alt=""
+          />
+        );
+      case 3:
+        return <img className="cell-left-icon" src={trainLive} alt="" />;
+      case 4:
+        return (
+          <img
+            className="cell-left-icon"
+            src={isGray ? trainVoteGray : trainVote}
+            alt=""
+          />
+        );
+      case 5:
+        return (
+          <img
+            className="cell-left-icon"
+            style={isGray ? { width: 26 } : {}}
+            src={isGray ? trainHomeowrkGray : trainHomeowrk}
+            alt=""
+          />
+        );
+      case 6:
+        return <img className="cell-left-icon" src={trainCer} alt="" />;
+      case 7:
+        return (
+          <img
+            className="cell-left-icon"
+            src={isGray ? trainLinkGray : trainLink}
+            alt=""
+          />
+        );
+      case 8:
+        return (
+          <img
+            className="cell-left-icon"
+            src={isGray ? trainSignGray : trainSign}
+            alt=""
+          />
+        );
+      case 10:
+        return <img className="cell-left-icon" src={trainOffline} alt="" />;
+      case 11:
+        return <img className="cell-left-icon" src={trainCase} alt="" />;
+      case 12:
+        return <img className="cell-left-icon" src={trainCase} alt="" />;
+      case 13:
+        return <img className="cell-left-icon" src={tarinData} alt="" />;
+      case 14:
+        return <img className="cell-left-icon" src={forumIcon} alt="" />;
+    }
+    return str;
+  };
+}
+
+export default connect(state => {
+  let { TrainingStepsReducer } = state;
+  return {
+    TrainingStepsReducer,
+  };
+}, TrainingStepsAction)(TrainingSteps);

src/components/Training/TrainingSteps/TrainingSteps.jsx

-import React, { Component, Fragment } from 'react';
-import { Icon, List } from 'antd';
-import {
-  Accordion,
-  ListView,
-  Modal,
-  Tabs,
-  TextareaItem,
-  Toast,
-} from 'antd-mobile';
-import API from '../../../util/urlconfig';
-import { Sticky, StickyContainer } from 'react-sticky';
-import MediaDisplay from '../../../common/mediaDisplay/index';
+import React, { Component, Fragment } from "react";
+import { ListView, Modal, TextareaItem, Toast } from "antd-mobile";
+import "../../menumarketing/MarketingDetail.less";
 
-import trainExam from '../../../image/train-exam.png';
-import trainHomeowrk from '../../../image/train-homework.png';
-import trainLesson from '../../../image/train-lesson.png';
-import trainSurvery from '../../../image/train-survey.png';
-import trainVote from '../../../image/train-vote.png';
-import trainSign from '../../../image/train-sign.png';
-import trainCer from '../../../image/train-cer.png';
-import trainLink from '../../../image/train-link.png';
-import trainOffline from '../../../image/train-offline.png';
-import trainLive from '../../../image/train-live.png';
-import trainExamGray from '../../../image/train-exam-gray.png';
-import trainHomeowrkGray from '../../../image/train-homework-gray.png';
-import trainLessonGray from '../../../image/train-lesson-gray.png';
-import trainSurveryGray from '../../../image/train-survey-gray.png';
-import trainVoteGray from '../../../image/train-vote-gray.png';
-import trainSignGray from '../../../image/train-sign-gray.png';
-import trainLinkGray from '../../../image/train-link-gray.png';
-import blackPage from '../../../common/mediaDisplay/black-bg.png';
-import '../../menumarketing/MarketingDetail.less';
-import inCompleteIcon from './train-in-complete-icon.png';
-import progressIcon from './train-progress-icon.png';
-import completeIcon from './train-complete-icon.png';
-import trainComment from './comment-icon.jpg';
-import trainCommentReplay from '../../../image/train-comment.png';
-import trainCase from '../../../image/train-case.png';
-import tarinData from '../../../image/train-data.png';
-import forumIcon from '../../../image/forumIcon2.png';
+import trainCommentReplay from "../../../image/train-comment.png";
 import intl, { init } from "react-intl-universal";
-import { hashHistory } from 'react-router';
-import FontAwesome from 'react-fontawesome';
-import './index.less';
-import moment from 'moment';
-import { connect } from 'react-redux';
-import * as TrainingStepsAction from './TrainingStepsAction';
-import func from '../../../util/commonFunc';
-import { Circle } from 'rc-progress';
-import SecListView from '../../common/listview/secListView';
-import ReactEcharts from 'echarts-for-react';
-import $ from 'jquery';
-import Footer from '../../../common/footer/footer';
-import zan from '../../../image/zan.png';
-import alreadyzan from '../../../image/alreadyzan.png';
-import myIcon from '../../../image/my.png';
-import jumpToLive from '../../../util/jumpToLive';
-import DataLibraryList from './trainningDataLibrary/DataLibraryList';
-import certificateIcon
-  from '../../course/courseplay/plugin/courseFooter/certificateIcon.png';
-import location from './signing-location.png';
-
-const TabPane = Tabs.TabPane;
+import { hashHistory } from "react-router";
+import "./index.less";
+import moment from "moment";
+import { connect } from "react-redux";
+import * as TrainingStepsAction from "./TrainingStepsAction";
+import func from "../../../util/commonFunc";
+import SecListView from "../../common/listview/secListView";
+import trainComment from "./comment-icon.jpg";
+import zan from "../../../image/zan.png";
+import alreadyzan from "../../../image/alreadyzan.png";
+import myIcon from "../../../image/my.png";
 
 class TrainingSteps extends Component {
   constructor(props) {
     super(props);
-    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !== r2,
+    });
 
     this.state = {
       displayProgress: false,
-      courseInfo: 'IC1金融法规与银行从业人员职业操守认证考试试题20170901项目名称项目名称项目名称项...', //课程信息
-      successTimer: '2018-02-28 至 2018-03-28', //报名成功时间
-      successTxt: '开始时间:', //开始时间
-      learningCountTxt: '总学习时长', //学习时长
-      hour: '10', //总共小时
-      minute: '30', //总共分钟
-      loading: false,
+
       visible: false,
       confirmLoading: false,
-      commitContent: '',
-      currentType: 1,
-      //showEnroll :0评论   >=1:报名  （具体处理到下周接口出来）
+      commitContent: "",
+
       showEnroll: 1,
       showComment: false,
-      comment: '',
+      comment: "",
       dataSource: ds,
       isLoading: false,
       commentType: 1,
       replyCommentTypeId: 0,
-      hiddenUp: false,
       showProgress: true,
-      defaultTabKey: '1',
       trainLogoHeight: 400,
       commentHasMore: true,
       showContentOccupy: false,
-      isNative: false,
       enablePosition: 0,
-      refreshTrainComment: ""
+      refreshTrainComment: "",
     };
-    this.tabClick = this.tabClick.bind(this);
-    this.logoHeightListen = this.logoHeightListen.bind(this);
-    this.contentDomHeightSetForSticky = this.contentDomHeightSetForSticky.bind(
-      this
-    );
   }
 
-  componentWillMount() {
-    const { tabkey } = this.props.location.query;
-
-    this.setState({
-      defaultTabKey: tabkey ? tabkey + '' : '1',
-    });
-  }
+  componentWillMount() {}
 
   componentDidMount() {
-
     let _this = this;
-    if (parseInt(terminalMp) == 0 || parseInt(terminalMp) == 1) {
-      console.log("原生", terminalMp)
-      _this.setState({ isNative: true })
-    }
     this.logoHeightListen();
     this.props.initailData();
-    let { id, finished, tabkey } = this.props.location.query;
+    let { id, finished, tabkey, bizType } = this.props.location.query;
     let params = {
       id: id,
     };
 
-    this.props.trainStepsData(finished, params, () => {
-      let { introductionVo } = _this.props.TrainingStepsReducer;
-      let { needEnroll, needAudit, hasEnrolled, audited, enablePosition, enableSign } = introductionVo;
-      console.log("did-introductionVo", introductionVo)
-      _this.setState({
-        showProgress: this.showProgressJudge(
+    if (bizType != "2") {
+      this.props.trainStepsData(finished, params, () => {
+        let { introductionVo } = _this.props.TrainingStepsReducer;
+        let {
           needEnroll,
-          hasEnrolled,
           needAudit,
-          audited
-        ),
-        enablePosition,
-        enableSign,
+          hasEnrolled,
+          audited,
+          enablePosition,
+          enableSign,
+        } = introductionVo;
+        _this.setState({
+          showProgress: this.showProgressJudge(
+            needEnroll,
+            hasEnrolled,
+            needAudit,
+            audited
+          ),
+          enablePosition,
+          enableSign,
+        });
+        _this.contentDomHeightSetForSticky();
       });
-      if (!tabkey) {
-        if (eval(finished) == true) {
-        } else if (
-          introductionVo.auditStatus == 2 ||
-          (!introductionVo.needAudit && introductionVo.hasEnrolled)
-        ) {
-          _this.setState({
-            defaultTabKey: '2',
-          });
-        }
-      }
-      _this.contentDomHeightSetForSticky();
-    });
+    }
     this.setState({
       isLoading: true,
     });
@@ -162,21 +88,17 @@ class TrainingSteps extends Component {
       { ...params, pageNo: 1, pageSize: 10 },
       false,
       () => {
-        const {
-          reviewListTotle,
-          reviewPageNo,
-          reviewListData,
-        } = _this.props.TrainingStepsReducer;
+        const { reviewListTotle, reviewPageNo, reviewListData } =
+          _this.props.TrainingStepsReducer;
         this.setState({
           isLoading: false,
-          commentHasMore: (reviewPageNo - 2) * 10 + reviewListData.length <
-            reviewListTotle
-            ? true
-            : false,
+          commentHasMore:
+            (reviewPageNo - 2) * 10 + reviewListData.length < reviewListTotle
+              ? true
+              : false,
         });
       }
     );
-    func.changeDocumentTitle(intl.get("TrainingProgram2") || '项目');
   }
   logoHeightListen() {
     this.setState({
@@ -185,8 +107,9 @@ class TrainingSteps extends Component {
   }
 
   contentDomHeightSetForSticky() {
-    let domHeight = document.getElementById('train-contain-list-sticky-div')
-      .offsetHeight;
+    let domHeight = document.getElementById(
+      "train-contain-list-sticky-div"
+    ).offsetHeight;
     let bodyHeight = document.body.clientHeight;
     if (
       bodyHeight - (domHeight + 88) < 50 &&
@@ -239,44 +162,23 @@ class TrainingSteps extends Component {
       { ...params, pageNo: reviewPageNo, pageSize: 10 },
       true,
       () => {
-        const {
-          reviewListTotle,
-          reviewPageNo,
-          reviewListData,
-        } = _this.props.TrainingStepsReducer;
+        const { reviewListTotle, reviewPageNo, reviewListData } =
+          _this.props.TrainingStepsReducer;
         this.setState({
           isLoading: false,
-          commentHasMore: (reviewPageNo - 2) * 10 + reviewListData.length <
-            reviewListTotle
-            ? true
-            : false,
+          commentHasMore:
+            (reviewPageNo - 2) * 10 + reviewListData.length < reviewListTotle
+              ? true
+              : false,
         });
       }
     );
   };
 
-  goToBuy = ()=>{
-    let { id } = this.props.location.query;
-    hashHistory.push({
-      pathname: func.routerBefore() + '/settleAccounts',
-      query: { id: id },
-    });
-  }
-
-  showInputView = () => {
-    console.log('出现');
-    this.setState({ showEnroll: 0 });
-  };
-  hiddenInputView = () => {
-    if (this.state.commitContent == '') {
-      this.setState({ showEnroll: 1 });
-    }
-  };
-
   //提交评论
   trainCommitVerb = () => {
     if (!this.state.commitContent) {
-      Toast.info(intl.get("PublishKey73") || '评论不能为空');
+      Toast.info(intl.get("PublishKey73") || "评论不能为空");
       return;
     }
     let _this = this;
@@ -286,15 +188,19 @@ class TrainingSteps extends Component {
 
       let param = { trainingProjectId: id, content: this.state.commitContent };
       this.props.commitVerb(param, () => {
-        this.setState({ commitContent: '' });
+        this.setState({ commitContent: "" });
         let params = {
           id: id,
         };
-        this.props.reviewListData({ ...params, pageNo: 1, pageSize: 10 }, false, () => {
-          _this.setState({
-            refreshTrainComment: new Date().getTime()
-          })
-        });
+        this.props.reviewListData(
+          { ...params, pageNo: 1, pageSize: 10 },
+          false,
+          () => {
+            _this.setState({
+              refreshTrainComment: new Date().getTime(),
+            });
+          }
+        );
       });
       this.setState({ showEnroll: 1, showComment: false });
     } else if (this.state.commentType == 2) {
@@ -305,7 +211,7 @@ class TrainingSteps extends Component {
         content: this.state.commitContent,
       };
       this.props.reviewReplyCommit(param, () => {
-        this.setState({ commitContent: '' });
+        this.setState({ commitContent: "" });
 
         let params = {
           id: id,
@@ -319,1055 +225,49 @@ class TrainingSteps extends Component {
             });
           }
         );
-        Toast.info(intl.get("CommentSuccess") || '评论成功');
+        Toast.info(intl.get("CommentSuccess") || "评论成功");
       });
       this.setState({ showEnroll: 1, showComment: false });
     }
   };
+  render() {
+    let { reviewListData, isMore } = this.props.TrainingStepsReducer;
 
-  tabClick(tabs, tab) {
-    if (Number(tab) == tabs.length) {
-      this.setState({ hiddenUp: true });
-    } else {
-      this.setState({ hiddenUp: false });
-    }
-    let { query } = this.props.location;
-    query.tabkey = parseInt(tab);
-    this.setState({
-      defaultTabKey: String(tab),
-    });
-    hashHistory.replace({
-      pathname: this.props.location.pathname,
-      query: this.props.location.query,
-    });
-  }
-
-  jumpToSigningLocation = () => {
-    let { id } = this.props.location.query;
-    hashHistory.push({
-      pathname: func.routerBefore() + '/signingLocation',
-      query: {
-        id
-      }
-    });
-  }
-
-  renderTabBar = (props) => {
-    return <Tabs.DefaultTabBar {...props} />;
-  }
-  renderContent = (tab) => {
-    let i = parseInt(tab.key) - 1;
-    let {
-      introductionVo = {},
-      hasEnrolled,
-      contentVo,
-      reviewListData,
-      isMore,
-      reviewListTotle,
-      progressVo,
-    } = this.props.TrainingStepsReducer;
-    let { visible, confirmLoading, showEnroll } = this.state;
-    let { finished, id } = this.props.location.query;
-
-
-    let loadMore = isMore
-      ? <button className="load-more" onClick={() => this.onLoadMore()}>
+    let loadMore = isMore ? (
+      <button className="load-more" onClick={() => this.onLoadMore()}>
         {intl.get("PublishKey74") || "点击加载更多"}
       </button>
-      : <button className="load-more">{intl.get("PublishKey30") || "没有更多数据"}</button>;
-    let enrollEnable = !hasEnrolled;
-    let enrollTitle = enrollEnable ? intl.get("msg.immediately.enroll") || "立即报名" : intl.get("ApplyNotStarted") || "报名未开始";
-    let now = new Date();
-    let number = Number(now);
-    let signUpEnable = false;
-    let signUpShow = false;
-    let signUpTitle = intl.get("msg.immediately.enroll") || '立即报名';
-    let signUpColor = '#999999';
-    //判断底部报名按钮状态，是否显示，及标题颜色，是否允许点击
-    if (introductionVo) {
-      if (introductionVo.needEnroll) {
-        //需要报名-- 判断是否已报名
-        signUpShow = true;
-        if (introductionVo.hasEnrolled) {
-          //已报名
-          if (introductionVo.audited) {
-            //已审核
-
-            if (introductionVo.auditStatus == 2) {
-              //审核通过
-              signUpShow = false;
-              signUpTitle = intl.get("PublishKey70") || '报名成功';
-              signUpEnable = false;
-            } else if (introductionVo.auditStatus == 3) {
-              //审核未通过
-              signUpShow = true;
-              signUpColor = '#EA554E';
-              signUpTitle = intl.get('PublishKey75') || '报名未通过';
-              signUpEnable = false;
-            }
-          } else {
-            if (introductionVo.auditStatus == 1) {
-              //待审核
-              signUpShow = true;
-              signUpTitle = intl.get('msg.audit.ing') || '报名审核中';
-              signUpColor = '#54C246';
-              signUpEnable = false;
-            } else if (introductionVo.auditStatus == 0) {
-              //不需要审核
-              signUpShow = false;
-            }
-          }
-        } else {
-          //未报名
-          signUpShow = true;
-          if (number > introductionVo.enroll.endTime) {
-            //报名结束
-            signUpEnable = false;
-            signUpTitle = intl.get('ApplyExpired') || '报名已结束';
-            signUpColor = '#999999';
-          } else if (number < introductionVo.enroll.startTime) {
-            //报名未开始
-            signUpEnable = false;
-            signUpTitle = intl.get('ApplyNotStarted') || '报名未开始';
-            signUpColor = '#999999';
-          } else {
-            //正常报名 -- 判断人数条件
-            if (
-              introductionVo.enrollLimit == 0 ||
-              introductionVo.enrollLimit == '' ||
-              introductionVo.enrollLimit > introductionVo.hasEnrolledNum
-            ) {
-              //人数无限制
-              signUpEnable = true;
-              signUpTitle = intl.get('enjoin') || '立即报名';
-              signUpColor = '#4285F4';
-            } else if (
-              introductionVo.enrollLimit <= introductionVo.hasEnrolledNum
-            ) {
-              //报名人额已满
-              signUpEnable = false;
-              signUpTitle = intl.get('msg.quota.full') || '名额已满';
-              signUpColor = '#EA554E';
-            }
-          }
-        }
-      } else {
-        //没有报名
-        signUpShow = false;
-      }
-    }
-
-    this.state.dataSource = this.state.dataSource.cloneWithRows(
-      this.props.TrainingStepsReducer.reviewListData
-    );
-
-    return <Fragment>
-      {eval(finished) == true
-        ? //完成时显示统计
-        i == 0
-          ? this.renderPlan(progressVo, introductionVo)
-          : i == 1
-            ? this.renderIntroduction(introductionVo)
-            : i == 2
-              ? this.renderContain(contentVo)
-              : i == 3
-                ? this.renderDataLibraryList(id)
-                : i == 4
-                  ? this.renderComment(
-                    reviewListData,
-                    loadMore
-                  )
-                  : ''
-        : //不完成时不显示统计
-        i == 0
-          ? this.renderIntroduction(introductionVo)
-          : i == 1
-            ? this.renderContain(contentVo)
-            : i == 2
-              ? this.renderDataLibraryList(id)
-              : i == 3
-                ? this.renderComment(
-                  reviewListData,
-                  loadMore
-                )
-                : ''}
-    </Fragment>
-
-  }
-
-  render() {
-    let {
-      introductionVo = {},
-      hasEnrolled,
-      contentVo,
-      reviewListData,
-      isMore,
-      reviewListTotle,
-      progressVo,
-    } = this.props.TrainingStepsReducer;
-    let { visible, confirmLoading, showEnroll } = this.state;
-    let { finished, id } = this.props.location.query;
-
-
-    let loadMore = isMore
-      ? <button className="load-more" onClick={() => this.onLoadMore()}>
-        {intl.get('PublishKey74') || "点击加载更多"}
+    ) : (
+      <button className="load-more">
+        {intl.get("PublishKey30") || "没有更多数据"}
       </button>
-      : <button className="load-more">{intl.get('PublishKey30') || "没有更多数据"}</button>;
-    let enrollEnable = !hasEnrolled;
-    let enrollTitle = enrollEnable ? intl.get('msg.immediately.enroll') || '立即报名' : intl.get('ApplyNotStarted') || '报名未开始';
-    let now = new Date();
-    let number = Number(now);
-    let signUpEnable = false;
-    let signUpShow = false;
-    let signUpTitle = intl.get('msg.immediately.enroll') || '立即报名';
-    let signUpColor = '#999999';
-    //判断底部报名按钮状态，是否显示，及标题颜色，是否允许点击
-    if (introductionVo) {
-      if (introductionVo.needEnroll) {
-        //需要报名-- 判断是否已报名
-        signUpShow = true;
-        if (introductionVo.hasEnrolled) {
-          //已报名
-          if (introductionVo.audited) {
-            //已审核
-
-            if (introductionVo.auditStatus == 2) {
-              //审核通过
-              signUpShow = false;
-              signUpTitle = intl.get('PublishKey70') || '报名成功';
-              signUpEnable = false;
-            } else if (introductionVo.auditStatus == 3) {
-              //审核未通过
-              signUpShow = true;
-              signUpColor = '#EA554E';
-              signUpTitle = intl.get('PublishKey75') || '报名未通过';
-              signUpEnable = false;
-            }
-          } else {
-            if (introductionVo.auditStatus == 1) {
-              //待审核
-              signUpShow = true;
-              signUpTitle = intl.get('msg.audit.ing') || '报名审核中';
-              signUpColor = '#54C246';
-              signUpEnable = false;
-            } else if (introductionVo.auditStatus == 0) {
-              //不需要审核
-              signUpShow = false;
-            }
-          }
-        } else {
-          //未报名
-          signUpShow = true;
-          if (number > introductionVo.enroll.endTime) {
-            //报名结束
-            signUpEnable = false;
-            signUpTitle = intl.get('ApplyExpired') || '报名已结束';
-            signUpColor = '#999999';
-          } else if (number < introductionVo.enroll.startTime) {
-            //报名未开始
-            signUpEnable = false;
-            signUpTitle = intl.get('ApplyNotStarted') || '报名未开始';
-            signUpColor = '#999999';
-          } else {
-            //正常报名 -- 判断人数条件
-            if (
-              introductionVo.enrollLimit == 0 ||
-              introductionVo.enrollLimit == '' ||
-              introductionVo.enrollLimit > introductionVo.hasEnrolledNum
-            ) {
-              //人数无限制
-              signUpEnable = true;
-              signUpTitle = intl.get('enjoin') || '立即报名';
-              signUpColor = '#4285F4';
-            } else if (
-              introductionVo.enrollLimit <= introductionVo.hasEnrolledNum
-            ) {
-              //报名人额已满
-              signUpEnable = false;
-              signUpTitle = intl.get('msg.quota.full') || '名额已满';
-              signUpColor = '#EA554E';
-            }
-          }
-        }
-      } else {
-        //没有报名
-        signUpShow = false;
-      }
-    }
-
+    );
     this.state.dataSource = this.state.dataSource.cloneWithRows(
       this.props.TrainingStepsReducer.reviewListData
     );
-
-    let tabsData = [];
-
-    //tabs适配，因为antd-mobile版本原因，Tabs组件定制表头api无法使用,所以根据className更改样式满足功能
-    tabsData = [
-      {
-        key: '1',
-        title: (
-          <Sticky>
-            {({ style, distanceFromTop }) => {
-              return <span className="tabspan" >{intl.get('Overview') || "简介"}</span>;
-            }}
-          </Sticky>
-        ),
-      },
-      {
-        key: '2',
-        title: (
-          <Sticky>
-            {({ style, distanceFromTop }) => {
-              return <span className="tabspan" >{intl.get('PublishKey56') || "内容"}</span>;
-            }}
-          </Sticky>
-        ),
-      },
-      {
-        key: '3',
-        title: (
-          <Sticky>
-            {({ style, distanceFromTop }) => {
-              return <span className="tabspan" >{intl.get('document') || "资料"}</span>;
-            }}
-          </Sticky>
-        ),
-      },
-      {
-        key: '4',
-        title: (
-          <Sticky>
-            {({ style, distanceFromTop }) => {
-              if (distanceFromTop < 0) {
-                let tab = document.getElementsByClassName('am-tabs-default-bar')[0];
-                tab.style.top = '0px';
-                tab.style.width = '100%';
-                tab.style.position = 'fixed';
-              } else if (distanceFromTop >= 0) {
-                let tab = document.getElementsByClassName('am-tabs-default-bar')[0];
-                tab.style.top = '';
-                tab.style.width = '';
-                tab.style.position = '';
-              }
-
-              return <span className="tabspan" >{intl.get('Comment') || "评论"}({reviewListTotle})</span>;
-            }}
-          </Sticky>
-        ),
-      },
-    ];
-    //如果完成则显示统计
-    if (eval(finished) == true) {
-      tabsData = tabsData.map((item, index) => {
-        return {
-          key: String(parseInt(item.key) + 1),
-          title: item.title
-        }
-      });
-      tabsData.unshift({
-        key: "1",
-        title: (
-          <Sticky>
-            {({ style, distanceFromTop }) => {
-              return <span className="tabspan" >{intl.get('PublishKey76') || "统计"}</span>;
-            }}
-          </Sticky>
-        ),
-      });
-    }
-    console.log(tabsData, this.state.defaultTabKey);
     return (
       <div
         className="train-contain"
-        style={{ backgroundColor: '#f4f4f4', width: '100%', height: '100%' }}
+        style={{ backgroundColor: "#f4f4f4", width: "100%", height: "100%" }}
       >
-        <div
-          className="train-logo"
-          style={{ height: this.state.trainLogoHeight }}
-        >
-          <img
-            id="train-logo-image"
-            style={{ height: this.state.trainLogoHeight }}
-            src={introductionVo && introductionVo.logoImg}
-            alt=""
-          />
-          {
-            this.state.isNative && this.state.enablePosition == 1 ?
-              <div className={"signing_location_container"} onClick={this.jumpToSigningLocation}>
-                <div className={"signing_icon_container"}>
-                  <img src={location} className={"signing_icon"} />
-                </div>
-                <div className={"signing_location_text"}>{intl.get('CheckIn') || "签到"}</div>
-              </div>
-              : null
-          }
-        </div>
-        <div style={{ width: '100%', marginTop: 0 }}>
-          <StickyContainer>
-            <Tabs
-              page={this.state.defaultTabKey}
-              swipeable={false}
-              pageSize={5}
-              style={{ marginBottom: signUpShow ? '0.75rem' : '0px' }}
-              onTabClick={tab => {
-                this.tabClick(tabsData, tab.key);
-              }}
-              tabs={tabsData}
-              renderTabBar={(props) => this.renderTabBar(props)}
-            >
-              {this.renderContent}
-            </Tabs>
-
-          </StickyContainer>
+        <div style={{ width: "100%", marginTop: 0 }}>
+          <Fragment>{this.renderComment(reviewListData, loadMore)}</Fragment>
         </div>
-
-        {this.state.hiddenUp
-          ? ''
-          : '' ||
-            introductionVo && introductionVo.enablePay == 1 ?
-            !introductionVo.hasEnrolled ?
-              <Fragment>
-                <div style={{ width: "100%", height: 128 }}></div>
-                <div className="train-pay-button-container">
-                  <div className="train-pay-button" onClick={this.goToBuy}>
-                    {intl.get("buy") || "购买"}:
-                    <span className="train-actualPrice">
-                      {introductionVo.actualPrice || 0}
-                    </span>
-                    {window.virtualCurrencyUnit}
-                    {
-                      parseInt(introductionVo.originalPrice || 0) > 0 ?
-                        <span className="train-originalPrice">
-                          {introductionVo.originalPrice || 1}{window.virtualCurrencyUnit}
-                        </span> : ""
-                    }
-
-                  </div>
-                </div>
-              </Fragment> : ""
-            :
-            <Fragment>
-              <div style={{ width: "100%", height: 88 }}></div>
-              <div
-                disabled={signUpEnable ? true : false}
-                style={{
-                  display: signUpShow ? 'block' : 'none',
-                  backgroundColor: signUpColor,
-                }}
-                type="primary"
-                className="signup-button"
-                onClick={() => {
-                  if (signUpEnable) {
-                    this.handleOk(tabsData);
-                  }
-                }}
-              >
-                {signUpTitle}
-              </div>
-            </Fragment>
-        }
       </div>
     );
   }
 
-  //报表
-  renderPlan = (planData, introductionVo) => {
-    let xArr = [], yArr = [], dataArr = [];
-    if (planData.courseRecentVos) {
-      planData.courseRecentVos.map((rowData, index) => {
-        let introStartTime = moment(rowData.date)
-          .format('YYYY-MM-DD HH:ss')
-          .substring(5, 10);
-        xArr.push(introStartTime);
-        let second = Number(rowData.seconds);
-        dataArr.push(Math.floor(second / 60));
-      });
-    }
-
-    var option = {
-      title: {
-        text: intl.get("PublishKey77") || '最近7天的学习时长 (单位:分钟)',
-      },
-      tooltip: {},
-
-      xAxis: {
-        data: xArr,
-      },
-      yAxis: {},
-      series: [
-        {
-          type: 'bar',
-          data: dataArr,
-        },
-      ],
-    };
-
-    // 使用刚指定的配置项和数据显示图表。
-    // myChart.setOption(option);
-    if (!introductionVo) return;
-    let startTime = moment(introductionVo.startTime).format('YYYY-MM-DD');
-    let endTime = moment(introductionVo.endTime).format('YYYY-MM-DD');
-
-    let totleLearn = Number(planData.totalStudySeconds);
-    let learnHour = parseInt(totleLearn / 3600);
-    let learnMin = parseInt(totleLearn % 3600 / 60);
-
-    return (
-      <div style={{ paddingBottom: '0.5rem', backgroundColor: 'white' }}>
-        <div className="train-info-view">
-          <div className="train-info">
-            <p>{introductionVo.name}</p>
-            <div style={{ marginTop: '20px' }}>
-              <span>{intl.get("TrainingTime") || "项目时间"}: </span>
-              <span>{`${startTime} ${intl.get("To") || "至"} ${endTime}`}</span>
-            </div>
-          </div>
-          <div className="segement" />
-        </div>
-        <div className="train-plan-studytime">
-          <span>{intl.get("TotalLearnTime") || "总学习时长"}</span>
-          <div>
-            <span style={{ color: '#4285F4 ' }}>{learnHour}</span><span>{intl.get("Hours") || "小时"}</span>
-            <span style={{ color: '#4285F4 ' }}>{learnMin}</span><span>{intl.get("Pts") || "分"}</span>
-          </div>
-        </div>
-        <div style={{ paddingLeft: 26, paddingRight: 26 }}>
-          <ReactEcharts style={{ fontSize: 30 }} option={option} />
-        </div>
-        <div>
-          <div className="train-plan-row">
-            <div className="train-plan-cell">
-              <div>{this.itemIcon(0, 1)}<span>{intl.get("Course") || "课程"}</span></div>
-
-              <div>
-                <span style={{ color: '#4285F4 ' }}>{planData.totalCourse}</span>
-                {' '}
-                <span>门</span>
-              </div>
-            </div>
-            <div className="train-plan-cell">
-              <div>{this.itemIcon(1, 1)}<span>{intl.get("Exam") || "考试"}</span></div>
-              <div>
-                <span style={{ color: '#4285F4 ' }}>{planData.totalExam}</span>
-                {' '}
-                <span>门</span>
-              </div>
-            </div>
-          </div>
-
-          <div className="train-plan-row">
-            <div className="train-plan-cell">
-              <div>{this.itemIcon(5, 1)}<span>{intl.get("Assignment") || "作业"}</span></div>
-
-              <div>
-                <span style={{ color: '#4285F4 ' }}>
-                  {planData.totalAssignment}
-                </span>
-                {' '}
-                <span>门</span>
-              </div>
-            </div>
-            <div className="train-plan-cell">
-              <div>{this.itemIcon(8, 1)}<span>{intl.get("CheckIn") || "签到"}</span></div>
-              <div>
-                <span style={{ color: '#4285F4 ' }}>{planData.totalSign}</span>
-                {' '}
-                <span>门</span>
-              </div>
-            </div>
-          </div>
-          <div className="train-plan-row">
-            <div className="train-plan-cell">
-              <div>{this.itemIcon(2, 1)}<span>{intl.get("Research") || "调研"}</span></div>
-
-              <div>
-                <span style={{ color: '#4285F4 ' }}>
-                  {planData.totalResearch}
-                </span>
-                {' '}
-                <span>{intl.get("men") || "门"}</span>
-              </div>
-            </div>
-            {/* <div className='train-plan-cell'>
-                            <div>{this.itemIcon(4, 1)}<span>投票</span></div>
-                            <div><span style={{color: '#4285F4 '}}>{planData.totalVote}</span> <span>门</span></div>
-                        </div>
-                         */}
-            <div className="train-plan-cell" style={{ background: '#fff' }}>
-              <div><span /></div>
-              <div><span /> <span /></div>
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
-    );
-  };
-  //简介
-  renderIntroduction = introductionVo => {
-    let now = new Date();
-    let number = Number(now);
-    let signUpEnable = false;
-    let signUpShow = false;
-    let signUpTitle = '立即报名';
-
-    let startTime = moment(introductionVo && introductionVo.startTime).format(
-      'YYYY-MM-DD'
-    );
-    let endTime = moment(introductionVo && introductionVo.endTime).format(
-      'YYYY-MM-DD'
-    );
-    let { reviewListTotle } = this.props.TrainingStepsReducer;
-    // console.log('========================================');
-    let introStartTime = moment(
-      introductionVo && introductionVo.enroll.startTime
-    ).format('YYYY-MM-DD HH:mm');
-    let introEndTime = moment(
-      introductionVo && introductionVo.enroll.endTime
-    ).format('YYYY-MM-DD HH:mm');
-
-    $('#train-marketId video').each((index, item) => {
-      $(item)
-        .attr('controls', true)
-        .attr('preload', true)
-        .css('width', '100%')
-        .attr('poster', blackPage);
-    });
-    $('#train-marketId audio').each((index, item) => {
-      $(item)
-        .attr('controls', true)
-        .css('width', '100%')
-        .attr('preload', true);
-    });
-    $('#train-marketId img').each((index, item) => {
-      $(item).css('width', '100%');
-    });
-
-    return (
-      <div id="train-marketId" style={{ height: '100%', zIndex: 999 }}>
-
-        <div
-          className="train-header"
-          style={{
-            // 简介内容为空不需要设置样式 任务919
-            paddingBottom: introductionVo && !introductionVo.description.trim()
-              ? 0
-              : '0.5rem',
-          }}
-        >
-          {/*课程信息*/}
-          <div className="train-info-view">
-            <div className="train-info">
-              <p>{introductionVo && introductionVo.name}</p>
-              <div style={{ marginTop: '20px' }}>
-                <span>{intl.get("TrainingTime") || "项目时间"}: </span>
-                <span>{`${startTime} ${intl.get("To") || "至"} ${endTime}`}</span>
-              </div>
-              {introductionVo &&
-                introductionVo.enablePoint &&
-                <div style={{ marginTop: '8px' }}>
-                  <span>
-                    {intl.get("ProjectPoint") || "项目积分"}:
-                    <span style={{ marginLeft: '3px' }}>
-                      {introductionVo.point}
-                    </span>
-                  </span>
-                </div>}
-              {introductionVo &&
-                introductionVo.trainingDurationShow &&
-                <div>
-                  <span>
-                    {intl.get("period") || "学时"}:
-                    <span style={{ marginLeft: '3px' }}>
-                      {introductionVo.period}
-                    </span>
-                  </span>
-                </div>}
-            </div>
-            <div className="segement-slider" />
-          </div>
-          {/*项目介绍*/}
-          {String(introductionVo && introductionVo.description) === '' ||
-            (introductionVo && introductionVo.description === null) ||
-            !introductionVo
-            ? null
-            : // 简介内容为空不追加product-info-view 任务919
-            introductionVo && !introductionVo.description.trim()
-              ? null
-              : <div>
-                <div className="product-info-view">
-                  <div className="train-info-view">
-                    <div className="train-info">
-                      <div>
-                        <List className="train-info-contain">
-                          <List.Item>
-                            <MediaDisplay
-                              width={document.body.clientWidth - 80}
-                              content={introductionVo.description}
-                            />
-                          </List.Item>
-                        </List>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="segement" />
-              </div>}
-
-          {/*项目须知*/}
-          {introductionVo && introductionVo.needEnroll
-            ? <div className="train-info-view">
-              <div className="train-up-info">
-                <p style={{ fontSize: '0.32rem', paddingBottom: '0.1rem' }}>
-                  {intl.get("ApplyNotice") || "报名须知"}
-                </p>
-                {introductionVo &&
-                  <div>
-                    <p
-                    >{`${intl.get("PublishKey78") || '项目名额'}：${introductionVo && introductionVo.enroll.limit ? introductionVo && introductionVo.enroll.limit + intl.get("People") || '人' : intl.get('PublishKey79') || '无限制'} `}</p>
-                    <p>
-                      {intl.get('ApplyTime') || '报名时间'}：
-                        {`${introStartTime && introStartTime} ${intl.get("To") || "至"} ${introEndTime && introEndTime}`}
-                    </p>
-                    <div style={{ display: 'flex' }}>
-                      <p style={{ minWidth: '120px' }}>{intl.get("PublishKey80") || "注意事项"}：</p>
-                      <p
-                        dangerouslySetInnerHTML={{
-                          __html: introductionVo &&
-                            introductionVo.enroll.notice.replace(
-                              /\r?\n/g,
-                              '</br>'
-                            ),
-                        }}
-                      />
-                    </div>
-                  </div>}
-              </div>
-            </div>
-            : null}
-        </div>
-        <Footer
-          page={{ pageTotle: 5 }}
-          currentNumber={10}
-          isLoading={false}
-          isEnd={true}
-          footText={intl.get('PublishKey47') || '没有更多了'}
-        />
-      </div>
-    );
-  };
-  //内容
-  renderContain = contentVo => {
-    let { introductionVo } = this.props.TrainingStepsReducer;
-    let now = new Date().getTime();
-    //判断内容显示状态
-    let isStarted = false;
-
-    if (introductionVo) {
-      if (introductionVo.needEnroll) {
-        //需要报名-- 判断是否已报名
-
-        if (introductionVo.hasEnrolled) {
-          //已报名
-          if (introductionVo.audited) {
-            //已审核
-          } else {
-            if (introductionVo.auditStatus == 1) {
-              //待审核
-            } else if (introductionVo.auditStatus == 2) {
-              //审核通过
-              if (introductionVo.startTime < now) {
-                isStarted = true;
-              }
-            } else if (introductionVo.auditStatus == 3) {
-              //审核未通过
-            } else if (introductionVo.auditStatus == 0) {
-              //不需要审核
-            }
-          }
-        } else {
-          //未报名
-        }
-      } else {
-        //没有报名
-        if (introductionVo.startTime < now) {
-          isStarted = true;
-        }
-      }
-    }
-    let id = this.props.location.query.id;
-    let activeKeyGroup = contentVo.plans.map((item, index) => {
-      return item.id;
-    });
-
-    //图标没写完
-    return (
-      <div
-        className="train-contain-list"
-        id={'train-contain-list-sticky-div'}
-        style={{ marginBottom: '0.5rem', backgroundColor: 'white' }}
-      >
-        <Accordion activeKey={activeKeyGroup}>
-          {contentVo.plans.map((acItem, index) => {
-            let startTime = moment(acItem.startTime).format('YYYY-MM-DD');
-            let endTime = moment(acItem.endTime).format('YYYY-MM-DD');
-            let header = (
-              <div className="train-contain-header">
-                <div style={{ position: 'relative', paddingRight: 100 }}>
-                  {`${acItem.name}`}
-                  {this.state.showProgress
-                    ? <div className={'train-progress-count'}>
-                      {acItem.percentageOfCompletion}
-                    </div>
-                    : ''}
-                </div>
-                <div
-                  style={{
-                    width: '100%',
-                    position: 'relative',
-                    paddingRight: 200,
-                  }}
-                >
-                  {`${intl.get('PlanTime') || '学习时间'}：${startTime}  ${intl.get("To") || "至"} ${endTime}`}
-                  <div className="train-compete-tag">
-                    {acItem.toFinishedActivityIds.length != 0
-                      ? acItem.toFinishedActivityIds.length + intl.get("ContentRequired") || '个必修活动'
-                      : acItem.toFinishedActivityNum == 0
-                        ? intl.get("FinishAllContentNotice") || '需完成全部活动'
-                        : (intl.get('AtLeastFinish1') || '至少完成') + acItem.toFinishedActivityNum + (intl.get('AtLeastFinish2') || '个活动')}
-                  </div>
-                </div>
-              </div>
-            );
-
-            return (
-              <Accordion.Panel header={header} key={acItem.id}>
-                <List>
-                  {acItem.activities.map((item, index) => {
-                    //计划是否开始---》（具体活动）计划内活动是否开始----》活动状态
-                    if (item.type == 14) {
-                      item.status = 'none'; // 帖子不需要状态；
-                    }
-                    let statuSub = item.status == '未导入'
-                      ? <div className={'train-content-status-cell'}>
-                        <img
-                          src={inCompleteIcon}
-                          alt=""
-                          className="train-in-complete-icon"
-                        />
-                        <br />
-                        <span style={{ fontSize: 20, color: '#999' }}>
-
-                          {"(" + intl.get('data.not.imported') + ")" || '(数据未导入)'}
-                        </span>
-                      </div>
-                      : item.status == '已完成'
-                        ? <div className={'train-content-status-cell'}>
-                          <img
-                            src={completeIcon}
-                            alt=""
-                            className="train-complete-icon"
-                          />
-                          <br />
-                          {acItem.toFinishedActivityIds.indexOf(item.id) !=
-                            -1
-                            ? <span
-                              style={{
-                                fontSize: 20,
-                                color: '#999',
-                              }}
-                            >
-                              ({item.type == 10 ? item.status : '必修'})
-                                  </span>
-                            : <span
-                              style={{
-                                fontSize: 20,
-                                color: item.type == 10
-                                  ? '#999'
-                                  : 'transparent',
-                              }}
-                            >
-                              ({item.status})
-                                  </span>}
-                        </div>
-                        : item.status == '未完成' && item.type == 10
-                          ? <div className={'train-content-status-cell'}>
-                            <img
-                              src={inCompleteIcon}
-                              alt=""
-                              className="train-in-complete-icon"
-                            />
-                            <br />
-                            <span
-                              style={{
-                                fontSize: 20,
-                                color: '#999',
-                              }}
-                            >
-                              ({item.status})
-                                  </span>
-                          </div>
-                          : acItem.toFinishedActivityIds.indexOf(
-                            item.id
-                          ) != -1
-                            ? <div
-                              className={'train-content-status-cell'}
-                            >
-                              {item.status == '进行中'
-                                ? <img
-                                  src={progressIcon}
-                                  alt=""
-                                  className="train-progress-icon"
-                                />
-                                : <img
-                                  src={inCompleteIcon}
-                                  alt=""
-                                  className="train-in-complete-icon"
-                                />}
-                              <br />
-                              <span
-                                style={{
-                                  fontSize: 20,
-                                  color: '#999',
-                                }}
-                              >
-                                {intl.get('RequiredTag') || '(必修)'}
-
-                              </span>
-                            </div>
-                            : item.status == '进行中'
-                              ? <div
-                                className={
-                                  'train-content-status-cell'
-                                }
-                              >
-                                <img
-                                  src={progressIcon}
-                                  alt=""
-                                  className="train-progress-icon"
-                                />
-                                <br />
-                                <span
-                                  style={{
-                                    fontSize: 20,
-                                    color: 'transparent',
-                                  }}
-                                >
-                                  ({item.status})
-                                          </span>
-                              </div>
-                              : item.status == '已获得'
-                                ? <span
-                                  className="tip-text"
-                                  style={{}}
-                                >
-                                  {intl.get('certificate.has.obtained') || '已获取证书'}
-
-                                </span>
-                                : item.status == '未获得'
-                                  ? <span
-                                    className="tip-text"
-                                    style={{}}
-                                  >
-
-                                    {intl.get('get.the.certificate') || '获取证书'}
-                                  </span>
-                                  : item.status == 'none'
-                                    ? ''
-                                    : item.status
-                                      ? <span className="tip-text">
-                                        {item.status}
-                                      </span>
-                                      : <div
-                                        className={
-                                          'train-content-status-cell'
-                                        }
-                                      >
-                                        <img
-                                          src={inCompleteIcon}
-                                          alt=""
-                                          className="train-in-complete-icon"
-                                        />
-                                        <br />
-                                        <span
-                                          style={{
-                                            fontSize: 20,
-                                            color: 'transparent',
-                                          }}
-                                        >
-
-                                          {intl.get('PublishKey82') || '未知情况'}
-                                        </span>
-                                      </div>;
-                    // let statuSub =isStarted?acItem.started?item.started?item.finished? <span className="tip-text-green" style={{}}>已完成</span>:<span className="tip-text">进行中</span> :'':'':'';
-                    return (
-                      <List.Item
-                        key={index}
-                        onClick={() => this.contentItemClick(acItem, item, id, contentVo)}
-                      >
-                        <div className="train-content-cell">
-                          <div className="train-contain-listcell">
-                            {this.itemIcon(item.type)}
-                            <p
-                              className="training-done-info-name"
-                              style={{ marginBottom: 0, WebkitBoxOrient: 'vertical' }}
-                            >{`${item.name}`}</p>
-                            <img
-                              style={{
-                                display: item.hasCertificate ? 'block' : 'none',
-                              }}
-                              className={'certificate-icon'}
-                              src={certificateIcon}
-                              alt=""
-                            />
-                          </div>
-                          {this.state.showProgress ? statuSub : ''}
-                        </div>
-                      </List.Item>
-                    );
-                  })}
-                </List>
-              </Accordion.Panel>
-            );
-          })}
-        </Accordion>
-        <Footer
-          page={{ pageTotle: 5 }}
-          currentNumber={10}
-          isLoading={false}
-          isEnd={true}
-          footText={intl.get('PublishKey47') || '没有更多了'}
-        />
-        {this.state.showContentOccupy
-          ? <div style={{ height: 100, backgroundColor: '#f4f4f4' }} />
-          : ''}
-      </div>
-    );
-  };
-  // 资料
-  renderDataLibraryList = id => {
-    console.log('TrainingSteps-renderDataLibraryList-id', id);
-    let { introductionVo } = this.props.TrainingStepsReducer;
-    return (
-      <List style={{ height: '' }}>
-        <DataLibraryList relationId={id} data={introductionVo} />
-      </List>
-    );
-  };
   //评论
   renderComment = (reviewListData, loadMore) => {
     let { reviewPageNo, reviewListTotle } = this.props.TrainingStepsReducer;
 
     let row = (item, section, row) => {
-      let imgsrc = item.userAvatar == '' ? myIcon : item.userAvatar;
+      let imgsrc = item.userAvatar == "" ? myIcon : item.userAvatar;
       const imageStyle = {
         backgroundImage: `url(${imgsrc})`,
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'contain',
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "contain",
       };
 
       return (
@@ -1380,22 +280,21 @@ class TrainingSteps extends Component {
             <p
               className="item-text-style"
               dangerouslySetInnerHTML={{
-                __html: item.content.replace(/\r?\n/g, '</br>'),
+                __html: item.content.replace(/\r?\n/g, "</br>"),
               }}
             />
             <div className="item-footer-box">
               <p className="item-time-style">
                 {item.createTime.length > 16
                   ? item.createTime.substring(0, 16)
-                  : item.createTime}
-                {' '}
+                  : item.createTime}{" "}
               </p>
               <span
                 className="item-zhan-style"
-                style={{ marginLeft: '2rem' }}
+                style={{ marginLeft: "2rem" }}
                 onClick={() => this.reviewDetail(item)}
               >
-                <span>{item.replys == '0' ? '0' : item.replys}</span>
+                <span>{item.replys == "0" ? "0" : item.replys}</span>
                 <img
                   src={trainCommentReplay}
                   style={{ marginTop: 10 }}
@@ -1409,49 +308,56 @@ class TrainingSteps extends Component {
               >
                 <span>{item.thumbsUps}</span>
                 <img
-                  src={String(item.status) === '1' ? alreadyzan : zan}
+                  src={String(item.status) === "1" ? alreadyzan : zan}
                   alt=""
                 />
               </span>
             </div>
-            {item.tpCommentReplies.length > 0
-              ? <div className="train-comment-replay">
+            {item.tpCommentReplies.length > 0 ? (
+              <div className="train-comment-replay">
                 <div>{item.tpCommentReplies[0].createByName}:</div>
                 <div
                   dangerouslySetInnerHTML={{
                     __html: item.tpCommentReplies[0].content.replace(
                       /\r?\n/g,
-                      '</br>'
+                      "</br>"
                     ),
                   }}
                 />
-                {item.tpCommentReplies.length > 1
-                  ? <div onClick={() => this.reviewDetail(item)}>
-                    {`${intl.get('PublishKey83') || '查看全部'}${item.replys}${intl.get("PublishKey84") || '条回复'}>`}
+                {item.tpCommentReplies.length > 1 ? (
+                  <div onClick={() => this.reviewDetail(item)}>
+                    {`${intl.get("PublishKey83") || "查看全部"}${item.replys}${
+                      intl.get("PublishKey84") || "条回复"
+                    }>`}
                   </div>
-                  : ''}
+                ) : (
+                  ""
+                )}
               </div>
-              : ''}
-
+            ) : (
+              ""
+            )}
           </div>
         </div>
       );
     };
 
-
     return (
       <div
         className="train-comment"
-        style={{ paddingBottom: '1rem', backgroundColor: '#F4F4F4' }}
+        style={{ paddingBottom: "1rem", backgroundColor: "#F4F4F4" }}
       >
-
         <div className="train-comment-contain">
           <img src={trainComment} className="cell-left-icon" alt="" />
           <div className="comment-slider" onClick={() => this.commentShow(1)}>
-            {' '}{intl.get('PublishKey85') || "说点什么吧~"}
+            {" "}
+            {intl.get("PublishKey85") || "说点什么吧~"}
           </div>
         </div>
-        <p style={{ padding: '0.3rem 0.2rem', fontSize: '0.3rem' }}>{intl.get('all_comment') || "全部评论"}</p>
+        <p style={{ padding: "0.3rem 0.2rem", fontSize: "0.3rem" }}>
+          {intl.get("all_comment") || "全部评论"}
+        </p>
+        {/*  */}
         <SecListView
           key={this.state.refreshTrainComment}
           dataSource={this.state.dataSource}
@@ -1464,24 +370,24 @@ class TrainingSteps extends Component {
             pageNo: reviewPageNo,
             pageSize: 10,
           }}
-          footText={intl.get('PublishKey47') || "没有更多了"}
+          footText={intl.get("PublishKey47") || "没有更多了"}
         />
         <Modal
-          title={intl.get('Comment') || "评论"}
+          title={intl.get("Comment") || "评论"}
           visible={this.state.showComment}
           transparent
           maskClosable={false}
-          className={'train-comment-input'}
+          className={"train-comment-input"}
           onClose={this.commentHidden}
           footer={[
             {
-              text: intl.get('Cancel') || "取消",
+              text: intl.get("Cancel") || "取消",
               onPress: () => {
                 this.commentHidden();
               },
             },
             {
-              text: intl.get('Yes') || '确定',
+              text: intl.get("Yes") || "确定",
               onPress: () => {
                 this.trainCommitVerb(1, 0);
               },
@@ -1491,25 +397,25 @@ class TrainingSteps extends Component {
           <div className="comment-body">
             <TextareaItem
               maxLength={800}
-              placeholder={intl.get('WriteComment') || "写评论"}
+              placeholder={intl.get("WriteComment") || "写评论"}
               rows={4}
               value={this.state.commitContent}
-              style={{ backgroundColor: 'clear' }}
-              onChange={txt => {
+              style={{ backgroundColor: "clear" }}
+              onChange={(txt) => {
                 let value = txt;
                 if (value.length > 800) {
                   value = value.slice(0, 800);
                 }
                 this.setState({ commitContent: value });
               }}
-              ref={el => (this.autoFocusInst = el)}
+              ref={(el) => (this.autoFocusInst = el)}
             />
           </div>
         </Modal>
       </div>
     );
   };
-  reachEnd = () => { };
+  reachEnd = () => {};
   commentShow = (type, id) => {
     //type=1为项目评论，2为项目评论回复
 
@@ -1522,113 +428,15 @@ class TrainingSteps extends Component {
   commentHidden = () => {
     this.setState({
       showComment: false,
-      commitContent: '',
-    });
-  };
-  handleCancel = () => {
-    this.setState({
-      visible: false,
-    });
-  };
-  //确认报名
-  handleOk = tabs => {
-    let { id, finished } = this.props.location.query;
-    let params = {
-      id: id,
-    };
-    let _this = this;
-    let contentTab = 0;
-    tabs.map((item, index) => {
-      if (item.title == 'Second Tab') {
-        contentTab = index + 1;
-      }
-      return item;
-    });
-    this.props.lessonEnrollEvent(params, () => {
-      _this.props.trainStepsData(finished, params, () => {
-        let { introductionVo } = _this.props.TrainingStepsReducer;
-        let { needEnroll, needAudit, hasEnrolled, audited } = introductionVo;
-        _this.setState({
-          showProgress: _this.showProgressJudge(
-            needEnroll,
-            hasEnrolled,
-            needAudit,
-            audited
-          ),
-        });
-        if (introductionVo.auditStatus == 2 || !introductionVo.needAudit) {
-          _this.tabClick(tabs, contentTab);
-        }
-      });
+      commitContent: "",
     });
   };
-  //报名
-  jumpComment = () => {
-    let arr = document.getElementsByClassName('list-item-div');
-    console.log(arr);
-    arr[0].scrollIntoView();
-  };
-  //列表item
-  reviewItem = item => {
-    let imgsrc = item.userAvatar == '' ? '' : item.userAvatar;
-    const imageStyle = {
-      backgroundImage: `url(${imgsrc})`,
-      backgroundPosition: 'center',
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'contain',
-    };
-    return (
-      <List.Item>
-        <div className="list-item-div">
-          <div className="list-item-img-box">
-            <div className="list-item-img" style={imageStyle} />
-          </div>
-          <div className="list-item-content">
-            <h2 className="item-title-style">{item.commentator}</h2>
-            <p className="item-text-style">{item.content}</p>
-            <div className="item-footer-box">
-              <p className="item-time-style">
-                {item.createTime.length > 16
-                  ? item.createTime.substring(0, 16)
-                  : item.createTime}
-                <button
-                  className={
-                    item.replys <= 0
-                      ? 'item-btn-style'
-                      : 'item-btn-style-active'
-                  }
-                  onClick={() => {
-                    this.reviewDetail(item);
-                  }}
-                >{`${item.replys <= 0 ? '' : item.replys} ${intl.get('Reply') || '回复'}`}</button>
-              </p>
-              <button
-                className="item-zhan-style"
-                onClick={() => this.laudClick(item)}
-              >
-                <FontAwesome
-                  className={
-                    String(item.status) === '1'
-                      ? 'item-zhan-icon-active'
-                      : 'item-zhan-icon'
-                  }
-                  style={{ fontSize: '0.3rem' }}
-                  name="thumbs-up"
-                />
-                {item.thumbsUps}
-              </button>
-            </div>
-          </div>
-        </div>
-      </List.Item>
-    );
-  };
-  reviewDetail = item => {
+  reviewDetail = (item) => {
     console.log(item);
     // let time = moment(item.createTime).format("YYYY-MM-DD HH:hh:SS");
-    let time = moment(item.createTime).format('YYYY-MM-DD HH:mm');
+    let time = moment(item.createTime).format("YYYY-MM-DD HH:mm");
     hashHistory.push({
-      pathname: func.routerBefore() + '/train/trainingReview',
+      pathname: func.routerBefore() + "/train/trainingReview",
       query: {
         targeId: this.props.location.query.id,
         commentId: item.id,
@@ -1650,20 +458,18 @@ class TrainingSteps extends Component {
     let param = { id: id };
     let _this = this;
 
-
-
-    if (String(item.status) === '0') {
+    if (String(item.status) === "0") {
       // item.thumbsUps++;
       // this.props.TrainingStepsReducer.reviewListData[index].thumbsUps++;
       this.props.laudSaveEnrollEvent(params, () => {
-        Toast.info(intl.get('LikeSuccess') || "点赞成功");
+        Toast.info(intl.get("LikeSuccess") || "点赞成功");
         this.props.reviewListData(
           { ...param, pageNo: 1, pageSize: 10 },
           false,
           () => {
             _this.setState({
-              refreshTrainComment: new Date().getTime()
-            })
+              refreshTrainComment: new Date().getTime(),
+            });
           }
         );
       });
@@ -1671,417 +477,22 @@ class TrainingSteps extends Component {
       // this.props.TrainingStepsReducer.reviewListData[index].thumbsUps--;
       // item.thumbsUps--;
       this.props.laudDeleEnrollEvent(params, () => {
-        Toast.info(intl.get('Unlike') || "取消点赞");
+        Toast.info(intl.get("Unlike") || "取消点赞");
         this.props.reviewListData(
           { ...param, pageNo: 1, pageSize: 10 },
           false,
           () => {
             _this.setState({
-              refreshTrainComment: new Date().getTime()
-            })
+              refreshTrainComment: new Date().getTime(),
+            });
           }
         );
       });
     }
   };
-
-  //项目详情tab
-  panelItem = (data, id) => {
-    return data.map((item, index) => {
-      return (
-        <Accordion.Panel
-          header={this.trainContentItemHeader(item)}
-          key={index}
-        >
-          {this.trainContentItemInner(item, id)}
-        </Accordion.Panel>
-      );
-    });
-  };
-  trainContentItemHeader = item => {
-    let startTime = moment(item.startTime).format('YYYY-MM-DD');
-    let endTime = moment(item.endTime).format('YYYY-MM-DD');
-    return (
-      <div className="training-element">
-        <div className="training-icon-steps">
-          <Circle
-            className="icon-doc"
-            trailColor="#0076FF"
-            percent={item.ratio * 100}
-            trailWidth="4"
-            strokeWidth="20"
-            strokeColor="#0076FF"
-          />
-          <span className="line-row" />
-        </div>
-        <div className="training-header-con">
-          <h2>{`${item.name}`}</h2>
-          <div className="training-timing">{`${intl.get("PlanTime") || "学习时间"}：${startTime} ${intl.get("To") || "至"} ${endTime}`}</div>
-        </div>
-      </div>
-    );
-  };
-  // 项目内容活动
-  contentItemClick = (data, item, id, contentVo) => {
-
-    let _this = this;
-    let { introductionVo } = this.props.TrainingStepsReducer;
-    if (introductionVo.needEnroll) {
-      //需要报名
-      if (introductionVo.hasEnrolled) {
-        //已报名
-        if (introductionVo.audited || !introductionVo.needAudit) {
-          //已审核
-          if (introductionVo.auditStatus == 3 && introductionVo.needAudit) {
-            //审核不通过
-            return Toast.info(intl.get("caseStatus3") || '审核不通过', 1);
-          }
-        } else {
-          //未审核
-          return Toast.info('等待审核', 1);
-        }
-      } else {
-        //未报名
-        return Toast.info('请先报名', 1);
-      }
-    }
-    if (data.started) {
-      let { finished, expired, started, status } = item;
-      let oDateTime = new Date().getTime();
-      if (oDateTime < data.startTime) {
-        Toast.info(intl.get("PublishKey86") || '还没有开始');
-        return;
-      } else if (oDateTime > data.endTime) {
-        Toast.info(intl.get("PublishKey87") || '已经结束');
-        return;
-      }
-
-      if (!expired && started) {
-        //如果计划：已结束||开始未截止也未完成------ 跳界面------除此之外都不挑界面并给提示
-        this.props.trainClickLog(item.id);
-        // debugger
-        switch (Number.parseInt(item.type)) {
-          case 0: //return str="课程";
-            if (parseInt(item.valid) == 0) {
-              func.ToastForOverTime('课程已过期', 2);
-            } else {
-              hashHistory.push({
-                pathname: func.routerBefore() + '/courseplay',
-                query: { id: item.relationId, tpId: id },
-              });
-            }
-            break;
-          case 1:
-            //考试
-            hashHistory.push({
-              pathname: func.routerBefore() + '/examdetail',
-              query: { id: item.relationId, type: 0, tpId: id },
-            });
-            break;
-          case 2:
-            //调研（未做）
-            if (status === '已完成') {
-              hashHistory.push({
-                pathname: func.routerBefore() + '/mysurvey/SurveyAnswer',
-                query: { ...item, id: item.relationId, data: 1 },
-              });
-              return;
-            } else {
-              hashHistory.push({
-                pathname: func.routerBefore() + '/mysurvey/SurveyDetails',
-                query: { id: item.relationId, tpId: id },
-              });
-            }
-
-            break;
-          // live
-          case 3:
-            //直播（外链）
-
-            //此处要做判断，公开直播还是站内直播，站内直播不变，公开直播要跳到新的播放地址
-            if (item.viewType == 0) { //viewType  0公开直播  1站内直播
-              if (item.url) {
-                window.location.href = `https://live.polyv.cn/watch/${item.url}` //应军哥要求，此处地址写死
-              } else {
-                Toast.info(intl.get("PublishKey89") || '直播频道号不存在', 2);
-              }
-              break;
-            }
-
-            if (item.url) {
-              jumpToLive.jumpToLive(item.url, id);
-            } else {
-              Toast.info(intl.get("PublishKey89") || '直播频道号不存在', 2);
-            }
-            break;
-          case 4:
-            //投票（外链）
-            hashHistory.push({
-              pathname: func.routerBefore() + '/vote',
-              query: { id: item.relationId },
-            });
-
-            break;
-          case 5:
-            //作业（未做
-            hashHistory.push({
-              pathname: func.routerBefore() + '/homework/homeworkdetail',
-              query: { id: item.relationId, tpId: id },
-            });
-            break;
-          case 6:
-            //证书
-
-            if (item.finished) {
-              hashHistory.push({
-                pathname: func.routerBefore() + '/mycred/details/',
-                query: { id: item.relationId, projectId: id },
-              });
-            } else {
-              this.props.trainCertificateGet(
-                {
-                  planId: data.id,
-                  certificateId: item.relationId,
-                },
-                response => {
-                  Toast.info(response.data, 1);
-                }
-              );
-            }
-            break;
-          case 7: //签 到  8外部
-            window.location.href = item.url;
-            break;
-          case 8:
-            window.location.href = item.url;
-            // hashHistory.push({
-            //     pathname: func.routerBefore() + '/course/courseplay',
-            //     query: { id: item.relationId,type:2},
-            // });
-            break;
-          case 10:
-            //线下课程
-            //let {id} = _this.props.location.query;
-            hashHistory.push({
-              pathname: func.routerBefore() + '/course/courseplay',
-              query: { id: item.relationId, type: 2, tpId: id },
-            });
-            break;
-          case 11:
-            // 作品
-            hashHistory.push({
-              pathname: func.routerBefore() + '/MyCaseSubmittingRecord',
-              query: {
-                caseLibraryId: item.relationId,
-                tpId: id,
-                isFromTraining: 1,
-              },
-            });
-            break;
-          case 12:
-            const requestUrl = API.pickOutCaseDetail;
-            const requestParams = {
-              studentCaseId: item.relationId,
-              type: 1,
-            };
-            this.props.validatePickOutCaseDetail(
-              requestUrl,
-              requestParams,
-              function (response) {
-                if (response.code == 1000) {
-                  //精选作品
-                  hashHistory.push({
-                    pathname: func.routerBefore() + '/CaseLibraryDetail',
-                    query: {
-                      id: item.relationId,
-                      type: 1,
-                      tpId: id,
-                    },
-                  });
-                } else {
-                  Toast.info(intl.get(response.subMsg), 1);
-                }
-              }
-            );
-
-            break;
-          case 13:
-            //资料任务-872-cwj
-            hashHistory.push({
-              pathname: func.routerBefore() + '/dataView', /* feature1123资料的预览或下载统一处理，zhouzhongyan20200526 */
-              query: {
-                id: item.relationId,
-                type: 1,
-              },
-            });
-            break;
-          case 14:
-            hashHistory.push({
-              pathname: func.routerBefore() + '/postDetail',
-              query: {
-                postId: item.relationId,
-                tpId: id,
-              },
-            });
-            break;
-          default:
-            window.location.href = item.url;
-            break;
-        }
-      } else {
-        Toast.info(item.status);
-      }
-    } else {
-      if (data.prePlanNames.length == 0) {
-        //没有前置计划提示status
-        Toast.info(data.status);
-      } else {
-        let text = ''
-        data.conditionPrePlanIds.map((ids, index) => {
-          contentVo.plans.map(plan => {
-            if (plan.id === ids && plan.status !== "已完成") {
-              return text = data.prePlanNames[index]
-            }
-          })
-        })
-        //有前置计划提示前置计划prePlanNames
-        Toast.info(text + intl.get("PublishKey90") || '学习计划未完成，无法开始新计划');
-      }
-    }
-  };
-  itemType = type => {
-    //0课程 1考试 2调研 3直播 4投票 5作业 6证书 7外部链接
-    let str = '';
-    switch (Number.parseInt(type)) {
-      case 0:
-        return (str = '课程');
-      case 1:
-        return (str = '考试');
-      case 2:
-        return (str = '调研');
-      case 3:
-        return (str = '直播');
-      case 4:
-        return (str = '投票');
-      case 5:
-        return (str = '作业');
-      case 6:
-        return (str = '证书');
-      case 7:
-        return (str = '外部链接');
-      case 8:
-        return (str = '签到');
-      case 10:
-        return (str = '线下课程');
-    }
-    return str;
-  };
-
-  isShowUnComplete(type, hasPre) {
-    //0课程 1考试 2调研 3直播 4投票 5作业 6证书 7外部链接 10 线下课程
-    if (hasPre.length == 0) {
-      switch (type) {
-        case 1:
-          return true;
-        case 2:
-          return true;
-        case 3:
-          return true;
-        case 5:
-          return true;
-        case 7:
-          return true;
-        case 10:
-          return true;
-        default:
-          return false;
-      }
-    } else {
-      return false;
-    }
-  }
-
-  itemIcon = (type, isGray) => {
-    //0课程 1考试 2调研 3直播 4投票 5作业 6证书 7外部链接 10 线下课程 11 作品 12精选作品 13资料,14论坛
-    let str = '';
-    switch (Number.parseInt(type)) {
-      case 0:
-        return (
-          <img
-            className="cell-left-icon"
-            src={isGray ? trainLessonGray : trainLesson}
-            alt=""
-          />
-        );
-      case 1:
-        return (
-          <img
-            className="cell-left-icon"
-            src={isGray ? trainExamGray : trainExam}
-            alt=""
-          />
-        );
-      case 2:
-        return (
-          <img
-            className="cell-left-icon"
-            src={isGray ? trainSurveryGray : trainSurvery}
-            alt=""
-          />
-        );
-      case 3:
-        return <img className="cell-left-icon" src={trainLive} alt="" />;
-      case 4:
-        return (
-          <img
-            className="cell-left-icon"
-            src={isGray ? trainVoteGray : trainVote}
-            alt=""
-          />
-        );
-      case 5:
-        return (
-          <img
-            className="cell-left-icon"
-            style={isGray ? { width: 26 } : {}}
-            src={isGray ? trainHomeowrkGray : trainHomeowrk}
-            alt=""
-          />
-        );
-      case 6:
-        return <img className="cell-left-icon" src={trainCer} alt="" />;
-      case 7:
-        return (
-          <img
-            className="cell-left-icon"
-            src={isGray ? trainLinkGray : trainLink}
-            alt=""
-          />
-        );
-      case 8:
-        return (
-          <img
-            className="cell-left-icon"
-            src={isGray ? trainSignGray : trainSign}
-            alt=""
-          />
-        );
-      case 10:
-        return <img className="cell-left-icon" src={trainOffline} alt="" />;
-      case 11:
-        return <img className="cell-left-icon" src={trainCase} alt="" />;
-      case 12:
-        return <img className="cell-left-icon" src={trainCase} alt="" />;
-      case 13:
-        return <img className="cell-left-icon" src={tarinData} alt="" />;
-      case 14:
-        return <img className="cell-left-icon" src={forumIcon} alt="" />;
-    }
-    return str;
-  };
 }
 
-export default connect(state => {
+export default connect((state) => {
   let { TrainingStepsReducer } = state;
   return {
     TrainingStepsReducer,

src/components/browsingHistory/action.js

+import Network from '../../util/fetchUtil';
+import API from '../../util/urlconfig';
+
+export const MyCollectionSearch = 'MyCollectionSearch';
+export const MyCollectionMore = 'MyCollectionMore';
+export const MyCaseCollectionList = "MyCaseCollectionList";
+export const MyCaseCollectionListMore = "MyCaseCollectionListMore";
+
+export const myCollectionSearchAction = params => (dispatch, getState) => {
+    let state = getState();
+    let url = API.MY_COLLECTION + '?pageNo=1&pageSize=' + state.myCollection.pageSize
+    if (params.hasOwnProperty('name')) {
+        url = url + '&name=' + params.name
+    }
+    Network.get(url,
+        response => {
+            console.log(response.data)
+            dispatch({
+                type: MyCollectionSearch, data:
+                    {
+                        list: response.data,
+                        name: params.name ? params.name : '',
+                        page: 1,
+                        pageSize: state.myCollection.pageSize,
+                        hasMore: response.data.length === state.myCollection.pageSize
+                    }
+            })
+        }
+    )
+}
+
+export const myCollectionMoreAction = params => (dispatch, getState) => {
+    let state = getState();
+    let url = API.MY_COLLECTION + '?pageNo=' + params.page + '&pageSize=' + state.myCollection.pageSize
+    if (params.hasOwnProperty('name') && params.name !== '') {
+        url = url + '&name=' + params.name
+    }
+    Network.get(url,
+        response => {
+            console.log(response.data)
+            dispatch({
+                type: MyCollectionMore, data:
+                    {
+                        list: [...state.myCollection.list, ...response.data],
+                        page: params.page,
+                        hasMore: response.data.length === state.myCollection.pageSize
+                    }
+            })
+        }
+    )
+}
+
+/**
+ * 我的作品收藏
+ * @param {*} caseCollectionUrl 
+ * @param {*} caseCollectionParams 
+ */
+export const myCaseCollectionList = params => (dispatch, getState) => {
+    let state = getState();
+    let url = API.myCaseFavorites;
+    Network.getNetwork(url, {pageNo: 1, pageSize: 10, name: params.name}, (response)=>{
+        console.log("myCaseCollectionList-response", response);
+        dispatch({
+            type: MyCaseCollectionList,
+            data: {
+                caseList: response.data.records,
+                pageNo: 1,
+                hasCaseMore: response.data.records.length == state.myCollection.pageSize
+            }
+        });
+    });
+}
+
+export const myCaseCollectionListMore = params => (dispatch, getState) => {
+    let state = getState();
+    let url = API.myCaseFavorites;
+    let pageNo = state.myCollection.pageNo;
+    let pageSize = state.myCollection.pageSize;
+    Network.getNetwork(url, {pageNo: pageNo + 1, pageSize: pageSize}, (response)=>{
+        console.log("MyCaseCollectionListMore-response", response);
+        dispatch({
+            type: MyCaseCollectionListMore,
+            data: {
+                caseList: [...state.myCollection.caseList, ...response.data.records],
+                pageNo: pageNo + 1,
+                hasCaseMore: response.data.records.length == pageSize
+            }
+        });
+    });
+}
\ No newline at end of file

src/components/browsingHistory/index.jsx

+import React from 'react';
+import { ListView, SearchBar, Tabs } from 'antd-mobile';
+import { Rate, Select, Popover, Icon } from 'antd';
+import { hashHistory } from 'react-router';
+import func from '../../util/commonFunc';
+import DyList from '../../common/DyList/dyList';
+import NoCourse from '../course/nocourse/nocourse';
+import { connect } from 'react-redux';
+import { bindActionCreators } from "redux";
+import { myCollectionSearchAction, myCollectionMoreAction, myCaseCollectionList, myCaseCollectionListMore } from './action';
+import './index.less'
+import moment from 'moment';
+import personImg from '../caselibrary/image/person.png';
+import likeRawImg from '../caselibrary/image/like_raw.png';
+import intl from 'react-intl-universal';
+import Iconfont from '../../common/iconfontcomNew/index'
+
+class MyCollection extends React.Component {
+
+    constructor(props) {
+        super(props);
+        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+        this.state = {
+            active: 1,
+            selectTpye: '1', // 下拉选项 1： 课程 ，2：案例
+            arrowType: true, // 下拉箭头 true:隐藏 false 打开
+            dataSource: ds,
+            isLoading: true,
+            height: document.documentElement.clientHeight,
+            hasCourseShow: true,
+            hasCaseLibraryShow: false,
+            caseLibraryData: [
+                {
+                    id: "201907170001",
+                    imgPath: "https://cloud-wmy.oss-cn-shanghai.aliyuncs.com/wmy/1560673926730.jpg",
+                    caseTitle: "杰拉德康师傅卡斯反倒是发的的风景",
+                    caseCreator: "刘德华",
+                    caseCreateTime: "2019-07-10",
+                    casePersonCount: "10",
+                    caseThumbUpCount: "9"
+                }, {
+                    id: "201907170002",
+                    imgPath: "https://cloud-wmy.oss-cn-shanghai.aliyuncs.com/wmy/1560673926730.jpg",
+                    caseTitle: "杰拉德康师傅卡斯的风景",
+                    caseCreator: "刘德华",
+                    caseCreateTime: "2019-07-10",
+                    casePersonCount: "10",
+                    caseThumbUpCount: "9"
+                }, {
+                    id: "201907170003",
+                    imgPath: "https://cloud-wmy.oss-cn-shanghai.aliyuncs.com/wmy/1560673926730.jpg",
+                    caseTitle: "杰拉德康师傅卡斯的风景",
+                    caseCreator: "刘德华",
+                    caseCreateTime: "2019-07-10",
+                    casePersonCount: "10",
+                    caseThumbUpCount: "9"
+                }
+            ],
+            caseList: [],
+            currentTabKey: 1
+        }
+        this.reachToEnd = this.reachToEnd.bind(this);
+    }
+
+    componentDidMount() {
+        const { dataSource, caseList } = this.state
+        const { myCollection, myCollectionAction, myCollectionSearchAction, myCaseCollectionList } = this.props
+        // if (myCollection.list.length === 0) {
+        myCollectionSearchAction({})
+        //} else {
+        this.setState({
+            dataSource: dataSource.cloneWithRows(myCollection.list),
+            isLoading: false
+        });
+        // }
+        myCaseCollectionList({ name: '' });
+        func.changeDocumentTitle(intl.get("MyFavorite") || '我的收藏');
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.myCollection !== this.props.myCollection) {
+            const { page, name, list } = this.props.myCollection
+            this.setState({
+                dataSource: this.state.dataSource.cloneWithRows(nextProps.myCollection.list),
+                isLoading: false,
+            });
+        }
+    }
+
+    renderTabBar = (props) => {
+        return <Tabs.DefaultTabBar {...props} />;
+    }
+
+    renderContent = (selectTpye) => {
+
+        const { hasCourseShow, hasCaseLibraryShow, caseLibraryData } = this.state;
+        const { caseList, hasCaseMore } = this.props.myCollection;
+        if (this.state.height < 800) {
+            this.state.height = 1200
+        }
+        console.log('this.state.caseList', selectTpye, this.props.myCollection)
+
+        const caseRowWidth = document.body.clientWidth - 40 - 220
+
+        const caseRow = (rowData, sectionID, rowID) => {
+            let submitTime = moment(rowData.submitTime).format("YYYY.MM.DD");
+            return <div key={sectionID} >
+                <div className="case-favorite-item-container" onClick={() => { this.directToCaseLibraryDetail(rowData.studentCaseId) }}>
+                    <div>
+                        {
+                            rowData.studentCaseLogoUrl ?
+                                <img className="case-favorite-item-img" src={rowData.studentCaseLogoUrl} />
+                                : ''
+                        }
+                    </div>
+                    {
+                        rowData.studentCaseLogoUrl ?
+                            <div style={{ width: caseRowWidth }}>
+                                <div>
+                                    <div className="case-favorite-item-title">{rowData.studentCaseTittle}</div>
+                                    <div className="case-favorite-item-author-name">{rowData.authorFullName}</div>
+                                </div>
+                                <div className="case-favorite-right-bottom-container">
+                                    <div className="case-favorite-submit-time">{submitTime}</div>
+                                    <div className="case-favorite-study-img-div">
+                                        <img className="case-favorite-study-img" src={personImg} />
+                                    </div>
+                                    <div className="case-favorite-study-num">{rowData.studyNum}</div>
+                                    <div className="case-favorite-admire-img-div">
+                                        <Iconfont type='icon-numberoflikes' className='case-favorite-admire-img' />
+                                    </div>
+                                    <div className="case-favorite-admire-num">{rowData.admireNum}</div>
+                                </div>
+                            </div>
+                            :
+                            <div style={{ width: '100%' }}>
+                                <div style={{ height: '80px' }}>
+                                    <div className="case-favorite-item-title">{rowData.studentCaseTittle}</div>
+                                </div>
+                                <div className="case-favorite-right-bottom-container">
+                                    <div className="case-favorite-item-author-name" style={{ margin: '0', width: '220px' }}>{rowData.authorFullName}</div>
+                                    <div className="case-favorite-submit-time">{submitTime}</div>
+                                    <div className="case-favorite-study-img-div">
+                                        <img className="case-favorite-study-img" src={personImg} />
+                                    </div>
+                                    <div className="case-favorite-study-num">{rowData.studyNum}</div>
+                                    <div className="case-favorite-admire-img-div">
+                                        <Iconfont type='icon-numberoflikes' className='case-favorite-admire-img' />
+                                    </div>
+                                    <div className="case-favorite-admire-num">{rowData.admireNum}</div>
+                                </div>
+                            </div>
+                    }
+
+
+
+                </div>
+                {/* <div className="case-favorite-item-separator" /> */}
+            </div>
+        }
+
+        switch (selectTpye) {
+            case "1":
+                let arr = []
+                if (this.props.myCollection.list && this.props.myCollection.list.length > 0) {
+                    // arr = [this.state.dataSource[0]]
+                    console.log('dataSource', this.state.dataSource)
+                }
+
+
+                return <div className="contentBdy" style={{ height: this.state.height, overflowX: 'hidden', }}>
+                    {
+                        this.props.myCollection.list && this.props.myCollection.list.length > 0 ?
+                            <ListView
+                                ref={el => this.lv = el}
+                                dataSource={this.state.dataSource}
+                                style={{ height: this.state.height, overflowX: 'hidden', overflowY: 'auto', }}
+                                renderFooter={() => (<div style={{ textAlign: 'center', }}>
+                                    {/* {this.state.isLoading ? 'Loading...' : intl.get('PublishKey47') || '没有更多了'} */}
+                                    {
+                                        this.state.isLoading ? 'Loading...' :
+                                            <div className="common-footer-daying">
+                                                <div className="footer-line"></div>
+                                                <div className="footer-text">
+                                                    {intl.get('PublishKey47') || "没有更多了"}
+                                                </div>
+                                            </div>
+                                    }
+                                </div>)}
+                                renderRow={this.row}
+
+                                scrollRenderAheadDistance={500}
+                                onEndReached={this.onEndReached}
+                                onEndReachedThreshold={10}
+                            />
+                            :
+                            <NoCourse text={intl.get("mycaselibrary55") || "我还没有浏览过内容"} />
+                    }
+
+                </div>
+            case "2":
+                return <div>
+                    {
+                        caseList && caseList.length > 0 ?
+                            <DyList
+                                id={"case-favorite-list"}
+                                isLoading={false}
+                                height={this.state.height}
+                                dataSource={caseList}
+                                renderRow={caseRow}
+                                reachToEnd={this.reachToEnd}
+                                customBackgroundColor={"#F4F4F4"}
+                                hasMore={hasCaseMore}
+                                distanceToEnd={100}
+                                noFooter={false}
+                            />
+                            :
+                            <NoCourse text={intl.get("mycaselibrary55") || "我还没有浏览过内容"} />
+                    }
+                </div>
+        }
+    }
+
+    onEndReached = (event) => {
+        const { hasMore } = this.props.myCollection
+        if (this.state.isLoading || !hasMore) {
+            return;
+        }
+        console.log('reach end', event);
+        this.setState({ isLoading: true });
+        const { page, pageSize } = this.props.myCollection
+        this.props.myCollectionMoreAction({ page: page + 1, pageSize })
+    }
+
+    onSearch = (name) => {
+        this.setState({ isLoading: true });
+        const selectTpye = this.state.selectTpye
+        console.log("selectTpye", selectTpye)
+        if (selectTpye == 1) {
+            this.props.myCollectionSearchAction({ name })
+        } else {
+            this.props.myCaseCollectionList({ name })
+        }
+    }
+
+    onCancel = () => {
+        this.setState({ isLoading: true, name: '' });
+        const { pageSize } = this.props.myCollection
+        this.props.myCollectionSearchAction({})
+    }
+
+    row = (rowData, sectionID, rowID) => {
+        let { id, image, level, name, authorUnit, valid } = rowData
+        return (
+            <div className="courseItem"
+                onClick={() => {
+                    if (parseInt(valid) == 0) {
+                        func.ToastForOverTime(intl.get("PublishKey88") || "课程已过期", 1);
+                    } else {
+                        hashHistory.push({ pathname: func.routerBefore() + '/courseplay', query: { id } })
+                    }
+                }}
+            >
+                <img className="market-item-img" src={image} alt={intl.get("mycaselibrary51") ? intl.get("mycaselibrary51") + "..." : "图片加载中..."} />
+                <div className="courseInfo">
+                    <div className="course-name">
+                        {name}
+                    </div>
+                    {/* <div className="course-teacher">
+                        <Icon type="user" completed style={{ fontSize: '24px', color: '#9b9b9b' }} />
+                        {authorUnit}
+                    </div> */}
+                    <div className="course-rate" style={{ margin: 0, width: '100%' }}>
+                        <Rate disabled allowHalf defaultValue={level} />
+                        <span>{level ? level : 0}{intl.get("Pts") || "分"}</span>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    reachToEnd() {
+        const { hasCaseMore } = this.props.myCollection
+        console.log("reachToEnd-hasCaseMore", hasCaseMore, this.props.myCollection);
+        if (!hasCaseMore) {
+            return;
+        }
+        this.props.myCaseCollectionListMore();
+    }
+
+    /**
+     * 跳转至精选作品详情页面
+     * @param {*} id 
+     */
+    directToCaseLibraryDetail(id) {
+        hashHistory.push({
+            pathname: func.routerBefore() + "/CaseLibraryDetail",
+            query: {
+                id,
+            }
+        });
+    }
+
+    caseSearch(tabKey) {
+        console.log(tabKey)
+        this.setState({ currentTabKey: tabKey })
+    }
+
+    choseType = () => {
+        this.state.arrowType == true ?
+            this.setState({
+                arrowType: false
+            })
+            :
+            this.setState({
+                arrowType: true
+            })
+
+    }
+
+    choseActive = (val) => {
+        if (val == '1') {
+            this.setState({
+                selectTpye: '1',
+                arrowType: true
+            })
+            this.props.myCollectionSearchAction({ name: '' })
+        } else {
+            this.setState({
+                selectTpye: '2',
+                arrowType: true
+            })
+            this.props.myCaseCollectionList({ name: '' })
+        }
+
+    }
+
+    render() {
+        let { selectTpye, arrowType, active } = this.state
+        const tabsData = [
+            {
+                key: "1",
+                title: <span className="tabspan">{intl.get("Course") || "课程"}</span>
+            },
+            {
+                key: "2",
+                title: <span className="tabspan">{intl.get("case") || "作品"}</span>
+            },
+        ];
+
+        return (
+            <div className="mycollection">
+                <SearchBar
+                    placeholder={intl.get("mycaselibrary52") || "课程名称/作品名称"}
+                    value={this.state.name}
+                    onSubmit={this.onSearch}
+                    onChange={(value) => this.setState({ name: value })}
+                    onCancel={this.onCancel}
+                    className='searchBar'
+                />
+
+                <Tabs
+                    defaultActiveKey={'1'}
+                    animated={false}
+                    onChange={(key) => { this.caseSearch(key) }}
+                    tabs={tabsData}
+                    renderTabBar={(props) => this.renderTabBar(props)}
+                >
+                    <div>
+                        <div className="selectBar" onClick={this.choseType}>
+
+                            {
+                                selectTpye == '1' ?
+                                    <span>{intl.get("Course") || "课程"}</span>
+                                    :
+                                    <span>{intl.get("case") || "作品"}</span>
+                            }
+                            {
+                                arrowType == true ?
+                                    <Iconfont type='icon-solidarrow-down' className='arrowLeft' />
+                                    :
+                                    <Iconfont type='icon-solidarrow-up' className='arrowLeft' />
+                            }
+                        </div>
+
+
+
+                        {this.renderContent(selectTpye)}
+                    </div>
+                </Tabs>
+
+                <div className={`selectContent ${arrowType == true ? '' : 'showContent'}  `} onClick={() => { this.setState({ arrowType: true }) }}>
+                    <div className={`contentBg`}>
+                        <div className={`content ${selectTpye == '1' ? 'active' : ''}`} onClick={e => this.choseActive('1')}>
+                            <span>{intl.get("Course") || "课程"}</span>
+                        </div>
+                        <div className={`content ${selectTpye == '2' ? 'active' : ''}`} onClick={e => this.choseActive('2')}>
+                            <span>{intl.get("case") || "作品"}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    myCollection: state.myCollection
+})
+
+const mapDispatchToProps = dispatch => ({
+    myCollectionSearchAction: bindActionCreators(myCollectionSearchAction, dispatch),
+    myCollectionMoreAction: bindActionCreators(myCollectionMoreAction, dispatch),
+    myCaseCollectionList: bindActionCreators(myCaseCollectionList, dispatch),
+    myCaseCollectionListMore: bindActionCreators(myCaseCollectionListMore, dispatch),
+})
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyCollection)

src/components/browsingHistory/index.less

+@import "../../static/theme.less";
+
+#example,
+// .container {
+//     height: 100%;
+//     background-color: #f5f5f5;
+// }
+
+.mycollection {
+    background-color: #fff;
+    position: relative;
+    height: 100%;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+
+    .am-list-view-scrollview-content {
+        padding-bottom: 60px;
+    }
+
+    .contentBdy {
+        background-color: #f5f5f5 !important;
+
+        .am-list-footer {
+            position: relative;
+            top: -60px;
+
+        }
+
+        .common-footer-daying {
+            width: 100%;
+            height: 100px;
+            position: relative;
+            padding-top: 49px;
+            background-color: #f4f4f4;
+
+            .footer-line {
+                width: 340px;
+                height: 2px;
+                background-color: #ddd;
+                margin: 0 auto;
+            }
+
+            .footer-text {
+                font-size: 24px;
+                color: #929292;
+                height: 36px;
+                position: absolute;
+                top: 32px;
+                background-color: #f4f4f4;
+                left: 40%;
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+        }
+    }
+
+    .mycollection .am-tabs-tab-bar-wrap {
+        display: none;
+    }
+
+    .am-tabs {
+        // position: fixed;
+        overflow: visible;
+    }
+
+    .searchBar {
+        width: 80%;
+        background-color: #fff;
+        float: left;
+
+    }
+
+    .am-list {
+        background-color: #f5f5f5;
+        padding-top: 1px;
+    }
+
+    .am-search-input {
+        background-color: #f5f5f5 !important;
+        border-radius: 50px !important;
+    }
+
+    .courseInfo {
+        border: none !important;
+    }
+
+    .list-view-section-body {
+        background-color: #f5f5f5 !important;
+
+    }
+
+    .courseItem {
+        background-color: #fff !important;
+        margin: 20px 0;
+        border-radius: 10px;
+    }
+
+    .courseItem:last-child {
+        margin-bottom: 100px;
+    }
+
+    .selectBar {
+        font-size: 28px !important;
+        padding: 25px 20px 20px 20px;
+        height: 88px;
+        position: absolute;
+        top: -95px;
+        right: 10px;
+
+        .arrowLeft {
+            font-size: 50px;
+            // margin-left: 10px;
+            // margin-bottom: 3px;
+        }
+    }
+
+    .am-list-body {
+        width: 90%;
+        margin: 0 auto;
+        border: none;
+    }
+
+    .selectContent {
+        width: 100%;
+        float: left;
+        font-size: 28px;
+        height: 100%;
+        // height: calc(100% - 88px);
+        background: rgba(0, 0, 0, 0.45);
+        position: absolute;
+        top: 80px;
+        z-index: 999;
+        display: none;
+
+        .contentBg {
+            border-radius: 0 0 20px 20px;
+            background-color: #fff;
+
+            .content {
+                width: 100%;
+                height: 100px;
+                line-height: 80px;
+                color: #666666;
+                padding-left: 50px;
+            }
+
+            .active {
+                color: #4285F4
+            }
+        }
+    }
+
+
+
+    .showContent {
+        display: block;
+    }
+
+
+    .courseItem {
+        width: 100%;
+        height: 196px;
+        padding-left: 261px;
+        position: relative;
+
+        img {
+            width: 220px;
+            height: 132px;
+            border-radius: 14px;
+            position: absolute;
+            left: 20px;
+            top: 21px;
+            border: 2px solid #ccc;
+            z-index: 12;
+        }
+
+        .course-complete-tag {
+            position: absolute;
+            left: 20px;
+            top: 21px;
+            height: 32px;
+            line-height: 30px;
+            width: 108px;
+            background-color: #ffb53e;
+            color: #fff;
+            text-align: center;
+            font-size: 20px;
+            padding: 0 12px;
+            border-top-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+            z-index: 13;
+
+        }
+
+        .courseInfo {
+            width: 100%;
+            height: 196px;
+            border-bottom: 4px solid #efeff4;
+            padding-top: 0px;
+
+            .course-name {
+                width: 100%;
+                height: 80px;
+                font-size: 32px;
+                color: rgba(80, 80, 80, 1);
+                line-height: 40px;
+                padding-right: 114px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                // display:-webkit-box;
+                // -webkit-box-orient:vertical;
+                // -webkit-line-clamp:2;
+                word-break: break-word;
+                white-space: nowrap;
+            }
+
+            .course-teacher {
+                width: 40%;
+                font-size: 24px;
+                color: #9b9b9b;
+                margin-top: 30px;
+                float: left;
+            }
+
+            .course-rate {
+                width: 100%;
+                font-size: 24px;
+                color: #9b9b9b;
+                // margin-top: 30px;
+                // float: right;
+            }
+
+            .course-list-time-and-count {
+                width: 100%;
+                height: 24px;
+                margin-top: 16px;
+
+                .course-list-study-time {
+                    width: 50%;
+                    height: 24px;
+                    line-height: 24px;
+                    float: left;
+                    font-size: 20px;
+                    color: #999;
+                    text-align: left
+                }
+
+                .course-list-study-count {
+                    width: 50%;
+                    height: 24px;
+                    line-height: 24px;
+                    float: right;
+                    font-size: 20px;
+                    color: #999;
+                    text-align: right;
+                    padding-right: 5px;
+                }
+            }
+        }
+
+        .course-progress {
+            position: absolute;
+            right: 18px;
+            top: 21px;
+        }
+    }
+
+
+}
+
+.market-item {
+    height: 1.8rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 0.2rem;
+}
+
+.market-item-img {
+    width: 2.2rem;
+    height: 1.32rem;
+    border-radius: 0.14rem;
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+.market-item-info {
+    height: 1.8rem;
+    flex: 1;
+    border-bottom: solid 0.02rem #efeff4;
+    padding: 0.25rem 0.25rem 0.25rem 0;
+    margin-left: 0.2rem;
+    position: relative;
+}
+
+.market-item-info p:first-child {
+    font-size: 0.32rem;
+    color: #505050;
+    line-height: 0.4rem;
+}
+
+.market-item-info p:nth-child(2) {
+    font-size: 0.24rem;
+    color: #999;
+    position: absolute;
+    bottom: 0.23rem;
+}
+
+.course-name {
+    padding-top: 0.21rem;
+}
+
+.share-com {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.42rem;
+}
+
+.share-com p:first-child {
+    width: 45%;
+}
+
+.share-com p:nth-child(2) {
+    width: 28%;
+}
+
+.share-com p:nth-child(3) {
+    width: 22%;
+}
+
+.share-com p:last-child {
+    width: 8%;
+}
+
+.share-header {
+    height: 0.66rem;
+    background-color: #f3f3f3;
+    color: #949494;
+    font-size: 0.24rem;
+    text-align: left;
+}
+
+.share-item {
+    height: 1.3rem;
+    background-color: #fff;
+    color: #333;
+    font-size: 0.24rem;
+    text-align: left;
+    border-bottom: solid 0.02rem #EFEFF4;
+}
+
+.share-item p:last-child {
+    text-align: center;
+}
+
+.mycollection .am-search-synthetic-ph {
+    width: 100% !important;
+    padding-left: 0 !important;
+}
+
+.mycollection .am-search-input input[type=search] {
+    padding-left: 60px !important;
+}
+
+.case-favorite-item-container {
+    display: flex;
+    width: 90%;
+    margin: 20px auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    // margin-left: 0.2rem;
+    // margin-right: 0.2rem;
+    /* margin-top: 0.3rem; */
+}
+
+/*我的作品收藏*/
+.case-favorite-item-img {
+    width: 2.2rem;
+    height: 1.32rem;
+    border-radius: 0.14rem;
+}
+
+.case-favorite-item-title {
+    width: 50vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 0.4rem;
+    margin-left: 0.2rem;
+    margin-bottom: 0.08rem;
+    line-height: 0.4rem;
+    font-size: 0.32rem;
+    text-align: left;
+    color: #505050;
+}
+
+.case-favorite-item-author-name {
+    height: 0.32rem;
+    margin-left: 0.2rem;
+    margin-top: 0.2rem;
+
+    margin-bottom: 0.1rem;
+    line-height: 0.32rem;
+    font-size: 0.24rem;
+    text-align: left;
+    color: #999999;
+    .singleLineOverflow;
+}
+
+.ant-rate {
+    color: #f79a58 !important;
+}
+
+.case-favorite-right-bottom-container {
+    display: flex;
+    margin-left: 0.2rem;
+}
+
+.case-favorite-submit-time {
+    height: 0.32rem;
+    line-height: 0.32rem;
+    font-size: 0.24rem;
+    text-align: left;
+    color: #999999;
+}
+
+.case-favorite-study-img-div {
+    margin-left: 0.9rem;
+}
+
+.case-favorite-study-img {
+    width: 0.26rem;
+    height: 0.26rem;
+}
+
+.case-favorite-study-num {
+    height: 0.32rem;
+    margin-left: 0.08rem;
+    line-height: 0.32rem;
+    font-size: 0.24rem;
+    text-align: left;
+    color: #999999;
+    width: 40px;
+}
+
+.case-favorite-admire-img-div {
+    margin-left: 0.45rem;
+}
+
+.case-favorite-admire-img {
+    // width: 0.26rem;
+    // height: 0.26rem;
+    font-size: 32px;
+}
+
+.case-favorite-admire-num {
+    height: 0.32rem;
+    margin-left: 0.08rem;
+    line-height: 0.32rem;
+    font-size: 0.24rem;
+    text-align: left;
+    color: #999999;
+}
+
+.case-favorite-item-separator {
+    height: 0.02rem;
+    margin-left: 2.6rem;
+    margin-top: 0.3rem;
+    margin-bottom: 0.3rem;
+    background-color: #e3e5e8;
+}
+
+.mycollection .am-tabs-tab-active {
+    color: @themeColor;
+}
+
+.mycollection .am-tabs-ink-bar {
+    background-color: @themeColor;
+}
\ No newline at end of file

src/components/browsingHistory/reducer.js

+import { MyCollectionSearch, MyCollectionMore, MyCaseCollectionList, MyCaseCollectionListMore } from './action'
+
+const initialState = {
+    page: 1,
+    pageSize: 10,
+    name: '',
+    list: [],
+    hasMore:true,
+    pageNo: 1,
+    hasCaseMore: true,
+    caseList: [],
+};
+
+const myCollection = (state = initialState, action) => {
+    switch (action.type) {
+        case MyCollectionSearch:
+            return Object.assign({}, action.data)
+            break
+        case MyCollectionMore:
+            return Object.assign({}, state, action.data)
+            break
+        case MyCaseCollectionList:
+            return Object.assign({}, state, action.data);
+        case MyCaseCollectionListMore:
+            return Object.assign({}, state, action.data);
+        default:
+            return state
+    }
+}
+
+export default myCollection;
+
+
+

src/components/indexComponent/index.jsx

-import React, { Component } from 'react';
+import React, { Component } from "react";
 import { connect } from "react-redux";
 import {
-    getHomeModuleList,
-    getHomeShowConfig,
-    getHomeTemplateConfig,
-    getModubleById,
-    getVisitCount,
-    getReportHome,
-    getTaskModuleState,
-    getCalendarList,
-} from '../../redux/action/home/home';
+  getHomeModuleList,
+  getHomeShowConfig,
+  getHomeTemplateConfig,
+  getModubleById,
+  getVisitCount,
+  getReportHome,
+  getTaskModuleState,
+  getCalendarList,
+} from "../../redux/action/home/home";
 
 import IndexCourseModule from "./indexModule/indexCourseModule";
 import IndexLiveModule from "./indexModule/indexLiveModule";
@@ -23,179 +23,197 @@ import IndexSonSiteModule from "./indexModule/indexSonSiteModule";
 import IndexRecommendModule from "./indexModule/indexRecommendModule";
 import IndexTeacherModule from "./indexModule/indexTeacherModule";
 import IndexFormModule from "./indexModule/indexForumModule";
-import IndexPayContentModule from "./indexModule/indexPayContentModule"
-import { IndexNotMore } from './indexComponent';
+import IndexPayContentModule from "./indexModule/indexPayContentModule";
+import { IndexNotMore } from "./indexComponent";
 
 class IndexComponent extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            homeModuleList: [],
-            taskState: {
-                display: false
-            },
-            taskList: [],
-            showNotMore: false
-        }
-    }
-
-    componentDidMount() {
-        let _this = this;
-        this.props.getTaskModuleState((res) => {
-            const { taskState } = _this.props;
-            _this.setState({
-                taskState
-            })
-        })
-        this.props.getHomeModuleList(() => {
-            const { homeModuleList } = _this.props;
-            _this.setState({
-                homeModuleList,
-            });
-            _this.timeoutShowNotMore();
-        });
-
-
-    }
-    timeoutShowNotMore = () => {
-        let _this = this;
-        setTimeout(() => {
-            _this.setState({
-                showNotMore: true
-            });
-        }, 3000);
-    }
-
-    renderByModuleList = () => {
-        const { homeModuleList } = this.state;
-        let result = homeModuleList.map((item, index) => {
-            // 模块类型 1推荐/精选 2项目培训 3课程 4讲师 5直播 6作品库 7智能推荐 10专区
-            switch (parseInt(item.type)) {
-                case 1: //精选推荐
-                    return <IndexRecommendModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 2://项目
-                    return <IndexTrainModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 3: //课程
-                    return <IndexCourseModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 4: //讲师
-                    return <IndexTeacherModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 5: //直播
-                    return <IndexLiveModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 6:  //案例或者作品
-                    return <IndexProductionModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 7: //智能推荐
-                    return <IndexSmartRecommendModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 8: //专辑
-                    return <IndexAlbumModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 9: //论坛
-                    return <IndexFormModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />
-                case 10:  //专区
-                    return <IndexSonSiteModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 11:  //新闻资讯
-                    return <IndexNewsModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                case 12:  //精品内容
-                    return <IndexPayContentModule
-                        key={index}
-                        moduleId={item.id}
-                        title={item.name}
-                    />;
-                default:
-                    return <div key={index}></div>;
-            }
-        });
-        return result;
-    }
-
-
-
-    render() {
-        console.log(this.state.homeModuleList);
-        const { taskState, showNotMore } = this.state;
-
-        return <div style={{ width: "100%", height: "100%", backgroundColor: "#f5f5f5", overflowY: "auto" }}>
-            {
-                taskState.display ?
-                    <IndexTaskModule /> : ""
-            }
-            {this.renderByModuleList()}
-            {
-                showNotMore ?
-                    <IndexNotMore /> : ""
-            }
-
-        </div>;
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      homeModuleList: [],
+      taskState: {
+        display: false,
+      },
+      taskList: [],
+      showNotMore: false,
+    };
+  }
+
+  componentDidMount() {
+    let _this = this;
+    this.props.getTaskModuleState((res) => {
+      const { taskState } = _this.props;
+      _this.setState({
+        taskState,
+      });
+    });
+    this.props.getHomeModuleList(() => {
+      const { homeModuleList } = _this.props;
+      _this.setState({
+        homeModuleList,
+      });
+      _this.timeoutShowNotMore();
+    });
+    let param = {
+        pageNo: 1,
+        pageSize: 20,
+        terminalName: "MOBILE",
+        typeName: "news",
+        relationId: "0",
+        level: '',
+      };
+  }
+  timeoutShowNotMore = () => {
+    let _this = this;
+    setTimeout(() => {
+      _this.setState({
+        showNotMore: true,
+      });
+    }, 3000);
+  };
+
+  renderByModuleList = () => {
+    const { homeModuleList } = this.state;
+    let result = homeModuleList.map((item, index) => {
+      // 模块类型 1推荐/精选 2项目培训 3课程 4讲师 5直播 6作品库 7智能推荐 10专区
+      switch (parseInt(item.type)) {
+        case 1: //精选推荐
+          return (
+            <IndexRecommendModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 2: //项目
+          return (
+            <IndexTrainModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 3: //课程
+          return (
+            <IndexCourseModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 4: //讲师
+          return (
+            <IndexTeacherModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 5: //直播
+          return (
+            <IndexLiveModule key={index} moduleId={item.id} title={item.name} />
+          );
+        case 6: //案例或者作品
+          return (
+            <IndexProductionModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 7: //智能推荐
+          return (
+            <IndexSmartRecommendModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 8: //专辑
+          return (
+            <IndexAlbumModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 9: //论坛
+          return (
+            <IndexFormModule key={index} moduleId={item.id} title={item.name} />
+          );
+        case 10: //专区
+          return (
+            <IndexSonSiteModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        case 11: //新闻资讯
+          return (
+            <IndexNewsModule key={index} moduleId={item.id} title={item.name} />
+          );
+        case 12: //精品内容
+          return (
+            <IndexPayContentModule
+              key={index}
+              moduleId={item.id}
+              title={item.name}
+            />
+          );
+        default:
+          return <div key={index}></div>;
+      }
+    });
+    return result;
+  };
+  
+  render() {
+    console.log(this.state.homeModuleList);
+    const { taskState, showNotMore } = this.state;
+
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          backgroundColor: "#f5f5f5",
+          overflowY: "auto",
+        }}
+      >
+        {taskState.display ? <IndexTaskModule /> : ""}
+        {this.renderByModuleList()}
+      </div>
+    );
+  }
 }
 
 function mapStateToProps(state, ownProps) {
-
-    return {
-        homeModuleList: state.home.homeModuleList,
-        // showInfo: state.home.homeShowInfo,
-        // moduleInfo: state.home.homeTemplateInfo,
-        // sign: state.myModel.signResult,
-        // userReportHome: state.home.userReportHome,
-        taskState: state.home.taskState,
-        taskList: state.home.taskList,
-    }
+  return {
+    homeModuleList: state.home.homeModuleList,
+    // showInfo: state.home.homeShowInfo,
+    // moduleInfo: state.home.homeTemplateInfo,
+    // sign: state.myModel.signResult,
+    // userReportHome: state.home.userReportHome,
+    taskState: state.home.taskState,
+    taskList: state.home.taskList,
+  };
 }
 
 function mapDispatchToProps(dispatch) {
-    return {
-        getHomeModuleList: (data, callback) => dispatch(getHomeModuleList(data, callback)),
-        //     getHomeShowConfig: (data, callback) => dispatch(getHomeShowConfig(data, callback)),
-        //     getHomeTemplateConfig: (data, callback) => dispatch(getHomeTemplateConfig(data, callback)),
-
-        //     getModubleById: (data, callback) => dispatch(getModubleById(data, callback)),
-        //     getVisitCount: (callback) => dispatch(getVisitCount(callback)),
-        //     getReportHome: (data, callback) => dispatch(getReportHome(data, callback)),
-        getTaskModuleState: (callback) => dispatch(getTaskModuleState(callback)),
-        getCalendarList: (data, callback) => dispatch(getCalendarList(data, callback)),
-    }
+  return {
+    getHomeModuleList: (data, callback) =>
+      dispatch(getHomeModuleList(data, callback)),
+    //     getHomeShowConfig: (data, callback) => dispatch(getHomeShowConfig(data, callback)),
+    //     getHomeTemplateConfig: (data, callback) => dispatch(getHomeTemplateConfig(data, callback)),
+
+    //     getModubleById: (data, callback) => dispatch(getModubleById(data, callback)),
+    //     getVisitCount: (callback) => dispatch(getVisitCount(callback)),
+    //     getReportHome: (data, callback) => dispatch(getReportHome(data, callback)),
+    getTaskModuleState: (callback) => dispatch(getTaskModuleState(callback)),
+    getCalendarList: (data, callback) =>
+      dispatch(getCalendarList(data, callback)),
+  };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(IndexComponent);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(IndexComponent);

src/components/indexComponent/indexBtnScroll/index.jsx

-import React, { Component } from 'react';
+import React, { Component } from "react";
 import "./style.less";
-import defaultIcon from '../../../common/iconImage/index-btn-icon.png';
+import defaultIcon from "../../../common/iconImage/index-btn-icon.png";
 import SimpleBar from "simplebar-react";
 import "simplebar/dist/simplebar.min.css";
 
-
 class IndexBtnScroll extends Component {
-    constructor(props) {
-        super(props)
-
-    }
-
-    componentDidMount() {
-
-    }
-
-
-    renderBtnByList = () => {
-        const { list, handleClick } = this.props;
-        let listLength = list.length;
-        let result = [];
-        if (listLength <= 3) {
-            result = list.map((item, index) => {
-                return <IndexBtnItem
-                    key={index}
-                    col={3}
-                    data={item}
-                    paddingBottom={40}
-                    onClick={() => handleClick(item)}
-                />;
-            })
-        } else if (listLength <= 4) {
-            result = list.map((item, index) => {
-                return <IndexBtnItem
-                    key={index}
-                    col={4}
-                    data={item}
-                    paddingBottom={40}
-                    onClick={() => handleClick(item)}
-                />;
-            })
-        } else {
-            result = list.map((item, index) => {
-                return <IndexBtnItem
-                    key={index}
-                    col={5}
-                    data={item}
-                    paddingBottom={
-                        (listLength > 5 && listLength < 10) || (listLength > 10 && index >= Math.ceil(listLength / 2)) ?
-                            16 : 40
-                    }
-                    onClick={() => handleClick(item)}
-                />;
-            })
-        }
-        return result;
-    }
-
-
-
-    render() {
-        const { list } = this.props;
-        let listLength = list.length;
-        console.log("首页按钮数据", list);
-        if (listLength <= 5 || listLength == 10) {
-            return <div className="index-btn-scroll-container">
-                <div className="index-btn-scroll-item-container">
-                    {this.renderBtnByList()}
-                </div>
-            </div>;
-        } else {
-            let itemWidth = (document.body.clientWidth - 60) / 5;
-            let scrollWidth = listLength < 10 ? listLength * itemWidth : Math.ceil(listLength / 2) * itemWidth;
-            let paddingBottom = (listLength > 5 && listLength < 10) || (listLength > 10) ? 16 : 0;
-
-            let scrollWrapHeight = listLength > 10 ? 348 : 174;
-            return <div className="index-btn-scroll-container" style={{ paddingBottom }}>
-                <div className="index-simple-scroll-bar-wrap" style={{ height: scrollWrapHeight }}>
-                   
-                        <SimpleBar
-                            className="index-btn-scroll-item-container"
-                            id="index-simple-scroll-bar-id"
-                            autoHide={false}
-                            style={{ height: scrollWrapHeight + 20 }}
-                        >
-                            {
-                                listLength < 10 ?
-                                    <div className="index-btn-scroll-single-wrap-container"
-                                        style={{ width: scrollWidth }}>
-                                        {this.renderBtnByList()}
-                                    </div> :
-                                    <div className="index-btn-scroll-two-wrap-container"
-                                        style={{ width: scrollWidth }}>
-                                        {this.renderBtnByList()}
-                                    </div>
-                            }
-                        </SimpleBar>
-                    </div>
-            </div>;
-        }
-
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {}
+
+  renderBtnByList = () => {
+    const { list, handleClick } = this.props;
+    let listLength = list.length;
+    let result = [];
+    result = list.map((item, index) => {
+      return (
+        <IndexBtnItem
+          key={index}
+          data={item}
+          paddingBottom={
+            (listLength > 5 && listLength < 10) ||
+            (listLength > 10 && index >= Math.ceil(listLength / 2))
+              ? 16
+              : 40
+          }
+          onClick={() => handleClick(item)}
+        />
+      );
+    });
+    return result;
+  };
+
+  render() {
+    const { list } = this.props;
+    let listLength = list.length;
+    console.log("首页按钮数据", list);
+    if (listLength <= 5 || listLength == 10) {
+      return (
+        <div className="index-btn-scroll-container">
+          <div className="index-btn-scroll-item-container">
+            {this.renderBtnByList()}
+          </div>
+        </div>
+      );
+    } else {
+      let paddingBottom =
+        (listLength > 5 && listLength < 10) || listLength > 10 ? 16 : 0;
+      return (
+        <div className="index-btn-scroll-container" style={{ paddingBottom }}>
+          <div className="index-simple-scroll-bar-wrap">
+            <div
+              className="index-btn-scroll-item-container"
+              id="index-simple-scroll-bar-id"
+              autoHide={false}
+            >
+              <div
+                className="index-btn-scroll-single-wrap-container"
+                style={{ width: "100%" }}
+              >
+                {this.renderBtnByList()}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
     }
+  }
 }
 export default IndexBtnScroll;
 
+const IndexBtnItem = ({ data, paddingBottom, onClick }) => {
+  let containerWidth = document.body.clientWidth - 60;
+  let itemWidth = "25%";
 
-const IndexBtnItem = ({ data, col, paddingBottom, onClick }) => {
-
-    let containerWidth = document.body.clientWidth - 60;
-    let itemWidth = col == 3 ? containerWidth / 3 : col == 4 ? containerWidth / 4 : containerWidth / 5;
-
-    return <div className="index-btn-scroll-common-item-container"
-        style={{ width: itemWidth, paddingBottom }}
-        onClick={onClick}
+  return (
+    <div
+      className="index-btn-scroll-common-item-container"
+      style={{ width: itemWidth, paddingBottom }}
+      onClick={onClick}
     >
-        <div className="index-btn-item-image">
-            <img src={data.imgPath || defaultIcon} alt="" />
-        </div>
-        <div className="index-btn-item-text">
-            {data.showName}
-        </div>
-    </div>;
-
-
-}
\ No newline at end of file
+      <div className="index-btn-item-image">
+        <img src={data.imgPath || defaultIcon} alt="" />
+      </div>
+      <div className="index-btn-item-text">{data.showName}</div>
+    </div>
+  );
+};

src/components/indexComponent/indexBtnScroll/style.css

+.singleLineOverflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-btn-scroll-container {
+  width: 100%;
+  padding: 16px 30px 0 30px;
+  background-color: #f5f5f5;
+}
+.index-btn-scroll-container .index-simple-scroll-bar-wrap {
+  width: 100%;
+  overflow: hidden;
+}
+.index-btn-scroll-container #index-simple-scroll-bar-id .simplebar-track {
+  left: 45%;
+  right: 45%;
+  background-color: rgba(66, 133, 244, 0.3);
+  height: 8px;
+  border-radius: 8px;
+  bottom: 20px;
+}
+.index-btn-scroll-container #index-simple-scroll-bar-id .simplebar-scrollbar {
+  top: 0;
+}
+.index-btn-scroll-container #index-simple-scroll-bar-id .simplebar-scrollbar:before {
+  background-color: #4285f4;
+  opacity: 1;
+  height: 8px;
+  border-radius: 8px;
+}
+.index-btn-scroll-container .index-btn-scroll-item-container {
+  width: 100%;
+}
+.index-btn-scroll-container .index-btn-scroll-item-container .index-btn-scroll-single-wrap-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 20px;
+}
+.index-btn-scroll-container .index-btn-scroll-item-container .index-btn-scroll-common-item-container {
+  vertical-align: middle;
+  height: 152px;
+  padding-bottom: 40px;
+}
+.index-btn-scroll-container .index-btn-scroll-item-container .index-btn-scroll-common-item-container .index-btn-item-image {
+  width: 100%;
+  text-align: center;
+}
+.index-btn-scroll-container .index-btn-scroll-item-container .index-btn-scroll-common-item-container .index-btn-item-image img {
+  width: 88px;
+  height: 88px;
+  border-radius: 100%;
+}
+.index-btn-scroll-container .index-btn-scroll-item-container .index-btn-scroll-common-item-container .index-btn-item-text {
+  width: 100%;
+  height: 32px;
+  text-align: center;
+  line-height: 32px;
+  font-size: 24px;
+  color: #333;
+  margin-top: 16px;
+  padding: 0 10px;
+}

src/components/indexComponent/indexBtnScroll/style.less

@@ -39,17 +39,14 @@
 
 
         .index-btn-scroll-single-wrap-container {
-            max-height: 176px;
-            padding-bottom: 20px;
-        }
-
-        .index-btn-scroll-two-wrap-container {
-            max-height: 352px;
+            display: flex;
+            flex-wrap: wrap;
+            
             padding-bottom: 20px;
         }
 
         .index-btn-scroll-common-item-container {
-            display: inline-block;
+           
             vertical-align: middle;
             height: 152px;
             padding-bottom: 40px;

src/components/indexComponent/indexComponent/index.jsx

-import React, { Fragment } from 'react';
+import React, { Fragment } from "react";
 import "./style.less";
 import { Rate, Icon } from "antd";
 import intl from "react-intl-universal";
@@ -16,621 +16,735 @@ import TrigleTagComponent from "../../../common/trigleTag";
 import albumListBg from "../../../common/iconImage/album-list-bg.png";
 import moment from "moment";
 
-
 // 首页的模块标题
 
 const IndexTitle = ({ title, onClick, hasMore, hasExchange }) => {
-    return <div className="index-module-title-container">
-        <div className="index-module-title-text">{title}</div>
-        {
-            hasMore ?
-                <div className="index-module-title-more-btn" onClick={onClick}>
-                    {intl.get("course27")}
-                    <Icon type="right" style={{ fontSize: 24 }} />
-                </div> : ""
-        }
-
-        {
-            hasExchange ?
-                <div className="index-module-title-exchange-btn" onClick={onClick}>
-                    <Icon type="sync" style={{ fontSize: 28, marginRight: 6 }} />
-                    {intl.get("changeBatch") || "换一批"}
-                </div> : ""
-        }
-
-    </div>;
-}
-
-
+  return (
+    <div className="index-module-title-container">
+      <div className="index-module-title-text">{title}</div>
+      {hasMore ? (
+        <div className="index-module-title-more-btn" onClick={onClick}>
+          {intl.get("course27")}
+          <Icon type="right" style={{ fontSize: 24 }} />
+        </div>
+      ) : (
+        ""
+      )}
+
+      {hasExchange ? (
+        <div className="index-module-title-exchange-btn" onClick={onClick}>
+          <Icon type="sync" style={{ fontSize: 28, marginRight: 6 }} />
+          {intl.get("changeBatch") || "换一批"}
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
 
 //首页的课程显示单项
 
 const IndexCourseItem = ({ data, onClick }) => {
-    let imageWidth = Math.floor(document.body.clientWidth * (266 / 750));
-    let imageHeight = Math.floor(imageWidth * (160 / 266));
-    imageWidth = imageWidth < 266 ? 266 : imageWidth;
-    imageHeight = imageHeight < 160 ? 160 : imageHeight;
-    return <div className="index-module-course-item-container">
-        <div className="index-module-course-content"
-            style={{ height: imageHeight, paddingLeft: imageWidth }}
-            onClick={onClick}
-        >
-            <img
-                src={data.image}
-                alt="图片加载失败"
-                className="index-module-course-content-image"
-                style={{ width: imageWidth, height: imageHeight }}
+  let imageWidth = Math.floor(document.body.clientWidth * (266 / 750));
+  let imageHeight = Math.floor(imageWidth * (160 / 266));
+  imageWidth = imageWidth < 266 ? 266 : imageWidth;
+  imageHeight = imageHeight < 160 ? 160 : imageHeight;
+  return (
+    <div className="index-module-course-item-container">
+      <div
+        className="index-module-course-content"
+        style={{ height: imageHeight, paddingLeft: imageWidth }}
+        onClick={onClick}
+      >
+        <img
+          src={data.image}
+          alt="图片加载失败"
+          className="index-module-course-content-image"
+          style={{ width: imageWidth, height: imageHeight }}
+        />
+        {parseInt(data.status) == 1 ? (
+          <div className="index-module-course-content-tag">
+            {intl.get("finished")}
+          </div>
+        ) : (
+          ""
+        )}
+
+        <div className="index-module-course-content-info">
+          <div
+            className="index-module-course-info-name"
+            style={{ WebkitBoxOrient: "vertical" }}
+          >
+            {data.name}
+          </div>
+          <div className="index-module-course-info-rate">
+            <Rate
+              allowHalf
+              defaultValue={data.rate}
+              disabled={true}
+              style={{ fontSize: 20, color: "#FF8400" }}
             />
-            {
-                parseInt(data.status) == 1 ?
-                    <div className="index-module-course-content-tag">
-                        {intl.get("finished")}
-                    </div> : ""
-            }
-
-            <div className="index-module-course-content-info">
-                <div className="index-module-course-info-name" style={{ WebkitBoxOrient: "vertical" }}>
-                    {data.name}
-                </div>
-                <div className="index-module-course-info-rate">
-                    <Rate allowHalf defaultValue={data.rate} disabled={true} style={{ fontSize: 20, color: "#FF8400" }} />
-                    <span>{func.setPointPositionInNumber(data.rate, 1)}</span>
-                </div>
-                <div className="index-module-course-info-text">
-
-                    {
-                        data.periodShow && parseFloat(data.period) > 0 ?
-                            <span style={{ marginRight: 20 }}>{data.period}{intl.get("period")}</span> : ""
-                    }
-
-                    {
-                        data.timeLen && parseInt(data.timeLen) > 0 ?
-                            <span >{func.formatCourseTime(data.timeLen)}</span> : ""
-                    }
-
-                </div>
-            </div>
+            <span>{func.setPointPositionInNumber(data.rate, 1)}</span>
+          </div>
+          <div className="index-module-course-info-text">
+            {data.periodShow && parseFloat(data.period) > 0 ? (
+              <span style={{ marginRight: 20 }}>
+                {data.period}
+                {intl.get("period")}
+              </span>
+            ) : (
+              ""
+            )}
+
+            {data.timeLen && parseInt(data.timeLen) > 0 ? (
+              <span>{func.formatCourseTime(data.timeLen)}</span>
+            ) : (
+              ""
+            )}
+          </div>
         </div>
-    </div>;
-}
+      </div>
+    </div>
+  );
+};
 
 // 首页查看更多单项
 
 const IndexToMore = ({ onClick }) => {
-
-    return <div className="index-module-to-more-container" onClick={onClick}>
-        {intl.get("common4")}
-        <Icon type="right" style={{ fontSize: 24 }} />
-    </div>;
-}
-
+  return (
+    <div className="index-module-to-more-container" onClick={onClick}>
+      {intl.get("common4")}
+      <Icon type="right" style={{ fontSize: 24 }} />
+    </div>
+  );
+};
 
 // 首页单项分界线
 
 const IndexModuleItemEdge = ({ noPadding, paddingLeft }) => {
-
-    return <div className="index-module-item-edge-container" style={
-        noPadding ? { padding: 0 } :
-            paddingLeft ?
-                { paddingLeft } :
-                {}
-    }>
-        <div className="index-module-item-edge"></div>
-    </div>;
-}
+  return (
+    <div
+      className="index-module-item-edge-container"
+      style={noPadding ? { padding: 0 } : paddingLeft ? { paddingLeft } : {}}
+    >
+      <div className="index-module-item-edge"></div>
+    </div>
+  );
+};
 
 // 首页模块背景
 
 const IndexModuleBg = ({ bgColor, children }) => {
-
-    return <div className="index-module-bg-container">
-        <div className="index-module-inside-bg-container" style={{ backgroundColor: bgColor ? bgColor : "#fff" }}>
-            {children}
-        </div>
-    </div>;
-}
+  return (
+    <div className="index-module-bg-container">
+      <div
+        className="index-module-inside-bg-container"
+        style={{ backgroundColor: bgColor ? bgColor : "#fff" }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
 
 // 首页智能推荐模块背景
 
 const IndexScrollModuleBg = ({ children }) => {
-
-    return <div className="index-module-scroll-bg-container">
-        <div className="index-module-scroll-inside-bg-container" >
-            {children}
-        </div>
-    </div>;
-}
-
+  return (
+    <div className="index-module-scroll-bg-container">
+      <div className="index-module-scroll-inside-bg-container">{children}</div>
+    </div>
+  );
+};
 
 // 首页直播模块单项
 
 const IndexLiveItem = ({ data, onClick }) => {
-    return <div className="index-module-live-item-container" onClick={onClick}>
-        {
-            parseInt(data.status) == 10 ? // status 10:未开始 30:直播中 40:直播回放 90:已结束
-                <div className="index-module-live-item-status-not-start">
-                    <div className="index-module-live-item-dot"></div>
-                    {intl.get("NotStarted")}
-                </div> : parseInt(data.status) == 30 ?
-                    <div className="index-module-live-item-view-number">
-                        <Icon type="align-left" style={{ fontSize: 24, color: "#FA6400", transform: "rotate(270deg)", marginRight: 16, marginTop: -6 }} />
-                        {parseInt(data.view) > 9999 ? "9999+" : data.view}{intl.get("common1")}
-                    </div>
-                    : parseInt(data.status) == 40 ?
-                        <div className="index-module-live-item-status-not-start" style={{ color: '#54C246' }}>
-                            <div className="index-module-live-item-dot" style={{ backgroundColor: '#54C246' }}></div>
-                            {intl.get("end")}
-                        </div>
-                        :
-                        <div className="index-module-live-item-end">
-                            <div className="index-module-live-item-dot"></div>
-                            {intl.get("Ended")}
-                        </div>
-        }
-
-        <div className="index-module-live-item-content-container">
-            <img
-                src={data.image}
-                alt="图片加载失败"
-                className="index-module-live-item-image"
-            />
-            <div className="index-module-live-item-info-container">
-                <div className="index-module-live-item-info-name">
-                    {data.name.length > 27 ? data.name.substr(0, 26) + "..." : data.name}
-                </div>
-                <div className="index-module-live-item-info-text" style={{ marginTop: 16 }}>
-                    {data.author}
-                </div>
-                <div className="index-module-live-item-info-text" style={{ marginTop: 8 }}>
-                    {intl.get("StartDate")}： {moment(data.startTime).format("YYYY-MM-DD HH:mm")}
-                </div>
-            </div>
+  return (
+    <div className="index-module-live-item-container" onClick={onClick}>
+      {parseInt(data.status) == 10 ? ( // status 10:未开始 30:直播中 40:直播回放 90:已结束
+        <div className="index-module-live-item-status-not-start">
+          <div className="index-module-live-item-dot"></div>
+          {intl.get("NotStarted")}
+        </div>
+      ) : parseInt(data.status) == 30 ? (
+        <div className="index-module-live-item-view-number">
+          <Icon
+            type="align-left"
+            style={{
+              fontSize: 24,
+              color: "#FA6400",
+              transform: "rotate(270deg)",
+              marginRight: 16,
+              marginTop: -6,
+            }}
+          />
+          {parseInt(data.view) > 9999 ? "9999+" : data.view}
+          {intl.get("common1")}
+        </div>
+      ) : parseInt(data.status) == 40 ? (
+        <div
+          className="index-module-live-item-status-not-start"
+          style={{ color: "#54C246" }}
+        >
+          <div
+            className="index-module-live-item-dot"
+            style={{ backgroundColor: "#54C246" }}
+          ></div>
+          {intl.get("end")}
+        </div>
+      ) : (
+        <div className="index-module-live-item-end">
+          <div className="index-module-live-item-dot"></div>
+          {intl.get("Ended")}
         </div>
-    </div>;
-}
+      )}
 
+      <div className="index-module-live-item-content-container">
+        <img
+          src={data.image}
+          alt="图片加载失败"
+          className="index-module-live-item-image"
+        />
+        <div className="index-module-live-item-info-container">
+          <div className="index-module-live-item-info-name">
+            {data.name.length > 27
+              ? data.name.substr(0, 26) + "..."
+              : data.name}
+          </div>
+          <div
+            className="index-module-live-item-info-text"
+            style={{ marginTop: 16 }}
+          >
+            {data.author}
+          </div>
+          <div
+            className="index-module-live-item-info-text"
+            style={{ marginTop: 8 }}
+          >
+            {intl.get("StartDate")}：{" "}
+            {moment(data.startTime).format("YYYY-MM-DD HH:mm")}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 // 首页专辑模块单项
 
 const IndexAlbumItem = ({ data, onClick }) => {
-
-    return <div className="index-module-album-item-container" onClick={onClick}>
-        <div className="index-module-album-content-container">
-            <img src={data.image} alt="图片加载失败" className="index-module-album-item-image" />
-            <img
-                src={albumListBg}
-                alt="图片加载失败"
-                className="index-module-album-item-image-bg"
+  return (
+    <div className="index-module-album-item-container" onClick={onClick}>
+      <div className="index-module-album-content-container">
+        <img
+          src={data.image}
+          alt="图片加载失败"
+          className="index-module-album-item-image"
+        />
+        <img
+          src={albumListBg}
+          alt="图片加载失败"
+          className="index-module-album-item-image-bg"
+        />
+        <div className="index-module-album-info-container">
+          <div className="index-module-album-item-info-name">{data.name}</div>
+
+          <div className="index-module-album-item-info-text">
+            <IndexAlbumItemTag status={data.status} />
+          </div>
+          <div className="index-module-album-item-info-text">
+            <IconfontD
+              code={"iconpersontimes"}
+              style={{ fontSize: 28, marginRight: 6 }}
             />
-            <div className="index-module-album-info-container">
-                <div className="index-module-album-item-info-name">
-                    {data.name}
-                </div>
-
-                <div className="index-module-album-item-info-text">
-                    <IndexAlbumItemTag status={data.status} />
-                </div><div className="index-module-album-item-info-text">
-                    <IconfontD code={"iconpersontimes"} style={{ fontSize: 28, marginRight: 6 }} />
-                    {data.viewNumber}
-                </div>
-                <div className="index-module-album-item-info-text">
-                    {
-                        data.status == 1 ?
-                            data.activityCount + (intl.get("albumActivityDoneText") || "门全") :
-                            intl.get("unLockTime") + data.updateTime
-                    }
-
-                </div>
-            </div>
+            {data.viewNumber}
+          </div>
+          <div className="index-module-album-item-info-text">
+            {data.status == 1
+              ? data.activityCount +
+                (intl.get("albumActivityDoneText") || "门全")
+              : intl.get("unLockTime") + data.updateTime}
+          </div>
         </div>
-    </div>;
-}
+      </div>
+    </div>
+  );
+};
 
 // 首页专辑单项状态标签
 
 const IndexAlbumItemTag = ({ status }) => {
-
-    let tagStyle = {
-        backgroundColor: status == 1 ? "#F1F1F9" : "#E2FEF2",
-        color: status == 1 ? "#B7BAC0" : "#54D39B",
-    };
-
-    return <div className="index-module-album-item-tag-container" style={tagStyle}>
-        {status == 1 ? intl.get("overedDone") : intl.get("overedLoading")}
-    </div>;
-}
+  let tagStyle = {
+    backgroundColor: status == 1 ? "#F1F1F9" : "#E2FEF2",
+    color: status == 1 ? "#B7BAC0" : "#54D39B",
+  };
+
+  return (
+    <div className="index-module-album-item-tag-container" style={tagStyle}>
+      {status == 1 ? intl.get("overedDone") : intl.get("overedLoading")}
+    </div>
+  );
+};
 
 // 首页新闻模块单项
 
 const IndexNewsItem = ({ data, onClick }) => {
-
-    let imageWidth = Math.floor(document.body.clientWidth * (220 / 750));
-    let imageHeight = Math.floor(imageWidth * (132 / 220));
-    imageWidth = imageWidth < 220 ? 220 : imageWidth;
-    imageHeight = imageHeight < 132 ? 132 : imageHeight;
-
-    return <div className="index-module-news-item-container" onClick={onClick}>
-        <div className="index-module-news-item-content-container" >
-            <div className="index-module-news-info-container" style={{ height: imageHeight }}>
-                <div className="index-module-news-item-info-name">
-                    {data.name}
-                </div>
-                <div className="index-module-news-item-info-text">
-                    <img src={newsClockIcon} alt="" className="index-module-news-item-info-icon" />
-                    {func.dateFormat(data.releaseTime, false, true)}
-                    <Icon type="eye" style={{ fontSize: 24, marginRight: 10, marginLeft: 60 }} />
-                    {data.number}
-                </div>
-
-
-            </div>
+  let imageWidth = Math.floor(document.body.clientWidth * (220 / 750));
+  let imageHeight = Math.floor(imageWidth * (132 / 220));
+  imageWidth = imageWidth < 220 ? 220 : imageWidth;
+  imageHeight = imageHeight < 132 ? 132 : imageHeight;
+
+  return (
+    <div className="index-module-news-item-container" onClick={onClick}>
+      <div className="index-module-news-item-content-container">
+        <img
+          src={data.image}
+          alt="图片加载失败"
+          className="index-module-news-item-image"
+          style={{ width: imageWidth, height: imageHeight }}
+        />
+        <div
+          className="index-module-news-info-container"
+          style={{ height: imageHeight }}
+        >
+          <div className="index-module-news-item-info-name">{data.name}</div>
+          <div className="index-module-news-item-info-text">
             <img
-                src={data.image}
-                alt="图片加载失败"
-                className="index-module-news-item-image"
-                style={{ width: imageWidth, height: imageHeight }}
+              src={newsClockIcon}
+              alt=""
+              className="index-module-news-item-info-icon"
+            />
+            {func.dateFormat(data.releaseTime, false, true)}
+            <Icon
+              type="eye"
+              style={{ fontSize: 24, marginRight: 10, marginLeft: 60 }}
             />
+            {data.number}
+          </div>
         </div>
-    </div>;
-}
-
+      </div>
+    </div>
+  );
+};
 
 // 首页培训显示单项
 
-const IndexTrainItem = ({ data, col, onClick, hasMarginTop, trainItemWidth, nameLine, style, textLeft, onlyEndTime }) => {
-
-    if (col == 1) {
-        return <div className="index-module-train-item-one-container" onClick={onClick}>
-            <img
-                src={data.image}
-                alt="图片加载失败"
-                className="index-module-train-one-item-image"
-
+const IndexTrainItem = ({
+  data,
+  col,
+  onClick,
+  hasMarginTop,
+  trainItemWidth,
+  nameLine,
+  style,
+  textLeft,
+  onlyEndTime,
+}) => {
+  if (col == 1) {
+    return (
+      <div className="index-module-train-item-one-container" onClick={onClick}>
+        <img
+          src={data.image}
+          alt="图片加载失败"
+          className="index-module-train-one-item-image"
+        />
+        <div className="index-module-train-one-content-container">
+          <div className="index-module-train-one-item-name">{data.name}</div>
+          <div className="index-module-train-one-item-text">
+            <IconfontD
+              code={"iconnumberofactivities"}
+              style={{ fontSize: 28, marginRight: 6 }}
             />
-            <div className="index-module-train-one-content-container">
-                <div className="index-module-train-one-item-name" >
-                    {data.name}
-                </div>
-                <div className="index-module-train-one-item-text">
-                    <IconfontD code={"iconnumberofactivities"} style={{ fontSize: 28, marginRight: 6 }} />
-                    {data.activityCount}{intl.get("AtLeastFinish2") || "个活动"}
-
-                </div>
-                <div className="index-module-train-one-item-text">
-                    {data.startTime} ~ {data.endTime}
-                </div>
-
-            </div>
-        </div>;
-    } else {
-        let itemWidth = (document.body.clientWidth - 60 - 26) / 2;
-        if (trainItemWidth) {
-            itemWidth = trainItemWidth;
-        }
-        return <div
-            className="index-module-train-item-two-container"
-            onClick={onClick}
-            style={{ width: itemWidth, marginTop: hasMarginTop }}
+            {data.activityCount}
+            {intl.get("AtLeastFinish2") || "个活动"}
+          </div>
+          <div className="index-module-train-one-item-text">
+            {data.startTime} ~ {data.endTime}
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    let itemWidth = (document.body.clientWidth - 60 - 26) / 2;
+    if (trainItemWidth) {
+      itemWidth = trainItemWidth;
+    }
+    return (
+      <div
+        className="index-module-train-item-two-container"
+        onClick={onClick}
+        style={{ width: itemWidth, marginTop: hasMarginTop }}
+      >
+        <img
+          src={data.image}
+          alt="图片加载失败"
+          className="index-module-train-two-item-image"
+          style={style || {}}
+        />
+        <div
+          className="index-module-train-two-content-container"
+          style={textLeft == 0 ? { paddingLeft: 0, paddingRight: 0 } : {}}
         >
-            <img
-                src={data.image}
-                alt="图片加载失败"
-                className="index-module-train-two-item-image"
-                style={style || {}}
-            />
-            <div className="index-module-train-two-content-container"
-                style={textLeft == 0 ? { paddingLeft: 0, paddingRight: 0 } : {}}>
-                {
-                    nameLine == 1 ?
-                        <div className="index-module-train-two-item-name-one-line">
-                            {data.name}
-                        </div>
-                        :
-                        <div className="index-module-train-two-item-name" style={{ WebkitBoxOrient: "vertical" }}>
-                            {data.name}
-                        </div>
-                }
-
-                <div className="index-module-train-two-item-text">
-                    <IconfontD code={"iconnumberofactivities"} style={{ fontSize: 28, marginRight: 6 }} />
-                    {data.activityCount}{intl.get("AtLeastFinish2") || "个活动"}
-                    {parseInt(data.enablePay) == 1 ?
-                        <TrigleTagComponent text={intl.get("payTheBill") || "付费"} /> : ""
-                    }
-                </div>
-                <div className="index-module-train-two-item-text">
-                    {
-                        onlyEndTime ?
-                            intl.get("DeadlineTime") + "：" + data.endTime :
-                            data.startTime + "~" + data.endTime
-
-                    }
-
-                </div>
-
+          {nameLine == 1 ? (
+            <div className="index-module-train-two-item-name-one-line">
+              {data.name}
             </div>
-        </div>;
-    }
+          ) : (
+            <div
+              className="index-module-train-two-item-name"
+              style={{ WebkitBoxOrient: "vertical" }}
+            >
+              {data.name}
+            </div>
+          )}
 
-}
+          <div className="index-module-train-two-item-text">
+            <IconfontD
+              code={"iconnumberofactivities"}
+              style={{ fontSize: 28, marginRight: 6 }}
+            />
+            {data.activityCount}
+            {intl.get("AtLeastFinish2") || "个活动"}
+            {parseInt(data.enablePay) == 1 ? (
+              <TrigleTagComponent text={intl.get("payTheBill") || "付费"} />
+            ) : (
+              ""
+            )}
+          </div>
+          <div className="index-module-train-two-item-text">
+            {onlyEndTime
+              ? intl.get("DeadlineTime") + "：" + data.endTime
+              : data.startTime + "~" + data.endTime}
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
 
 //首页作品单项
 
 const IndexProductionItem = ({ data, onClick }) => {
-
-    let imageWidth = Math.floor(document.body.clientWidth * (266 / 750));
-    let imageHeight = Math.floor(imageWidth * (160 / 266));
-    imageWidth = imageWidth < 266 ? 266 : imageWidth;
-    imageHeight = imageHeight < 160 ? 160 : imageHeight;
-
-    if (data.image) {
-        return <div className="index-module-production-item-container">
-            <div className="index-module-production-item-content-container"
-                style={{ height: imageHeight, paddingLeft: imageWidth }}
-                onClick={onClick}
+  let imageWidth = Math.floor(document.body.clientWidth * (266 / 750));
+  let imageHeight = Math.floor(imageWidth * (160 / 266));
+  imageWidth = imageWidth < 266 ? 266 : imageWidth;
+  imageHeight = imageHeight < 160 ? 160 : imageHeight;
+
+  if (data.image) {
+    return (
+      <div className="index-module-production-item-container">
+        <div
+          className="index-module-production-item-content-container"
+          style={{ height: imageHeight, paddingLeft: imageWidth }}
+          onClick={onClick}
+        >
+          <img
+            src={data.image}
+            alt="图片加载失败"
+            className="index-module-production-item-image"
+            style={{ width: imageWidth, height: imageHeight }}
+          />
+          <div className="index-module-production-content-info">
+            <div
+              className="index-module-production-info-name"
+              style={{ WebkitBoxOrient: "vertical" }}
             >
-                <img
-                    src={data.image}
-                    alt="图片加载失败"
-                    className="index-module-production-item-image"
-                    style={{ width: imageWidth, height: imageHeight }}
-                />
-                <div className="index-module-production-content-info">
-                    <div className="index-module-production-info-name" style={{ WebkitBoxOrient: "vertical" }}>
-                        {data.name}
-                    </div>
-                    <div className="index-module-production-info-text">
-                        {data.author}
-                    </div>
-                    <div className="index-module-production-info-text">
-                        <span style={{ marginRight: 48 }}>{data.startTime}</span>
-                        <IconfontD code={"iconreadingtimes"} style={{ fontSize: 28, marginRight: 10 }} />
-                        <span style={{ marginRight: 24 }}>{data.viewNumber}</span>
-                        <IconfontD code={"iconnumberoflikes"} style={{ fontSize: 28, marginRight: 10 }} />
-                        {data.praiseNumber}
-                    </div>
-                </div>
+              {data.name}
+            </div>
+            <div className="index-module-production-info-text">
+              {data.author}
+            </div>
+            <div className="index-module-production-info-text">
+              <span style={{ marginRight: 48 }}>{data.startTime}</span>
+              <IconfontD
+                code={"iconreadingtimes"}
+                style={{ fontSize: 28, marginRight: 10 }}
+              />
+              <span style={{ marginRight: 24 }}>{data.viewNumber}</span>
+              <IconfontD
+                code={"iconnumberoflikes"}
+                style={{ fontSize: 28, marginRight: 10 }}
+              />
+              {data.praiseNumber}
             </div>
-        </div>;
-    } else {
-        return <div className="index-module-production-item-container">
-            <div className="index-module-production-item-content-container"
-                onClick={onClick}
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="index-module-production-item-container">
+        <div
+          className="index-module-production-item-content-container"
+          onClick={onClick}
+        >
+          <div
+            className="index-module-production-content-info"
+            style={{ paddingLeft: 16 }}
+          >
+            <div className="index-module-production-content-name-prefix"></div>
+            <div
+              className="index-module-production-info-name"
+              style={{ WebkitBoxOrient: "vertical" }}
             >
-                <div className="index-module-production-content-info" style={{ paddingLeft: 16 }}>
-                    <div className="index-module-production-content-name-prefix"></div>
-                    <div className="index-module-production-info-name"
-                        style={{ WebkitBoxOrient: "vertical" }}
-                    >
-                        {data.name}
-                    </div>
-                    <div className="index-module-production-info-text-container">
-                        <div className="index-module-production-info-author">
-                            {data.author}
-                        </div>
-                        <div className="index-module-production-info-other">
-                            <span style={{ marginRight: 24 }}>{data.startTime}</span>
-                            <IconfontD code={"iconreadingtimes"} style={{ fontSize: 28, marginRight: 10 }} />
-                            <span style={{ marginRight: 24 }}>{data.viewNumber}</span>
-                            <IconfontD code={"iconnumberoflikes"} style={{ fontSize: 28, marginRight: 10 }} />
-                            {data.praiseNumber}
-                        </div>
-
-                    </div>
-
-                </div>
+              {data.name}
             </div>
-        </div>;
-    }
-}
+            <div className="index-module-production-info-text-container">
+              <div className="index-module-production-info-author">
+                {data.author}
+              </div>
+              <div className="index-module-production-info-other">
+                <span style={{ marginRight: 24 }}>{data.startTime}</span>
+                <IconfontD
+                  code={"iconreadingtimes"}
+                  style={{ fontSize: 28, marginRight: 10 }}
+                />
+                <span style={{ marginRight: 24 }}>{data.viewNumber}</span>
+                <IconfontD
+                  code={"iconnumberoflikes"}
+                  style={{ fontSize: 28, marginRight: 10 }}
+                />
+                {data.praiseNumber}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
 
 // 首页智能推荐单项
 
-
-
 const IndexSmartRecommendItem = ({ data, onClick, tagText }) => {
-
-    return <div className="index-module-smartRecommend-one-container" onClick={onClick}>
-        <img
-            src={data.image}
-            alt="图片加载失败"
-            className="index-module-smartRecommend-one-image"
-        />
-        <div className="index-module-smartRecommend-one-text">
-            {data.name}
-        </div>
-        <div className="index-module-smartRecommend-tag-text">{tagText}</div>
-    </div>;
-}
+  return (
+    <div
+      className="index-module-smartRecommend-one-container"
+      onClick={onClick}
+    >
+      <img
+        src={data.image}
+        alt="图片加载失败"
+        className="index-module-smartRecommend-one-image"
+      />
+      <div className="index-module-smartRecommend-one-text">{data.name}</div>
+      <div className="index-module-smartRecommend-tag-text">{tagText}</div>
+    </div>
+  );
+};
 
 // 首页今日任务单项
 
 const IndexTaskItem = ({ data, onClick }) => {
-
-    const imageArr = ["", homeTaskTrain, homeTaskCourse, homeTaskHomework, homeTaskTest, homeTaskSurvey, homeTaskLive, homeTaskAlbum];
-    const text1 = intl.get("goStudy");
-    const text2 = intl.get("toJoin") || "去参加";
-    const text3 = intl.get("toWatch") || "去观看";
-    const text4 = intl.get("toComplete") || "去完成";
-    const textArr = ["", text2, text1, text4, text2, text2, text3, text1];
-    return <div className="index-module-task-item-container" onClick={onClick}>
-        <div className="index-module-task-item-content-container">
-            <img src={imageArr[parseInt(data.taskType)]} alt="图片加载失败" className="index-module-item-image" />
-            <div className="index-module-task-item-info">
-                {data.name}
-            </div>
-            <div className="index-module-task-item-btn">
-                {textArr[parseInt(data.taskType)]}
-            </div>
+  const imageArr = [
+    "",
+    homeTaskTrain,
+    homeTaskCourse,
+    homeTaskHomework,
+    homeTaskTest,
+    homeTaskSurvey,
+    homeTaskLive,
+    homeTaskAlbum,
+  ];
+  const text1 = intl.get("goStudy");
+  const text2 = intl.get("toJoin") || "去参加";
+  const text3 = intl.get("toWatch") || "去观看";
+  const text4 = intl.get("toComplete") || "去完成";
+  const textArr = ["", text2, text1, text4, text2, text2, text3, text1];
+  return (
+    <div className="index-module-task-item-container" onClick={onClick}>
+      <div className="index-module-task-item-content-container">
+        <img
+          src={imageArr[parseInt(data.taskType)]}
+          alt="图片加载失败"
+          className="index-module-item-image"
+        />
+        <div className="index-module-task-item-info">{data.name}</div>
+        <div className="index-module-task-item-btn">
+          {textArr[parseInt(data.taskType)]}
         </div>
-    </div>;
-}
-
-
-
+      </div>
+    </div>
+  );
+};
 
 // 首页专区单项
 
-const defaultSonSiteImage = "https://customproject.oss-cn-shanghai.aliyuncs.com/yzphoto/site_defalut_logo.png";
+const defaultSonSiteImage =
+  "https://customproject.oss-cn-shanghai.aliyuncs.com/yzphoto/site_defalut_logo.png";
 
 const IndexSonSiteItem = ({ data, mode, onClick }) => {
-
-    if (mode == 1) {
-        return <div className="index-module-son-site-item-one-container">
-            <div className="index-module-son-site-item-content-one-container">
-                <img src={data.image || defaultSonSiteImage} className="index-module-son-site-item-one-image" />
-                <div className="index-module-son-site-item-info">
-                    <div className="index-module-son-site-item-name">
-                        {data.name}
-                    </div>
-                    <div className="index-module-son-site-item-btn" onClick={onClick}>
-                        {intl.get("enterText") || "进入"}
-                    </div>
-                </div>
+  if (mode == 1) {
+    return (
+      <div className="index-module-son-site-item-one-container">
+        <div className="index-module-son-site-item-content-one-container">
+          <img
+            src={data.image || defaultSonSiteImage}
+            className="index-module-son-site-item-one-image"
+          />
+          <div className="index-module-son-site-item-info">
+            <div className="index-module-son-site-item-name">{data.name}</div>
+            <div className="index-module-son-site-item-btn" onClick={onClick}>
+              {intl.get("enterText") || "进入"}
             </div>
-        </div>;
-    } else {
-        return <div className="index-module-son-site-item-two-container">
-            <div className="index-module-son-site-item-content-two-container">
-                <img src={data.image || defaultSonSiteImage} alt="图片加载失败" className="index-module-son-site-item-two-image" />
-                <div className="index-module-son-site-item-two-name">
-                    {data.name}
-                </div>
-                <div className="index-module-son-site-item-two-btn" onClick={onClick}>
-                    {intl.get("enterText") || "进入"}
-                </div>
-            </div>
-        </div>;
-    }
-
-
-}
-
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="index-module-son-site-item-two-container">
+        <div className="index-module-son-site-item-content-two-container">
+          <img
+            src={data.image || defaultSonSiteImage}
+            alt="图片加载失败"
+            className="index-module-son-site-item-two-image"
+          />
+          <div className="index-module-son-site-item-two-name">{data.name}</div>
+          <div className="index-module-son-site-item-two-btn" onClick={onClick}>
+            {intl.get("enterText") || "进入"}
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
 
 // 首页精选推荐单项
 
 const IndexRecommendItem = ({ data, onClick, mode }) => {
-
-    let imageHeight = (document.body.clientWidth-60) * (194 / 690);
-    if (mode > 1) {
-        imageHeight = 180
-    }
-    return <div className="index-module-recommend-item-container" onClick={onClick}>
-        <img
-            src={data.image}
-            alt="图片加载失败"
-            style={{ height: imageHeight }}
-            className="index-module-recommend-item-image"
-        />
-        <div className="index-module-recommend-content-container">
-            {data.name}
-        </div>
-    </div>;
-}
-
+  let imageHeight = (document.body.clientWidth - 60) * (194 / 690);
+  if (mode > 1) {
+    imageHeight = 180;
+  }
+  return (
+    <div className="index-module-recommend-item-container" onClick={onClick}>
+      <img
+        src={data.image}
+        alt="图片加载失败"
+        style={{ height: imageHeight }}
+        className="index-module-recommend-item-image"
+      />
+      <div className="index-module-recommend-content-container">
+        {data.name}
+      </div>
+    </div>
+  );
+};
 
 // 首页讲师单项
 
-
 const IndexTeacherItem = ({ data, onClick }) => {
-
-    return <div className="index-module-teacher-item-container" onClick={onClick}>
-        <img
-            src={data.image}
-            alt="图片加载失败"
-            className="index-module-teacher-item-image"
-        />
-        <div className="index-module-teacher-item-name">
-            {data.name}
-        </div>
-        <div className="index-module-teacher-item-text" style={{ WebkitBoxOrient: "vertical" }}>
-            {data.position}
-        </div>
-    </div>;
-}
+  return (
+    <div className="index-module-teacher-item-container" onClick={onClick}>
+      <img
+        src={data.image}
+        alt="图片加载失败"
+        className="index-module-teacher-item-image"
+      />
+      <div className="index-module-teacher-item-name">{data.name}</div>
+      <div
+        className="index-module-teacher-item-text"
+        style={{ WebkitBoxOrient: "vertical" }}
+      >
+        {data.position}
+      </div>
+    </div>
+  );
+};
 
 // 首页论坛单项
 
 const IndexModuleForumItem = ({ data, onClick }) => {
-
-    let imageHeight = document.body.clientWidth * (194 / 750);
-
-    return <div className="index-module-forum-item-container" onClick={onClick}>
-        <img src={data.image} alt=""
-            className="index-module-forum-item-image"
-            style={{ height: imageHeight }}
-        />
-    </div>;
-}
-
+  let imageHeight = document.body.clientWidth * (194 / 750);
+
+  return (
+    <div className="index-module-forum-item-container" onClick={onClick}>
+      <img
+        src={data.image}
+        alt=""
+        className="index-module-forum-item-image"
+        style={{ height: imageHeight }}
+      />
+    </div>
+  );
+};
 
 // 首页精品内容单项
 
 const IndexModulePayContentItem = ({ data, onClick }) => {
+  return (
+    <div className="index-module-buy-content-item-container" onClick={onClick}>
+      <div className="index-module-buy-content-item-image-container">
+        <img
+          src={data.image}
+          alt=""
+          className="index-module-buy-content-item-image"
+        />
+      </div>
 
-
-
-    return <div className="index-module-buy-content-item-container" onClick={onClick}>
-        <div className="index-module-buy-content-item-image-container">
-            <img src={data.image} alt=""
-                className="index-module-buy-content-item-image"
-            />
-
+      <div className="index-module-buy-content-item-info-container">
+        <div
+          className="index-module-buy-content-item-name"
+          style={{ WebkitBoxOrient: "vertical" }}
+        >
+          {data.name}
         </div>
-
-        <div className="index-module-buy-content-item-info-container">
-            <div className="index-module-buy-content-item-name" style={{ WebkitBoxOrient: "vertical" }}>
-                {data.name}
-            </div>
-            <div className="index-module-buy-content-item-price-container" >
-                <div className="index-module-buy-content-item-present-price">
-                    <span>{data.presentPrice}</span>{window.virtualCurrencyUnit}
-                </div>
-                {
-                    data.originalPrice &&false?
-                        <div className="index-module-buy-content-item-original-price">
-                            {data.originalPrice}{window.virtualCurrencyUnit}
-                        </div> : ""
-                }
-
+        <div className="index-module-buy-content-item-price-container">
+          <div className="index-module-buy-content-item-present-price">
+            <span>{data.presentPrice}</span>
+            {window.virtualCurrencyUnit}
+          </div>
+          {data.originalPrice && false ? (
+            <div className="index-module-buy-content-item-original-price">
+              {data.originalPrice}
+              {window.virtualCurrencyUnit}
             </div>
+          ) : (
+            ""
+          )}
         </div>
-    </div>;
-}
-
+      </div>
+    </div>
+  );
+};
 
 const IndexNotMore = ({ text, backgroundColor = "#f5f5f5" }) => {
-
-    return <div className="index-module-not-more-container" style={backgroundColor ? { backgroundColor } : {}}>
-        <div className="index-module-not-more-bg">
-            <div className="index-module-not-more-line"></div>
-            <div className="index-module-not-more-text">
-                {text || intl.get("PublishKey47")}
-            </div>
+  return (
+    <div
+      className="index-module-not-more-container"
+      style={backgroundColor ? { backgroundColor } : {}}
+    >
+      <div className="index-module-not-more-bg">
+        <div className="index-module-not-more-line"></div>
+        <div className="index-module-not-more-text">
+          {text || intl.get("PublishKey47")}
         </div>
-
-    </div>;
-}
-
+      </div>
+    </div>
+  );
+};
 
 export {
-    IndexTitle,
-    IndexToMore,
-    IndexNotMore,
-    IndexModuleItemEdge,
-    IndexModuleBg,
-    IndexScrollModuleBg,
-    IndexCourseItem,
-    IndexLiveItem,
-    IndexAlbumItem,
-    IndexNewsItem,
-    IndexTrainItem,
-    IndexProductionItem,
-    IndexSmartRecommendItem,
-    IndexTaskItem,
-    IndexSonSiteItem,
-    IndexRecommendItem,
-    IndexTeacherItem,
-    IndexModuleForumItem,
-    IndexModulePayContentItem
-};
\ No newline at end of file
+  IndexTitle,
+  IndexToMore,
+  IndexNotMore,
+  IndexModuleItemEdge,
+  IndexModuleBg,
+  IndexScrollModuleBg,
+  IndexCourseItem,
+  IndexLiveItem,
+  IndexAlbumItem,
+  IndexNewsItem,
+  IndexTrainItem,
+  IndexProductionItem,
+  IndexSmartRecommendItem,
+  IndexTaskItem,
+  IndexSonSiteItem,
+  IndexRecommendItem,
+  IndexTeacherItem,
+  IndexModuleForumItem,
+  IndexModulePayContentItem,
+};

src/components/indexComponent/indexComponent/style.css

+.singleLineOverflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-title-container {
+  width: 100%;
+  position: relative;
+}
+.index-module-title-container .index-module-title-text {
+  width: 100%;
+  font-size: 36px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 44px;
+  padding: 32px 130px 32px 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-title-container .index-module-title-more-btn {
+  height: 108px;
+  line-height: 108px;
+  padding: 0 10px;
+  font-size: 28px;
+  color: #999;
+  font-weight: 400;
+  position: absolute;
+  top: 0;
+  right: 30px;
+}
+.index-module-title-container .index-module-title-exchange-btn {
+  line-height: 1;
+  padding: 8px 20px;
+  font-size: 28px;
+  color: #4285f4;
+  font-weight: 400;
+  position: absolute;
+  top: 32px;
+  right: 30px;
+  border: 2px solid #4285f4;
+  border-radius: 24px;
+  vertical-align: middle;
+}
+.index-module-course-item-container {
+  width: 100%;
+  padding: 24px;
+}
+.index-module-course-item-container .index-module-course-content {
+  width: 100%;
+  position: relative;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-image {
+  border-radius: 10px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-tag {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 8px;
+  background: linear-gradient(138deg, #ffb73d 0%, #ff9948 100%);
+  box-shadow: 0px 2px 24px 0px rgba(248, 132, 21, 0.2);
+  border-radius: 14px 0px 14px 0px;
+  font-size: 20px;
+  color: #fff;
+  font-weight: 400;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-info {
+  width: 100%;
+  padding-left: 20px;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-info .index-module-course-info-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  max-height: 80px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-info .index-module-course-info-rate {
+  width: 100%;
+  height: 32px;
+  margin-top: 8px;
+  line-height: 32px;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-info .index-module-course-info-rate span {
+  font-size: 24px;
+  color: #ff8400;
+  margin-left: 6px;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-info .index-module-course-info-text {
+  width: 100%;
+  margin-top: 8px;
+}
+.index-module-course-item-container .index-module-course-content .index-module-course-content-info .index-module-course-info-text span {
+  font-size: 24px;
+  color: #9b9b9b;
+}
+.index-module-to-more-container {
+  width: 100%;
+  height: 40px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 40px;
+  text-align: center;
+  margin: 24px 0;
+}
+.index-module-item-edge-container {
+  width: 100%;
+  padding: 0 30px;
+}
+.index-module-item-edge-container .index-module-item-edge {
+  width: 100%;
+  height: 2px;
+  background-color: #f0f0f0;
+}
+.index-module-bg-container {
+  width: 100%;
+  padding: 0 30px;
+}
+.index-module-bg-container .index-module-inside-bg-container {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 100%;
+  padding: 8px 0;
+}
+.index-module-scroll-bg-container {
+  width: 100%;
+  padding: 0 0 0 30px;
+}
+.index-module-scroll-bg-container .index-module-scroll-inside-bg-container {
+  border-radius: 10px;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.index-module-live-item-container {
+  width: 100%;
+  padding: 24px 30px;
+}
+.index-module-live-item-container .index-module-live-item-view-number {
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  font-size: 24px;
+  color: #e9650d;
+  font-weight: 400;
+}
+.index-module-live-item-container .index-module-live-item-status-not-start {
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  font-size: 24px;
+  color: #4285f4;
+  font-weight: 400;
+  position: relative;
+  padding-left: 30px;
+}
+.index-module-live-item-container .index-module-live-item-status-not-start .index-module-live-item-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 100%;
+  position: absolute;
+  left: 0;
+  top: 10px;
+  background-color: #4285f4;
+}
+.index-module-live-item-container .index-module-live-item-end {
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  font-size: 24px;
+  color: #666;
+  font-weight: 400;
+  position: relative;
+  padding-left: 30px;
+}
+.index-module-live-item-container .index-module-live-item-end .index-module-live-item-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 100%;
+  position: absolute;
+  left: 0;
+  top: 10px;
+  background-color: #666;
+}
+.index-module-live-item-container .index-module-live-item-content-container {
+  width: 100%;
+  margin-top: 20px;
+  position: relative;
+  padding-left: 96px;
+}
+.index-module-live-item-container .index-module-live-item-content-container .index-module-live-item-image {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+  border-radius: 100%;
+  left: 0;
+  top: 0;
+}
+.index-module-live-item-container .index-module-live-item-content-container .index-module-live-item-info-container {
+  width: 100%;
+  padding-left: 40px;
+}
+.index-module-live-item-container .index-module-live-item-content-container .index-module-live-item-info-container .index-module-live-item-info-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-live-item-container .index-module-live-item-content-container .index-module-live-item-info-container .index-module-live-item-info-text {
+  width: 100%;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999;
+  line-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-album-item-container {
+  width: 100%;
+  padding: 24px 30px;
+}
+.index-module-album-item-container .index-module-album-content-container {
+  width: 100%;
+  position: relative;
+  padding-left: 294px;
+}
+.index-module-album-item-container .index-module-album-content-container .index-module-album-item-image {
+  border-radius: 10px;
+  width: 240px;
+  height: 240px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+.index-module-album-item-container .index-module-album-content-container .index-module-album-item-image-bg {
+  height: 190px;
+  position: absolute;
+  top: 26px;
+  left: 64px;
+  z-index: 1;
+}
+.index-module-album-item-container .index-module-album-content-container .index-module-album-info-container {
+  width: 100%;
+  height: 240px;
+}
+.index-module-album-item-container .index-module-album-content-container .index-module-album-info-container .index-module-album-item-info-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  max-height: 80px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-album-item-container .index-module-album-content-container .index-module-album-info-container .index-module-album-item-info-text {
+  width: 100%;
+  margin-top: 16px;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999;
+  line-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-album-item-tag-container {
+  width: fit-content;
+  line-height: 36px;
+  padding: 0 12px;
+  font-size: 24px;
+  border-radius: 10px;
+}
+.index-module-news-item-container {
+  width: 100%;
+  padding: 24px 30px;
+}
+.index-module-news-item-container .index-module-news-item-content-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.index-module-news-item-container .index-module-news-item-content-container .index-module-news-info-container {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.index-module-news-item-container .index-module-news-item-content-container .index-module-news-info-container .index-module-news-item-info-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  max-height: 80px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-news-item-container .index-module-news-item-content-container .index-module-news-info-container .index-module-news-item-info-text {
+  width: 100%;
+  margin-top: 16px;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999;
+  line-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-news-item-container .index-module-news-item-content-container .index-module-news-info-container .index-module-news-item-info-text .index-module-news-item-info-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  margin-top: -5px;
+}
+.index-module-news-item-container .index-module-news-item-content-container .index-module-news-item-image {
+  border-radius: 10px;
+}
+.index-module-train-item-one-container {
+  width: 100%;
+}
+.index-module-train-item-one-container .index-module-train-one-item-image {
+  width: 100%;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.index-module-train-item-one-container .index-module-train-one-content-container {
+  width: 100%;
+  background-color: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 16px 20px;
+}
+.index-module-train-item-one-container .index-module-train-one-content-container .index-module-train-one-item-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  max-height: 80px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-train-item-one-container .index-module-train-one-content-container .index-module-train-one-item-text {
+  width: 100%;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999;
+  line-height: 32px;
+  margin-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-train-item-two-container {
+  width: 100%;
+  display: inline-block;
+}
+.index-module-train-item-two-container .index-module-train-two-item-image {
+  width: 100%;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.index-module-train-item-two-container .index-module-train-two-content-container {
+  width: 100%;
+  background-color: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 16px 20px;
+}
+.index-module-train-item-two-container .index-module-train-two-content-container .index-module-train-two-item-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-train-item-two-container .index-module-train-two-content-container .index-module-train-two-item-name-one-line {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-train-item-two-container .index-module-train-two-content-container .index-module-train-two-item-text {
+  width: 100%;
+  font-size: 24px;
+  font-weight: 400;
+  color: #999;
+  line-height: 32px;
+  margin-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-train-item-two-container:nth-child(even) {
+  margin-left: 26px;
+}
+.index-module-train-item-two-container:nth-child(n > 2) {
+  margin-top: 24px;
+}
+.index-module-production-item-container {
+  width: 100%;
+  padding: 26px;
+}
+.index-module-production-item-container .index-module-production-item-content-container {
+  width: 100%;
+  position: relative;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-item-image {
+  border-radius: 10px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info {
+  width: 100%;
+  padding-left: 20px;
+  position: relative;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info .index-module-production-content-name-prefix {
+  width: 6px;
+  height: 24px;
+  position: absolute;
+  left: 0;
+  top: 8px;
+  background-color: #4285f4;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info .index-module-production-info-name {
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 40px;
+  max-height: 80px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info .index-module-production-info-text {
+  width: 100%;
+  margin-top: 8px;
+  font-size: 24px;
+  color: #9b9b9b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info .index-module-production-info-text-container {
+  width: 100%;
+  margin-top: 8px;
+  padding-left: 297px;
+  position: relative;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info .index-module-production-info-text-container .index-module-production-info-author {
+  width: 277px;
+  font-size: 24px;
+  color: #9b9b9b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.index-module-production-item-container .index-module-production-item-content-container .index-module-production-content-info .index-module-production-info-text-container .index-module-production-info-other {
+  width: 100%;
+  font-size: 24px;
+  color: #9b9b9b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-smartRecommend-one-container {
+  width: 100%;
+  background-color: #fff;
+  position: relative;
+  padding: 22px 172px 22px 140px;
+}
+.index-module-smartRecommend-one-container .index-module-smartRecommend-one-image {
+  width: 140px;
+  height: 84px;
+  border-radius: 6px;
+  position: absolute;
+  left: 0;
+  top: 22px;
+}
+.index-module-smartRecommend-one-container .index-module-smartRecommend-one-text {
+  width: 100%;
+  height: 84px;
+  line-height: 84px;
+  font-size: 28px;
+  color: #333;
+  font-weight: 400;
+  padding: 0 0 0 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-smartRecommend-one-container .index-module-smartRecommend-tag-text {
+  position: absolute;
+  right: 0;
+  top: 46px;
+  z-index: 2;
+  height: 36px;
+  line-height: 34px;
+  border: 2px solid rgba(151, 151, 151, 0.5);
+  padding: 0 8px;
+  font-size: 24px;
+  color: #999;
+  font-weight: 400;
+  border-radius: 4px;
+}
+.index-module-smartRecommend-two-container {
+  width: 100%;
+  height: 114px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding-left: 50%;
+  position: relative;
+}
+.index-module-smartRecommend-two-container .index-module-smartRecommend-two-image {
+  width: 50%;
+  height: 114px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+.index-module-smartRecommend-two-container .index-module-smartRecommend-two-tag-text {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 28px;
+  line-height: 26px;
+  background-color: rgba(0, 0, 0, 0.85);
+  padding: 0 10px;
+  font-size: 20px;
+  color: #fff;
+  font-weight: 400;
+  border-radius: 4px;
+  z-index: 2;
+}
+.index-module-smartRecommend-two-container .index-module-smartRecommend-two-text {
+  width: 100%;
+  line-height: 36px;
+  font-size: 28px;
+  color: #333;
+  font-weight: 400;
+  padding: 8px 10px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-task-item-container {
+  width: 100%;
+  padding: 24px 20px;
+}
+.index-module-task-item-container .index-module-task-item-content-container {
+  width: 100%;
+  height: 56px;
+  padding-left: 56px;
+  position: relative;
+}
+.index-module-task-item-container .index-module-task-item-content-container .index-module-item-image {
+  width: 56px;
+  height: 56px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.index-module-task-item-container .index-module-task-item-content-container .index-module-task-item-info {
+  width: 100%;
+  height: 56px;
+  padding-left: 20px;
+  padding-right: 154px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #333333;
+  line-height: 56px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-task-item-container .index-module-task-item-content-container .index-module-task-item-btn {
+  width: 120px;
+  height: 44px;
+  line-height: 42px;
+  position: absolute;
+  top: 6px;
+  right: 0;
+  background: rgba(66, 133, 244, 0.1);
+  border-radius: 44px;
+  border: 1px solid rgba(66, 133, 244, 0.15);
+  text-align: center;
+  font-size: 24px;
+  font-weight: 400;
+  color: #4285f4;
+}
+.index-module-son-site-item-one-container {
+  width: 100%;
+  height: 160px;
+  padding: 24px 20px;
+}
+.index-module-son-site-item-one-container .index-module-son-site-item-content-one-container {
+  width: 100%;
+  height: 112px;
+  position: relative;
+  padding-left: 112px;
+}
+.index-module-son-site-item-one-container .index-module-son-site-item-content-one-container .index-module-son-site-item-one-image {
+  width: 112px;
+  height: 112px;
+  border-radius: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.index-module-son-site-item-one-container .index-module-son-site-item-content-one-container .index-module-son-site-item-info {
+  width: 100%;
+  padding: 0 18px 0 22px;
+}
+.index-module-son-site-item-one-container .index-module-son-site-item-content-one-container .index-module-son-site-item-info .index-module-son-site-item-name {
+  width: 100%;
+  height: 36px;
+  font-size: 28px;
+  color: #333;
+  font-weight: 400;
+  line-height: 36px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-son-site-item-one-container .index-module-son-site-item-content-one-container .index-module-son-site-item-info .index-module-son-site-item-btn {
+  width: 96px;
+  height: 36px;
+  line-height: 34px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #4285f4;
+  text-align: center;
+  background-color: rgba(66, 133, 244, 0.1);
+  border-radius: 4px;
+  margin: 24px auto 0 auto;
+}
+.index-module-son-site-item-two-container {
+  width: 204px;
+  height: 264px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.index-module-son-site-item-two-container .index-module-son-site-item-content-two-container {
+  width: 100%;
+  height: 264px;
+  padding: 32px 4px 0 4px;
+  text-align: center;
+}
+.index-module-son-site-item-two-container .index-module-son-site-item-content-two-container .index-module-son-site-item-two-image {
+  width: 112px;
+  height: 112px;
+  border-radius: 100%;
+}
+.index-module-son-site-item-two-container .index-module-son-site-item-content-two-container .index-module-son-site-item-two-name {
+  width: 100%;
+  height: 36px;
+  color: #333;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 36px;
+  margin-top: 24px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-son-site-item-two-container .index-module-son-site-item-content-two-container .index-module-son-site-item-two-btn {
+  width: 96px;
+  height: 36px;
+  line-height: 34px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #4285f4;
+  text-align: center;
+  background-color: rgba(66, 133, 244, 0.1);
+  border-radius: 4px;
+  margin: 8px auto 0 auto;
+}
+.index-module-recommend-item-container {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.index-module-recommend-item-container .index-module-recommend-item-image {
+  width: 100%;
+  object-fit: cover;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.index-module-recommend-item-container .index-module-recommend-content-container {
+  width: 100%;
+  height: 70px;
+  line-height: 68px;
+  font-size: 28px;
+  padding: 0 10px;
+  color: #333;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-teacher-item-container {
+  width: 220px;
+  padding-bottom: 20px;
+}
+.index-module-teacher-item-container .index-module-teacher-item-image {
+  width: 220px;
+  height: 220px;
+  border-radius: 14px;
+}
+.index-module-teacher-item-container .index-module-teacher-item-name {
+  width: 100%;
+  height: 40px;
+  padding: 0 15px;
+  line-height: 40px;
+  font-size: 32px;
+  color: #333;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  margin-top: 8px;
+  text-align: center;
+}
+.index-module-teacher-item-container .index-module-teacher-item-text {
+  width: 100%;
+  padding: 0 15px;
+  line-height: 32px;
+  font-size: 24px;
+  color: #999;
+  font-weight: 400;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  margin-top: 4px;
+  text-align: center;
+}
+.index-module-forum-item-container {
+  width: 100%;
+}
+.index-module-forum-item-container .index-module-forum-item-image {
+  width: 100%;
+  border-radius: 10px;
+}
+.index-module-not-more-container {
+  width: 100%;
+  height: 128px;
+  padding-top: 48px;
+}
+.index-module-not-more-container .index-module-not-more-bg {
+  width: 400px;
+  height: 32px;
+  margin: 0 auto;
+  position: relative;
+}
+.index-module-not-more-container .index-module-not-more-bg .index-module-not-more-line {
+  width: 100%;
+  height: 3px;
+  background-color: #ddd;
+  position: absolute;
+  left: 0;
+  top: 14px;
+  z-index: 1;
+}
+.index-module-not-more-container .index-module-not-more-bg .index-module-not-more-text {
+  width: 200px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 24px;
+  color: #929292;
+  font-weight: 400;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 100px;
+  z-index: 2;
+  background-color: #f5f5f5;
+}
+.index-module-buy-content-item-container {
+  width: 100%;
+  height: 170px;
+  padding-left: 234px;
+  position: relative;
+  border-radius: 10px;
+  background-color: #fff;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-image-container {
+  width: 214px;
+  height: 128px;
+  position: absolute;
+  left: 20px;
+  top: 16px;
+  border-radius: 10px;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-image-container .index-module-buy-content-item-image {
+  width: 214px;
+  height: 128px;
+  border-radius: 10px;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container {
+  width: 100%;
+  padding: 16px 20px;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-name {
+  width: 100%;
+  height: 80px;
+  line-height: 40px;
+  font-size: 32px;
+  color: #333;
+  font-weight: 400;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-price-container {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-price-container .index-module-buy-content-item-present-price,
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-price-container .index-module-buy-content-item-original-price {
+  width: 100%;
+  vertical-align: baseline;
+  font-size: 20px;
+  font-weight: 400;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-price-container .index-module-buy-content-item-present-price {
+  color: #ff8400;
+  margin-right: 10px;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-price-container .index-module-buy-content-item-present-price span {
+  font-size: 40px;
+  margin-right: 4px;
+  vertical-align: sub;
+}
+.index-module-buy-content-item-container .index-module-buy-content-item-info-container .index-module-buy-content-item-price-container .index-module-buy-content-item-original-price {
+  color: #666;
+  text-decoration: line-through;
+}
+.oneLineOverflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}

src/components/indexComponent/indexComponent/style.less

 @import "../../../static/theme.less";
 
 .index-module-title-container {
+  width: 100%;
+  position: relative;
+
+  .index-module-title-text {
+    width: 100%;
+    font-size: 36px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 44px;
+    padding: 32px 130px 32px 30px;
+
+    .oneLineOverflow;
+  }
+
+  .index-module-title-more-btn {
+    height: 108px;
+    line-height: 108px;
+    padding: 0 10px;
+    font-size: 28px;
+    color: #999;
+    font-weight: 400;
+    position: absolute;
+    top: 0;
+    right: 30px;
+  }
+
+  .index-module-title-exchange-btn {
+    line-height: 1;
+    padding: 8px 20px;
+    font-size: 28px;
+    color: #4285f4;
+    font-weight: 400;
+    position: absolute;
+    top: 32px;
+    right: 30px;
+    border: 2px solid #4285f4;
+    border-radius: 24px;
+    vertical-align: middle;
+  }
+}
+
+.index-module-course-item-container {
+  width: 100%;
+  padding: 24px;
+
+  .index-module-course-content {
     width: 100%;
     position: relative;
 
-    .index-module-title-text {
+    .index-module-course-content-image {
+      border-radius: 10px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+    }
+
+    .index-module-course-content-tag {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 8px;
+      background: linear-gradient(138deg, #ffb73d 0%, #ff9948 100%);
+      box-shadow: 0px 2px 24px 0px rgba(248, 132, 21, 0.2);
+      border-radius: 14px 0px 14px 0px;
+      font-size: 20px;
+      color: #fff;
+      font-weight: 400;
+    }
+
+    .index-module-course-content-info {
+      width: 100%;
+      padding-left: 20px;
+
+      .index-module-course-info-name {
         width: 100%;
-        font-size: 36px;
-        font-weight: 500;
+        font-size: 32px;
+        font-weight: 400;
         color: #333333;
-        line-height: 44px;
-        padding: 32px 130px 32px 30px;
-
-        .oneLineOverflow;
-    }
+        line-height: 40px;
+        max-height: 80px;
+        .someLineOverflow(2);
+      }
 
-    .index-module-title-more-btn {
-        height: 108px;
-        line-height: 108px;
-        padding: 0 10px;
-        font-size: 28px;
-        color: #999;
-        font-weight: 400;
-        position: absolute;
-        top: 0;
-        right: 30px;
+      .index-module-course-info-rate {
+        width: 100%;
+        height: 32px;
+        margin-top: 8px;
+        line-height: 32px;
 
-    }
+        span {
+          font-size: 24px;
+          color: #ff8400;
+          margin-left: 6px;
+        }
+      }
 
-    .index-module-title-exchange-btn {
-        line-height: 1;
-        padding: 8px 20px;
-        font-size: 28px;
-        color: #4285f4;
-        font-weight: 400;
-        position: absolute;
-        top: 32px;
-        right: 30px;
-        border: 2px solid #4285f4;
-        border-radius: 24px;
-        vertical-align: middle;
+      .index-module-course-info-text {
+        width: 100%;
+        margin-top: 8px;
 
+        span {
+          font-size: 24px;
+          color: #9b9b9b;
+        }
+      }
     }
+  }
+}
 
+.index-module-to-more-container {
+  width: 100%;
+  height: 40px;
+  font-size: 28px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 40px;
+  text-align: center;
+  margin: 24px 0;
 }
 
-.index-module-course-item-container {
+.index-module-item-edge-container {
+  width: 100%;
+  padding: 0 30px;
+
+  .index-module-item-edge {
     width: 100%;
-    padding: 24px;
+    height: 2px;
+    background-color: #f0f0f0;
+  }
+}
 
-    .index-module-course-content {
-        width: 100%;
-        position: relative;
+.index-module-bg-container {
+  width: 100%;
+  padding: 0 30px;
 
-        .index-module-course-content-image {
-            border-radius: 10px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: 1;
-        }
+  .index-module-inside-bg-container {
+    background-color: #fff;
+    border-radius: 10px;
+    width: 100%;
+    padding: 8px 0;
+  }
+}
 
-        .index-module-course-content-tag {
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: 2;
-            height: 32px;
-            line-height: 32px;
-            padding: 0 8px;
-            background: linear-gradient(138deg, #FFB73D 0%, #FF9948 100%);
-            box-shadow: 0px 2px 24px 0px rgba(248, 132, 21, 0.2);
-            border-radius: 14px 0px 14px 0px;
-            font-size: 20px;
-            color: #fff;
-            font-weight: 400;
-        }
+.index-module-scroll-bg-container {
+  width: 100%;
+  padding: 0 0 0 30px;
 
-        .index-module-course-content-info {
-            width: 100%;
-            padding-left: 20px;
-
-            .index-module-course-info-name {
-                width: 100%;
-                font-size: 32px;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                max-height: 80px;
-                .someLineOverflow(2);
-            }
-
-            .index-module-course-info-rate {
-                width: 100%;
-                height: 32px;
-                margin-top: 8px;
-                line-height: 32px;
-
-                span {
-                    font-size: 24px;
-                    color: #FF8400;
-                    margin-left: 6px;
-                }
-            }
-
-            .index-module-course-info-text {
-                width: 100%;
-                margin-top: 8px;
-
-                span {
-                    font-size: 24px;
-                    color: #9b9b9b;
-                }
-
-            }
-        }
-    }
+  .index-module-scroll-inside-bg-container {
+    border-radius: 10px;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
 }
 
+.index-module-live-item-container {
+  width: 100%;
+  padding: 24px 30px;
 
-.index-module-to-more-container {
+  .index-module-live-item-view-number {
     width: 100%;
-    height: 40px;
-    font-size: 28px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 24px;
+    color: #e9650d;
     font-weight: 400;
-    color: #999999;
-    line-height: 40px;
-    text-align: center;
-    margin: 24px 0;
+  }
 
-}
-
-.index-module-item-edge-container {
+  .index-module-live-item-status-not-start {
     width: 100%;
-    padding: 0 30px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 24px;
+    color: @themeColor;
+    font-weight: 400;
+    position: relative;
+    padding-left: 30px;
 
-    .index-module-item-edge {
-        width: 100%;
-        height: 2px;
-        background-color: #f0f0f0;
+    .index-module-live-item-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      position: absolute;
+      left: 0;
+      top: 10px;
+      background-color: @themeColor;
     }
-}
+  }
 
-.index-module-bg-container {
+  .index-module-live-item-end {
     width: 100%;
-    padding: 0 30px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 24px;
+    color: #666;
+    font-weight: 400;
+    position: relative;
+    padding-left: 30px;
 
-    .index-module-inside-bg-container {
-        background-color: #fff;
-        border-radius: 10px;
-        width: 100%;
-        padding: 8px 0;
+    .index-module-live-item-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      position: absolute;
+      left: 0;
+      top: 10px;
+      background-color: #666;
     }
-}
+  }
 
-.index-module-scroll-bg-container {
+  .index-module-live-item-content-container {
     width: 100%;
-    padding: 0 0 0 30px;
+    margin-top: 20px;
+    position: relative;
+    padding-left: 96px;
 
-    .index-module-scroll-inside-bg-container {
-        border-radius: 10px;
-        width: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
+    .index-module-live-item-image {
+      position: absolute;
+      width: 96px;
+      height: 96px;
+      border-radius: 100%;
+      left: 0;
+      top: 0;
     }
-}
 
-.index-module-live-item-container {
-    width: 100%;
-    padding: 24px 30px;
+    .index-module-live-item-info-container {
+      width: 100%;
+      padding-left: 40px;
 
-    .index-module-live-item-view-number {
+      .index-module-live-item-info-name {
         width: 100%;
-        height: 32px;
-        line-height: 32px;
-        font-size: 24px;
-        color: #E9650D;
+        font-size: 32px;
         font-weight: 400;
+        color: #333333;
+        line-height: 40px;
+        .someLineOverflow(2);
+      }
 
-    }
-
-    .index-module-live-item-status-not-start {
+      .index-module-live-item-info-text {
         width: 100%;
-        height: 32px;
-        line-height: 32px;
         font-size: 24px;
-        color: @themeColor;
         font-weight: 400;
-        position: relative;
-        padding-left: 30px;
-
-        .index-module-live-item-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 100%;
-            position: absolute;
-            left: 0;
-            top: 10px;
-            background-color: @themeColor;
-        }
-    }
-
-    .index-module-live-item-end {
-        width: 100%;
-        height: 32px;
+        color: #999;
         line-height: 32px;
-        font-size: 24px;
-        color: #666;
-        font-weight: 400;
-        position: relative;
-        padding-left: 30px;
-
-        .index-module-live-item-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 100%;
-            position: absolute;
-            left: 0;
-            top: 10px;
-            background-color: #666;
-        }
-    }
-
-    .index-module-live-item-content-container {
-        width: 100%;
-        margin-top: 20px;
-        position: relative;
-        padding-left: 96px;
-
-        .index-module-live-item-image {
-            position: absolute;
-            width: 96px;
-            height: 96px;
-            border-radius: 100%;
-            left: 0;
-            top: 0;
-        }
-
-        .index-module-live-item-info-container {
-            width: 100%;
-            padding-left: 40px;
-
-            .index-module-live-item-info-name {
-                width: 100%;
-                font-size: 32px;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                .someLineOverflow(2);
-            }
-
-            .index-module-live-item-info-text {
-                width: 100%;
-                font-size: 24px;
-                font-weight: 400;
-                color: #999;
-                line-height: 32px;
-                .oneLineOverflow;
-            }
-        }
+        .oneLineOverflow;
+      }
     }
+  }
 }
 
 .index-module-album-item-container {
-    width: 100%;
-    padding: 24px 30px;
-
-    .index-module-album-content-container {
-        width: 100%;
-        position: relative;
-        padding-left: 294px;
-
-        .index-module-album-item-image {
-            border-radius: 10px;
-            width: 240px;
-            height: 240px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: 2;
-        }
+  width: 100%;
+  padding: 24px 30px;
 
-        .index-module-album-item-image-bg {
-            height: 190px;
-            position: absolute;
-            top: 26px;
-            left: 64px;
-            z-index: 1;
-        }
+  .index-module-album-content-container {
+    width: 100%;
+    position: relative;
+    padding-left: 294px;
 
-        .index-module-album-info-container {
-            width: 100%;
-            height: 240px;
-
-            .index-module-album-item-info-name {
-                width: 100%;
-                font-size: 32px;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                max-height: 80px;
-                .someLineOverflow(2);
-            }
-
-            .index-module-album-item-info-text {
-                width: 100%;
-                margin-top: 16px;
-                font-size: 24px;
-                font-weight: 400;
-                color: #999;
-                line-height: 32px;
-                .oneLineOverflow;
-            }
-        }
+    .index-module-album-item-image {
+      border-radius: 10px;
+      width: 240px;
+      height: 240px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
     }
-}
-
-.index-module-album-item-tag-container {
-    width: fit-content;
-    line-height: 36px;
-    padding: 0 12px;
-    font-size: 24px;
-    border-radius: 10px;
-
-}
 
+    .index-module-album-item-image-bg {
+      height: 190px;
+      position: absolute;
+      top: 26px;
+      left: 64px;
+      z-index: 1;
+    }
 
-.index-module-news-item-container {
-    width: 100%;
-    padding: 24px 30px;
+    .index-module-album-info-container {
+      width: 100%;
+      height: 240px;
 
-    .index-module-news-item-content-container {
+      .index-module-album-item-info-name {
         width: 100%;
-        position: relative;
-        padding-right: 240px;
-
-        .index-module-news-info-container {
-            width: 100%;
-
-            .index-module-news-item-info-name {
-                width: 100%;
-                font-size: 32px;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                max-height: 80px;
-                .someLineOverflow(2);
-            }
-
-            .index-module-news-item-info-text {
-                width: 100%;
-                margin-top: 16px;
-                font-size: 24px;
-                font-weight: 400;
-                color: #999;
-                line-height: 32px;
-                .oneLineOverflow;
-
-                .index-module-news-item-info-icon {
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 10px;
-                    margin-top: -5px;
-                }
-            }
-        }
-
-
-
+        font-size: 32px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 40px;
+        max-height: 80px;
+        .someLineOverflow(2);
+      }
 
-        .index-module-news-item-image {
-            position: absolute;
-            right: 0;
-            top: 0;
-            border-radius: 10px;
-        }
+      .index-module-album-item-info-text {
+        width: 100%;
+        margin-top: 16px;
+        font-size: 24px;
+        font-weight: 400;
+        color: #999;
+        line-height: 32px;
+        .oneLineOverflow;
+      }
     }
+  }
 }
 
+.index-module-album-item-tag-container {
+  width: fit-content;
+  line-height: 36px;
+  padding: 0 12px;
+  font-size: 24px;
+  border-radius: 10px;
+}
 
-.index-module-train-item-one-container {
+.index-module-news-item-container {
+  width: 100%;
+  padding: 24px 30px;
+
+  .index-module-news-item-content-container {
     width: 100%;
+    display: flex;
+    justify-content: space-between;
 
-    .index-module-train-one-item-image {
-        width: 100%;
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-    }
+    .index-module-news-info-container {
+      width: 60%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
-    .index-module-train-one-content-container {
+      .index-module-news-item-info-name {
         width: 100%;
-        background-color: #fff;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        padding: 16px 20px;
-
-        .index-module-train-one-item-name {
-            width: 100%;
-            font-size: 32px;
-            font-weight: 400;
-            color: #333333;
-            line-height: 40px;
-            max-height: 80px;
-            .someLineOverflow(2);
-        }
+        font-size: 32px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 40px;
+        max-height: 80px;
+        .someLineOverflow(2);
+      }
 
-        .index-module-train-one-item-text {
-            width: 100%;
-            font-size: 24px;
-            font-weight: 400;
-            color: #999;
-            line-height: 32px;
-            margin-top: 8px;
-            .oneLineOverflow;
+      .index-module-news-item-info-text {
+        width: 100%;
+        margin-top: 16px;
+        font-size: 24px;
+        font-weight: 400;
+        color: #999;
+        line-height: 32px;
+        .oneLineOverflow;
 
+        .index-module-news-item-info-icon {
+          width: 24px;
+          height: 24px;
+          margin-right: 10px;
+          margin-top: -5px;
         }
+      }
+    }
+
+    .index-module-news-item-image {
+      border-radius: 10px;
     }
+  }
 }
 
+.index-module-train-item-one-container {
+  width: 100%;
 
-.index-module-train-item-two-container {
+  .index-module-train-one-item-image {
     width: 100%;
-    display: inline-block;
-
-    .index-module-train-two-item-image {
-        width: 100%;
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-    }
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
 
-    .index-module-train-two-content-container {
-        width: 100%;
-        background-color: #fff;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        padding: 16px 20px;
-
-        .index-module-train-two-item-name {
-            width: 100%;
-            font-size: 32px;
-            font-weight: 400;
-            color: #333333;
-            line-height: 40px;
-            height: 40px;
-            .oneLineOverflow;
-        }
+  .index-module-train-one-content-container {
+    width: 100%;
+    background-color: #fff;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    padding: 16px 20px;
+
+    .index-module-train-one-item-name {
+      width: 100%;
+      font-size: 32px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 40px;
+      max-height: 80px;
+      .someLineOverflow(2);
+    }
+
+    .index-module-train-one-item-text {
+      width: 100%;
+      font-size: 24px;
+      font-weight: 400;
+      color: #999;
+      line-height: 32px;
+      margin-top: 8px;
+      .oneLineOverflow;
+    }
+  }
+}
 
-        .index-module-train-two-item-name-one-line {
-            width: 100%;
-            font-size: 32px;
-            font-weight: 400;
-            color: #333333;
-            line-height: 40px;
-            height: 40px;
-            .oneLineOverflow;
-        }
+.index-module-train-item-two-container {
+  width: 100%;
+  display: inline-block;
 
-        .index-module-train-two-item-text {
-            width: 100%;
-            font-size: 24px;
-            font-weight: 400;
-            color: #999;
-            line-height: 32px;
-            margin-top: 8px;
-            .oneLineOverflow;
+  .index-module-train-two-item-image {
+    width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
 
-        }
-    }
+  .index-module-train-two-content-container {
+    width: 100%;
+    background-color: #fff;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    padding: 16px 20px;
+
+    .index-module-train-two-item-name {
+      width: 100%;
+      font-size: 32px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 40px;
+      height: 40px;
+      .oneLineOverflow;
+    }
+
+    .index-module-train-two-item-name-one-line {
+      width: 100%;
+      font-size: 32px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 40px;
+      height: 40px;
+      .oneLineOverflow;
+    }
+
+    .index-module-train-two-item-text {
+      width: 100%;
+      font-size: 24px;
+      font-weight: 400;
+      color: #999;
+      line-height: 32px;
+      margin-top: 8px;
+      .oneLineOverflow;
+    }
+  }
 }
 
 .index-module-train-item-two-container:nth-child(even) {
-    margin-left: 26px;
+  margin-left: 26px;
 }
 
-.index-module-train-item-two-container:nth-child(n>2) {
-    margin-top: 24px;
+.index-module-train-item-two-container:nth-child(n > 2) {
+  margin-top: 24px;
 }
 
 .index-module-production-item-container {
-    width: 100%;
-    padding: 26px;
-
-    .index-module-production-item-content-container {
-        width: 100%;
-        position: relative;
-
-        .index-module-production-item-image {
-            border-radius: 10px;
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        .index-module-production-content-info {
-            width: 100%;
-            padding-left: 20px;
-            position: relative;
-
-            .index-module-production-content-name-prefix {
-                width: 6px;
-                height: 24px;
-                position: absolute;
-                left: 0;
-                top: 8px;
-                background-color: #4285f4;
-            }
-
-            .index-module-production-info-name {
-                width: 100%;
-                font-size: 32px;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                max-height: 80px;
-                .someLineOverflow(2);
-            }
-
-            .index-module-production-info-text {
-                width: 100%;
-                margin-top: 8px;
-                font-size: 24px;
-                color: #9b9b9b;
-                .oneLineOverflow;
-            }
-
-            .index-module-production-info-text-container {
-                width: 100%;
-                margin-top: 8px;
-                padding-left: 297px;
-                position: relative;
-
-                .index-module-production-info-author {
-                    width: 277px;
-                    font-size: 24px;
-                    color: #9b9b9b;
-                    .oneLineOverflow;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                }
-
-                .index-module-production-info-other {
-                    width: 100%;
-
-                    font-size: 24px;
-                    color: #9b9b9b;
-                    .oneLineOverflow;
-                }
-            }
+  width: 100%;
+  padding: 26px;
 
-        }
-    }
-
-}
-
-.index-module-smartRecommend-one-container {
+  .index-module-production-item-content-container {
     width: 100%;
-    background-color: #fff;
     position: relative;
-    padding: 22px 172px 22px 140px;
 
-    .index-module-smartRecommend-one-image {
-        width: 140px;
-        height: 84px;
-        border-radius: 6px;
-        position: absolute;
-        left: 0;
-        top: 22px;
+    .index-module-production-item-image {
+      border-radius: 10px;
+      position: absolute;
+      left: 0;
+      top: 0;
     }
 
+    .index-module-production-content-info {
+      width: 100%;
+      padding-left: 20px;
+      position: relative;
 
-    .index-module-smartRecommend-one-text {
-        width: 100%;
-        height: 84px;
-        line-height: 84px;
-        font-size: 28px;
-        color: #333;
-        font-weight: 400;
-        padding: 0 0 0 20px;
-        .oneLineOverflow;
-    }
-
-    .index-module-smartRecommend-tag-text {
-        position: absolute;
-        right: 0;
-        top: 46px;
-        z-index: 2;
-        height: 36px;
-        line-height: 34px;
-        border: 2px solid rgba(151, 151, 151, .5);
-        padding: 0 8px;
-        font-size: 24px;
-        color: #999;
-        font-weight: 400;
-        border-radius: 4px;
-    }
-}
-
-.index-module-smartRecommend-two-container {
-    width: 100%;
-    height: 114px;
-    background-color: #fff;
-    border-radius: 10px;
-    padding-left: 50%;
-    position: relative;
-
-    .index-module-smartRecommend-two-image {
-        width: 50%;
-        height: 114px;
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 1;
-    }
-
-    .index-module-smartRecommend-two-tag-text {
+      .index-module-production-content-name-prefix {
+        width: 6px;
+        height: 24px;
         position: absolute;
         left: 0;
-        top: 0;
-        height: 28px;
-        line-height: 26px;
-        background-color: rgba(0, 0, 0, 0.85);
-        padding: 0 10px;
-        font-size: 20px;
-        color: #fff;
-        font-weight: 400;
-        border-radius: 4px;
-        z-index: 2;
-    }
+        top: 8px;
+        background-color: #4285f4;
+      }
 
-    .index-module-smartRecommend-two-text {
+      .index-module-production-info-name {
         width: 100%;
-        line-height: 36px;
-        font-size: 28px;
-        color: #333;
+        font-size: 32px;
         font-weight: 400;
-        padding: 8px 10px;
+        color: #333333;
+        line-height: 40px;
+        max-height: 80px;
         .someLineOverflow(2);
-    }
-}
+      }
 
-.index-module-task-item-container {
-    width: 100%;
-    padding: 24px 20px;
+      .index-module-production-info-text {
+        width: 100%;
+        margin-top: 8px;
+        font-size: 24px;
+        color: #9b9b9b;
+        .oneLineOverflow;
+      }
 
-    .index-module-task-item-content-container {
+      .index-module-production-info-text-container {
         width: 100%;
-        height: 56px;
-        padding-left: 56px;
+        margin-top: 8px;
+        padding-left: 297px;
         position: relative;
 
-        .index-module-item-image {
-            width: 56px;
-            height: 56px;
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        .index-module-task-item-info {
-            width: 100%;
-            height: 56px;
-            padding-left: 20px;
-            padding-right: 154px;
-            font-size: 28px;
-            font-weight: 400;
-            color: #333333;
-            line-height: 56px;
-            .oneLineOverflow;
-
+        .index-module-production-info-author {
+          width: 277px;
+          font-size: 24px;
+          color: #9b9b9b;
+          .oneLineOverflow;
+          position: absolute;
+          left: 0;
+          top: 0;
         }
 
-        .index-module-task-item-btn {
-            width: 120px;
-            height: 44px;
-            line-height: 42px;
-            position: absolute;
-            top: 6px;
-            right: 0;
-            background: rgba(66, 133, 244, 0.1);
-            border-radius: 44px;
-            border: 1px solid rgba(66, 133, 244, 0.15);
-            text-align: center;
-            font-size: 24px;
-            font-weight: 400;
-            color: #4285F4;
-
-
+        .index-module-production-info-other {
+          width: 100%;
 
+          font-size: 24px;
+          color: #9b9b9b;
+          .oneLineOverflow;
         }
+      }
     }
+  }
 }
 
-
-.index-module-son-site-item-one-container {
+.index-module-smartRecommend-one-container {
+  width: 100%;
+  background-color: #fff;
+  position: relative;
+  padding: 22px 172px 22px 140px;
+
+  .index-module-smartRecommend-one-image {
+    width: 140px;
+    height: 84px;
+    border-radius: 6px;
+    position: absolute;
+    left: 0;
+    top: 22px;
+  }
+
+  .index-module-smartRecommend-one-text {
     width: 100%;
-    height: 160px;
-    padding: 24px 20px;
-
-    .index-module-son-site-item-content-one-container {
-        width: 100%;
-        height: 112px;
-        position: relative;
-        padding-left: 112px;
-
-        .index-module-son-site-item-one-image {
-            width: 112px;
-            height: 112px;
-            border-radius: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        .index-module-son-site-item-info {
-            width: 100%;
-            padding: 0 18px 0 22px;
-
-            .index-module-son-site-item-name {
-                width: 100%;
-                height: 36px;
-                font-size: 28px;
-                color: #333;
-                font-weight: 400;
-                line-height: 36px;
-                text-align: center;
-                .oneLineOverflow;
-            }
-
-            .index-module-son-site-item-btn {
-                width: 96px;
-                height: 36px;
-                line-height: 34px;
-                font-size: 28px;
-                font-weight: 400;
-                color: #4285f4;
-                text-align: center;
-                background-color: rgba(66, 133, 244, .1);
-                border-radius: 4px;
-                margin: 24px auto 0 auto;
-            }
-        }
-    }
+    height: 84px;
+    line-height: 84px;
+    font-size: 28px;
+    color: #333;
+    font-weight: 400;
+    padding: 0 0 0 20px;
+    .oneLineOverflow;
+  }
+
+  .index-module-smartRecommend-tag-text {
+    position: absolute;
+    right: 0;
+    top: 46px;
+    z-index: 2;
+    height: 36px;
+    line-height: 34px;
+    border: 2px solid rgba(151, 151, 151, 0.5);
+    padding: 0 8px;
+    font-size: 24px;
+    color: #999;
+    font-weight: 400;
+    border-radius: 4px;
+  }
 }
 
+.index-module-smartRecommend-two-container {
+  width: 100%;
+  height: 114px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding-left: 50%;
+  position: relative;
+
+  .index-module-smartRecommend-two-image {
+    width: 50%;
+    height: 114px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+  }
+
+  .index-module-smartRecommend-two-tag-text {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 28px;
+    line-height: 26px;
+    background-color: rgba(0, 0, 0, 0.85);
+    padding: 0 10px;
+    font-size: 20px;
+    color: #fff;
+    font-weight: 400;
+    border-radius: 4px;
+    z-index: 2;
+  }
 
-.index-module-son-site-item-two-container {
-    width: 204px;
-    height: 264px;
-    background-color: #fff;
-    border-radius: 10px;
-
-    .index-module-son-site-item-content-two-container {
-        width: 100%;
-        height: 264px;
-        padding: 32px 4px 0 4px;
-        text-align: center;
-
-        .index-module-son-site-item-two-image {
-            width: 112px;
-            height: 112px;
-            border-radius: 100%;
+  .index-module-smartRecommend-two-text {
+    width: 100%;
+    line-height: 36px;
+    font-size: 28px;
+    color: #333;
+    font-weight: 400;
+    padding: 8px 10px;
+    .someLineOverflow(2);
+  }
+}
 
-        }
+.index-module-task-item-container {
+  width: 100%;
+  padding: 24px 20px;
 
-        .index-module-son-site-item-two-name {
-            width: 100%;
-            height: 36px;
-            color: #333;
-            font-size: 28px;
-            font-weight: 400;
-            line-height: 36px;
-            margin-top: 24px;
-            text-align: center;
-            .oneLineOverflow;
-        }
+  .index-module-task-item-content-container {
+    width: 100%;
+    height: 56px;
+    padding-left: 56px;
+    position: relative;
 
-        .index-module-son-site-item-two-btn {
-            width: 96px;
-            height: 36px;
-            line-height: 34px;
-            font-size: 28px;
-            font-weight: 400;
-            color: #4285f4;
-            text-align: center;
-            background-color: rgba(66, 133, 244, .1);
-            border-radius: 4px;
-            margin: 8px auto 0 auto;
-        }
-    }
+    .index-module-item-image {
+      width: 56px;
+      height: 56px;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .index-module-task-item-info {
+      width: 100%;
+      height: 56px;
+      padding-left: 20px;
+      padding-right: 154px;
+      font-size: 28px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 56px;
+      .oneLineOverflow;
+    }
+
+    .index-module-task-item-btn {
+      width: 120px;
+      height: 44px;
+      line-height: 42px;
+      position: absolute;
+      top: 6px;
+      right: 0;
+      background: rgba(66, 133, 244, 0.1);
+      border-radius: 44px;
+      border: 1px solid rgba(66, 133, 244, 0.15);
+      text-align: center;
+      font-size: 24px;
+      font-weight: 400;
+      color: #4285f4;
+    }
+  }
 }
 
+.index-module-son-site-item-one-container {
+  width: 100%;
+  height: 160px;
+  padding: 24px 20px;
 
-.index-module-recommend-item-container {
+  .index-module-son-site-item-content-one-container {
     width: 100%;
-    background-color: #fff;
-    border-radius: 10px;
+    height: 112px;
+    position: relative;
+    padding-left: 112px;
 
-    .index-module-recommend-item-image {
-        width: 100%;
-        object-fit: cover;
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
+    .index-module-son-site-item-one-image {
+      width: 112px;
+      height: 112px;
+      border-radius: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
     }
 
-    .index-module-recommend-content-container {
+    .index-module-son-site-item-info {
+      width: 100%;
+      padding: 0 18px 0 22px;
+
+      .index-module-son-site-item-name {
         width: 100%;
-        height: 70px;
-        line-height: 68px;
+        height: 36px;
         font-size: 28px;
-        padding: 0 10px;
         color: #333;
         font-weight: 400;
+        line-height: 36px;
+        text-align: center;
         .oneLineOverflow;
-    }
-}
-
-.index-module-teacher-item-container {
-    width: 220px;
-    padding-bottom: 20px;
-
-    .index-module-teacher-item-image {
-        width: 220px;
-        height: 220px;
-        border-radius: 14px;
-    }
+      }
 
-    .index-module-teacher-item-name {
-        width: 100%;
-        height: 40px;
-        padding: 0 15px;
-        line-height: 40px;
-        font-size: 32px;
-        color: #333;
+      .index-module-son-site-item-btn {
+        width: 96px;
+        height: 36px;
+        line-height: 34px;
+        font-size: 28px;
         font-weight: 400;
-        .oneLineOverflow;
-        margin-top: 8px;
+        color: #4285f4;
         text-align: center;
+        background-color: rgba(66, 133, 244, 0.1);
+        border-radius: 4px;
+        margin: 24px auto 0 auto;
+      }
     }
+  }
+}
 
-    .index-module-teacher-item-text {
-        width: 100%;
-        padding: 0 15px;
-        line-height: 32px;
-        font-size: 24px;
-        color: #999;
-        font-weight: 400;
-        .someLineOverflow(2);
-        margin-top: 4px;
-        text-align: center;
-    }
+.index-module-son-site-item-two-container {
+  width: 204px;
+  height: 264px;
+  background-color: #fff;
+  border-radius: 10px;
+
+  .index-module-son-site-item-content-two-container {
+    width: 100%;
+    height: 264px;
+    padding: 32px 4px 0 4px;
+    text-align: center;
 
+    .index-module-son-site-item-two-image {
+      width: 112px;
+      height: 112px;
+      border-radius: 100%;
+    }
+
+    .index-module-son-site-item-two-name {
+      width: 100%;
+      height: 36px;
+      color: #333;
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 36px;
+      margin-top: 24px;
+      text-align: center;
+      .oneLineOverflow;
+    }
+
+    .index-module-son-site-item-two-btn {
+      width: 96px;
+      height: 36px;
+      line-height: 34px;
+      font-size: 28px;
+      font-weight: 400;
+      color: #4285f4;
+      text-align: center;
+      background-color: rgba(66, 133, 244, 0.1);
+      border-radius: 4px;
+      margin: 8px auto 0 auto;
+    }
+  }
 }
 
-.index-module-forum-item-container {
+.index-module-recommend-item-container {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+
+  .index-module-recommend-item-image {
     width: 100%;
+    object-fit: cover;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
 
-    .index-module-forum-item-image {
-        width: 100%;
-        border-radius: 10px;
-    }
+  .index-module-recommend-content-container {
+    width: 100%;
+    height: 70px;
+    line-height: 68px;
+    font-size: 28px;
+    padding: 0 10px;
+    color: #333;
+    font-weight: 400;
+    .oneLineOverflow;
+  }
 }
 
-.index-module-not-more-container {
+.index-module-teacher-item-container {
+  width: 220px;
+  padding-bottom: 20px;
+
+  .index-module-teacher-item-image {
+    width: 220px;
+    height: 220px;
+    border-radius: 14px;
+  }
+
+  .index-module-teacher-item-name {
     width: 100%;
-    height: 128px;
-    padding-top: 48px;
+    height: 40px;
+    padding: 0 15px;
+    line-height: 40px;
+    font-size: 32px;
+    color: #333;
+    font-weight: 400;
+    .oneLineOverflow;
+    margin-top: 8px;
+    text-align: center;
+  }
 
+  .index-module-teacher-item-text {
+    width: 100%;
+    padding: 0 15px;
+    line-height: 32px;
+    font-size: 24px;
+    color: #999;
+    font-weight: 400;
+    .someLineOverflow(2);
+    margin-top: 4px;
+    text-align: center;
+  }
+}
 
-    .index-module-not-more-bg {
-        width: 400px;
-        height: 32px;
-        margin: 0 auto;
-        position: relative;
+.index-module-forum-item-container {
+  width: 100%;
 
-        .index-module-not-more-line {
-            width: 100%;
-            height: 3px;
-            background-color: #ddd;
-            position: absolute;
-            left: 0;
-            top: 14px;
-            z-index: 1;
-        }
+  .index-module-forum-item-image {
+    width: 100%;
+    border-radius: 10px;
+  }
+}
 
-        .index-module-not-more-text {
-            width: 200px;
-            height: 32px;
-            line-height: 32px;
-            font-size: 24px;
-            color: #929292;
-            font-weight: 400;
-            text-align: center;
-            position: absolute;
-            top: 0;
-            left: 100px;
-            z-index: 2;
-            background-color: #f5f5f5;
-        }
-    }
+.index-module-not-more-container {
+  width: 100%;
+  height: 128px;
+  padding-top: 48px;
+
+  .index-module-not-more-bg {
+    width: 400px;
+    height: 32px;
+    margin: 0 auto;
+    position: relative;
 
+    .index-module-not-more-line {
+      width: 100%;
+      height: 3px;
+      background-color: #ddd;
+      position: absolute;
+      left: 0;
+      top: 14px;
+      z-index: 1;
+    }
+
+    .index-module-not-more-text {
+      width: 200px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 24px;
+      color: #929292;
+      font-weight: 400;
+      text-align: center;
+      position: absolute;
+      top: 0;
+      left: 100px;
+      z-index: 2;
+      background-color: #f5f5f5;
+    }
+  }
 }
 
 .index-module-buy-content-item-container {
-    width: 100%;
-    height: 170px;
-    padding-left: 234px;
+  width: 100%;
+  height: 170px;
+  padding-left: 234px;
 
-    position: relative;
+  position: relative;
+  border-radius: 10px;
+  background-color: #fff;
+
+  .index-module-buy-content-item-image-container {
+    width: 214px;
+    height: 128px;
+    position: absolute;
+    left: 20px;
+    top: 16px;
     border-radius: 10px;
-    background-color: #fff;
 
-    .index-module-buy-content-item-image-container {
-        width: 214px;
-        height: 128px;
-        position: absolute;
-        left: 20px;
-        top: 16px;
-        border-radius: 10px;
-
-        .index-module-buy-content-item-image {
-            width: 214px;
-            height: 128px;
-            border-radius: 10px;
-        }
+    .index-module-buy-content-item-image {
+      width: 214px;
+      height: 128px;
+      border-radius: 10px;
+    }
+  }
+
+  .index-module-buy-content-item-info-container {
+    width: 100%;
+    padding: 16px 20px;
 
+    .index-module-buy-content-item-name {
+      width: 100%;
+      height: 80px;
+      line-height: 40px;
+      font-size: 32px;
+      color: #333;
+      font-weight: 400;
+      .someLineOverflow(2);
     }
 
-    .index-module-buy-content-item-info-container {
+    .index-module-buy-content-item-price-container {
+      width: 100%;
+      .oneLineOverflow;
+
+      .index-module-buy-content-item-present-price,
+      .index-module-buy-content-item-original-price {
         width: 100%;
-        padding: 16px 20px;
-
-        .index-module-buy-content-item-name {
-            width: 100%;
-            height: 80px;
-            line-height: 40px;
-            font-size: 32px;
-            color: #333;
-            font-weight: 400;
-            .someLineOverflow(2);
-        }
+        vertical-align: baseline;
+        font-size: 20px;
+        font-weight: 400;
+      }
+
+      .index-module-buy-content-item-present-price {
+        color: #ff8400;
+        margin-right: 10px;
 
-        .index-module-buy-content-item-price-container {
-            width: 100%;
-            .oneLineOverflow;
-
-            .index-module-buy-content-item-present-price,
-            .index-module-buy-content-item-original-price {
-                width: 100%;
-                vertical-align: baseline;
-                font-size: 20px;
-                font-weight: 400;
-            }
-
-            .index-module-buy-content-item-present-price {
-                color: #FF8400;
-                margin-right: 10px;
-
-                span {
-                    font-size: 40px;
-                    margin-right: 4px;
-                    vertical-align: sub;
-                }
-            }
-
-            .index-module-buy-content-item-original-price {
-                color: #666;
-                text-decoration: line-through;
-            }
+        span {
+          font-size: 40px;
+          margin-right: 4px;
+          vertical-align: sub;
         }
+      }
+
+      .index-module-buy-content-item-original-price {
+        color: #666;
+        text-decoration: line-through;
+      }
     }
+  }
 }
 
-
 .oneLineOverflow {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
 }
 
 .someLineOverflow(@line) {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: @line;
-    overflow: hidden;
-    word-break: break-all;
-}
\ No newline at end of file
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: @line;
+  overflow: hidden;
+  word-break: break-all;
+}

src/components/integral/myintegral.jsx

@@ -147,9 +147,7 @@ class MyIntegral extends Component {
     render() {
 
         const { pointTypeVisible, pointTypeList, hasMore, dataSoS, currentSelectedType } = this.state;
-        console.log(this.props.dataSource, 'ssssssssssssss------------', pointTypeVisible)
-
-
+       
         const row = (rowData, sectionID, rowID) => {
             // console.log('sectionID', rowData, sectionID, rowID)
             return (
@@ -235,7 +233,6 @@ class MyIntegral extends Component {
 
                         //     </Sticky>
                         // </StickyContainer>
-                        onEndReached={this.onEndReached}
                         page={this.props.page}
                     /> : <NoData text={(intl.get("NoDataYet") || "暂无数据")} />}
                 </div>

src/components/menulearn/menulearn.jsx

-import React, { Fragment } from 'react';
-import { SearchBar, WhiteSpace, Toast } from 'antd-mobile';
-import './menulearn.less';
-import { hashHistory } from 'react-router';
-import { connect } from 'react-redux';
+import React, { Fragment } from "react";
+import { Rate, Icon } from "antd";
+import { SearchBar, WhiteSpace, Toast } from "antd-mobile";
+import "./menulearn.less";
+import { hashHistory } from "react-router";
+import { connect } from "react-redux";
 import {
-
-    getHomeShowConfig,
-    getHomeTemplateConfig,
-    getModubleById,
-    getVisitCount,
-    getReportHome,
-    getCalendarList,
+  getHomeShowConfig,
+  getHomeTemplateConfig,
+  getModubleById,
+  getVisitCount,
+  getReportHome,
+  getCalendarList,
   getAssToken,
-} from '../../redux/action/home/home';
+} from "../../redux/action/home/home";
+import newsClockIcon from "../../common/iconImage/clock-icon.png";
 //共通组件 轮播图
-import Mycarousel from '../common/carousel';
-import wutu from '../../image/wutu.jpg'
-import IconCarousel from '../common/CarouselIcon';
-
-
-
+import Mycarousel from "../common/carousel";
+import wutu from "../../image/wutu.jpg";
+import IconCarousel from "../common/CarouselIcon";
 
 //我是有底线的
-import Footline from '../../common/footer/footer';
-import NoticeBlock from '../../common/noticeblock/index';
+import Footline from "../../common/footer/footer";
+import NoticeBlock from "../../common/noticeblock/index";
 import VisitCount from "./visitCount";
 // 签到打卡弹窗
-import DaySignCard from '../../components/signplaycard/daySignCard/daySignCard';
+import DaySignCard from "../../components/signplaycard/daySignCard/daySignCard";
 //平台报告浮窗
-import ReporFloatCard from '../../components/myReport/floatCard';
-import func from '../../util/commonFunc';
-import heropic from '../../image/heropic.jpg'
-import fnNavigate from '../../util/navDirector'
-import MenuhomeNav from '../nav/menuhomeNav.jsx';
+import ReporFloatCard from "../../components/myReport/floatCard";
+import func from "../../util/commonFunc";
+import heropic from "../../image/heropic.jpg";
+import fnNavigate from "../../util/navDirector";
+import MenuhomeNav from "../nav/menuhomeNav.jsx";
 import IndexBtnScroll from "../indexComponent/indexBtnScroll";
 import bannerDefault from "../../image/default-banner-temp.png";
 import OccupyIndexImage from "./occupy-index-image.png";
@@ -46,87 +44,86 @@ import IndexFirstEnter from "../indexComponent/indexFirstEnter";
 import IndexTips from "./indexTip";
 
 function mapStateToProps(state, ownProps) {
+  return {
+    showInfo: state.home.homeShowInfo,
+    moduleInfo: state.home.homeTemplateInfo,
+    sign: state.myModel.signResult,
 
-    return {
-        showInfo: state.home.homeShowInfo,
-        moduleInfo: state.home.homeTemplateInfo,
-        sign: state.myModel.signResult,
-
-        userReportHome: state.home.userReportHome,
-
-    }
+    userReportHome: state.home.userReportHome,
+  };
 }
 
 function mapDispatchToProps(dispatch) {
-    return {
-        getHomeShowConfig: (data, callback) => dispatch(getHomeShowConfig(data, callback)),
-        getHomeTemplateConfig: (data, callback) => dispatch(getHomeTemplateConfig(data, callback)),
-
-        getModubleById: (data, callback) => dispatch(getModubleById(data, callback)),
-        getVisitCount: (callback) => dispatch(getVisitCount(callback)),
-        getReportHome: (data, callback) => dispatch(getReportHome(data, callback)),
-        getCalendarList: (data, callback) => dispatch(getCalendarList(data, callback)),
-        getAssToken: (data, callback) => dispatch(getAssToken(data, callback)),
-    }
+  return {
+    getHomeShowConfig: (data, callback) =>
+      dispatch(getHomeShowConfig(data, callback)),
+    getHomeTemplateConfig: (data, callback) =>
+      dispatch(getHomeTemplateConfig(data, callback)),
+
+    getModubleById: (data, callback) =>
+      dispatch(getModubleById(data, callback)),
+    getVisitCount: (callback) => dispatch(getVisitCount(callback)),
+    getReportHome: (data, callback) => dispatch(getReportHome(data, callback)),
+    getCalendarList: (data, callback) =>
+      dispatch(getCalendarList(data, callback)),
+    getAssToken: (data, callback) => dispatch(getAssToken(data, callback)),
+  };
 }
 
-
 //cpic为定制项目公司code，二层目录对象名（cpicPortal）为站点名
 const initConfig = {
-    cpic: {
-        cpicPortal: {
-            viewTitle: '太保寿险学习平台',
-            navModel: 2,
-        },
-        cpicCases: {
-            viewTitle: '太库',
-            navModel: 1,
-            heroHidden: false,
-        },
-        cpicShare: {
-            viewTitle: '太享',
-            navModel: 2,
-
-        }
+  cpic: {
+    cpicPortal: {
+      viewTitle: "太保寿险学习平台",
+      navModel: 2,
     },
-    cpicoperation: {
-        home: {}
+    cpicCases: {
+      viewTitle: "太库",
+      navModel: 1,
+      heroHidden: false,
     },
-    shyz: {}
-
-}
+    cpicShare: {
+      viewTitle: "太享",
+      navModel: 2,
+    },
+  },
+  cpicoperation: {
+    home: {},
+  },
+  shyz: {},
+};
 const defaultConfig = {
-    viewTitle: intl.get("Home"),           //首页标题
-    navModel: 0,                  //0:导航全部显示    1:只显示搜索栏      2不显示
-    heroHidden: true,            //是否隐藏英雄榜栏目
-
-}
+  viewTitle: intl.get("Home"), //首页标题
+  navModel: 0, //0:导航全部显示    1:只显示搜索栏      2不显示
+  heroHidden: true, //是否隐藏英雄榜栏目
+};
 
 class Menulearn extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isLoading: true,
-            imageList: [],
-            btnGroup: [],
-            announceList: [],
-            announceIndex: 0,
-            moduleList: [],
-            noreadCount: 0,
-            viewConfig: {},
-            companyCode: location.hash.split("/")[1],
-            siteCode: location.hash.split("/")[2],
-            isAPPEnableSign: 0,
-            isEnableSign: 0,
-            isFirstLogin: 0,
-            // hasReportFlag: '',
-            showFooter: false,
-            showNewUserTips: false
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      imageList: [],
+      newsList: [],
+      btnGroup: [],
+      announceList: [],
+      announceIndex: 0,
+      moduleList: [],
+      noreadCount: 0,
+      viewConfig: {},
+      companyCode: location.hash.split("/")[1],
+      siteCode: location.hash.split("/")[2],
+      isAPPEnableSign: 0,
+      isEnableSign: 0,
+      isFirstLogin: 0,
+      // hasReportFlag: '',
+      showFooter: false,
+      showNewUserTips: false,
+    };
+  }
 
-    componentWillMount() {
-        /*根据站点配置首页显示规则:根据站点名来取配置，如果没有则取默认值
+  componentWillMount() {
+    /*根据站点配置首页显示规则:根据站点名来取配置，如果没有则取默认值
             1.太保定制公司code:cpic
             站点名               viewTitle:顶部文案                   navModel:导航显示（整体去/留下搜索栏）        heroHidden:英雄榜显示
             cpicPortal          太保寿险学习平台                      整体去                                     不显示
@@ -141,313 +138,400 @@ class Menulearn extends React.Component {
             2.initConfig中新增站点项配置
             3.根据配置属性来定制UI
         */
-        let config = initConfig[location.href.split('/')[4]] && initConfig[location.href.split('/')[4]][location.href.split('/')[5]];
-        this.state.viewConfig = { ...defaultConfig, ...config };
-
-
-    }
-
-    componentWillReceiveProps(props, nextState) {
-        console.log(props, nextState);
-        let siteCode = props.location.pathname.split("/")[2];
-        if (this.state.siteCode != '' && this.state.siteCode != siteCode) {
-            let _this = this;
-            window.location.reload();
-            _this.state.siteCode = siteCode;
-            this.setState({ isLoading: true });
-            this.props.getHomeShowConfig("WECHAT", () => {
-                _this.setState({ isLoading: false });
-                if (_this.props.showInfo == '') {
-                    _this.setState({
-                        imageList: [],
-                        btnGroup: [],
-                        announceList: [],
-                    })
-                } else {
-                    _this.setState({
-
-                        imageList: _this.props.showInfo.imageList,
-                        btnGroup: _this.props.showInfo.navigateList.filter((item, index) => {
-                            return index < 10;
-                        }),
-                        announceList: _this.props.showInfo.announcementList,
-
-                    });
-                }
-
-            });
-
-
-
-
-        };
-    }
-
-
-    componentWillUpdate() {
-        let config = initConfig[location.href.split('/')[4]] && initConfig[location.href.split('/')[4]][location.href.split('/')[5]];
-        this.state.viewConfig = { ...defaultConfig, ...config };
-    }
-
-    componentDidMount() {
-        document.title = intl.get("Home");
-        let _this = this;
-        const isAPPEnableSign = sessionStorage.getItem("isAPPEnableSign");
-        const isEnableSign = sessionStorage.getItem("isEnableSign");
-        const isFirstLogin = sessionStorage.getItem("isFirstLogin");
-        this.setState({
-            isAPPEnableSign: isAPPEnableSign,
-            isEnableSign: isEnableSign,
-            isFirstLogin: isFirstLogin,
-        })
-        wx.hideMenuItems({
-            menuList: ["menuItem:share:appMessage", "menuItem:share:timeline"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
-        });
-        this.setState({ isLoading: true });
-
-        
-
-        this.props.getHomeShowConfig("WECHAT", () => {
-            _this.setState({
-                imageList: _this.props.showInfo.imageList,
-                btnGroup: _this.props.showInfo.navigateList,
-                announceList: _this.props.showInfo.announcementList,
-                isLoading: false,
-                showNewUserTips:true
-            });
-        });
-
-
-        if (this.props.sign) {
-            // cosnole.log(this.props.sign);
-            wx.config({
-
-                ...this.props.sign,
-                jsApiList: ["hideMenuItems"],
-            });
-            wx.ready(() => {
-                wx.hideMenuItems({
-                    menuList: ["menuItem:share:appMessage", "menuItem:share:timeline", "menuItem:share:qq", "menuItem:share:weiboApp"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
-                });
-            });
-
-        }
-        // terminalType  1PC 2APP 3移动
-        this.props.getReportHome({ terminalType: 3 }, (res) => {
-            console.log("res==", res);
-            this.setState({
-                hasReportFlag: res.data.reportId
-            })
-        })
-    }
-
-    hasNewUserTips = ()=>{
-        if(location.host.includes("test.wechat.kmelearning.com")){
-            return true;
-        }else if(func.allCode()=="ebscn/essc"){
-            return true;
-        }else{
-            return false;
+    let config =
+      initConfig[location.href.split("/")[4]] &&
+      initConfig[location.href.split("/")[4]][location.href.split("/")[5]];
+    this.state.viewConfig = { ...defaultConfig, ...config };
+  }
+
+  componentWillReceiveProps(props, nextState) {
+    let siteCode = props.location.pathname.split("/")[2];
+    if (this.state.siteCode != "" && this.state.siteCode != siteCode) {
+      let _this = this;
+      window.location.reload();
+      _this.state.siteCode = siteCode;
+      this.setState({ isLoading: true });
+      this.props.getHomeShowConfig("WECHAT", () => {
+        _this.setState({ isLoading: false });
+
+        console.log(_this.props, "11111111111111~~~~~~~~~~~~");
+        if (_this.props.showInfo == "") {
+          _this.setState({
+            imageList: [],
+            btnGroup: [],
+            announceList: [],
+            newsList: [],
+          });
+        } else {
+          _this.setState({
+            newsList: _this.props.showInfo.newsList,
+            imageList: _this.props.showInfo.imageList,
+            btnGroup: _this.props.showInfo.navigateList.filter(
+              (item, index) => {
+                return index < 10;
+              }
+            ),
+            announceList: _this.props.showInfo.announcementList,
+          });
         }
+      });
     }
-
-    handleClick = (data) => {
-      if(data.relationFuncCode === 'community'){
-        this.props.getAssToken()
-      }else{
-        fnNavigate(data, 'navigateList');
-      }
-    };
-
-    heroJump = () => {
-
-        let herourl = 'http://yzlsj1.vmobel.cn/wap/index.html' + '?authorization=' + sessionStorage.getItem(func.getSiteCode()) + '#sort';
-        location.href = herourl;
-
-    }
-
-    timeoutShowFooter = () => {
-        let _this = this;
-        //李老师提出的优化
-        setTimeout(() => {
-            _this.setState({
-                showFooter: true
-            });
-        }, 1000);
-    }
-    taixiangSearchClick = () => {
-        location.href = 'http://yzlsj1.vmobel.cn/wap/casesearch.html' + '?authorization=' + sessionStorage.getItem(func.getSiteCode());
-    }
-
-
-    noticeItemClick(item) {
-        hashHistory.push({
-            pathname: func.routerBefore() + "/NewsMessageResult",
-            query: {
-                id: item.id
-            }
+  }
+
+  componentWillUpdate() {
+    let config =
+      initConfig[location.href.split("/")[4]] &&
+      initConfig[location.href.split("/")[4]][location.href.split("/")[5]];
+    this.state.viewConfig = { ...defaultConfig, ...config };
+  }
+
+  componentDidMount() {
+    document.title = intl.get("Home");
+    let _this = this;
+    const isAPPEnableSign = sessionStorage.getItem("isAPPEnableSign");
+    const isEnableSign = sessionStorage.getItem("isEnableSign");
+    const isFirstLogin = sessionStorage.getItem("isFirstLogin");
+    this.setState({
+      isAPPEnableSign: isAPPEnableSign,
+      isEnableSign: isEnableSign,
+      isFirstLogin: isFirstLogin,
+    });
+    wx.hideMenuItems({
+      menuList: ["menuItem:share:appMessage", "menuItem:share:timeline"], // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
+    });
+    this.setState({ isLoading: true });
+
+    this.props.getHomeShowConfig("WECHAT", () => {
+      _this.setState({
+        newsList: _this.props.showInfo.newsList,
+        imageList: _this.props.showInfo.imageList,
+        btnGroup: _this.props.showInfo.navigateList,
+        announceList: _this.props.showInfo.announcementList,
+        isLoading: false,
+        showNewUserTips: true,
+      });
+    });
+
+    if (this.props.sign) {
+      // cosnole.log(this.props.sign);
+      wx.config({
+        ...this.props.sign,
+        jsApiList: ["hideMenuItems"],
+      });
+      wx.ready(() => {
+        wx.hideMenuItems({
+          menuList: [
+            "menuItem:share:appMessage",
+            "menuItem:share:timeline",
+            "menuItem:share:qq",
+            "menuItem:share:weiboApp",
+          ], // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
         });
+      });
     }
-
-    noticeMainClick() {
-        hashHistory.push({
-            pathname: func.routerBefore() + "/announcement"
-        });
+    // terminalType  1PC 2APP 3移动
+    this.props.getReportHome({ terminalType: 3 }, (res) => {
+      console.log("res==", res);
+      this.setState({
+        hasReportFlag: res.data.reportId,
+      });
+    });
+  }
+
+  hasNewUserTips = () => {
+    if (location.host.includes("test.wechat.kmelearning.com")) {
+      return true;
+    } else if (func.allCode() == "ebscn/essc") {
+      return true;
+    } else {
+      return false;
     }
-
-    render() {
-        let bannerHeight = (document.body.clientWidth - 60) * (540 / 1125);
-
-        //轮播图参数
-        const carouselparam = {
-            height: bannerHeight,
-            radius: 10,
-        };
-        const {
-            imageList = [{}],
-            announceList,
-            btnGroup = [],
-            viewConfig,
-            isAPPEnableSign,
-            isEnableSign,
-            isFirstLogin,
-            showNewUserTips
-        } = this.state;
-        const carouselData = imageList.map((item) => {
-            return {
-                ...item,
-                id: item.bannerId,
-                url: item.linkUrl,
-                imageSrc: item.bannerPath
-            }
-        });
-        //九宫格数据
-
-        let currentTypeArr = location.href.split('/');
-        let currentType = currentTypeArr[5];
-
-        func.changeDocumentTitle(this.state.viewConfig.viewTitle);
-
-        // console.log("this.state men==",this.state);
-        // console.log("this.props men==",this.props);
-        // let newBtnGroup = btnGroup.slice(0,8);
-        let newBtnGroup = btnGroup;
-
-        // const btnGroupData = btnGroup.map((item, index) => {
-        //     return {
-        //         icon: <span className="iconspan"><img src={item.imgPath || wutu} style={{
-        //             height: "0.88rem",
-        //             width: "0.88rem",
-        //             borderRadius: '100%'
-        //         }} alt="" /></span>,
-        //         text: <span className="gridspan">{item.showName}</span>,
-        //         key: item.id,
-        //         data: item
-        //     }
-        // });
-
-
-        
-
-
-        return (
-            <OccupyImageComponent isFetching={this.state.isLoading} imageUrl={OccupyIndexImage}>
-                <div style={{ width: "100%", overflowX: "hidden" }}>
-                    {(isEnableSign == 1 & isFirstLogin == 1) ?
-                        <DaySignCard
-                            visible={true}
-                        /> :
-                        ""}
-                    {viewConfig.navModel == 2 ? null
-                        : viewConfig.navModel == 1 ?
-                            <div onClick={this.taixiangSearchClick}><SearchBar placeholder={intl.get("keyword")} maxLength={8} /></div>
-                            : <MenuhomeNav></MenuhomeNav>}
-
-                    {/* 站内提示 */}
-
-                    <IndexTips />
-                    {
-                        showNewUserTips ?
-                            <IndexFirstEnter />
-                            : ""
-                    }
-
-                    {/* 轮播图 */}
-
-                    <div className="carouseldiv">
-                        <div style={{ height: bannerHeight, position: "relative" }}>
-                            {
-                                carouselData && carouselData.length > 0 ?
-                                    <Mycarousel
-                                        carouselparam={carouselparam}
-                                        data={carouselData}
-                                        isIndex={1}
-                                    /> :
-                                    <Mycarousel
-                                        carouselparam={carouselparam}
-                                        data={[{ imageSrc: bannerDefault }]}
-                                        isIndex={1}
-                                    />
-                            }
-
-                        </div>
-                        <VisitCount
-                            getVisitCount={this.props.getVisitCount}
-                        />
-                    </div>
-
-                    {/* 选项卡 */}
-                    {
-                        newBtnGroup.length > 0 ?
-                        <IndexBtnScroll list={newBtnGroup} handleClick={this.handleClick} />:""
-                            // <IconCarousel btnGroup={btnGroupData} handleClick={this.handleClick} />
-                            // : ''
-                    }
-
-
-                    {/* 通知 :6月1号版本，隐藏首页的公告字段*/}
-                    {
-                        this.state.announceList && this.state.announceList.length > 0 ?
-                            <NoticeBlock
-                                height={80}
-                                data={this.state.announceList}
-                                itemClick={this.noticeItemClick}
-                                mainClick={this.noticeMainClick}
-                            />
-                            : ''
-                    }
-
-                    {
-                        viewConfig.heroHidden ? null :
-                            <div className='hero-pic' onClick={this.heroJump}>
-                                <img src={heropic} className="hero-icon" alt="" />
-                            </div>
-                    }
-
-
-                    <IndexModuleContainer />
-
-                    {/* 配置模块 */}
-                    {Boolean(this.props.userReportHome.reportId) ? <ReporFloatCard reportId={this.props.userReportHome.reportId} /> : ""}
-
-
-                    {/* 底部 */}
-                    {
-                        this.state.showFooter && false ?
-                            <Footline footText={intl.get("PublishKey47") || "没有更多了"} onlyText={true} /> : ""
-
-                    }
-
-                    {
-                        window.menuShowTab == 1 ?
-                            <div style={{ width: "100%", height: 100, backgroundColor: "transparent" }}></div> : ""
-                    }
-
-                </div>
-            </OccupyImageComponent>
-
-        );
+  };
+
+  handleClick = (data) => {
+    console.log(data, "锁定位置~~~~~~~");
+    if (data.relationFuncCode === "community") {
+      this.props.getAssToken();
+    } else {
+      fnNavigate(data, "navigateList");
     }
+  };
+
+  heroJump = () => {
+    let herourl =
+      "http://yzlsj1.vmobel.cn/wap/index.html" +
+      "?authorization=" +
+      sessionStorage.getItem(func.getSiteCode()) +
+      "#sort";
+    location.href = herourl;
+  };
+
+  timeoutShowFooter = () => {
+    let _this = this;
+    //李老师提出的优化
+    setTimeout(() => {
+      _this.setState({
+        showFooter: true,
+      });
+    }, 1000);
+  };
+  taixiangSearchClick = () => {
+    location.href =
+      "http://yzlsj1.vmobel.cn/wap/casesearch.html" +
+      "?authorization=" +
+      sessionStorage.getItem(func.getSiteCode());
+  };
+
+  noticeItemClick(item) {
+    hashHistory.push({
+      pathname: func.routerBefore() + "/NewsMessageResult",
+      query: {
+        id: item.id,
+      },
+    });
+  }
+
+  noticeMainClick() {
+    hashHistory.push({
+      pathname: func.routerBefore() + "/announcement",
+    });
+  }
+  newsItemClick = (data) => {
+    hashHistory.push({
+      pathname: func.routerBefore() + "/NewsMessageResult",
+      query: { id: data.id, number: data.number },
+    });
+  };
+  render() {
+    let bannerHeight = (document.body.clientWidth - 60) * (540 / 1125);
+
+    //轮播图参数
+    const carouselparam = {
+      height: bannerHeight,
+      radius: 10,
+    };
+    const {
+      imageList = [{}],
+      newsList = [],
+      announceList,
+      btnGroup = [],
+      viewConfig,
+      isAPPEnableSign,
+      isEnableSign,
+      isFirstLogin,
+      showNewUserTips,
+    } = this.state;
+    const carouselData = imageList.map((item) => {
+      return {
+        ...item,
+        id: item.bannerId,
+        url: item.linkUrl,
+        imageSrc: item.bannerPath,
+      };
+    });
+    //九宫格数据
+    func.changeDocumentTitle(this.state.viewConfig.viewTitle);
+    let newBtnGroup = btnGroup;
+    return (
+      <OccupyImageComponent
+        isFetching={this.state.isLoading}
+        imageUrl={OccupyIndexImage}
+      >
+        <div style={{ width: "100%", overflowX: "hidden" }}>
+          {(isEnableSign == 1) & (isFirstLogin == 1) ? (
+            <DaySignCard visible={true} />
+          ) : (
+            ""
+          )}
+          {viewConfig.navModel == 2 ? null : viewConfig.navModel == 1 ? (
+            <div onClick={this.taixiangSearchClick}>
+              <SearchBar placeholder={intl.get("keyword")} maxLength={8} />
+            </div>
+          ) : (
+            <MenuhomeNav></MenuhomeNav>
+          )}
+
+          {/* 站内提示 */}
+
+          <IndexTips />
+          {showNewUserTips ? <IndexFirstEnter /> : ""}
+
+          {/* 轮播图 */}
+
+          <div className="carouseldiv">
+            <div style={{ height: bannerHeight, position: "relative" }}>
+              {carouselData && carouselData.length > 0 ? (
+                <Mycarousel
+                  carouselparam={carouselparam}
+                  data={carouselData}
+                  isIndex={1}
+                />
+              ) : (
+                <Mycarousel
+                  carouselparam={carouselparam}
+                  data={[{ imageSrc: bannerDefault }]}
+                  isIndex={1}
+                />
+              )}
+            </div>
+            <VisitCount getVisitCount={this.props.getVisitCount} />
+          </div>
+
+          {/* 选项卡 */}
+          {
+            newBtnGroup.length > 0 ? (
+              <IndexBtnScroll
+                list={newBtnGroup}
+                handleClick={this.handleClick}
+              />
+            ) : (
+              ""
+            )
+            // <IconCarousel btnGroup={btnGroupData} handleClick={this.handleClick} />
+            // : ''
+          }
+          <div style={{ fontSize: "36px", fontWeight: "600" }}>
+            <span
+              style={{
+                display: "inline-block",
+                width: "9px",
+                height: "34px",
+                backgroundColor: "#FC5B2B",
+                marginLeft: "4%",
+                marginRight: "1%",
+              }}
+            ></span>
+            精选资讯
+          </div>
+          {newsList && newsList.length > 0 ? (
+            <NewsItemList list={newsList} onClick={this.newsItemClick} />
+          ) : (
+            ""
+          )}
+          {/* 通知 :6月1号版本，隐藏首页的公告字段*/}
+          {this.state.announceList && this.state.announceList.length > 0 ? (
+            <NoticeBlock
+              height={80}
+              data={this.state.announceList}
+              itemClick={this.noticeItemClick}
+              mainClick={this.noticeMainClick}
+            />
+          ) : (
+            ""
+          )}
+
+          {viewConfig.heroHidden ? null : (
+            <div className="hero-pic" onClick={this.heroJump}>
+              <img src={heropic} className="hero-icon" alt="" />
+            </div>
+          )}
+
+          <IndexModuleContainer />
+
+          {/* 配置模块 */}
+          {Boolean(this.props.userReportHome.reportId) ? (
+            <ReporFloatCard reportId={this.props.userReportHome.reportId} />
+          ) : (
+            ""
+          )}
+
+          {/* 底部 */}
+          {this.state.showFooter && false ? (
+            <Footline
+              footText={intl.get("PublishKey47") || "没有更多了"}
+              onlyText={true}
+            />
+          ) : (
+            ""
+          )}
+
+          {window.menuShowTab == 1 ? (
+            <div
+              style={{
+                width: "100%",
+                height: 100,
+                backgroundColor: "transparent",
+              }}
+            ></div>
+          ) : (
+            ""
+          )}
+        </div>
+      </OccupyImageComponent>
+    );
+  }
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Menulearn);
+const NewsItemList = ({ list, onClick }) => {
+  return (
+    <div className="news-item-list-container">
+      {list.map((item, index) => {
+        let data = {
+          id: item.id,
+          name: item.fileName,
+          image: item.logoPath || newsDefaultImage,
+          number: item.number,
+          releaseTime: item.releaseTime,
+        };
+        if (index < list.length - 1) {
+          return (
+            <Fragment>
+              <IndexNewsItem
+                key={index}
+                data={data}
+                onClick={() => onClick(item)}
+              />
+            </Fragment>
+          );
+        } else {
+          return (
+            <IndexNewsItem
+              key={index}
+              data={data}
+              onClick={() => onClick(item)}
+            />
+          );
+        }
+      })}
+    </div>
+  );
+};
+const IndexNewsItem = ({ data, onClick }) => {
+    let imageWidth = Math.floor(document.body.clientWidth * (220 / 750));
+    let imageHeight = Math.floor(imageWidth * (132 / 220));
+    imageWidth = imageWidth < 220 ? 220 : imageWidth;
+    imageHeight = imageHeight < 132 ? 132 : imageHeight;
+  
+    return (
+      <div className="index-module-news-item-container" onClick={onClick}>
+        <div className="index-module-news-item-content-container">
+          <img
+            src={data.image}
+            alt="图片加载失败"
+            className="index-module-news-item-image"
+            style={{ width: imageWidth, height: imageHeight }}
+          />
+          <div
+            className="index-module-news-info-container"
+            style={{ height: imageHeight }}
+          >
+            <div className="index-module-news-item-info-name">{data.name}</div>
+            <div className="index-module-news-item-info-text">
+              <img
+                src={newsClockIcon}
+                alt=""
+                className="index-module-news-item-info-icon"
+              />
+              {func.dateFormat(data.releaseTime, false, true)}
+              <Icon
+                type="eye"
+                style={{ fontSize: 24, marginRight: 10, marginLeft: 60 }}
+              />
+              {data.number}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
\ No newline at end of file

src/components/menume/menume.css

+.singleLineOverflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.my-menu-body {
+  width: 100%;
+  background: #f7f7f7;
+}
+.my-menu-body .header-info-box {
+  padding: 16px 30px;
+  background: linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 32%, #ffffff 39%, #ffffff 100%);
+}
+.my-menu-body .header-info-box .personal-info-main {
+  background: url("image/menumeBg.png") no-repeat;
+  background-size: 100%;
+  box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  height: 364px;
+  padding: 34px 30px;
+  position: relative;
+}
+.my-menu-body .header-info-box .personal-info-main .playcard-entry {
+  width: 128px;
+  height: 52px;
+  background: linear-gradient(138deg, #ffb73d 0%, #ff9948 100%);
+  box-shadow: 0px 2px 16px 0px rgba(255, 158, 71, 0.25);
+  border-radius: 26px;
+  line-height: 52px;
+  text-align: center;
+  position: absolute;
+  z-index: 999;
+  right: 30px;
+  top: 34px;
+}
+.my-menu-body .header-info-box .personal-info-main .playcard-entry .playcard-icon {
+  width: 30px;
+  height: 32px;
+  margin: 4px;
+  padding-top: 4px;
+  vertical-align: top !important;
+}
+.my-menu-body .header-info-box .personal-info-main .playcard-entry .playcard-text {
+  font-size: 28px;
+  font-weight: 500;
+  color: #ffffff;
+  margin: 4px;
+  position: relative;
+  top: -2px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info {
+  width: 100%;
+  padding-left: 100px;
+  padding-right: 130px;
+  position: relative;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info .personal-img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info .personal-right {
+  margin-left: 16px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info .personal-right .personal-name {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info .personal-right .personal-name .name {
+  font-size: 36px;
+  font-weight: 600;
+  color: #ffffff;
+  display: inline-block;
+  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info .personal-right .personal-name .position {
+  font-size: 24px;
+  font-weight: 400;
+  color: #ffffff;
+  margin: 14px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-info .personal-right .company-name {
+  font-size: 24px;
+  font-weight: 400;
+  color: #ffffff;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-activity {
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-activity .activity-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-activity .activity-item .item-icon {
+  width: 40px;
+  height: 40px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-activity .activity-item .item-name {
+  font-size: 24px;
+  font-weight: 400;
+  color: #ffffff;
+  margin: 4px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-activity .activity-item .item-count {
+  font-size: 24px;
+  font-weight: 400;
+  color: #ffffff;
+  margin: 4px;
+}
+.my-menu-body .header-info-box .personal-info-main .personal-activity .activity-item:nth-child(1) {
+  border-right: 1px solid #fff;
+}
+.my-menu-body .header-info-box .study-record-info {
+  height: 240px;
+  border-radius: 10px ;
+  background: #ffffff;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  margin: -36px 20px 0 20px;
+  padding: 16px 20px 20px 20px;
+  position: relative;
+  top: -30px;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-top .record-title {
+  font-size: 28px;
+  font-weight: 500;
+  color: #333;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-top .record-date {
+  font-size: 24px;
+  font-family: HelveticaNeue;
+  color: #333;
+  float: right;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-top .record-date .date-param {
+  margin: 20px;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-top .record-date .show-icon {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-width: 10px;
+  border-style: solid;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 0;
+  vertical-align: top;
+  border-color: white;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  margin-top: 14px;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-buttom {
+  display: flex;
+  flex-wrap: wrap;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-buttom .record-item {
+  width: 50%;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-buttom .record-item .record-count {
+  font-size: 48px;
+  font-weight: 500;
+  color: #333333;
+  display: inline-block;
+  position: relative;
+  top: 10px;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-buttom .record-item .record-count .unit {
+  font-size: 24px;
+}
+.my-menu-body .header-info-box .study-record-info .study-record-buttom .record-item .record-name {
+  width: 52%;
+  height: 72px;
+  line-height: 72px;
+  font-size: 24px;
+  font-weight: 400;
+  display: inline-block;
+  color: #333333;
+}
+.my-menu-body .menuGoldMall {
+  padding: 20px 30px 20px 40px;
+  height: 140px;
+  background-color: #fff;
+}
+.my-menu-body .menuGoldMall .menuChildGoldMall {
+  width: 100%;
+  height: 100px;
+  line-height: 100px;
+  font-size: 32px;
+  background-image: url('image/goldBG.png');
+  border-radius: 10px;
+}
+.my-menu-body .menuGoldMall .menuChildGoldMall .item-count {
+  float: right;
+  color: #000000;
+}
+.my-menu-body .menuGoldMall .menuChildGoldMall .item-icon {
+  float: right;
+}
+.my-menu-body .list-box {
+  padding: 0 20px;
+  background-color: #fff;
+}
+.my-menu-body .list-box .list-item {
+  height: 120px;
+  line-height: 120px;
+  border-bottom: solid 2px #f4f4f4;
+  font-size: 32px;
+}
+.my-menu-body .list-box .list-item .item-name {
+  color: #333333;
+  margin: 20px;
+}
+.my-menu-body .list-box .list-item .item-count {
+  float: right;
+  color: #c0c0c0;
+  margin: 0 12px;
+}
+.my-menu-body .list-box .list-item .item-icon {
+  float: right;
+}
+.my-menu-body .list-box .list-item .item-icon .arraw-icon {
+  position: relative;
+  top: 8px;
+}
+.my-menu-body .list-box .list-item:last-child {
+  border-bottom: unset;
+}
+.my-menu-body .menume-quit-login {
+  width: 100%;
+  height: 116px;
+  background-color: #f7f7f7;
+  padding-top: 16px;
+}
+.my-menu-body .menume-quit-login .menume-quit-login-btn {
+  height: 84px;
+  width: 100%;
+  background-color: #fff;
+  line-height: 84px;
+  font-size: 36px;
+  color: #4285f4;
+  font-weight: 400;
+  text-align: center;
+}
+.date-pick-modal .am-modal {
+  position: absolute;
+  bottom: 0;
+}
+.date-pick-modal .am-modal .date-pick-modal-header {
+  height: 66px;
+  font-size: 32px;
+  width: 100%;
+  border-bottom: 2px solid #efeff4;
+  line-height: 66px;
+  padding: 0 48px;
+}
+.date-pick-modal .am-modal .date-pick-modal-header .date-pick-concel {
+  float: left;
+  color: #999999;
+}
+.date-pick-modal .am-modal .date-pick-modal-header .date-pick-ok {
+  float: right;
+  color: #4285f4;
+}
+.date-pick-modal .am-modal .date-pick-have-picked {
+  font-size: 28px;
+  color: #999999;
+  display: grid;
+  grid-template-columns: 40% 20% 40%;
+  padding: 0 28px;
+  margin-top: 70px;
+  position: relative;
+  height: 56px;
+}
+.date-pick-modal .am-modal .date-pick-have-picked .isActive {
+  color: #4285f4;
+  position: relative;
+}
+.date-pick-modal .am-modal .date-pick-have-picked .isActive::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 2px solid #4285f4;
+}

src/components/menume/menume.jsx

 /* 
-    feature1007
-    个人中心重写：增加个人dashboard，去掉列表icon，重新布局；
-    zhouzhongyang20200603
+    chengming
 */
 
 import React from 'react';
@@ -22,7 +20,8 @@ import {
 import IconFont from '../../common/iconfontcomponent/index';
 import intl from "react-intl-universal";
 import IconfontD from '../../common/iconfontd'
-
+import MyCollect from './image/MyCollect.png'
+import BrowsingHistory from './image/BrowsingHistory.png'
 const nameTypeList = [
     { code: "ks", name: intl.get("MyExam") },
     { code: "jf", name: intl.get("MyCredit") },
@@ -115,7 +114,8 @@ const mapList = {
         number: 0,
         text: intl.get("menume22") || "我的分享",
         url: '/myshare',
-    }, ms: {
+    }, 
+    ms: {
         iconname: 'iconfont bell-o',
         name: 'myshare',
         color: '#4298d9',
@@ -491,31 +491,31 @@ class Menume extends React.Component {
                             </div>
                         </div>
                         <div className="personal-activity" >
-                            <div className="activity-item" onClick={() => hashHistory.push(func.routerBefore() + '/myperiod')}>
-                                <IconFont className="item-icon" style={{ fontSize: 56 }} type="icon-mine-studytimer" />
+                            <div className="activity-item" onClick={() => hashHistory.push(func.routerBefore() + '/mycollection')}>
+                                <img src={MyCollect} alt="" className="item-icon"/>
                                 <div className="item-info">
-                                    <span className="item-name">{intl.get("period")}</span>
-                                    <span className="item-count">{this.numFormat(myActivityInfo.studyCourseDuration)}</span>
+                                    <span className="item-name">{intl.get("MyCollect")}</span>
+                                    <span className="item-count">{this.numFormat(myActivityInfo.favoriteNum)}</span>
                                 </div>
                             </div>
-                            <div className="activity-item" onClick={() => hashHistory.push(func.routerBefore() + '/mycollection')}>
-                                <IconFont className="item-icon" style={{ fontSize: 56 }} type="icon-mine-collects" />
+                            <div className="activity-item" onClick={() => hashHistory.push(func.routerBefore() + '/browsingHistory')}>
+                            <img src={BrowsingHistory} alt="" className="item-icon"/>
                                 <div className="item-info">
-                                    <span className="item-name">{intl.get("Collect")}</span>
-                                    <span className="item-count">{this.numFormat(myActivityInfo.favoriteNum)}</span>
+                                    <span className="item-name">{intl.get("BrowsingHistory")}</span>
+                                    <span className="item-count">{this.numFormat(myActivityInfo.browsingHistoryNum)}</span>
                                 </div>
                             </div>
-                            <div className="activity-item" onClick={() => hashHistory.push(func.routerBefore() + '/integral/myintegral')}>
+                            {/* <div className="activity-item" onClick={() => hashHistory.push(func.routerBefore() + '/integral/myintegral')}>
                                 <IconFont className="item-icon" style={{ fontSize: 56 }} type="icon-mine-points" />
                                 <div className="item-info">
                                     <span className="item-name">{intl.get("Point")}</span>
                                     <span className="item-count">{this.numFormat(myActivityInfo.pointNum)}</span>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                     <div className="study-record-info">
-                        <div className="study-record-top" >
+                        {/* <div className="study-record-top" >
                             <span className="record-title" >{intl.get("studyLog") || "学习记录"}</span>
                             <span className="record-date" onClick={this.toPickDate}>
                                 <span className="date-param">{moment(this.state.currentParam.startDate).format("YYYY-MM-DD")}</span>
@@ -523,7 +523,7 @@ class Menume extends React.Component {
                                 <span className="date-param">{moment(this.state.currentParam.endDate).format("YYYY-MM-DD")}</span>
                                 <span className="show-icon" />
                             </span>
-                        </div>
+                        </div> */}
                         <div className="study-record-buttom">
                             <div className="record-item">
                                 <div className="record-name">{intl.get("finishCourseNum") || "完成课程数"}</div>

src/components/menume/menume.less

@@ -9,10 +9,11 @@
     background: linear-gradient(180deg, rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 1) 32%, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 1) 100%);
 
     .personal-info-main {
-      background: rgba(255, 255, 255, 1);
+      background: url("./image/menumeBg.png") no-repeat;
+      background-size: 100%;
       box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.1);
       border-radius: 10px;
-      height: 324px;
+      height: 364px;
       padding: 34px 30px;
       position: relative;
 
@@ -74,7 +75,7 @@
             .name {
               font-size: 36px;
               font-weight: 600;
-              color: rgba(51, 51, 51, 1);
+              color: rgb(255, 255, 255);
               display: inline-block;
               max-width: 80%;
               overflow: hidden;
@@ -84,7 +85,7 @@
             .position {
               font-size: 24px;
               font-weight: 400;
-              color: rgba(153, 153, 153, 1);
+              color: rgb(255, 255, 255);
               margin: 14px;
             }
           }
@@ -92,7 +93,7 @@
           .company-name {
             font-size: 24px;
             font-weight: 400;
-            color: rgba(51, 51, 51, 1);
+            color: rgb(255, 255, 255);
             width: 100%;
             white-space: nowrap;
             overflow: hidden;
@@ -100,80 +101,66 @@
           }
         }
       }
-
+      
       .personal-activity {
         display: flex;
+        justify-content: center;
         margin-top: 40px;
 
         .activity-item {
-          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           flex: 1;
 
           .item-icon {
-            width: 56px;
-            height: 56px;
+            width: 40px;
+            height: 40px;
           }
 
           .item-name {
             font-size: 24px;
             font-weight: 400;
-            color: rgba(153, 153, 153, 1);
+            color: rgb(255, 255, 255);
             margin: 4px;
           }
 
           .item-count {
             font-size: 24px;
             font-weight: 400;
-            color: rgba(51, 51, 51, 1);
+            color: rgb(255, 255, 255);
             margin: 4px;
           }
         }
+        .activity-item:nth-child(1){
+          border-right: 1px solid #fff;
+        }
       }
+      
+
     }
 
     .study-record-info {
       height: 240px;
-      // background: linear-gradient(180deg, rgba(67, 67, 67, 1) 0%, rgba(65, 56, 45, 1) 100%);
-      background: linear-gradient(#434343, #41382D);
+      border-radius:10px ;
+      background: rgb(255, 255, 255);
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
-      border-radius: 0px 0px 10px 10px;
       margin: -36px 20px 0 20px;
       padding: 16px 20px 20px 20px;
       position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        background-color: rgba(216, 216, 216, 1);
-        left: -10px;
-        top: 0px;
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        background-color: rgba(216, 216, 216, 1);
-        right: -10px;
-        top: 0px;
-      }
+      top: -30px;
 
       .study-record-top {
         .record-title {
           font-size: 28px;
           font-weight: 500;
-          color: rgba(255, 255, 255, 1);
+          color: #333;
         }
 
         .record-date {
           font-size: 24px;
           font-family: HelveticaNeue;
-          color: rgba(205, 205, 205, 1);
+          color: #333;
           float: right;
 
           .date-param {
@@ -211,7 +198,7 @@
           .record-count {
             font-size: 48px;
             font-weight: 500;
-            color: rgba(255, 255, 255, 0.95);
+            color: #333333;
             display: inline-block;
             position: relative;
             top: 10px;
@@ -229,7 +216,7 @@
             font-size: 24px;
             font-weight: 400;
             display: inline-block;
-            color: rgba(255, 255, 255, 0.65);
+            color: #333333;
           }
         }
       }
@@ -257,11 +244,6 @@
 
       .item-icon {
         float: right;
-
-        .arraw-icon {
-          // position: relative;
-          // top: 8px;
-        }
       }
     }
   }
@@ -374,10 +356,6 @@
         }
 
       }
-
-      .picked-start {}
-
-      .picked-end {}
     }
   }
 }
\ No newline at end of file

src/components/nav/menuhomeNav.jsx

@@ -32,13 +32,13 @@ class mehomeNav extends React.Component {
 
     componentDidMount() {
         // let store = this.props.store.getState();
-        let _this = this;
-        this.props.noReadCount(() => {
-            _this.setState({
-                noreadCount: _this.props.readCount
-            })
-        })
-        let appid = sessionStorage.getItem('appid');
+        // let _this = this;
+        // this.props.noReadCount(() => {
+        //     _this.setState({
+        //         noreadCount: _this.props.readCount
+        //     })
+        // })
+        // let appid = sessionStorage.getItem('appid');
 
 
 

src/components/newsList/index.jsx

-import React, { Component } from 'react';
+import React, { Component } from "react";
 import "./style.less";
-import { getNewsMessageList, newGetNewsBannerList } from "../../redux/action/newsMessageReducer";
+import {
+  getNewsMessageList,
+  newGetNewsBannerList,
+} from "../../redux/action/newsMessageReducer";
 import { connect } from "react-redux";
 import { hashHistory } from "react-router";
 import { bindActionCreators } from "redux";
@@ -9,257 +12,341 @@ import Fetching from "../../common/fetching/fetching";
 import { IndexNotMore } from "../indexComponent/indexComponent";
 import intl from "react-intl-universal";
 import NewsCarousel from "../../common/carsouelComponent";
-import { IndexNewsItem,IndexModuleItemEdge } from "../indexComponent/indexComponent";
-import { Fragment } from 'react';
+import {
+  IndexNewsItem,
+  IndexModuleItemEdge,
+} from "../indexComponent/indexComponent";
+import { Fragment } from "react";
 import newsDefaultImage from "../../common/iconImage/news-default-image.png";
 
 class NewsListPage extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            newsList: [],
-            currentClassifyId: "all",
-            classifyList: [],
-            bannerList: [],
-            pageNo: 1,
-            pageSize: 20,
-            isLoading: false,
-            isFetching:false,
-            hasMore: true
-        }
-
-    }
-
-    componentDidMount() {
-        document.title = intl.get('Information') || "新闻资讯";
-        let _this = this;
-        this.props.getNewsBannerList({ "bannerName": "NEWS", "terminalName": "WECHAT" }, () => {
-            console.log("获取轮播图 ok");
-            const { newsBannerList } = _this.props;
-            this.setState({
-                bannerList: newsBannerList.map(item => {
-                    return {
-                        id: item.id,
-                        type: item.type,
-                        image: item.bannerPath,
-                        relationId: item.linkUrl,
-                        linkUrl: item.linkUrl,
-                    }
-                }),
-            });
-        })
-        this.getNewsList(1, true, true);
-    }
-
-
-    getNewsList = (page, needFetching, needClassify) => {
-        const { pageSize, currentClassifyId } = this.state;
-        let param = {
-            pageNo: page,
-            pageSize: pageSize,
-            terminalName: "MOBILE",
-            typeName: "news"
-        }
-        if (currentClassifyId != "all") {
-            param.typeTwo = currentClassifyId;
-        }
-        let _this = this;
-        if (needFetching) {
-            this.setState({ isFetching: true });
-        }
-        this.setState({ isLoading: true });
-        this.props.getNewsMessageList(param, () => {
-            console.log("消息列表接口 ok");
-            const { classifyNews, news, pageTotal } = _this.props.newsMessageList;
-            let allClassify = classifyNews;
-            if (allClassify && allClassify.length > 0) {
-                allClassify.unshift({ id: "all", name: intl.get("AllNews") });
-            }
-            if (needClassify) {
-                this.setState({ classifyList: allClassify });
-            }
-            var { newsList } = _this.state;
-            _this.setState({
-                newsList: page == 1 ? news : newsList.concat(news),
-                pageNo: page,
-                isLoading: false,
-                isFetching:false
-            }, () => {
-                const { newsList } = _this.state;
-                if (newsList.length >= parseInt(pageTotal)) {
-                    _this.setState({
-                        hasMore: false
-                    });
-                } else {
-                    _this.setState({
-                        hasMore: true
-                    });
-                }
-            });
+  constructor(props) {
+    super(props);
+    this.state = {
+      newsList: [],
+      currentClassifyId: "all",
+      classifyList: [],
+      bannerList: [],
+      pageNo: 1,
+      pageSize: 20,
+      isLoading: false,
+      isFetching: false,
+      hasMore: true,
+    };
+  }
 
+  componentDidMount() {
+    document.title = intl.get("Information") || "新闻资讯";
+    let _this = this;
+    this.props.getNewsBannerList(
+      { bannerName: "NEWS", terminalName: "WECHAT" },
+      () => {
+        console.log("获取轮播图 ok");
+        const { newsBannerList } = _this.props;
+        this.setState({
+          bannerList: newsBannerList.map((item) => {
+            return {
+              id: item.id,
+              type: item.type,
+              image: item.bannerPath,
+              relationId: item.linkUrl,
+              linkUrl: item.linkUrl,
+            };
+          }),
         });
-    }
-
-    newsBannerItemClick = (data) => {
-        if (data.type == "news") {
-            hashHistory.push({
-                pathname: func.routerBefore() + '/NewsMessageResult',
-                query: { id: data.relationId }
-            })
-        } else {
-            window.location.href = data.linkUrl;
-        }
+      }
+    );
+    this.getNewsList(1, "", true, true);
+  }
 
+  getNewsList = (page, level, needFetching, needClassify) => {
+    const { location } = this.props;
+    const { query } = location;
+    const { pageSize, currentClassifyId } = this.state;
+    let param = {
+      pageNo: page,
+      pageSize: pageSize,
+      terminalName: "MOBILE",
+      typeName: "news",
+      relationId: query.id,
+      level: level,
+    };
+    if (currentClassifyId != "all") {
+      param.typeTwo = currentClassifyId;
     }
-    newsItemClick = (data) => {
-        hashHistory.push({
-            pathname: func.routerBefore() + '/NewsMessageResult',
-            query: { id: data.id ,number:data.number}
-        })
-
+    let _this = this;
+    if (needFetching) {
+      this.setState({ isFetching: true });
     }
-    newsClassifyClick = (data) => {
-        const { currentClassifyId } = this.state;
-        let _this = this;
-        if (currentClassifyId != data.id) {
-            this.setState({
-                currentClassifyId: data.id
-            }, () => {
-                _this.getNewsList(1);
+    this.setState({ isLoading: true });
+    this.props.getNewsMessageList(param, () => {
+      console.log("消息列表接口 ok");
+      const { classifyNews, news, pageTotal } = _this.props.newsMessageList;
+      let allClassify = classifyNews;
+      if (allClassify && allClassify.length > 0) {
+        allClassify.unshift({ id: "all", name: intl.get("AllNews") });
+      }
+      if (needClassify) {
+        this.setState({ classifyList: allClassify });
+      }
+      var { newsList } = _this.state;
+      _this.setState(
+        {
+          newsList: page == 1 ? news : newsList.concat(news),
+          pageNo: page,
+          isLoading: false,
+          isFetching: false,
+        },
+        () => {
+          const { newsList } = _this.state;
+          if (newsList.length >= parseInt(pageTotal)) {
+            _this.setState({
+              hasMore: false,
             });
+          } else {
+            _this.setState({
+              hasMore: true,
+            });
+          }
         }
-    }
+      );
+    });
+  };
 
-
-
-    listScroll = (e) => {
-        let thisObj = e.target;
-        var listScrollListener = func.throttle(func.onListScrollToEnd, 100);
-        listScrollListener(thisObj, "news-list-page-scroll-id", this.reachToEnd, 200);
+  newsBannerItemClick = (data) => {
+    if (data.type == "news") {
+      hashHistory.push({
+        pathname: func.routerBefore() + "/NewsMessageResult",
+        query: { id: data.relationId },
+      });
+    } else {
+      window.location.href = data.linkUrl;
     }
-    reachToEnd = () => {
-        const { isLoading, hasMore, pageNo } = this.state;
-        if (isLoading || !hasMore) {
-            return;
+  };
+  newsItemClick = (data) => {
+    hashHistory.push({
+      pathname: func.routerBefore() + "/NewsMessageResult",
+      query: { id: data.id, number: data.number },
+    });
+  };
+  newsClassifyClick = (data) => {
+    console.log(data, "点击情况~~~~~~~~~");
+    const { currentClassifyId } = this.state;
+    let _this = this;
+    if (currentClassifyId != data.id) {
+      this.setState(
+        {
+          currentClassifyId: data.id,
+        },
+        () => {
+          _this.getNewsList(1, data.level);
         }
-
-        this.getNewsList(pageNo + 1);
+      );
     }
+  };
 
+  listScroll = (e) => {
+    let thisObj = e.target;
+    var listScrollListener = func.throttle(func.onListScrollToEnd, 100);
+    listScrollListener(
+      thisObj,
+      "news-list-page-scroll-id",
+      this.reachToEnd,
+      200
+    );
+  };
+  reachToEnd = () => {
+    const { isLoading, hasMore, pageNo } = this.state;
+    if (isLoading || !hasMore) {
+      return;
+    }
 
-    render() {
-        let carouselHeight = (document.body.clientWidth-60)*(230/690);
-        const { isLoading,isFetching, newsList, bannerList, classifyList, currentClassifyId } = this.state;
-        return <Fetching isFetching={isFetching} >
-            <div className="news-list-page-container" onScroll={this.listScroll}>
-                <div
-                    className="news-list-page-scroll-container"
-                    id="news-list-page-scroll-id"
-                >
+    this.getNewsList(pageNo + 1);
+  };
 
-                    {
-                        bannerList && bannerList.length > 0
-                            ? <div className="news-banner-carsouel-container">
-                                <NewsCarousel
-                                    param={{ height: carouselHeight, radius: 10, frameOverflow: "hidden" }}
-                                    data={bannerList || []}
-                                    itemClick={this.newsBannerItemClick}
-                                />
-                            </div>
-                            : ''
-                    }
-                    {
-                        classifyList && classifyList.length > 0 ?
-                            <NewsClassifyList
-                                list={classifyList}
-                                currentClassifyId={currentClassifyId}
-                                onClick={this.newsClassifyClick}
-                            /> : ""
-                    }
-                    {
-                        newsList && newsList.length > 0 ?
-                            <NewsItemList list={newsList} onClick={this.newsItemClick} /> : ""
-                    }
-                    {
-                        newsList && newsList.length > 0 ?
-                            <div style={{ width: "100%", backgroundColor: "#f5f5f5" }}>
-                                <IndexNotMore text={isLoading ? intl.get("PublishKey66") + "..." : ""} />
-                            </div> : ""
-                    }
-                </div>
-            </div>
-        </Fetching>;
-    }
+  render() {
+    let carouselHeight = (document.body.clientWidth - 60) * (230 / 690);
+    const {
+      isLoading,
+      isFetching,
+      newsList,
+      bannerList,
+      classifyList,
+      currentClassifyId,
+    } = this.state;
+    return (
+      <Fetching isFetching={isFetching}>
+        <div className="news-list-page-container" onScroll={this.listScroll}>
+          <div
+            className="news-list-page-scroll-container"
+            id="news-list-page-scroll-id"
+          >
+            {bannerList && bannerList.length > 0 ? (
+              <div className="news-banner-carsouel-container">
+                <NewsCarousel
+                  param={{
+                    height: carouselHeight,
+                    radius: 10,
+                    frameOverflow: "hidden",
+                  }}
+                  data={bannerList || []}
+                  itemClick={this.newsBannerItemClick}
+                />
+              </div>
+            ) : (
+              ""
+            )}
+            {classifyList && classifyList.length > 0 ? (
+              <NewsClassifyList
+                list={classifyList}
+                currentClassifyId={currentClassifyId}
+                onClick={this.newsClassifyClick}
+              />
+            ) : (
+              ""
+            )}
+            {newsList && newsList.length > 0 ? (
+              <NewsItemList list={newsList} onClick={this.newsItemClick} />
+            ) : (
+              ""
+            )}
+            {newsList && newsList.length > 0 ? (
+              <div style={{ width: "100%", backgroundColor: "#f5f5f5" }}>
+                <IndexNotMore
+                  text={isLoading ? intl.get("PublishKey66") + "..." : ""}
+                />
+              </div>
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      </Fetching>
+    );
+  }
 }
 
 function mapStateToProps(state, ownProps) {
-
-    return {
-        newsMessageList: state.newsMessageReducer.newsMessageList,
-        newsBannerList: state.newsMessageReducer.newsBannerList || [],
-    }
+  return {
+    newsMessageList: state.newsMessageReducer.newsMessageList,
+    newsBannerList: state.newsMessageReducer.newsBannerList || [],
+  };
 }
 
 function mapDispatchToProps(dispatch) {
-    return {
-        getNewsMessageList: bindActionCreators(getNewsMessageList, dispatch),
-        getNewsBannerList: bindActionCreators(newGetNewsBannerList, dispatch),
-    }
+  return {
+    getNewsMessageList: bindActionCreators(getNewsMessageList, dispatch),
+    getNewsBannerList: bindActionCreators(newGetNewsBannerList, dispatch),
+  };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(NewsListPage);
 
 const NewsClassifyList = ({ list, currentClassifyId, onClick }) => {
-    let bgWidth = func.getDomOffsetWidthById("news-classify-list-scroll-id");
-    return <div className="news-classify-list-container">
-        <div className="news-classify-list-container-bg" style={{ width: bgWidth }}></div>
-        <div className="news-classify-list-scroll-container" id={"news-classify-list-scroll-id"} >
-            {
-                list.map((item, index) => {
-                    return <NewsClassifyItem
-                        key={index}
-                        data={item}
-                        isActive={currentClassifyId == item.id ? true : false}
-                        onClick={() => onClick(item)}
-                    />
-                })
-            }
-        </div>
-    </div>;
-}
-const NewsClassifyItem = ({ data, isActive, onClick }) => {
+  let bgWidth = func.getDomOffsetWidthById("news-classify-list-scroll-id");
+  return (
+    <div className="news-classify-list-container">
+      <div
+        className="news-classify-list-container-bg"
+      ></div>
+      <div
+        className="news-classify-list-scroll-container"
+        id={"news-classify-list-scroll-id"}
+      >
+        {list.map((item, index) => {
+          return (
+            <NewsClassifyItem
+              key={index}
+              data={item}
+              isActive={currentClassifyId == item.id ? true : false}
+              onClick={() => onClick(item)}
+            />
+          );
+        })}
+      </div>
 
-    return <div className="news-classify-item-container" onClick={onClick}>
-        {
-            isActive ?
-                <span>{data.name}</span> :
-                data.name
+      {list.map((item, index) => {
+        if (
+          item.childClassifyNews &&
+          currentClassifyId == item.id &&
+          item.childClassifyNews.length > 0
+        ) {
+          return (
+            <div
+              className="news-third-classify-list-scroll-container"
+              id={"news-classify-list-scroll-id"}
+            >
+              <NewsThirdClassifyItem
+                key={index}
+                data={item.childClassifyNews}
+                currentClassifyId={currentClassifyId}
+                onClick={() => onClick(item)}
+              />
+            </div>
+          );
+        } else {
+          return "";
         }
-    </div>;
-}
-
-const NewsItemList = ({ list,onClick }) => {
-
-    return <div className="news-item-list-container">
-        {
-            list.map((item, index) => {
-                let data = {
-                    id:item.id,
-                    name:item.fileName,
-                    image:item.logoPath||newsDefaultImage,
-                    number:item.number,
-                    releaseTime:item.releaseTime
-                }
-                if(index<list.length-1){
-                    return <Fragment>
-                        <IndexNewsItem key={index} data={data} onClick={()=>onClick(item)} />
-                        <IndexModuleItemEdge />
-                    </Fragment>
-                }else{
-                    return <IndexNewsItem key={index} data={data} onClick={()=>onClick(item)} />
-                }
-                
-            })
+      })}
+    </div>
+  );
+};
+const NewsClassifyItem = ({ data, isActive, onClick }) => {
+  return (
+    <div className="news-classify-item-container" onClick={onClick}>
+      {isActive ? <span>{data.name}</span> : data.name}
+    </div>
+  );
+};
+const NewsThirdClassifyItem = ({ data, currentClassifyId, onClick }) => {
+  return (
+    <div>
+      {data.map((item, index) => {
+        return (
+          <div className="news-third-classify-item-container" onClick={onClick}>
+            {currentClassifyId == item.id ? (
+              <span>{item.name}</span>
+            ) : (
+              item.name
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+const NewsItemList = ({ list, onClick }) => {
+  return (
+    <div className="news-item-list-container">
+      {list.map((item, index) => {
+        let data = {
+          id: item.id,
+          name: item.fileName,
+          image: item.logoPath || newsDefaultImage,
+          number: item.number,
+          releaseTime: item.releaseTime,
+        };
+        if (index < list.length - 1) {
+          return (
+            <Fragment>
+              <IndexNewsItem
+                key={index}
+                data={data}
+                onClick={() => onClick(item)}
+              />
+              <IndexModuleItemEdge />
+            </Fragment>
+          );
+        } else {
+          return (
+            <IndexNewsItem
+              key={index}
+              data={data}
+              onClick={() => onClick(item)}
+            />
+          );
         }
-    </div>;
-}
\ No newline at end of file
+      })}
+    </div>
+  );
+};

src/components/newsList/style.css

+.singleLineOverflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.news-list-page-container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.news-list-page-container .news-list-page-scroll-container {
+  width: 100%;
+  background-color: #fff;
+}
+.news-list-page-container .news-list-page-scroll-container .news-banner-carsouel-container {
+  width: 100%;
+  padding: 24px 30px;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container {
+  width: 100%;
+  height: 176px;
+  position: sticky;
+  background-color: #fff;
+  left: 0;
+  top: 0;
+  z-index: 9;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-classify-list-container-bg {
+  width: 100%;
+  height: 88px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #D23A29;
+  z-index: 1;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-classify-list-scroll-container {
+  width: max-content;
+  height: 88px;
+  position: relative;
+  z-index: 2;
+  padding: 0 10px;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-classify-list-scroll-container .news-classify-item-container {
+  max-width: 324px;
+  height: 88px;
+  line-height: 88px;
+  text-align: center;
+  margin: 0 25px;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 32px;
+  color: #fff;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-classify-list-scroll-container .news-classify-item-container span {
+  border-bottom: 4px solid #fff;
+  padding-bottom: 12px;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-third-classify-list-scroll-container {
+  width: max-content;
+  height: 60px;
+  position: relative;
+  z-index: 2;
+  padding: 0 10px;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-third-classify-list-scroll-container .news-third-classify-item-container {
+  max-width: 324px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  margin: 0 25px;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 30px;
+  color: #666;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.news-list-page-container .news-list-page-scroll-container .news-classify-list-container .news-third-classify-list-scroll-container .news-third-classify-item-container span {
+  color: #4285f4;
+}
+.news-list-page-container .news-list-page-scroll-container .news-item-list-container {
+  width: 100%;
+}

src/components/newsList/style.less

@@ -17,7 +17,7 @@
 
         .news-classify-list-container {
             width: 100%;
-            height: 88px;
+            height: 176px;
             position: sticky;
             background-color: #fff;
             left: 0;
@@ -32,8 +32,7 @@
                 position: absolute;
                 left: 0;
                 top: 0;
-                background-color: @themeColor;
-                opacity: 0.05;
+                background-color: #D23A29;
                 z-index: 1;
             }
             .news-classify-list-scroll-container{
@@ -51,6 +50,30 @@
                     display: inline-block;
                     vertical-align: middle;
                     font-size: 32px;
+                    color:#fff;
+                    font-weight:400;
+                    .singleLineOverflow;
+                    span{
+                        border-bottom: 4px solid #fff;
+                        padding-bottom: 12px;
+                    }
+                }
+            }
+            .news-third-classify-list-scroll-container{
+                width: max-content;
+                height: 60px;
+                position: relative;
+                z-index: 2;
+                padding: 0 10px;
+                .news-third-classify-item-container{
+                    max-width: 324px;
+                    height: 60px;
+                    line-height: 60px;
+                    text-align: center;
+                    margin: 0 25px;
+                    display: inline-block;
+                    vertical-align: middle;
+                    font-size: 30px;
                     color:#666;
                     font-weight:400;
                     .singleLineOverflow;

src/components/newsMessage/NewsMessage.js

@@ -160,9 +160,9 @@ class NewsMessage extends Component {
         this.props.getNewsMessageList(param2, () => {
             console.log("新闻列表接口 ok");
             //若存在二级tab则增加一项 所有新闻
-            if (_this.props.newsMessageList.classifyNews.length > 0) {
-                _this.props.newsMessageList.classifyNews.unshift({ id: "99", name: "所有新闻" })
-            }
+            // if (_this.props.newsMessageList.classifyNews.length > 0) {
+            //     _this.props.newsMessageList.classifyNews.unshift({ id: "99", name: "所有新闻" })
+            // }
 
             _this.setState({
                 classifyNews: _this.props.newsMessageList.classifyNews,

src/components/newsMessage/NewsMessageCss.css

@@ -38,11 +38,11 @@
   width: 1rem;
 }
 .new-border {
-  width: .1rem;
-  height: .1rem;
+  width: 0.1rem;
+  height: 0.1rem;
   border-radius: 50%;
   background-color: #000000;
-  margin-right: .1rem;
+  margin-right: 0.1rem;
 }
 .new-li {
   list-style-type: disc;
@@ -59,7 +59,7 @@
   width: 100%;
   color: #000000;
   font-size: 0.3rem;
-  padding: 20px;
+  padding: 20px 30px;
 }
 .footerText {
   color: #515151;
@@ -155,16 +155,20 @@
   border-radius: 0.16rem;
 }
 .news-item2-content .news-item2-box .title-span {
-  display: inline-block;
-  color: #505050;
+  display: block;
   font-size: 0.32rem;
   margin-left: 5%;
   margin-top: 5%;
-  line-height: 1.5;
+  width: 90%;
+  font-size: 40px;
+  font-family: PingFang SC, PingFang SC-400;
+  font-weight: 400;
+  color: #000;
+  line-height: 48px;
 }
 .news-item2-content .news-item2-box .title-p {
   width: 100%;
-  color: #d2d2d2;
+  color: #ABABAB;
   background-position: center;
   background-size: 100%;
   border-radius: 0.16rem;

src/components/newsMessage/NewsMessageCss.less

@@ -77,7 +77,7 @@
   width: 100%;
   color: #000000;
   font-size: 0.3rem;
-  padding: 20px;
+  padding: 20px 30px;
 }
 
 .footerText {
@@ -173,6 +173,7 @@
   background-position: center;
   background-size: 100%;
   border-radius: 0.16rem;
+
   .news-item2-box{
     width: 100%;
     min-height: 1.32rem;
@@ -181,22 +182,21 @@
     border-radius: 0.16rem;
     .title-span{
       display: block;
-      color: #505050;
       font-size: 0.32rem;
       margin-left: 5%;
       margin-top: 5%;
       //bottom: 7%;
       width:90%;
       font-size: 40px;
-      font-family: PingFangSC-Regular, PingFang SC;
+      font-family: PingFang SC, PingFang SC-400;
       font-weight: 400;
-      color: #4A4A4A;
+      color: #000;
       line-height: 48px;
 
     }
     .title-p{
       width: 100%;
-      color: #d2d2d2;
+      color: #ABABAB;
       background-position: center;
       background-size: 100%;
       border-radius: 0.16rem;

src/components/newsMessage/NewsMessageResult.css

+.singleLineOverflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.train-complete-icon,
+.train-in-complete-icon,
+.train-progress-icon {
+  width: 40px;
+  height: 40px;
+}
+.BraftEditor-content {
+  font-size: 0.25rem;
+}
+.am-accordion .am-accordion-item .am-accordion-header {
+  position: inherit !important;
+}
+.training-done-view {
+  overflow: hidden;
+  background: #fff;
+}
+.training-done-view .my-accordion {
+  padding-left: 0.82rem;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content {
+  overflow: inherit;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content .am-list-item {
+  padding-left: 0;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content .training-done-info {
+  margin: 0;
+  line-height: 0.65rem;
+  padding-right: 0.15rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 63%;
+  font-size: 0.3rem;
+  color: #666666;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content .tip-text {
+  margin: 0.1rem;
+  font-size: 0.2rem;
+  color: #4285f4;
+  line-height: 0.28rem;
+  border-radius: 0.3rem;
+  border: 1px solid #4285f4;
+  padding: 0.05rem 0.1rem;
+  overflow: visible;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content .tip-text-green {
+  margin: 0.1rem;
+  font-size: 0.2rem;
+  color: #559906;
+  line-height: 0.28rem;
+  border-radius: 0.3rem;
+  border: 1px solid #559906;
+  padding: 0.05rem 0.1rem;
+  overflow: visible;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content .am-list-body div:not(:last-child) .am-list-line:after {
+  left: -0.33rem;
+  width: 105%;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content .am-list-line:after {
+  left: -0.33rem;
+  border-bottom: 2px solid #ddd;
+}
+.training-done-view .my-accordion .am-accordion-item .am-accordion-content-box:after {
+  left: -0.33rem;
+  width: 105%;
+  border-bottom: 2px solid #ddd;
+}
+.list-item-box {
+  width: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.list-item-box i.dom {
+  position: absolute;
+  width: 0.16rem;
+  height: 0.16rem;
+  border-radius: 50%;
+  left: -0.42rem;
+  top: 0.26rem;
+}
+.list-item-box .smallDian {
+  background: #D2D2D2;
+}
+.list-item-box .activeDian {
+  background-color: #4285f4;
+}
+.review-text-style {
+  font-size: 0.24rem;
+}
+.product-info {
+  padding: 0.1rem;
+}
+.list-item-div {
+  display: flex;
+  overflow: hidden;
+  padding: 0.2rem 0.2rem 0.2rem 0;
+  flex-direction: row;
+  flex: 1;
+  margin-left: 0.2rem;
+  border-bottom: solid 1px #F6F6F6;
+}
+.list-item-div .list-item-img-box {
+  width: 0.6rem;
+  margin-right: 0.1rem;
+}
+.list-item-div .list-item-img-box .list-item-img {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 0.6rem;
+  background-color: #ccc;
+  overflow: hidden;
+}
+.list-item-div .list-item-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.list-item-div .list-item-content .item-footer-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.list-item-div .list-item-content .item-footer-box > p {
+  font-size: 20px;
+}
+.list-item-div .list-item-content .item-title-style {
+  font-size: 0.26rem !important;
+}
+.list-item-div .list-item-content .item-text-style {
+  padding-top: 0.1rem;
+  padding-bottom: 0.2rem;
+  font-size: 0.24rem;
+}
+.list-item-div .list-item-content .item-time-style {
+  font-size: 0.24rem;
+  color: #ccc;
+}
+.list-item-div .list-item-content .item-time-style .item-btn-style {
+  border: 0;
+  border-radius: 0.2rem;
+  margin-left: 0.2rem;
+  padding: 0 0.3rem;
+  color: #999;
+  background-color: transparent;
+}
+.list-item-div .list-item-content .item-time-style .item-btn-style-active {
+  background-color: #999;
+  border: 0;
+  border-radius: 0.2rem;
+  margin-left: 0.2rem;
+  padding: 0 0.3rem;
+  color: #fff;
+}
+.list-item-div .list-item-content .item-header-box {
+  display: flex;
+  flex: 1;
+  height: 274px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.list-item-div .list-item-content .item-header-box .item-zhan-style {
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-Size: 0.24rem;
+  color: #ccc;
+}
+.list-item-div .list-item-content .item-header-box .item-zhan-style .item-zhan-icon-active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.05rem;
+  color: slategray;
+}
+.list-item-div .list-item-content .item-header-box .item-zhan-style .item-zhan-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: gainsboro;
+}
+.train-logo {
+  width: 100%;
+  position: relative;
+}
+.train-logo img {
+  width: 100%;
+}
+.train-logo .signing_location_container {
+  position: absolute;
+  right: 0.2rem;
+  bottom: 0.32rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.4rem;
+  height: 0.64rem;
+  background: #e4eeff;
+  box-shadow: 0 0.02rem 0.1rem 0 rgba(0, 46, 123, 0.25);
+  border-radius: 0.32rem;
+}
+.train-logo .signing_location_container .signing_icon_container .signing_icon {
+  width: 0.32rem;
+  height: 0.32rem;
+}
+.train-logo .signing_location_container .signing_location_text {
+  font-size: 0.28rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #4285f4;
+  line-height: 0.36rem;
+  text-shadow: 0 0.02rem 0.1rem rgba(0, 46, 123, 0.25);
+}
+.train-footer-box {
+  display: flex;
+  border-top: solid 1px #dddddd;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1rem;
+  background-color: #fff;
+  overflow: hidden;
+  z-index: 999;
+}
+.train-footer-box div {
+  height: 0.6rem;
+  -webkit-box-flex: 6;
+  -webkit-flex: 6;
+  -ms-flex: 6;
+  flex: 6;
+}
+.train-footer-box input {
+  margin: auto;
+  height: 0.6rem;
+  background-color: #f5f5f5;
+  border-radius: 0.3rem;
+  display: inline-block;
+  border: none;
+  padding-left: 0.3rem !important;
+  font-size: 0.25rem;
+  color: #333333;
+}
+.train-footer-box .enroll-submit {
+  -webkit-box-flex: 2;
+  -webkit-flex: 2;
+  -ms-flex: 2;
+  flex: 2;
+  border: 0;
+  border-radius: 0;
+  font-size: 0.25rem;
+}
+.train-footer-box .enroll-submitInfo {
+  -webkit-box-flex: 3;
+  -webkit-flex: 3;
+  -ms-flex: 3;
+  flex: 3;
+  color: white;
+  font-size: 0.28rem;
+  border-radius: 0;
+  border: 0;
+  background-color: #4285f4;
+  padding: 0;
+  margin: 0;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.2rem 0;
+  border-bottom: solid 0.15rem #f4f4f4;
+  padding: 44px 25px 25px 18px;
+}
+.header .header-img {
+  height: 0.8rem;
+  border-radius: 50%;
+  margin-top: 10px;
+  background-color: #dddddd;
+  width: 0.8rem;
+}
+.header .header-img .img {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+.header .header-contain {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 60%;
+  align-items: left;
+  flex: 1;
+  padding-left: 10px;
+  padding-top: 25px;
+}
+.header .header-contain .item-zhan-icon-active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.05rem;
+  color: slategray;
+}
+.header .header-contain .item-zhan-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: gainsboro;
+}
+.header .header-contain > p {
+  padding: 5px;
+}
+.header .header-contain > p :nth-child(2) {
+  font-size: 30px;
+  color: #333333;
+}
+.header .header-contain .item-header-box {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  padding: 5px;
+}
+.header .header-contain .item-header-box p {
+  font-size: 20px;
+  color: #999999;
+}
+.header .header-title {
+  text-align: left;
+  width: 80%;
+  font-size: 0.25rem;
+}
+.header .header-time {
+  text-align: left;
+  width: 80%;
+  font-size: 0.2rem;
+  color: #b3b3b3;
+}
+.about-footer-button {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  widtheader-contain: 100%;
+  height: 0.8rem;
+  overflow: hidden;
+  z-index: 999;
+}
+.comment-title {
+  padding-top: 0.2rem;
+  background-color: white;
+}
+.segement-slider {
+  height: 0.2rem;
+  background-color: #f5f5f5;
+}
+.segement {
+  height: 2px;
+  background-color: #f5f5f5;
+  margin: 0 0.2rem;
+}
+.train-up-info {
+  font-size: 0.31rem;
+  color: #9B9B9B;
+  padding: 0.22rem 0.3rem;
+  width: 100%;
+  background-color: #fff;
+}
+.train-up-info p {
+  line-height: 0.46rem;
+  margin: 0;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  font-size: 24px;
+  color: #4A4A4A;
+  display: block;
+}
+.train-info {
+  font-size: 0.31rem;
+  color: #9B9B9B;
+  padding: 0.2rem auto;
+  width: 100%;
+  padding-left: 40px;
+  padding-bottom: 30px;
+  padding-top: 40px;
+  padding-right: 40px;
+  background-color: #fff;
+}
+.train-info p {
+  line-height: 0.48rem;
+  margin: 0;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  font-size: 40px;
+  color: #4A4A4A;
+}
+.train-info .descr p {
+  -webkit-line-clamp: unset;
+}
+.train-info div {
+  color: #9B9B9B;
+  font-size: 0.24rem;
+}
+.train-info .train-info-contain audio {
+  width: 100%;
+  margin-bottom: 0.6rem !important;
+}
+.train-info .train-info-contain video {
+  width: 100%;
+  height: 5rem;
+  margin-bottom: 0.3rem !important;
+}
+.train-info .train-info-contain a {
+  text-decoration: underline;
+  color: blue;
+}
+.train-info .train-info-contain p {
+  font-size: 24px !important;
+  padding: 0 !important;
+  color: #4A4A4A !important;
+}
+.product-rule {
+  padding: 0.2rem 0.4rem;
+}
+.am-accordion-header {
+  border-bottom: 0 !important;
+}
+.am-accordion .am-accordion-item .am-accordion-header {
+  padding-right: 0;
+}
+.train-contain-header {
+  padding: 0.2rem;
+  padding-left: 0;
+  white-space: pre-wrap !important;
+  height: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.train-contain-header div:nth-child(1) {
+  font-size: 34px !important;
+  width: 100%;
+  word-wrap: normal;
+  height: auto;
+  color: #4A4A4A;
+}
+.train-contain-header div:nth-child(2) {
+  font-size: 24px !important;
+  padding-top: 0.05rem;
+  color: #666666;
+}
+.train-contain-header div .train-progress-count {
+  position: absolute;
+  right: 0;
+  background-color: #4285f4;
+  bottom: 10px;
+  color: white;
+  width: 88px;
+  text-align: center;
+  font-size: 20px !important;
+  border-radius: 44px;
+}
+.train-contain-header div .train-compete-tag {
+  font-size: 20px !important;
+  color: #9999;
+  position: absolute;
+  width: fit-content;
+  right: 0;
+  bottom: 0;
+}
+.am-accordion-header {
+  height: auto !important;
+  line-height: inherit !important;
+  background-color: #F4F4F4 !important;
+}
+.train-content-cell {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 0.2rem;
+  padding-top: 0.1rem;
+  padding-bottom: 0.1rem;
+  border-bottom: solid 1px #F6F6F6;
+  height: 1rem;
+  position: relative;
+}
+.train-content-cell .training-done-info-name,
+.train-content-cell p {
+  font-family: PingFangSC-Regular;
+  font-size: 0.25rem;
+  color: #595959;
+  /*多行省略注释 liyua*/
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}
+.train-content-cell .train-content-status-cell {
+  position: absolute;
+  right: 20px;
+  bottom: 0;
+  width: fit-content;
+  text-align: center;
+}
+.train-content-cell .train-content-status-cell .circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  background-color: #ECF3FF;
+  position: absolute;
+  top: -14px;
+  right: 22px;
+}
+.tip-text-green {
+  margin: 0.1rem;
+  font-size: 0.2rem;
+  color: #559906;
+  line-height: 0.28rem;
+  border-radius: 0.3rem;
+  border: 1px solid #559906;
+  padding: 0.05rem 0.1rem;
+  overflow: visible;
+}
+.tip-text {
+  font-size: 0.2rem;
+  color: #999;
+  line-height: 0.28rem;
+  border-radius: 0.3rem;
+  border: 1px solid #e5e5e5;
+  padding: 0.05rem 0.1rem;
+  overflow: visible;
+}
+.tip-text-simple {
+  margin: 0.1rem;
+  font-size: 0.2rem;
+  color: #000;
+  line-height: 0.28rem;
+  border-radius: 0.3rem;
+  border: 1px solid #eee;
+  padding: 0.05rem 0.1rem;
+  overflow: visible;
+  margin-right: 0;
+}
+.train-contain-listcell {
+  display: flex;
+  flex-direction: row;
+  width: 80%;
+  align-items: center;
+  padding-left: 0.2rem;
+}
+.train-contain-listcell > img {
+  max-width: 32px;
+  max-height: 32px;
+  display: block;
+  margin: 0 20px;
+}
+.train-contain-listcell .certificate-icon {
+  height: 40px;
+  display: block;
+  max-width: unset;
+  max-height: unset;
+  margin: 0 0 0 40px;
+}
+.train-contain-listcell .am-accordion-header {
+  margin-right: 0px !important;
+}
+.train-comment {
+  display: flex;
+  flex-direction: column;
+}
+.train-comment > p {
+  background-color: white;
+}
+.train-comment .train-comment-contain {
+  background-color: white;
+  height: 162px;
+  padding: 58px 54px 58px 26px;
+  align-items: center;
+  border-bottom: solid 1px #e4e4e4;
+}
+.train-comment .train-comment-contain .cell-left-icon {
+  height: 43px;
+  margin-left: 9px;
+  width: auto;
+  margin-top: 5px;
+}
+.train-comment .train-comment-contain .comment-slider {
+  background: #F4F4F4;
+  border-radius: 23px;
+  width: 90%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding-left: 0.2rem;
+  font-size: 17pt;
+  color: #959595;
+  letter-spacing: 0.1px;
+  float: right;
+}
+.comment-body {
+  height: 2.5rem;
+  border-top: 2px solid #eee;
+  overflow: scroll;
+  background-color: #F4F4F4;
+  border-radius: 2px;
+}
+.signup-button {
+  display: block;
+  width: 100%;
+  height: 0.81rem;
+  position: fixed;
+  bottom: 0;
+  font-size: 0.35rem;
+  line-height: 0.71rem;
+  color: white;
+  text-align: center;
+}
+.train-pay-button-container {
+  width: 100%;
+  height: 128px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+  padding: 0 40px;
+  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.05);
+}
+.train-pay-button-container .train-pay-button {
+  width: 100%;
+  height: 88px;
+  line-height: 86px;
+  border-radius: 88px;
+  background-color: #ff8400;
+  margin-top: 20px;
+  text-align: center;
+  color: #fff;
+  font-size: 28px;
+  font-weight: 500;
+}
+.train-pay-button-container .train-pay-button .train-actualPrice {
+  font-size: 40px;
+  margin-left: 10px;
+  margin-right: 5px;
+}
+.train-pay-button-container .train-pay-button .train-originalPrice {
+  font-size: 24px;
+  font-weight: 400;
+  margin-left: 10px;
+  text-decoration: line-through;
+}
+.train-contain-list .ant-list-item {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  /* align-items: center; */
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.train-contain-list i.arrow {
+  display: none !important;
+}
+.train-comment-replay {
+  width: 100%;
+  background-color: #F4F4F4;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  margin-top: 12px;
+}
+.train-comment-replay > div:nth-child(1) {
+  font-family: PingFangSC-Regular;
+  font-size: 0.21rem;
+  color: #4A90E2;
+}
+.train-comment-replay > div:nth-child(2) {
+  padding: 10px 0px;
+  font-size: 0.21rem;
+}
+.train-comment-replay > div:nth-child(3) {
+  font-family: PingFangSC-Regular;
+  font-size: 0.17rem;
+  color: #999999;
+}
+.item-footer-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.item-footer-box > p {
+  font-size: 20px;
+}
+.item-footer-box .item-zhan-style {
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-Size: 0.24rem;
+  color: #ccc;
+}
+.item-footer-box .item-zhan-style img {
+  width: 30px;
+  height: 30px;
+}
+.item-footer-box .item-zhan-style span {
+  font-size: 24px;
+  color: #333;
+  opacity: 0.65;
+  margin-right: 10px;
+  padding-top: 8px;
+}
+.item-footer-box .item-zhan-style .item-zhan-icon-active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.05rem;
+  color: slategray;
+}
+.item-footer-box .item-zhan-style .item-zhan-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: gainsboro;
+}
+.train-plan-studytime {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.2rem 0.3rem;
+  border-bottom: solid 2px #f4f4f4;
+}
+.train-plan-studytime span {
+  font-size: 0.3rem;
+}
+.train-plan-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.train-plan-row span {
+  font-size: 0.15rem;
+}
+.train-plan-row .train-plan-cell {
+  border-radius: 0.05rem;
+  display: flex;
+  width: 50%;
+  margin: 0.1rem 0.3rem;
+  justify-content: space-around;
+  background-color: #f4f4f4;
+  height: 0.6rem;
+  align-items: center;
+}
+.train-plan-row .train-plan-cell > div > img {
+  width: 30px;
+  margin-right: 22px;
+  margin-top: -15px;
+}
+.train-plan-row .train-plan-cell > div > span {
+  font-size: 28px;
+}
+.train-header {
+  background-color: white;
+  padding-bottom: 0.5rem;
+}
+.train-info .train-info-contain a {
+  color: #1890ff;
+  text-decoration: none;
+}
+.train-comment-modal {
+  width: 80% !important;
+}
+.train-comment-modal .am-modal-content {
+  border-radius: 14px !important;
+}
+.train-comment-modal .coment-header {
+  height: 84px;
+  background-color: white;
+}
+.train-comment-modal .modal-rate {
+  width: 100%;
+  height: 78px;
+  font-size: 42px;
+  text-align: center;
+  border-bottom: 2px solid #ddd;
+  padding-top: 5px;
+}
+.train-comment-modal .modal-rate .ant-rate {
+  font-size: 42px;
+  color: #4285f4;
+}
+.train-comment-modal .modal-textarea-container {
+  width: 100%;
+  height: 234px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 14px !important;
+}
+.train-comment-modal .modal-textarea-container .modal-textarea {
+  width: 100%;
+  font-size: 28px;
+  color: #959595;
+  background-color: #f4f4f4;
+}
+.train-comment-modal .modal-button {
+  width: 50%;
+  height: 104px;
+  line-height: 104px;
+  text-align: center;
+  color: #4285f4;
+  border-top: 2px solid #eee;
+  border-right: 2px solid #eee;
+  background: #fff;
+}
+.train-comment-modal .modal-button2 {
+  width: 50%;
+  height: 104px;
+  line-height: 104px;
+  text-align: center;
+  border-top: 2px solid #eee;
+  border-left: 2px solid #eee;
+  background: #fff;
+}
+.train-comment-modal .am-modal-content {
+  padding: 0 !important;
+}
+.train-comment-modal .am-modal-content .am-modal-body {
+  padding: 0 !important;
+}
+.train-comment-input {
+  overflow-y: hidden;
+}
+.train-comment-input .am-modal-body {
+  padding: 0 !important;
+}
+.train-comment-input .am-modal-button-group-h .am-modal-button {
+  color: #108ee9;
+}
+.train-comment-input .am-modal-button-group-h .am-modal-button:first-child {
+  color: #000;
+}
+.train-comment-input .comment-body {
+  background: #fff;
+}
+.train-comment-input .comment-body .am-list-item {
+  padding-left: 22px;
+  padding-right: 22px;
+}
+.train-comment-input .comment-body .am-textarea-control textarea {
+  font-size: 28px;
+}
+.train-contain .am-tabs-tab div div {
+  padding-bottom: 0px !important;
+}
+.train-contain .am-tabs-tabpane-active {
+  background-color: #f4f4f4;
+}
+.train-contain .am-accordion-header {
+  padding-right: 0px !important;
+}
+.train-review .am-list-view-scrollview {
+  background-color: #f4f4f4 !important;
+}

src/components/newsMessage/NewsMessageResult.js

 /**
  * Created by pis on 2018/5/30.
  */
-import React, {Component} from 'react';
-import {Tabs, ListView, WingBlank, Icon, SearchBar} from 'antd-mobile';
+import React, { Component, Fragment } from 'react';
+import { Tabs, Modal, ListView, Toast, TextareaItem } from 'antd-mobile';
 import MediaDisplay from "../../common/mediaDisplay/index";
 
 const TabPane = Tabs.TabPane;
@@ -10,33 +10,59 @@ import '../../components/course/less/mycourse.less';
 import commonFetch from '../../util/fetchUtil';
 import url from '../../util/urlconfig'
 import './NewsMessageCss.less'
+import "./NewsMessageResult.less";
 import Iconclock from "./iconclock.png"
 import Iconlook from "./iconlook.png"
 import intl from "react-intl-universal";
 import moment from 'moment';
 
+import * as NewsMessageResultAction from "./NewsMessageResultAction";
+import { connect } from "react-redux";
+import SecListView from "../common/listview/secListView";
+import { hashHistory } from "react-router";
+import func from "../../util/commonFunc";
+import trainComment from "./comment-icon.jpg";
+import zan from "../../image/zan.png";
+import alreadyzan from "../../image/alreadyzan.png";
+import myIcon from "../../image/my.png";
+import trainCommentReplay from "../../image/train-comment.png";
 const Data = {
     title: '要知道，即使是上帝，如果还不到世界末日，他也不会轻易审判世人。',
     time: '2018-3-24 20:2',
     readPerson: 233222,
     bodyText: '治疗失眠症的最好办法，就是使你自己的身体达到疲劳的程度。为失眠症而忧虑，' +
-    '对你的伤害程度远远超过失眠本事。休息并不是说不做任何事，休息就是“弥补”。一小时的休息并不是在浪费生命，它能让你保持更多清醒的时间，使你能够做更多清醒而有效的事。',
+        '对你的伤害程度远远超过失眠本事。休息并不是说不做任何事，休息就是“弥补”。一小时的休息并不是在浪费生命，它能让你保持更多清醒的时间，使你能够做更多清醒而有效的事。',
     footerText: '本杰明·富兰克林青年时期并不是很聪明伶俐，但后来却变得非常精明能干，结果被委任为美国驻法大使。他成功的秘诀就是：“我不愿意说任何人的坏话……我只说我所认识的每一个人的一切优点。' +
-    '正如约翰逊博士所说：“要知道，即使是上帝，如果还不到世界末日，他也不会轻易审判世人。”'
+        '正如约翰逊博士所说：“要知道，即使是上帝，如果还不到世界末日，他也不会轻易审判世人。”'
 };
 
 class NewsMessageResult extends Component {
     constructor(props) {
         super(props);
+        const ds = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1 !== r2,
+        });
         this.state = {
             isLoading: true,
             name: '',
             tmpList: {},
             pageNo: 1,
             number: this.props.location.query.number,
-            randomKey:""
+            randomKey: "",
+
+            dataSource: ds,
+            isLoading1: false,
+            commentHasMore: true,
+            commentType: 1,
+            showEnroll: 1,
+            showComment: false,
+            refreshTrainComment: "",
+            replyCommentTypeId: 0,
+            trainLogoHeight: 400,
+            enablePosition: 0,
+            refreshTrainComment: "",
         };
-        document.title = intl.get('Information')||'新闻资讯'
+        document.title = intl.get('Information') || '新闻资讯'
     }
 
     componentWillMount() {
@@ -46,76 +72,448 @@ class NewsMessageResult extends Component {
     }
 
     componentDidMount() {
+        let _this = this;
+        this.logoHeightListen();
+        this.props.initailData();
         let params = {
             id: this.props.location.query.id
         };
         commonFetch.post(url.newsDetail, params,
             (response) => {
                 if (response.data.linkUrl) {
-                    location.replace(response.data.linkUrl) ;
+                    location.replace(response.data.linkUrl);
                 } else {
                     document.title = response.data.fileName;
                     this.setState({
                         tmpList: response.data,
                         isLoading: false,
-                        randomKey:new Date().getTime(),
-                        number:response.data.readCount
+                        randomKey: new Date().getTime(),
+                        number: response.data.readCount
                     });
                 }
             }
         );
-
+        let params1 = {
+            id: this.props.location.query.id,
+            bizType: "2",
+        };
+        this.setState({
+            isLoading1: true,
+        });
+        this.props.getReviewListData(
+            { ...params1, pageNo: 1, pageSize: 10 },
+            false,
+            () => {
+                const { reviewListTotle, reviewPageNo, reviewListData } =
+                    _this.props.NewsMessageResultReducer;
+                this.setState({
+                    isLoading1: false,
+                    commentHasMore:
+                        (reviewPageNo - 2) * 10 + reviewListData.length < reviewListTotle
+                            ? true
+                            : false,
+                });
+            }
+        );
+    }
+    logoHeightListen() {
+        this.setState({
+            trainLogoHeight: document.body.clientWidth * (225 / 375),
+        });
     }
-
     getVideo(src) {
         return (
             <video width="100%" controls="controls" preload="meta" x-webkit-airplay="true" webkit-playsinline="true"
-                   playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true">
+                playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true">
 
-                <source src={src} type="video/ogg"/>
-                <source src={src} type="video/mp4"/>
+                <source src={src} type="video/ogg" />
+                <source src={src} type="video/mp4" />
                 Your browser does not support the video tag.
             </video>
         )
     }
+    onLoadMore = () => {
+        let { id } = this.props.location.query;
+        let _this = this;
+        let { reviewPageNo } = this.props.TrainingStepsReducer;
+        let params = {
+            id: id,
+            bizType: '2'
+        };
+        if (this.state.isLoading) {
+            return;
+        }
+        if (!this.state.commentHasMore) {
+            return;
+        }
+        this.setState({
+            isLoading: true,
+        });
+
+        this.props.getReviewListData(
+            { ...params, pageNo: reviewPageNo, pageSize: 10 },
+            true,
+            () => {
+                const { reviewListTotle, reviewPageNo, reviewListData } =
+                    _this.props.TrainingStepsReducer;
+                this.setState({
+                    isLoading: false,
+                    commentHasMore:
+                        (reviewPageNo - 2) * 10 + reviewListData.length < reviewListTotle
+                            ? true
+                            : false,
+                });
+            }
+        );
+    };
 
+    //提交评论
+    trainCommitVerb = () => {
+        if (!this.state.commitContent) {
+            Toast.info(intl.get("PublishKey73") || "评论不能为空");
+            return;
+        }
+        let _this = this;
+
+        if (this.state.commentType == 1) {
+            let { id } = this.props.location.query;
+
+            let param = { trainingProjectId: id, content: this.state.commitContent, bizType: '2' };
+            this.props.commitVerb(param, () => {
+                this.setState({ commitContent: "" });
+                let params = {
+                    id: id,
+                    bizType: '2'
+                };
+                this.props.getReviewListData(
+                    { ...params, pageNo: 1, pageSize: 10 },
+                    false,
+                    () => {
+                        _this.setState({
+                            refreshTrainComment: new Date().getTime(),
+                        });
+                    }
+                );
+            });
+            this.setState({ showEnroll: 1, showComment: false });
+        } else if (this.state.commentType == 2) {
+            let { id } = this.props.location.query;
+            let param = {
+                trainingProjectId: id,
+                tpCommentId: this.state.replyCommentTypeId,
+                content: this.state.commitContent,
+            };
+            this.props.reviewReplyCommit(param, () => {
+                this.setState({ commitContent: "" });
+
+                let params = {
+                    id: id,
+                };
+                this.reviewListData(
+                    { ...params, pageNo: 1, pageSize: 10 },
+                    false,
+                    () => {
+                        this.setState({
+                            isLoading1: false,
+                        });
+                    }
+                );
+                Toast.info(intl.get("CommentSuccess") || "评论成功");
+            });
+            this.setState({ showEnroll: 1, showComment: false });
+        }
+    };
     render() {
-        const {dataSource, isLoading, tmpList} = this.state;
-        let linkUrl = tmpList.linkUrl ? tmpList.linkUrl : "";
+        const { tmpList } = this.state;
+        let { reviewListData, isMore,reviewListTotle } = this.props.NewsMessageResultReducer;
+        let loadMore = isMore ? (
+            <button className="load-more" onClick={() => this.onLoadMore()}>
+                {intl.get("PublishKey74") || "点击加载更多"}
+            </button>
+        ) : (
+            <button className="load-more">
+                {intl.get("PublishKey30") || "没有更多数据"}
+            </button>
+        );
+        this.state.dataSource = this.state.dataSource.cloneWithRows(
+            this.props.NewsMessageResultReducer.reviewListData
+        );
         return (
-            <div style={{overflowX:"hidden"}}>
+            <div style={{ overflowX: "hidden",backgroundColor:"#fff" }}>
                 {this._headerView()}
-                {/* <a href={linkUrl}>
-                    <img src={tmpList.logoPath} alt="" className="imageStyle"/>
-                </a> */}
+
                 <div className="bodyText">
-                    <MediaDisplay key={this.state.randomKey} content={tmpList.content}/>
+                    <MediaDisplay key={this.state.randomKey} content={tmpList.content} />
+                </div>
+                <div style={{width:'100%',height:'28px',backgroundColor:"#f7f7f7"}}></div>
+                <div style={{fontSize:'36px'}}> 
+                    <span style={{ display:'inline-block',width:'9px',height:'34px',backgroundColor:'#FC5B2B',marginLeft:'5%',marginRight:'1%'}}></span>
+                    评论({ reviewListTotle})</div>
+                <div
+                    className="train-contain"
+                    style={{ backgroundColor: "#f4f4f4", width: "100%", height: "100%" }}
+                >
+                    <div style={{ width: "100%", marginTop: 0 }}>
+                        <Fragment>{this.renderComment(reviewListData, loadMore)}</Fragment>
+                    </div>
                 </div>
+
             </div>
         );
     }
+    //评论
+    renderComment = (reviewListData, loadMore) => {
+        let { reviewPageNo, reviewListTotle } = this.props.NewsMessageResultReducer;
+
+        let row = (item, section, row) => {
+            console.log(item, '222222222~~~~~~~~~~~~~~~')
+            let imgsrc = item.userAvatar == "" ? myIcon : item.userAvatar;
+            const imageStyle = {
+                backgroundImage: `url(${imgsrc})`,
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "contain",
+            };
+
+            return (
+                <div className="list-item-div">
+                    <div className="list-item-img-box">
+                        <div className="list-item-img" style={imageStyle} />
+                    </div>
+                    <div className="list-item-content">
+                        <h2 className="item-title-style">{item.commentator}</h2>
+                        <p
+                            className="item-text-style"
+                            dangerouslySetInnerHTML={{
+                                __html: item.content.replace(/\r?\n/g, "</br>"),
+                            }}
+                        />
+                        <div className="item-footer-box">
+                            <p className="item-time-style">
+                                {item.createTime.length > 16
+                                    ? item.createTime.substring(0, 16)
+                                    : item.createTime}{" "}
+                            </p>
+                            <span
+                                className="item-zhan-style"
+                                style={{ marginLeft: "2rem" }}
+                                onClick={() => this.reviewDetail(item)}
+                            >
+                                <span>{item.replys == "0" ? "0" : item.replys}</span>
+                                <img
+                                    src={trainCommentReplay}
+                                    style={{ marginTop: 10 }}
+                                    className="cell-left-icon"
+                                    alt=""
+                                />
+                            </span>
+                            <span
+                                className="item-zhan-style"
+                                onClick={() => this.laudClick(item, row)}
+                            >
+                                <span>{item.thumbsUps}</span>
+                                <img
+                                    src={String(item.status) === "1" ? alreadyzan : zan}
+                                    alt=""
+                                />
+                            </span>
+                        </div>
+                        {item.tpCommentReplies.length > 0 ? (
+                            <div className="train-comment-replay">
+                                <div>{item.tpCommentReplies[0].createByName}:</div>
+                                <div
+                                    dangerouslySetInnerHTML={{
+                                        __html: item.tpCommentReplies[0].content.replace(
+                                            /\r?\n/g,
+                                            "</br>"
+                                        ),
+                                    }}
+                                />
+                                {item.tpCommentReplies.length > 1 ? (
+                                    <div onClick={() => this.reviewDetail(item)}>
+                                        {`${intl.get("PublishKey83") || "查看全部"}${item.replys}${intl.get("PublishKey84") || "条回复"
+                                            }>`}
+                                    </div>
+                                ) : (
+                                    ""
+                                )}
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                </div>
+            );
+        };
 
+        return (
+            <div
+                className="train-comment"
+                style={{ paddingBottom: "1rem", backgroundColor: "#F4F4F4" }}
+            >
+                <div className="train-comment-contain">
+                    <img src={trainComment} className="cell-left-icon" alt="" />
+                    <div className="comment-slider" onClick={() => this.commentShow(1)}>
+                        {" "}
+                        {intl.get("PublishKey85") || "说点什么吧~"}
+                    </div>
+                </div>
+                <SecListView
+                    key={this.state.refreshTrainComment}
+                    dataSource={this.state.dataSource}
+                    renderRow={row.bind(this)}
+                    onEndReached={this.onLoadMore}
+                    listStyle={50}
+                    isLoading={this.state.isLoading}
+                    page={{
+                        pageTotal: reviewListTotle,
+                        pageNo: reviewPageNo,
+                        pageSize: 10,
+                    }}
+                    footText={intl.get("PublishKey47") || "没有更多了"}
+                />
+                <Modal
+                    title={intl.get("Comment") || "评论"}
+                    visible={this.state.showComment}
+                    transparent
+                    maskClosable={false}
+                    className={"train-comment-input"}
+                    onClose={this.commentHidden}
+                    footer={[
+                        {
+                            text: intl.get("Cancel") || "取消",
+                            onPress: () => {
+                                this.commentHidden();
+                            },
+                        },
+                        {
+                            text: intl.get("Yes") || "确定",
+                            onPress: () => {
+                                this.trainCommitVerb(1, 0);
+                            },
+                        },
+                    ]}
+                >
+                    <div className="comment-body">
+                        <TextareaItem
+                            maxLength={800}
+                            placeholder={intl.get("WriteComment") || "写评论"}
+                            rows={4}
+                            value={this.state.commitContent}
+                            style={{ backgroundColor: "clear" }}
+                            onChange={(txt) => {
+                                let value = txt;
+                                if (value.length > 800) {
+                                    value = value.slice(0, 800);
+                                }
+                                this.setState({ commitContent: value });
+                            }}
+                            ref={(el) => (this.autoFocusInst = el)}
+                        />
+                    </div>
+                </Modal>
+            </div>
+        );
+    };
     _headerView() {
-        const {tmpList} = this.state;
+        const { tmpList } = this.state;
         console.log(tmpList)
         return (
             <div className="news-item2-content">
                 <div className="news-item2-box">
                     <span className="title-span">{tmpList.fileName}</span>
                     <p className="title-p">
-                            <span style={{marginRight: "0.9rem"}}><img src={Iconclock} style={{
-                                marginRight: "0.15rem",
-                                fontSize: "0.3rem"
-                            }}/>{intl.get('PublishKey166')||'发布时间：'}{ moment(tmpList.releaseTime).format('YYYY-MM-DD HH:mm')}</span>
+                        <span style={{ marginRight: "0.9rem" }}><img src={Iconclock} style={{
+                            marginRight: "0.15rem",
+                            fontSize: "0.3rem"
+                        }} />{intl.get('PublishKey166') || '发布时间：'}{moment(tmpList.releaseTime).format('YYYY-MM-DD HH:mm')}</span>
                         <span><img src={Iconlook} style={{
                             marginRight: "0.15rem",
                             fontSize: "0.3rem"
-                        }}/>{this.state.number}{intl.get('PublishKey165')||'次阅读'}</span>
+                        }} />{this.state.number}{intl.get('PublishKey165') || '次阅读'}</span>
                     </p>
                 </div>
             </div>
         );
     }
+    reachEnd = () => { };
+    commentShow = (type, id) => {
+        //type=1为项目评论，2为项目评论回复
+
+        this.setState({
+            showComment: true,
+            commentType: type,
+            replyCommentTypeId: id,
+        });
+    };
+    commentHidden = () => {
+        this.setState({
+            showComment: false,
+            commitContent: "",
+        });
+    };
+    reviewDetail = (item) => {
+        console.log(item);
+        // let time = moment(item.createTime).format("YYYY-MM-DD HH:hh:SS");
+        let time = moment(item.createTime).format("YYYY-MM-DD HH:mm");
+        hashHistory.push({
+            pathname: func.routerBefore() + "/train/trainingReview",
+            query: {
+                targeId: this.props.location.query.id,
+                commentId: item.id,
+                headsrc: item.userAvatar,
+                time: time,
+                title: item.commentator,
+                content: item.content,
+                lauNumber: item.thumbsUps,
+                status: item.status,
+            },
+        });
+    };
+    //点赞
+    laudClick = (item, index) => {
+        let params = {
+            tpCommentId: item.id,
+        };
+        let { id } = this.props.location.query;
+        let param = { id: id, bizType: '2' };
+        let _this = this;
+
+        if (String(item.status) === "0") {
+            this.props.laudSaveEnrollEvent(params, () => {
+                Toast.info(intl.get("LikeSuccess") || "点赞成功");
+                this.props.getReviewListData(
+                    { ...param, pageNo: 1, pageSize: 10 },
+                    false,
+                    () => {
+                        _this.setState({
+                            refreshTrainComment: new Date().getTime(),
+                        });
+                    }
+                );
+            });
+        } else {
+            this.props.laudDeleEnrollEvent(params, () => {
+                Toast.info(intl.get("Unlike") || "取消点赞");
+                this.props.getReviewListData(
+                    { ...param, pageNo: 1, pageSize: 10 },
+                    false,
+                    () => {
+                        _this.setState({
+                            refreshTrainComment: new Date().getTime(),
+                        });
+                    }
+                );
+            });
+        }
+    };
+
 }
 
-export default NewsMessageResult;
\ No newline at end of file
+// export default NewsMessageResult;
+export default connect((state) => {
+    let { NewsMessageResultReducer } = state;
+    return {
+        NewsMessageResultReducer,
+    };
+}, NewsMessageResultAction)(NewsMessageResult);
\ No newline at end of file

src/components/newsMessage/NewsMessageResult.less

+@import "../../static/theme.less";
+
+.train-complete-icon,
+.train-in-complete-icon,
+.train-progress-icon {
+  width: 40px;
+  height: 40px;
+  //margin-right: 16px;
+}
+
+.color-4a() {
+  color: #4A4A4A;
+}
+
+.color-666() {
+  color: #666666;
+}
+
+.font32() {
+  font-size: .32rem;
+}
+
+.font30() {
+  font-size: .3rem;
+}
+
+.font34() {
+  font-size: .34rem;
+}
+
+.font24() {
+  font-size: .24rem;
+}
+
+.BraftEditor-content {
+  font-size: 0.25rem;
+}
+
+.line-hidden() {
+  margin: 0;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+}
+
+;
+
+.am-accordion .am-accordion-item .am-accordion-header {
+  position: inherit !important;
+}
+
+.training-done-view {
+  // overflow-x:hidden;
+  overflow: hidden;
+  background: #fff;
+
+  .my-accordion {
+    padding-left: .82rem;
+
+    .am-accordion-item {
+
+      //列表头部
+      // .am-accordion-header{
+      //   position: absolute;
+      //   height: 1rem;
+      //   line-height: 1.7;
+      //   padding: .31rem .31rem .1rem 0rem;
+      //   overflow: inherit;
+      //   .training-header-con{
+      //     //margin-left: .82rem;
+      //     //text-indent: .82rem;
+
+      //     h2{
+      //       .color-4a;
+      //       .font34;
+      //       margin: 0;
+      //     }
+      //     .training-timing{
+      //       .font24;
+      //       .color-666;
+      //     }
+      //   }
+      // //  左侧图标
+      //   .training-element{
+      //     .training-icon-steps{
+      //       position: relative;
+      //       padding:0;
+      //       padding-left:0.33rem;
+      //       .icon-doc{
+      //         width: .3rem;
+      //         height: .3rem;
+      //         //border: 2px solid #0076FF;
+      //         //background: #fff;
+      //         position: absolute;
+      //        // border-radius: 50%;
+      //         left: -.5rem;
+      //         top: .15rem;
+      //       }
+      //       .line-row{
+      //         position: absolute;
+      //         width: .02rem;
+      //         height: 100000rem;
+      //         background-color: #ccc;
+      //         left: -.35rem;
+      //         top: .45rem;
+      //       }
+      //     }
+      //   }
+      //   &::after{
+      //     bottom: -1px;
+      //     left: -.33rem;
+      //     width: 105%;
+      //     border-bottom: 2px solid #ddd;
+      //   }
+      // }
+      //每个列表
+      .am-accordion-content {
+        overflow: inherit;
+
+        .am-list-item {
+          padding-left: 0;
+
+          .am-list-content {}
+        }
+
+        .training-done-info {
+          margin: 0;
+          line-height: .65rem;
+          padding-right: 0.15rem;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 63%;
+          .font30;
+          .color-666;
+
+        }
+
+        .tip-text {
+          margin: 0.1rem;
+          font-size: .2rem;
+          color: @themeColor;
+          line-height: .28rem;
+          border-radius: .3rem;
+          border: 1px solid @themeColor;
+          padding: .05rem .1rem;
+          overflow: visible;
+
+        }
+
+        .tip-text-green {
+          margin: 0.1rem;
+          font-size: .2rem;
+          color: #559906;
+          line-height: .28rem;
+          border-radius: .3rem;
+          border: 1px solid #559906;
+          padding: .05rem .1rem;
+          overflow: visible;
+        }
+
+        .am-list-body div:not(:last-child) .am-list-line:after {
+          left: -.33rem;
+          width: 105%;
+        }
+
+        .am-list-line:after {
+          left: -.33rem;
+          border-bottom: 2px solid #ddd;
+        }
+
+      }
+
+      .am-accordion-content-box:after {
+        left: -.33rem;
+        width: 105%;
+        border-bottom: 2px solid #ddd;
+
+      }
+    }
+  }
+}
+
+.list-item-box {
+  width: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  i.dom {
+    position: absolute;
+    width: .16rem;
+    height: .16rem;
+    border-radius: 50%;
+    left: -0.42rem;
+    top: .26rem;
+  }
+
+  .smallDian {
+    background: #D2D2D2;
+  }
+
+  .activeDian {
+    background-color: @themeColor
+  }
+}
+
+.review-text-style {
+  font-size: 0.24rem;
+}
+
+.product-info {
+  padding: 0.1rem;
+}
+
+.list-item-div {
+  display: flex;
+  overflow: hidden;
+  padding: 0.2rem 0.2rem 0.2rem 0;
+  flex-direction: row;
+  flex: 1;
+
+  margin-left: 0.2rem;
+  border-bottom: solid 1px #F6F6F6;
+
+  .list-item-img-box {
+    width: 0.6rem;
+    margin-right: 0.1rem;
+
+    .list-item-img {
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 0.6rem;
+      background-color: #ccc;
+      overflow: hidden;
+    }
+  }
+
+  .list-item-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    .item-footer-box {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      >p {
+        font-size: 20px;
+      }
+    }
+
+    .item-title-style {
+      font-size: 0.26rem !important;
+    }
+
+    .item-text-style {
+      padding-top: 0.1rem;
+      padding-bottom: 0.2rem;
+      font-size: 0.24rem;
+    }
+
+    .item-time-style {
+      font-size: 0.24rem;
+      color: #ccc;
+
+      .item-btn-style {
+        border: 0;
+        border-radius: 0.2rem;
+        margin-left: 0.2rem;
+        padding: 0 0.3rem;
+        color: #999;
+        background-color: transparent;
+      }
+
+      .item-btn-style-active {
+        background-color: #999;
+        border: 0;
+        border-radius: 0.2rem;
+        margin-left: 0.2rem;
+        padding: 0 0.3rem;
+        color: #fff;
+      }
+    }
+
+    .item-header-box {
+      display: flex;
+      flex: 1;
+      height: 274px;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .item-zhan-style {
+        border: 0;
+        background-color: transparent;
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        font-Size: 0.24rem;
+        color: #ccc;
+
+        .item-zhan-icon-active {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 0.05rem;
+          color: slategray;
+        }
+
+        .item-zhan-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: gainsboro;
+        }
+      }
+
+    }
+
+  }
+}
+
+.train-logo {
+  width: 100%;
+  position: relative;
+
+  img {
+    width: 100%;
+  }
+
+  .signing_location_container {
+    position: absolute;
+    right: 0.2rem;
+    bottom: 0.32rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.4rem;
+    height: 0.64rem;
+    background: rgba(228, 238, 255, 1);
+    box-shadow: 0 0.02rem 0.1rem 0 rgba(0, 46, 123, 0.25);
+    border-radius: 0.32rem;
+
+    .signing_icon_container {
+      .signing_icon {
+        width: 0.32rem;
+        height: 0.32rem;
+      }
+    }
+
+    .signing_location_text {
+      font-size: 0.28rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: rgba(66, 133, 244, 1);
+      line-height: 0.36rem;
+      text-shadow: 0 0.02rem 0.1rem rgba(0, 46, 123, 0.25);
+    }
+  }
+}
+
+.train-footer-box {
+
+  display: flex;
+  border-top: solid 1px rgb(221, 221, 221);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1rem;
+  background-color: #fff;
+  overflow: hidden;
+  z-index: 999;
+
+  div {
+    height: 0.6rem;
+    -webkit-box-flex: 6;
+    -webkit-flex: 6;
+    -ms-flex: 6;
+    flex: 6;
+  }
+
+  input {
+    margin: auto;
+    height: 0.6rem;
+    background-color: rgb(245, 245, 245);
+    border-radius: 0.3rem;
+    display: inline-block;
+    border: none;
+    padding-left: 0.3rem !important;
+    font-size: 0.25rem;
+    color: #333333;
+
+
+
+  }
+
+  .enroll-submit {
+    -webkit-box-flex: 2;
+    -webkit-flex: 2;
+    -ms-flex: 2;
+    flex: 2;
+    border: 0;
+    border-radius: 0;
+    font-size: 0.25rem;
+  }
+
+  .enroll-submitInfo {
+    -webkit-box-flex: 3;
+    -webkit-flex: 3;
+    -ms-flex: 3;
+    flex: 3;
+    color: white;
+    font-size: 0.28rem;
+    border-radius: 0;
+    border: 0;
+    background-color: @themeColor ;
+    padding: 0;
+    margin: 0;
+  }
+
+}
+
+.header {
+
+  display: flex;
+  flex-direction: row;
+  padding: 0.2rem 0;
+  border-bottom: solid 0.15rem #f4f4f4;
+  padding: 44px 25px 25px 18px;
+
+  .header-img {
+    height: 0.8rem;
+    border-radius: 50%;
+    margin-top: 10px;
+    background-color: rgb(221, 221, 221);
+    width: 0.8rem;
+
+    .img {
+      width: 0.8rem;
+      height: 0.8rem;
+
+    }
+  }
+
+  .header-contain {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 60%;
+    align-items: left;
+    flex: 1;
+    padding-left: 10px;
+    padding-top: 25px;
+
+    .item-zhan-icon-active {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0.05rem;
+      color: slategray;
+    }
+
+    .item-zhan-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: gainsboro;
+    }
+
+    >p {
+      padding: 5px;
+
+    }
+
+    >p :nth-child(2) {
+      font-size: 30px;
+      color: #333333;
+    }
+
+    .item-header-box {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: space-between;
+      padding: 5px;
+
+      p {
+        font-size: 20px;
+        color: #999999;
+      }
+    }
+  }
+
+  .header-title {
+    text-align: left;
+    width: 80%;
+    font-size: 0.25rem;
+  }
+
+  .header-time {
+    text-align: left;
+    width: 80%;
+    font-size: 0.20rem;
+    color: rgb(179, 179, 179);
+  }
+
+}
+
+.about-footer-button {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  widtheader-contain: 100%;
+  height: 0.8rem;
+
+  overflow: hidden;
+  z-index: 999;
+}
+
+.comment-title {
+  padding-top: 0.2rem;
+  background-color: white;
+
+}
+
+.segement-slider {
+  height: 0.2rem;
+  background-color: #f5f5f5;
+
+}
+
+.segement {
+
+  height: 2px;
+  background-color: rgb(245, 245, 245);
+  margin: 0 0.2rem;
+}
+
+.train-up-info {
+  font-size: 0.31rem;
+  color: #9B9B9B;
+  padding: 0.22rem 0.3rem;
+  width: 100%;
+  background-color: #fff;
+
+  p {
+    line-height: .46rem;
+    .line-hidden;
+    font-size: 24px;
+    .color-4a;
+    display: block;
+  }
+}
+
+.train-info {
+
+  font-size: 0.31rem;
+  color: #9B9B9B;
+  padding: 0.2rem auto;
+  width: 100%;
+
+
+  padding-left: 40px;
+  padding-bottom: 30px;
+  padding-top: 40px;
+  padding-right: 40px;
+  background-color: #fff;
+
+  p {
+    line-height: .48rem;
+    .line-hidden;
+    font-size: 40px;
+    .color-4a;
+  }
+
+  .descr {
+    p {
+      -webkit-line-clamp: unset;
+    }
+  }
+
+  div {
+
+    color: #9B9B9B;
+    font-size: .24rem;
+  }
+
+  .train-info-contain {
+    audio {
+      width: 100%;
+      margin-bottom: .6rem !important;
+
+
+    }
+
+    video {
+      width: 100%;
+      height: 5rem;
+      margin-bottom: .3rem !important;
+    }
+
+    a {
+      text-decoration: underline;
+      color: blue;
+    }
+
+    p {
+      font-size: 24px !important;
+      padding: 0 !important;
+      color: #4A4A4A !important;
+    }
+  }
+}
+
+.product-rule {
+  padding: 0.2rem 0.4rem;
+}
+
+.am-accordion-header {
+  border-bottom: 0 !important;
+}
+
+.am-accordion .am-accordion-item .am-accordion-header {
+  padding-right: 0;
+}
+
+
+//UI修改后的新增样式
+.train-contain-header {
+  padding: 0.2rem;
+  padding-left: 0;
+  white-space: pre-wrap !important;
+  height: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
+
+  div:nth-child(1) {
+    font-size: 34px !important;
+    width: 100%;
+    word-wrap: normal;
+    height: auto;
+    color: #4A4A4A;
+  }
+
+  div:nth-child(2) {
+    font-size: 24px !important;
+    padding-top: 0.05rem;
+    color: #666666;
+  }
+
+  div .train-progress-count {
+    position: absolute;
+    right: 0;
+    background-color: @themeColor;
+    bottom: 10px;
+    color: white;
+    width: 88px;
+    text-align: center;
+    font-size: 20px !important;
+    border-radius: 44px;
+  }
+
+  div .train-compete-tag {
+    font-size: 20px !important;
+    color: #9999;
+    position: absolute;
+    width: fit-content;
+    right: 0;
+    bottom: 0;
+  }
+
+}
+
+.am-accordion-header {
+  height: auto !important;
+  line-height: inherit !important;
+  background-color: #F4F4F4 !important;
+}
+
+.train-content-cell {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  // margin-left: 0.2rem;
+  padding-right: 0.2rem;
+  padding-top: 0.1rem;
+  padding-bottom: 0.1rem;
+  border-bottom: solid 1px #F6F6F6;
+  height: 1rem;
+  position: relative;
+
+  .training-done-info-name,
+  p {
+    font-family: PingFangSC-Regular;
+    font-size: 0.25rem;
+    color: #595959;
+    /*多行省略注释 liyua*/
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    /* autoprefixer: ignore next */
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+  }
+
+  .train-content-status-cell {
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+    width: fit-content;
+    text-align: center;
+
+    .circle {
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+      background-color: #ECF3FF;
+      position: absolute;
+      top: -14px;
+      right: 22px;
+    }
+  }
+
+}
+
+
+
+.tip-text-green {
+  margin: 0.1rem;
+  font-size: .2rem;
+  color: #559906;
+  line-height: .28rem;
+  border-radius: .3rem;
+  border: 1px solid #559906;
+  padding: .05rem .1rem;
+  overflow: visible;
+}
+
+.tip-text {
+  font-size: .2rem;
+  color: #999;
+  line-height: .28rem;
+  border-radius: .3rem;
+  border: 1px solid #e5e5e5;
+  padding: .05rem .1rem;
+  overflow: visible;
+
+}
+
+.tip-text-simple {
+  margin: 0.1rem;
+  font-size: .2rem;
+  color: #000;
+  line-height: .28rem;
+  border-radius: .3rem;
+  border: 1px solid #eee;
+  padding: .05rem .1rem;
+  overflow: visible;
+  margin-right: 0;
+
+}
+
+.train-contain-listcell {
+  display: flex;
+  flex-direction: row;
+  width: 80%;
+  align-items: center;
+  padding-left: 0.2rem;
+
+  >img {
+    max-width: 32px;
+    max-height: 32px;
+    display: block;
+    margin: 0 20px;
+  }
+
+  .certificate-icon {
+    // width: 35px;
+    height: 40px;
+    height: 40px;
+    display: block;
+    max-width: unset;
+    max-height: unset;
+    margin: 0 0 0 40px;
+  }
+
+  .am-accordion-header {
+    margin-right: 0px !important;
+  }
+
+}
+
+.train-comment {
+  display: flex;
+  flex-direction: column;
+
+  >p {
+    background-color: white;
+  }
+
+  .train-comment-contain {
+
+    background-color: white;
+    height: 162px;
+    padding: 58px 54px 58px 26px;
+    align-items: center;
+    border-bottom: solid 1px #e4e4e4;
+
+    .cell-left-icon {
+      height: 43px;
+      margin-left: 9px;
+      width: auto;
+      margin-top: 5px;
+
+    }
+
+    .comment-slider {
+      background: #F4F4F4;
+      border-radius: 23px;
+      width: 90%;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      padding-left: 0.2rem;
+      font-size: 17pt;
+      color: #959595;
+      letter-spacing: 0.1px;
+      float: right;
+    }
+  }
+
+
+
+
+}
+
+.comment-body {
+  height: 2.5rem;
+  border-top: 2px solid #eee;
+  overflow: scroll;
+  background-color: #F4F4F4;
+  border-radius: 2px;
+}
+
+.signup-button {
+  display: block;
+  width: 100%;
+  height: 0.81rem;
+  position: fixed;
+  bottom: 0;
+
+  font-size: 0.35rem;
+  line-height: 0.71rem;
+  color: white;
+  text-align: center;
+}
+
+.train-pay-button-container {
+  width: 100%;
+  height: 128px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+  padding: 0 40px;
+
+
+  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.05);
+
+  .train-pay-button {
+    width: 100%;
+    height: 88px;
+    line-height: 86px;
+    border-radius: 88px;
+    background-color: #ff8400;
+    margin-top: 20px;
+    text-align: center;
+
+    color: #fff;
+    font-size: 28px;
+    font-weight: 500;
+
+    .train-actualPrice{
+      font-size: 40px;
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    .train-originalPrice{
+      font-size: 24px;
+      font-weight: 400;
+      margin-left: 10px;
+      text-decoration:line-through ;
+    }
+  }
+}
+
+.train-contain-list {
+  .ant-list-item {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    /* align-items: center; */
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding-top: 0px;
+    padding-bottom: 0px;
+
+  }
+
+  i.arrow {
+    display: none !important;
+  }
+}
+
+.train-comment-replay {
+  width: 100%;
+  background-color: #F4F4F4;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  margin-top: 12px;
+
+  >div:nth-child(1) {
+    font-family: PingFangSC-Regular;
+    font-size: 0.21rem;
+    color: #4A90E2;
+  }
+
+  >div:nth-child(2) {
+    padding: 10px 0px;
+    font-size: 0.21rem;
+  }
+
+  >div:nth-child(3) {
+    font-family: PingFangSC-Regular;
+    font-size: 0.17rem;
+    color: #999999;
+
+  }
+}
+
+.item-footer-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  >p {
+    font-size: 20px;
+  }
+
+  .item-zhan-style {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-Size: 0.24rem;
+    color: #ccc;
+
+    img {
+      width: 30px;
+      height: 30px;
+    }
+
+    span {
+      font-size: 24px;
+      color: #333;
+      opacity: 0.65;
+      margin-right: 10px;
+      padding-top: 8px;
+    }
+
+    .item-zhan-icon-active {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0.05rem;
+      color: slategray;
+    }
+
+    .item-zhan-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: gainsboro;
+    }
+  }
+}
+
+.train-plan-studytime {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.2rem 0.3rem;
+  border-bottom: solid 2px #f4f4f4;
+
+  span {
+    font-size: 0.3rem;
+  }
+}
+
+.train-plan-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    font-size: 0.15rem;
+  }
+
+  .train-plan-cell {
+    border-radius: 0.05rem;
+    display: flex;
+    width: 50%;
+    margin: 0.1rem 0.3rem;
+    justify-content: space-around;
+    background-color: #f4f4f4;
+    height: 0.6rem;
+    align-items: center;
+
+    >div>img {
+      width: 30px;
+      margin-right: 22px;
+      margin-top: -15px;
+    }
+
+    >div>span {
+      font-size: 28px;
+    }
+  }
+}
+
+.train-header {
+  background-color: white;
+  padding-bottom: 0.5rem;
+
+}
+
+.train-info .train-info-contain a {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+// .training-p-a a{
+//   color:#1890ff;
+//   text-decoration: none;
+// }
+
+.train-comment-modal {
+  width: 80% !important;
+
+  .am-modal-content {
+    border-radius: 14px !important;
+  }
+
+  .coment-header {
+    height: 84px;
+    background-color: white;
+  }
+
+  .modal-rate {
+    width: 100%;
+    height: 78px;
+    font-size: 42px;
+    text-align: center;
+    border-bottom: 2px solid #ddd;
+    padding-top: 5px;
+
+    .ant-rate {
+      font-size: 42px;
+      color: @themeColor;
+    }
+  }
+
+  .modal-textarea-container {
+    width: 100%;
+    height: 234px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 14px !important;
+
+    .modal-textarea {
+      width: 100%;
+      font-size: 28px;
+      color: #959595;
+      background-color: #f4f4f4;
+    }
+  }
+
+  .modal-button {
+    width: 50%;
+    height: 104px;
+    line-height: 104px;
+    text-align: center;
+    color: @themeColor;
+    border-top: 2px solid #eee;
+    border-right: 2px solid #eee;
+    background: #fff;
+  }
+
+  .modal-button2 {
+    width: 50%;
+    height: 104px;
+    line-height: 104px;
+    text-align: center;
+    border-top: 2px solid #eee;
+    border-left: 2px solid #eee;
+    background: #fff;
+  }
+
+  .am-modal-content {
+    padding: 0 !important;
+
+    .am-modal-body {
+      padding: 0 !important;
+    }
+  }
+}
+
+.train-comment-input {
+  overflow-y: hidden;
+
+  .am-modal-body {
+    padding: 0 !important;
+  }
+
+  .am-modal-button-group-h .am-modal-button {
+    color: #108ee9;
+  }
+
+  .am-modal-button-group-h .am-modal-button:first-child {
+    color: #000;
+  }
+
+  .comment-body {
+    // margin-top: 50px;
+    background: #fff;
+
+    .am-list-item {
+      padding-left: 22px;
+      padding-right: 22px;
+    }
+
+    .am-textarea-control textarea {
+      font-size: 28px;
+    }
+
+  }
+
+}
+
+.train-contain {
+  .am-tabs-tab {
+    div {
+      div {
+        padding-bottom: 0px !important;
+      }
+    }
+  }
+
+  .am-tabs-tabpane-active {
+    background-color: #f4f4f4;
+  }
+
+  .am-accordion-header {
+    padding-right: 0px !important;
+  }
+}
+
+
+.train-review {
+  .am-list-view-scrollview {
+    background-color: #f4f4f4 !important;
+  }
+}
\ No newline at end of file

src/components/newsMessage/NewsMessageResultAction.jsx

+import * as actions from './NewsMessageResultTypes';
+import NetWork from '../../util/fetchUtil';
+import API from '../../util/urlconfig';
+import {Toast} from 'antd-mobile';
+import func from '../../util/commonFunc'
+import intl, { init } from "react-intl-universal";
+export const trainStepsData=(finished,params,callback)=>{
+    return dispatch=>{
+        let url = finished?API.trainStepsFinish:API.trainSteps;
+        NetWork.post(url, params,
+            response=>{
+
+                // 数据反转
+                if( response.data.progressVo && response.data.progressVo.courseRecentVos ) {
+                    response.data.progressVo.courseRecentVos.reverse()
+                }
+
+                dispatch({
+                    type:actions.TRAIN_STEPS_DATA_EVENT,
+                    introductionVo:response.data.introductionVo,
+                    contentVo:pacePer(response.data.contentVo),
+                    progressVo:response.data.progressVo,
+                    hasEnrolled:response.data.hasEnrolled
+                })
+                if(callback){
+                    callback();
+                }
+            }
+        )
+    }
+};
+
+/**
+ * 检查资料是否可以下载
+ * @param needEnroll 是否需要报名
+ * @param hasEnroll 是否报名成功
+ * @param projectStartTime 项目开始时间
+ * @param projectEndTime 项目结束时间
+ * @param stutas 项目状态
+ * @param termialType 1、pc端；2、微信端
+ * @constructor
+ */
+export const CheckDownloadingStatus = (needEnroll, hasEnroll, projectStartTime, projectEndTime) => {
+    return dispatch => {
+        let paramsData = {
+            needEnroll: needEnroll,
+            hasEnroll: hasEnroll,
+            projectStartTime: projectStartTime,
+            projectEndTime: projectEndTime,
+            termialType: 2
+        };
+        NetWork.getNetwork(API.trainDataLibraryDataStatus, paramsData,
+            response => {
+            console.log("response1", response.data);
+                // dispatch({
+                //     type: actions.CHECK_DOWNLOADING_STATUS,
+                // });
+            }
+        );
+    }
+}
+
+let pacePer=(obj)=> {
+    //添加百分比ratio
+    obj.plans.map(item => {
+        let ratio = 0;
+        item.activities.map(childItem => {
+            if (String(childItem.type) === "0") {
+                if (childItem.finished) {
+                    ratio += 1;
+                } else {
+                    ratio += 0.5;
+                }
+            } else {
+                if (childItem.finished) {
+                    ratio += 1;
+                } else {
+                    ratio += 0;
+                }
+            }
+        });
+        item['ratio'] = Number.parseFloat(ratio / item.activities.length).toFixed(2);
+    });
+    return obj;
+};
+export const getReviewListData=(params, isUpData,callBack)=>{
+    return dispatch=>{
+
+        let urlParams=API.reviewListLink;
+        if (params) {
+            let paramsArray = [];
+            //拼接参数
+            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
+            if (urlParams.indexOf('?')==-1) {
+                urlParams += '?' + paramsArray.join('&')
+            } else {
+                urlParams += '&' + paramsArray.join('&')
+            }
+        }
+        NetWork.get(urlParams,
+            response=>{
+                
+                console.log('评论');
+                console.log(response);
+
+                try{
+                    if(String(response.code)==="1000"){
+                        let reviewPageNo=Number.parseInt(response.data.current)+1;
+                        
+                        dispatch({
+                            type:actions.REVIEW_LIST_DATA_EVENT,
+                            reviewListData:response.data.records,
+                            reviewPageNo:reviewPageNo,
+                            isUpData:isUpData,
+                            total:response.data.total,
+                        })
+                        if(callBack){
+                            callBack();
+                        }
+                    }
+                    
+                    
+                }catch(e){
+                    console.log(e);
+                }
+
+            })
+    };
+};
+//评论
+export const commitVerb=(params,callBack)=>{
+    return dispatch=>{
+        NetWork.post(API.reviewCommit, params, response=>{
+            try {
+                if(Number.parseFloat(response.code)===1000){
+                    
+                    dispatch({
+                        type:actions.REVIEW_COMMIT_SUCCESS,
+                        status:1,
+                    });
+                    Toast.info(intl.get("CommentSuccess")||"评论成功");
+                    callBack();
+                }
+            }catch (e) {
+
+            }
+        });
+    }
+};
+
+//点赞保存功能
+export const laudSaveEnrollEvent=(params,callBack)=>{
+    return dispatch=>{
+        NetWork.post(API.trainReviewGood, params, response=>{
+            try {
+                if(Number.parseFloat(response.code)===1000){
+                    
+                    dispatch({
+                        type:actions.LAUD_SAVE_SUCCESS_EVENT,
+                        status:1,
+                        itemId:params.tpCommentId
+                    });
+                    if(callBack){
+                        callBack();
+                    }
+                }
+            }catch (e) {
+                console.log(e);
+            }
+        });
+    }
+};
+//报名
+export const lessonEnrollEvent=(params,callBack)=>{
+    return dispatch=>{
+        NetWork.post(API.courseSignUp, params, response=>{
+            try {
+                if(Number.parseInt(response.code)===1000){
+                    Toast.info(intl.get("PublishKey70")||"报名成功");
+                    callBack && callBack();
+                }else{
+                    Toast.info(intl.get("PublishKey70")||"报名成功");
+                }
+            }catch (e) {
+                console.log(e)
+            }
+        });
+    }
+};
+export const laudDeleEnrollEvent=(params,callBack)=>{
+    return dispatch=> {
+        NetWork.post(API.trainReviewBad, params, response => {
+            console.log(response);
+            try {
+                if (Number.parseFloat(response.code) === 1000) {
+                    if(callBack){
+                        callBack();
+                    }
+                    dispatch({
+                        type: actions.LAUD_DELE_TYPE_EVENT,
+                        status: 0,
+                        itemId: params.tpCommentId
+                    });
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        });
+    }
+};
+export const reviewReplyList=(params,callBack)=>{
+    let contactUrl = API.trainReviewReplyLis+'?commentId='+params.commentId+'&pageNo='+params.pageNo+'&pageSize=10';
+
+    return dispatch=> {
+        NetWork.get(contactUrl, response => {
+            console.log(response,'评论列表');
+            try {
+                if (Number.parseFloat(response.code) === 1000) {
+                    dispatch({
+                        type: actions.REVIEW_COMMIT_LIST,
+                        list: response.data.records,
+                        page:{currentPage:params.pageNo,pageTotal: response.data.total, pageNo: response.data.pages, pageSize:response.data.size}
+                        
+                    });
+                    callBack();
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        });
+    }
+}
+
+export const reviewReplyCommit=(params,callBack)=>{
+    return dispatch=> {
+        NetWork.post(API.trainReviewReplyCommit, params, response => {
+            console.log(response,'提交评论');
+            try {
+                if (Number.parseFloat(response.code) === 1000) {
+                    callBack();
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        });
+    }
+}
+//初始化数据
+export const initailData = ()=>{
+    return dispatch=>{
+        dispatch({type:actions.INITAIL_TRAIN_DATA});
+    }
+}
+
+
+export const trainClickLog = (id)=>{
+    let url = API.trainUrl+"api/trainingProject/tpPlanActivity/view/record/add";
+    return dispatch =>{
+        NetWork.post(url,{
+            "id":id
+        },(data)=>{});
+    }
+};
+
+export const trainCertificateGet = (data,callback)=>{
+    let url = API.trainUrl+"api/trainingProject/certificate/grant";
+    return dispatch =>{
+        NetWork.post(url,data,(response)=>{
+            callback(response);
+        });
+    }
+}
+
+/**
+ * 请求精选作品详情接口，验证是否可进入
+ * @param {*} requestUrl 
+ * @param {*} requestData 
+ * @param {*} callback 
+ */
+export function validatePickOutCaseDetail (requestUrl, requestData, callback) {
+    return dispatch => {
+        NetWork.getNetwork(requestUrl, requestData, (response)=> {
+            console.log("trainingStepsAction-response", response);
+            callback(response);
+        });
+    }
+}
\ No newline at end of file

src/components/newsMessage/NewsMessageResultReducer.jsx

+import * as actions from './NewsMessageResultTypes';
+let initial={
+    introductionVo:null,
+    contentVo:{
+        plans:[]
+    },
+    reviewListData:[],
+    reviewListTotle:0,
+    hasEnrolled:false,
+    isMore:false,
+    reviewReplyListData:[],
+    reviewReplyPage:0,
+    progressVo:{},
+};
+export default (state=initial, action)=>{
+    switch (action.type){
+        case actions.TRAIN_STEPS_DATA_EVENT:
+            return {
+                ...state,
+                introductionVo:action.introductionVo,
+                contentVo:Object.assign({},state.contentVo,{plans:action.contentVo.plans || []}),
+                hasEnrolled:action.hasEnrolled,
+                progressVo:action.progressVo
+            };
+        case actions.REVIEW_LIST_DATA_EVENT:
+            let reviewDataList=null;
+            if(action.isUpData){
+                reviewDataList=state.reviewListData.concat(action.reviewListData);
+            }else{
+                reviewDataList=action.reviewListData;
+            }
+            return {
+                ...state,
+                reviewListData:reviewDataList,
+                reviewPageNo:action.reviewPageNo,
+                isUpData:action.isUpData,
+                isMore:JSON.stringify(action.reviewListData)!=="[]",
+                // isMore:action.reviewListData.length<10,
+                reviewListTotle:action.total,
+            };
+        case actions.LAUD_SAVE_SUCCESS_EVENT:
+            let successRecords=state.reviewListData;
+            successRecords.map(item=>{
+                if(String(item.id)===String(action.itemId)){
+                    item.status=1;
+                }
+            });
+            return {
+                ...state,
+                reviewListData:successRecords
+            };
+        case actions.LAUD_DELE_TYPE_EVENT:
+            let deleRecords=state.reviewListData;
+            deleRecords.map(item=>{
+                if(String(item.id)===String(action.itemId)){
+                    item.status=0;
+                }
+            });
+            return {
+                ...state,
+                reviewListData:deleRecords
+            };
+        case actions.REVIEW_COMMIT_LIST:
+            let result = [];
+            if(action.page.currentPage==1){
+                result = action.list;
+            }else{
+                result = [...state.reviewReplyListData,...action.list];
+            }
+            return {
+                ...state,
+                reviewReplyListData:result,
+                reviewReplyPage:action.page,
+                reviewListTotle:action.page.pageTotal,
+            }
+        case actions.INITAIL_TRAIN_DATA:
+            return {
+                ...initial
+            }
+        default:
+            return state;
+    }
+}
\ No newline at end of file

src/components/newsMessage/NewsMessageResultTypes.jsx

+
+//项目简介和详情
+export const TRAIN_STEPS_DATA_EVENT="TRAIN_STEPS_DATA_EVENT";
+
+//项目评论
+export const REVIEW_LIST_DATA_EVENT="REVIEW_LIST_DATA_EVENT";
+
+//保存点赞
+ export const LAUD_SAVE_SUCCESS_EVENT="LAUD_SAVE_SUCCESS_EVENT";
+//取消点赞
+export const LAUD_DELE_TYPE_EVENT="LAUD_DELE_TYPE_EVENT";
+
+//项目评论功能
+export const REVIEW_COMMIT_SUCCESS = "REVIEW_COMMIT_SUCCESS";
+
+export const REVIEW_COMMIT_LIST = "REVIEW_COMMIT_LIST";
+
+export const INITAIL_TRAIN_DATA = "INITAIL_TRAIN_DATA";
\ No newline at end of file

src/components/smartPractices/RecorderVideo/index.jsx

@@ -65,7 +65,6 @@ class RecorderVideo extends Component {
             recorder = new Recorder(config);
             recorder.onprogress = (params) => {
                 let dataArray = recorder.getRecordAnalyseData();
-                console.log('ssssssssssssssss', dataArray)
             }
         } else {
             recorder.stop();
@@ -88,7 +87,6 @@ class RecorderVideo extends Component {
     //绘制波形图
     canvsPaint = () => {
         let dataArray = recorder.getRecordAnalyseData();
-        console.log('ssssssssssssssss', dataArray)
     }
 
     stopRecorder = () => {

src/locales/en-US.js

@@ -154,6 +154,8 @@ module.exports = {
 	"CourseDetails": "Details",
 	"Collected": "Collected",
 	"Collect": "Collect",
+	"MyCollect": "MyCollect",
+	"BrowsingHistory": "BrowsingHistory",
 	"CollectSucess": "Added to favorite list！",
 	"Contents": "Contents",
 	"Overview": "Overview",

src/locales/newWord.json

@@ -210,6 +210,7 @@
         "RequiredTag": "（必修）",
         "mycaselibrary51": "图片加载中",
         "mycaselibrary50": "我还没有收藏过内容",
+        "mycaselibrary55": "我还没有浏览过内容",
         "OuterLectuer": "外部讲师",
         "mycaselibrary54": "证书详情",
         "mycaselibrary53": "下载图片",
@@ -249,6 +250,8 @@
         "ResetPassword": "找回密码",
         "VerificationCode": "验证码",
         "Collect": "收藏",
+        "MyCollect": "我的收藏",
+        "BrowsingHistory": "浏览历史",
         "Hours": "小时",
         "Review": "复习",
         "video": "视频",
@@ -1543,7 +1546,7 @@
         "msg.submited": "该场考试已经提交,不能继续考试",
         "ContentRequired": "个必修活动",
         "album.biz.error": "专辑服务异常",
-        "TrainingProgram2": "项目",
+        "TrainingProgram2": "活动",
         "SearchForPostsIManage": "搜索我管理的帖子",
         "Name": "姓名：",
         "withDrawRemind": "撤回提醒",

src/locales/weichatLanguage.json

@@ -151,6 +151,8 @@
     "CourseDetails": "课程详情",
     "Collected": "已收藏",
     "Collect": "收藏",
+    "MyCollect": "我的收藏",
+    "BrowsingHistory": "浏览历史",
     "CollectSucess": "收藏成功！",
     "Contents": "目录",
     "Overview": "简介",
@@ -765,7 +767,7 @@
     "noauthtip": "没有访问权限，请返回首页",
     "abumdSubcribeSuc": "订阅成功",
     "abumdSubcribeNo": "已取订阅",
-    "TrainingProgram2": "项目",
+    "TrainingProgram2": "活动",
     "CreditForumInvitation": "发表帖子",
     "CreditForumComment": "回复帖子",
     "IncompleteExamination": "未完成考试",
@@ -1281,6 +1283,7 @@
     "mycaselibrary48": "暂无附件，确定提交审核?",
     "mycaselibrary49": "全部删除",
     "mycaselibrary50": "我还没有收藏过内容",
+    "mycaselibrary55": "我还没有浏览过内容",
     "mycaselibrary51": "图片加载中",
     "mycaselibrary52": "课程名称/作品名称",
     "mycaselibrary53": "下载图片",

src/locales/zh-CN.js

@@ -374,6 +374,8 @@ module.exports = {
     "VerificationCode": "验证码",
     "September": "9月",
     "Collect": "收藏",
+    "MyCollect": "我的收藏",
+	"BrowsingHistory": "浏览历史",
     "Hours": "小时",
     "Yes": "确定",
     "Forbidden": "禁言",
@@ -763,7 +765,7 @@ module.exports = {
     "msg.current.study.plan.not.start": "当前学习计划时间未到,无法开始学习。",
     "ContentRequired": "个必修活动",
     "album.biz.error": "专辑服务异常",
-    "TrainingProgram2": "项目",
+    "TrainingProgram2": "活动",
     "SearchForPostsIManage": "搜索我管理的帖子",
     "Name": "姓名",
     "withDrawRemind": "撤回提醒",
@@ -1081,6 +1083,8 @@ module.exports = {
 	"CourseDetails": "课程详情",
 	"Collected": "已收藏",
 	"Collect": "收藏",
+	"MyCollect": "我的收藏",
+	"BrowsingHistory": "浏览历史",
 	"CollectSucess": "收藏成功！",
 	"Contents": "目录",
 	"Overview": "简介",
@@ -1695,7 +1699,7 @@ module.exports = {
 	"noauthtip": "没有访问权限，请返回首页",
 	"abumdSubcribeSuc": "订阅成功",
 	"abumdSubcribeNo": "已取订阅",
-	"TrainingProgram2": "项目",
+	"TrainingProgram2": "活动",
 	"CreditForumInvitation": "发表帖子",
 	"CreditForumComment": "回复帖子",
 	"IncompleteExamination": "未完成考试",
@@ -2211,6 +2215,7 @@ module.exports = {
 	"mycaselibrary48": "暂无附件，确定提交审核?",
 	"mycaselibrary49": "全部删除",
 	"mycaselibrary50": "我还没有收藏过内容",
+	"mycaselibrary55": "我还没有浏览过内容",
 	"mycaselibrary51": "图片加载中",
 	"mycaselibrary52": "课程名称/作品名称",
 	"mycaselibrary53": "下载图片",

src/main.js

@@ -220,9 +220,14 @@ const CreLesVideo = LazyLoad(() =>
 const CreLesMedia = LazyLoad(() =>
   import('./components/myLesson/creLesMedia')
 );
+//我的收藏
 const MyCollection = LazyLoad(() =>
   import('./components/myCollection/index')
 );
+//浏览历史
+const BrowsingHistory = LazyLoad(() =>
+  import('./components/browsingHistory/index')
+);
 //我的学时
 const MyPeriod = LazyLoad(() => import('./components/myPeriod/index'));
 
@@ -473,7 +478,7 @@ window.dayingcode = "现在是15:02";
 
 window.onhashchange = (e) => {
   // console.log("router", e);
-  autoGetWechatPermission.sameHashNeedReload(e);
+  // autoGetWechatPermission.sameHashNeedReload(e);
   autoGetWechatPermission.checkVisible();
   autoGetWechatPermission.showShareFunction();
   autoGetWechatPermission.hideShareFunctionInMarketChapter();
@@ -588,6 +593,10 @@ class AppRouter extends React.Component {
           <Route path="/*/*/mycollection" component={Market}>
             <IndexRoute component={MyCollection} />
           </Route>
+           {/*浏览历史*/}
+           <Route path="/*/*/browsingHistory" component={Market}>
+            <IndexRoute component={BrowsingHistory} />
+          </Route>
           {/*我的学时*/}
           <Route path="/*/*/myperiod" component={MyPeriod} />
 

src/redux/action/home/home.js

@@ -9,6 +9,7 @@ export const HOMEMODULELIST  = "HOMEMODULELIST";
 export const TASK_MODULE_STATE = "TASK_MODULE_STATE";
 export const MY_CALENDAR_LIST = "MY_CALENDAR_LIST";
 
+
 export function isIndexFirstEnter(callback) {
     let url = api.baseUrl+"/system/api/firstLogin/judgeIsFirstLogin?terminalType=h5";
     return dispatch => {

src/redux/reducers/index.js

@@ -30,7 +30,8 @@ import MenuTrainReducer from '../../components/menutrain/MenuTrainReducer';
 import TrainSearchResultReducer from '../../components/menutrain/TrainSearch/TrainSearchResult/TrainSearchResultReducer'
 //培训详情页面
 import TrainingStepsReducer from '../../components/Training/TrainingSteps/TrainingStepsReducer';
-
+//新闻详情评论
+import NewsMessageResultReducer from '../../components/newsMessage/NewsMessageResultReducer';
 //我的考试
 import MyExamReducer from '../../components/exam/MyExamReducer';
 //考题页面列表
@@ -107,6 +108,7 @@ const app = combineReducers({
     mysur,
     MenuTrainReducer,
     TrainingStepsReducer,
+    NewsMessageResultReducer,
     MyExamReducer,
     myCourse,
     courseplay,

src/util/autoGetWechatPermission.js

@@ -621,28 +621,28 @@ var wechatPermission = {
             }
         }
     },
-    sameHashNeedReload(hashChangeObject) {
-        const oldUrl = hashChangeObject.oldURL;
-        const newUrl = hashChangeObject.newURL;
-        if(!window.virtualCurrencyUnit){
-            Network.get(url.baseUrl+"/mall/student/token/config/rule",(res)=>{
-                window.virtualCurrencyUnit = res.data.tokenName;
-            });
-        }
+    // sameHashNeedReload(hashChangeObject) {
+    //     const oldUrl = hashChangeObject.oldURL;
+    //     const newUrl = hashChangeObject.newURL;
+    //     if(!window.virtualCurrencyUnit){
+    //         Network.get(url.baseUrl+"/mall/student/token/config/rule",(res)=>{
+    //             window.virtualCurrencyUnit = res.data.tokenName;
+    //         });
+    //     }
         
-        if(location.hash.includes("/nocontentauth?msg")){
-            location.reload();
-            return;
-        }
+    //     if(location.hash.includes("/nocontentauth?msg")){
+    //         location.reload();
+    //         return;
+    //     }
         
-        if(location.hash.includes("login?noAutoLogin=true")){
-            location.reload();
-            return;
-        }
-        if (oldUrl.split("?")[0] == newUrl.split("?")[0] && (oldUrl.includes("/MarketingDetail?") || oldUrl.includes("/media?") || oldUrl.includes("NewsMessageResult"))) {
-            location.reload();
-        }
-    },
+    //     if(location.hash.includes("login?noAutoLogin=true")){
+    //         location.reload();
+    //         return;
+    //     }
+    //     if (oldUrl.split("?")[0] == newUrl.split("?")[0] && (oldUrl.includes("/MarketingDetail?") || oldUrl.includes("/media?") || oldUrl.includes("NewsMessageResult"))) {
+    //         location.reload();
+    //     }
+    // },
     sendDeviceInfo(operation) {
         let sendUrl = url.baseUrl + "/heart_input";
         let accountId = sessionStorage.getItem("accountId")

src/util/languageObject.js

@@ -23,7 +23,6 @@ var languageObject = {
         //     alert(!window.location.hash.includes("login"))
         //     alert(sessionStorage.getItem("accountId"))
         //    console.log('cccccccccccccxxxxxxxxxxxxxx', sessionStorage)
-        console.log('sssssssssssssqqqqqqqqqqqqqq', window.location.hash)
         if ((!window.location.href.includes("login") || !window.location.hash.includes("login")) && sessionStorage.getItem("accountId")) { //如果不在login页面,做此操作 , 而且用户已经登录
             // alert('if--if')
             // console.log("alert('if--if')")
@@ -58,9 +57,9 @@ var languageObject = {
 
                 })
 
-                Network.get(API.baseUrl + "/mall/student/token/config/rule", (res) => {
-                    window.virtualCurrencyUnit = res.data.tokenName;
-                });
+                // Network.get(API.baseUrl + "/mall/student/token/config/rule", (res) => {
+                //     window.virtualCurrencyUnit = res.data.tokenName;
+                // });
 
             } catch (error) {
                 intl.init({

src/util/navDirector.js

@@ -408,7 +408,10 @@ const fnNavigate = (item, jumpType) => {
                   clearTimeout(clearTime)//bug-12616-cwj
                   clearTime= setTimeout(() => {//bug-12616-cwj
                         hashHistory.push({
-                            pathname: routerBefore + url
+                            pathname: routerBefore + url,
+                            query:{
+                                id:relationId
+                            }
                         });
                     }, 10);
                     

src/util/tempZh_CN.js

@@ -374,6 +374,8 @@ export default {
     "VerificationCode": "验证码",
     "September": "9月",
     "Collect": "收藏",
+    "MyCollect": "我的收藏",
+    "BrowsingHistory": "浏览历史",
     "Hours": "小时",
     "Yes": "确定",
     "Forbidden": "禁言",
@@ -763,7 +765,7 @@ export default {
     "msg.current.study.plan.not.start": "当前学习计划时间未到,无法开始学习。",
     "ContentRequired": "个必修活动",
     "album.biz.error": "专辑服务异常",
-    "TrainingProgram2": "项目",
+    "TrainingProgram2": "活动",
     "SearchForPostsIManage": "搜索我管理的帖子",
     "Name": "姓名",
     "withDrawRemind": "撤回提醒",