调整

public/react/src/modules/courses/ListPageIndex.js

@@ -4,7 +4,7 @@ import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
 import {Input,Pagination,Tooltip} from 'antd';
 import Loadable from 'react-loadable';
 import Loading from '../../Loading';
-
+import Guide from "../../modules/courses/shixunHomework/Guide";
 //业务组件
 import CoursesBanner from "./coursesDetail/CoursesBanner";
 import Coursesleftnav from "./coursesDetail/CoursesLeftNav";
@@ -66,11 +66,19 @@ const GraduationTasks= Loadable({
 })
 class ListPageIndex extends Component{
   constructor(props) {
-    super(props)
+    super(props);
+    this.state={
+      yslGuideone:true,
+    }
   }
 
   componentDidMount(){
-
+    var yslGuideone = window.localStorage.getItem('yslGuideone');
+    console.log("77");
+    console.log(yslGuideone);
+    this.setState({
+      yslGuideone:yslGuideone,
+    })
   }
   //
   // getleftNavid=(navid,newselectnavid)=>{
@@ -80,13 +88,28 @@ class ListPageIndex extends Component{
   //     navttype:newselectnavid
   //   })
   // }
-
+   setwindowlocal=(bool)=>{
+     window.localStorage.setItem('yslGuideone', bool);
+     this.setState({
+       yslGuideone:bool,
+     })
+   }
   render() {
+    let {yslGuideone} =this.state;
+    console.log("98");
+    console.log(yslGuideone);
       return (
       <div>
           <div className="newMain clearfix">
               {/*头部banner*/}
               <CoursesBanner {...this.props}></CoursesBanner>
+            {yslGuideone===null||yslGuideone===undefined||yslGuideone===false?
+              <Guide
+                setwindowlocal={(b)=>this.setwindowlocal(b)}
+              >
+              </Guide>
+              :""
+            }
 
               <div className="educontent clearfix" style={{flex: "1 0 auto"}}>
 

public/react/src/modules/courses/shixunHomework/Guide.js

@@ -0,0 +1,123 @@
+import React, {Component} from "react";
+import './guide.css'
+
+import guihome1 from "../../../images/guideimg/guihome1.png";
+import guihome2 from "../../../images/guideimg/guihome2.jpg";
+import guihome3 from "../../../images/guideimg/guihome3.jpg";
+import guihome4 from "../../../images/guideimg/guihome4.jpg";
+import guihome5 from "../../../images/guideimg/guihome5.jpg";
+import guihome6 from "../../../images/guideimg/guihome6.jpg";
+
+
+class Guide extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state={
+			pingmuz:"",
+			page:1,
+			mywidth:1,
+		}
+
+	}
+	componentDidMount() {
+
+    var mywidthone=0;
+		if(window.screen.width===1024){
+			mywidthone=1;
+		}
+		if(window.screen.width===1280){
+			mywidthone=2;
+		}
+		if(window.screen.width===1440){
+			mywidthone=3;
+		}
+		if(window.screen.width===1680){
+			mywidthone=4;
+		}
+		if(window.screen.width===1920){
+			mywidthone=5;
+		}
+		this.setState({
+			mywidth:mywidthone,
+		});
+
+	}
+	thissetPage=(i)=>{
+		this.setState({
+			page:i,
+		})
+		if(i===7){
+			this.props.setwindowlocal(true);
+		}
+	}
+	render() {
+		let {page,mywidth}=this.state;
+		// console.log("屏幕宽度");
+		// console.log(window.screen.width);
+		// console.log(mywidth);
+		return (
+			<div className="guide-shadow">
+				<style>
+					{
+						`
+						body {
+    overflow: hidden !important;
+    }
+						`
+					}
+				</style>
+				{
+					page===1?
+						<div className="guide-content">
+							<img className={mywidth===1?"ysldiv11024":mywidth===2?"ysldiv11280":mywidth===3?"ysldiv11440":mywidth===4?"ysldiv11680":"ysldiv11900"} src={guihome1} onClick={(i)=>this.thissetPage(2)} />
+						</div>
+						:""
+				}
+				{
+					page===2?
+						<div  className="guide-content">
+              <img  className={mywidth===1?"ysldiv21024":mywidth===2?"ysldiv21280":mywidth===3?"ysldiv21440":mywidth===4?"ysldiv21680":"ysldiv21900"} src={guihome2} onClick={(i)=>this.thissetPage(3)}/>
+						</div>
+						:
+						""
+				}
+				{
+					page===3?
+						<div  className="guide-content">
+							<img  className={mywidth===1?"ysldiv31024":mywidth===2?"ysldiv31280":mywidth===3?"ysldiv31440":mywidth===4?"ysldiv31680":"ysldiv31900"} src={guihome3} onClick={(i)=>this.thissetPage(4)}/>
+						</div>
+						:
+						""
+				}
+				{
+					page===4?
+						<div  className="guide-content">
+							<img  className={mywidth===1?"ysldiv41024":mywidth===2?"ysldiv41280":mywidth===3?"ysldiv41440":mywidth===4?"ysldiv41680":"ysldiv41900"} src={guihome4} onClick={(i)=>this.thissetPage(5)}/>
+						</div>
+						:
+						""
+				}
+				{
+					page===5?
+						<div  className="guide-content">
+							<img  className={mywidth===1?"ysldiv51024":mywidth===2?"ysldiv51280":mywidth===3?"ysldiv51440":mywidth===4?"ysldiv51680":"ysldiv51900"} src={guihome5} onClick={(i)=>this.thissetPage(6)}/>
+						</div>
+						:
+						""
+				}
+				{
+					page===6?
+						<div  className="guide-content">
+							<img  className={mywidth===1?"ysldiv61024":mywidth===2?"ysldiv61280":mywidth===3?"ysldiv61440":mywidth===4?"ysldiv61680":"ysldiv61900"} src={guihome6} onClick={(i)=>this.thissetPage(7)}/>
+						</div>
+						:
+						""
+				}
+			</div>
+		)
+	}
+}
+
+
+export default Guide;

public/react/src/modules/courses/shixunHomework/ShixunHomeworkPage.js

@@ -17,6 +17,7 @@ import Workquestionandanswer from './Workquestionandanswer';
 import CoursesListType from '../coursesPublic/CoursesListType';
 import ShixunStudentWork from "./ShixunStudentWork";
 import Startshixuntask from "../coursesPublic/Startshixuntask";
+
 import TPMMDEditor from "../../tpm/challengesnew/TPMMDEditor";
 import DownloadMessageysl from "../../modals/DownloadMessageysl";
 class ShixunHomeworkPage extends Component {
@@ -128,6 +129,8 @@ class ShixunHomeworkPage extends Component {
 		// console.log(teacherdatapage);
 		return (
 			<div className="newMain clearfix ">
+
+
 				<div className={"educontent mb20"} style={{width: "1200px"}}>
 
 					<div className="educontent mb20">

public/react/src/modules/courses/shixunHomework/guide.css

@@ -0,0 +1,415 @@
+
+
+/*[class^="icon-"], [class*=" icon-"] {*/
+/*  font-family:"iconfont";*/
+/*  font-size:12px;*/
+/*  font-style:normal;*/
+/*  -webkit-font-smoothing: antialiased;*/
+/*  -moz-osx-font-smoothing: grayscale;*/
+/*}*/
+
+.guide-container{
+  position: relative;
+}
+
+.guide-shadow{
+  position: fixed;
+  top:0;
+  z-index: 99999;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  
+  background-color:  rgba(0, 0, 0, 0.8);
+  transition: all .3s ease-out;
+  display: flex;
+  justify-content: center;
+}
+
+.guide-content{
+  position: absolute;
+  display: block;
+  z-index: 999991;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  transition: all .3s ease-out;
+  display: flex;
+  flex-direction:column;
+  border: 1px solid rgba(0, 0, 0, .5);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, .4);
+
+}
+.guiimgconte{
+  width: 100%;
+  height: 13%;
+  margin-top: 12%;
+  margin-left: 73%;
+}
+
+
+
+.guiimgcontee{
+  width: 100%;
+  display: flex;
+  justify-content:flex-end;
+  margin-top: 2%;
+}
+.gimgtwo{
+  height: 30%;
+  margin-left: 8%;
+  margin-top: 2%;
+}
+.guide-icon-no{
+  position: absolute;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  z-index: 999998;
+  color: #fff;
+  background: linear-gradient(to bottom,#409EFF 0%,#007fff 100%);
+  font-weight: 6000;
+  padding: 1px;
+  font-size: 13px;
+  line-height: 20px;
+  font-family: Arial,verdana,tahoma;
+  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
+  text-align: center;
+  box-shadow: 0 2px 5px rgba(0,0,0,.4);
+  transition: all .3s ease-out;
+}
+
+.guide-tooltip{
+  position: absolute;
+  border-radius: 5px;
+  z-index: 999995;
+  display: block;
+  opacity: 1;
+  padding: 15px 25px 15px 15px;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
+  transition: opacity .1s ease-out;
+  min-width: 200px;
+  max-width: 250px;
+  background-color: #fff;
+}
+
+.guide-tooltip div:nth-child(1) {
+  font: 14px/normal sans-serif;
+  color: #2d2d2d;
+  font-weight: 400;
+  zoom: 1;
+  margin-bottom: 0;
+}
+
+.guide-tooltip .audio-play{
+  position: absolute;
+  top: 17px;
+  z-index: 999999;
+  right: 5px;
+  width: 26px;
+  height: 18px;
+  background-size: 20px 19px;
+  background-repeat: no-repeat;
+  background-position: 7px -2px;
+  background-image: url('http://fanyi.bdstatic.com/static/translation/img/translate/output/sound2x_d6f553d.gif')
+}
+
+.guide-tooltip .audio-noplay{
+  position: absolute;
+  top: 17px;
+  z-index: 999999;
+  right: 5px;
+  background-repeat: no-repeat;
+  background-position: 0 -1046px;
+  height: 16px;
+  width: 19px;
+  background-image: url('http://fanyi.bdstatic.com/static/translation/sprite/images/normal/index-sc413d90635_65ba9b0.png')
+}
+
+.guide-tooltip .guide-arrow{
+  position: absolute;
+  content: '';
+  border: 5px solid #fff;
+}
+
+.guide-tooltip .top{
+  top: -10px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: #fff;
+  border-left-color: transparent;
+}
+
+.guide-tooltip .left{
+  left: -10px;
+  top: 10px;
+  border-top-color: transparent;
+  border-right-color: #fff;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.guide-tooltip .bottom{
+  bottom: -10px;
+  left: 10px;
+  border-top-color: #fff;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.guide-tooltip .right{
+  right: -10px;
+  top: 10px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: #fff;
+}
+
+.guide-bullets ul{
+  display: flex;
+  justify-content: center;
+  padding: 0;
+}
+.guide-bullets ul li{
+  list-style: none;
+}
+.guide-bullets ul li div{
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin: 2px;
+  background-color: #ccc;
+  cursor: pointer;
+}
+.guide-bullets .active-dot{
+  background-color: #409EFF
+}
+
+.guide-button-group{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5px;
+}
+
+.guide-button{
+  background-color: #409EFF;
+  border-color: #409EFF;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: #fff;
+  line-height: 1;
+  font-size: 13px;
+  outline: none;
+  margin: 0;
+  padding: 4px 7px;
+}
+
+.guide-button-total {
+  border-radius: 3px;
+}
+
+.guide-button-left {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+  border-right-color: hsla(0,0%,100%,.5)
+}
+
+.guide-button-right {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+ 
+.guide-button-disabled {
+  background-color: #a0cfff;
+  border-color: #a0cfff;
+  cursor: not-allowed;
+}
+
+
+
+/*验证码*/
+.ysldiv11900{
+  margin-top: 10%;
+  margin-left: 17%;
+  margin-right: 14%;
+
+}
+.ysldiv11680{
+  margin-top: 11%;
+  margin-left: 13%;
+  margin-right: 10%;
+}
+.ysldiv11440{
+  margin-top: 14%;
+  margin-left: 7%;
+  margin-right: 3%;
+  height: 60%;
+}
+
+.ysldiv11280{
+  margin-top: 16%;
+  margin-left: 2%;
+  margin-right: 0%;
+  height: 60%;
+}
+.ysldiv11024{
+  margin-top: 20%;
+  margin-left: 0%;
+  margin-right: -1%;
+  height: 59%;
+}
+
+
+/*添加成员*/
+.ysldiv21900{
+  margin-top: 10%;
+  margin-left: 48%;
+  margin-right: 25%;
+  height: 18%;
+
+}
+.ysldiv21680{
+  margin-top: 11%;
+  margin-left: 45%;
+  margin-right: 20%;
+  height: 24%;
+}
+.ysldiv21440{
+  margin-top: 14%;
+  margin-left: 47%;
+  margin-right: 17%;
+  height: 25%;
+}
+
+.ysldiv21280{
+  margin-top: 16%;
+  margin-left: 51%;
+  margin-right: 14%;
+  height: 25%;
+}
+.ysldiv21024{
+  margin-top: 20%;
+  margin-left: 61%;
+  margin-right: 0%;
+  height: 33%;
+}
+
+/*成员列表*/
+.ysldiv31900{
+  margin-top: 10%;
+  margin-left: 19%;
+  margin-right: 45%;
+
+}
+.ysldiv31680{
+  margin-top: 11%;
+  margin-left: 14%;
+  margin-right: 45%;
+}
+.ysldiv31440{
+  margin-top: 13%;
+  margin-left: 8%;
+  margin-right: 44%;
+}
+
+.ysldiv31280{
+  margin-top: 15%;
+  margin-left: 3%;
+  margin-right: 44%;
+}
+.ysldiv31024{
+  margin-top: 18%;
+  margin-left: 1%;
+  margin-right: 38%;
+}
+
+/*目录管理*/
+
+.ysldiv41900{
+  margin-top: 18%;
+  margin-left: 19%;
+  margin-right: 28%;
+
+}
+.ysldiv41680{
+  margin-top: 21%;
+  margin-left: 14%;
+  margin-right: 23%;
+}
+.ysldiv41440{
+  margin-top: 24%;
+  margin-left: 8%;
+  margin-right: 19%;
+}
+
+.ysldiv41280{
+  margin-top: 27%;
+  margin-left: 3%;
+  margin-right: 17%;
+}
+.ysldiv41024{
+  margin-top: 29%;
+  margin-left: 0%;
+  margin-right: 2%;
+}
+
+/*导航排序*/
+.ysldiv51900{
+  margin-top: 18%;
+  margin-left: 18%;
+  margin-right: 42%;
+
+}
+.ysldiv51680{
+  margin-top: 20%;
+  margin-left: 13%;
+  margin-right: 41%;
+}
+.ysldiv51440{
+  margin-top: 24%;
+  margin-left: 7%;
+  margin-right: 38%;
+}
+
+.ysldiv51280{
+  margin-top: 27%;
+  margin-left: 2%;
+  margin-right: 38%;
+}
+.ysldiv51024{
+  margin-top: 34%;
+  margin-left: -1%;
+  margin-right: 27%;
+}
+
+/*任务操作*/
+.ysldiv61900{
+  margin-top: 16%;
+  margin-left: 34%;
+  margin-right: 19%
+
+}
+.ysldiv61680{
+  margin-top: 18%;
+  margin-left: 31%;
+  margin-right: 14%;
+}
+.ysldiv61440{
+  margin-top: 21%;
+  margin-left: 28%;
+  margin-right: 8%;
+}
+
+.ysldiv61280{
+  margin-top: 24%;
+  margin-left: 25%;
+  margin-right: 3%;
+  height: 53%;
+}
+.ysldiv61024{
+  margin-top: 26%;
+  margin-left: 27%;
+  margin-right: 0%;
+  height: 40%;
+}