index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import React, { Component } from 'react'
  2. import styles from './index.less'
  3. import words01 from '@/assets/words01.png'
  4. import iconIos from '@/assets/icon_ios01.png'
  5. import iconAndroid from '@/assets/icon_android01.png'
  6. import iconCode from '@/assets/icon_code.png'
  7. import qrcode from '@/assets/qrcode.png'
  8. import router from 'umi/router'
  9. import { Icon } from 'antd'
  10. import CopyRight from './components/CopyRight'
  11. class Home extends Component {
  12. constructor(props) {
  13. super(props)
  14. }
  15. // 跳转到产品说明
  16. goExplain = (e) => {
  17. e.preventDefault()
  18. router.push('/explain')
  19. }
  20. onDownIos = () => {
  21. const iosUrl = 'https://fir.im/starbuds'
  22. window.open(iosUrl, '_blank')
  23. }
  24. onDownAndroid = () => {
  25. const androidUrl = 'http://file.qn.paqukeji.com/xingya-1.0.0-3.apk'
  26. window.location.href = androidUrl
  27. }
  28. render() {
  29. return (
  30. <div className={styles['home-wrap']}>
  31. <div className={styles['video-wrap']}>
  32. <video
  33. src="//sp.qn.paqukeji.com/videos/office_web_video.mp4"
  34. poster='/cover01.png'
  35. controls={false}
  36. className={styles['video-flag']}
  37. autoPlay
  38. muted
  39. loop
  40. />
  41. </div>
  42. <div className={styles['mask-wrap']}>
  43. <div className={styles['content-wrap']}>
  44. {/* <div className={styles['logo-bottom-height']}/> */}
  45. <img src={words01} alt="" className={styles['words-img']} />
  46. {/* <div className={styles['height-word-bot']} /> */}
  47. {/* <div className={styles['height-btns-bot']}>
  48. <a
  49. href="#"
  50. onClick={this.goExplain}
  51. >
  52. <Icon type="appstore" />
  53. <span>产品说明</span>
  54. </a>
  55. </div> */}
  56. {/* <ul className={styles['btns-wrap']}>
  57. <li onClick={this.goExplain}>
  58. <Icon type="appstore" />
  59. <span>产品说明</span>
  60. </li>
  61. <li onClick={this.onDownIos}>
  62. <img src={iconIos} alt=""/>
  63. <span>iOS下载</span>
  64. </li>
  65. <li onClick={this.onDownAndroid}>
  66. <img src={iconAndroid} alt=""/>
  67. <span>Android下载</span>
  68. </li>
  69. <li>
  70. <img src={iconCode} alt=""/>
  71. <span>扫描下载</span>
  72. <div className={styles['qrcode-wrap']}>
  73. <div className={styles['qrcode-img-wrap']}>
  74. <img className={styles['qrcode-img']} src={qrcode} alt=""/>
  75. </div>
  76. </div>
  77. </li>
  78. </ul> */}
  79. {/* <div className={styles['height-btns-bot']} /> */}
  80. <div className={styles['copy-right-height']} />
  81. <CopyRight />
  82. </div>
  83. </div>
  84. </div>
  85. )
  86. }
  87. }
  88. export default Home