视频右下角按钮位置修改

src/config.js

 export const USE_VW = true;
-export function convertpx2vw(px) { return USE_VW ? px / 16 + 'vw' : px + 'px'}
\ No newline at end of file
+let unit = window.innerWidth / window.innerHeight > 1.6 ? 'vh' : 'vw';
+let divide = window.innerWidth / window.innerHeight > 1.6 ? 10 : 16;
+
+window.addEventListener('resize', () => {
+  unit = window.innerWidth / window.innerHeight > 1.6 ? 'vh' : 'vw';
+  divide = window.innerWidth / window.innerHeight > 1.6 ? 10 : 16;
+});
+export function convertpx2vw(px) { return USE_VW ? px / divide + unit : px + 'px'}

src/pages/FertilizeConcentrated.js

@@ -13,7 +13,7 @@ import DipBgActive from '../磷肥施用技术切图/按下状态/集中施肥01
 import PlugBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/塞秧斗.png';
 import MixBgActive from '../磷肥施用技术切图/按下状态/集中施肥01-按下-assets/拌种.png';
 
-import LineVideoSrc from '../动画/集中施肥/点击进入“穴施”按钮后）出现画面.mp4';
+import LineVideoSrc from '../动画/集中施肥/点击进入“条施”按钮的画面.mp4';
 import CaveVideoSrc from '../动画/集中施肥/点击进入“穴施”按钮后）出现画面.mp4';
 import DipVideoSrc from '../动画/集中施肥/（点击进入“蘸秧根”按钮后）出现画面.mp4';
 import PlugVideoSrc from '../动画/集中施肥/（点击进入“塞秧斗”按钮后）出现画面.mp4';

src/pages/FertilizeEarly/Wheat/lifetime.js

@@ -26,6 +26,7 @@ import MaturityBgActive from '../../../磷肥施用技术切图/按下状态/冬
 
 
 import SeedlingVideoSrcs from '../../../动画/冬小麦/冬小麦苗期.mp4'
+import TillerVideoSrcs from '../../../动画/冬小麦/冬小麦苗期.mp4'
 import WinteringVideoSrcs from '../../../动画/冬小麦/冬小麦越冬期.mp4'
 import GreeningVideoSrcs from '../../../动画/冬小麦/冬小麦返青期.mp4'
 import JointingVideoSrcs from '../../../动画/冬小麦/冬小麦拔节期.mp4'
@@ -55,10 +56,10 @@ const Btn = styled.button`
     outline: none;
   }
   &:first-child {
-    margin-top: ${convertpx2vw(120)};
+    margin-top: ${convertpx2vw(125)};
   }
   &:not(:first-child) {
-    margin-top: ${convertpx2vw(20)};
+    margin-top: ${convertpx2vw(15)};
   }
   background-repeat: no-repeat;
   background-position: center;
@@ -77,6 +78,7 @@ const bgsActive = {SeedlingBgActive, TillerBgActive, WinteringBgActive, Greening
 
 const videoSrcs = {
   SeedlingVideoSrcs,
+  TillerVideoSrcs,
   WinteringVideoSrcs,
   GreeningVideoSrcs,
   JointingVideoSrcs,
@@ -96,7 +98,7 @@ export default withRouter(({ match, history }) => {
 
   function getRedirectPath() {
     if (name === 'Seedling') {
-      return `${match.url}/Seedling`;
+      return `${match.url}/seedling`;
     }
     return null;
   }
@@ -118,7 +120,7 @@ export default withRouter(({ match, history }) => {
 
       <BackBtn />
       <HomeBtn />
-      <Video wrappedComponentRef={c => videoRef.current = c} to={getRedirectPath} />
+      <Video wrappedComponentRef={c => videoRef.current = c} to={getRedirectPath()} />
     </WheatBg>
   );
 });
\ No newline at end of file

src/pages/SubHome.js

@@ -54,16 +54,16 @@ const FertilizeControl = styled(FertilizeBtn)`
   background-image: url(${FertilizeControlBg});
   margin-right: 0;
 `;
-export const BackBtn = withRouter(({ onClick, history }) => {
+export const BackBtn = withRouter(({ onClick, className, history }) => {
   function handleClick(e) {
     e.preventDefault();
     history.goBack();
   }
-  return <StyledBackBtn to="#" onClick={onClick || handleClick} />
+  return <StyledBackBtn to="#" className={className} onClick={onClick || handleClick} />
 });
 
-export function HomeBtn() {
-  return <StyledHomeBtn to={baseUrl+'/'} />;
+export function HomeBtn({ className }) {
+  return <StyledHomeBtn className={className} to={baseUrl+'/'} />;
 }
 
 export default function SubHome({ match }) {

src/pages/Video.js

@@ -2,6 +2,16 @@ import React from 'react';
 import styled from 'styled-components';
 import { withRouter } from 'react-router-dom';
 import { HomeBtn, BackBtn } from './SubHome';
+import { convertpx2vw } from '../config'
+
+const StyledHomeBtn = styled(HomeBtn)`
+  bottom: 0.3em;
+  right: ${convertpx2vw(40)};
+`;
+const StyledBackBtn = styled(BackBtn)`
+  bottom: 0.3em;
+  right: ${convertpx2vw(155)};
+`;
 
 const VideoWrapper = styled.div`
   position: absolute;
@@ -66,9 +76,11 @@ class VideoDiy extends React.Component {
     const { show } = this.state;
     return (
       <VideoWrapper show={show} >
-        <StyledVideo ref={node => this.videoEle = node} onPlay={() => this.setState({ show: true })} onEnded={this.handleEnded} />
-        <BackBtn onClick={this.handleVideoBack} />
-        <HomeBtn />
+        <div style={{ display: 'inline-block', position: 'relative', height: '100%'}}>
+          <StyledVideo ref={node => this.videoEle = node} onPlay={() => this.setState({ show: true })} onEnded={this.handleEnded} />
+          <StyledBackBtn onClick={this.handleVideoBack} />
+          <StyledHomeBtn />
+        </div>
       </VideoWrapper>
     );
   }