111

src/components/rule/rule.jsx

@@ -13,6 +13,11 @@ class Rule extends React.Component {
   constructor(props) {
     super(props);
   }
+
+  onClick_rule=()=>{
+    modalStore.closePop();
+  }
+  
   render() {
     return (
       <div className="rule">
@@ -23,7 +28,7 @@ class Rule extends React.Component {
           3.玩家可以通过积分解锁炮弹车的皮肤以及游戏场景皮肤。
           4.玩家控制小车的过程中不可触碰到石头，如果触碰到则游戏结束。
         </span>
-        <span className="rule_close"></span>
+        <span  onClick={this.onClick_rule} className="rule_close"></span>
       </div>
     );
   }

src/components/rule/rule.less

@@ -20,7 +20,6 @@
     top: 213px;
     position: absolute;
     font-size: 26px;
-    line-height: 301px;
     color: rgba(107, 41, 62, 1);
   }
   .rule_close {

src/pages/index/index.jsx

@@ -4,28 +4,61 @@ import modalStore from '@src/store/modal';
 import { observer } from 'mobx-react';
 import React from 'react';
 import './index.less';
-
-
 @observer
 class Index extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      isOn: 1
+    }
+  }
+  
+  onclick_rank=()=>{
+    console.warn('onclick_rank')
+  }
+
+  onclick_start=()=>{
+    console.warn('onclick_start')
+  }
+
+  openMusic(isOn){
+    console.warn('isOn',isOn ? '开':'关');
   }
-  onclick_record=()=>{}
-  onclick_rule=()=>{
-    modalStore.pushPop("Assist");
+  componentDidMount(){
+    this.openMusic(1);
+  }
+
+  onClick_music_on = () => {
+    this.setState({isOn:0});
+    this.openMusic(0)
+  }
+
+  onClick_music_off = () => {
+    this.setState({isOn:1})
+    this.openMusic(1)
+  }
+
+  onclick_record = () => {
+    console.warn('onclick_record')
+  }
+  onclick_rule = () => {
+    modalStore.pushPop("Rule");
   }
   render() {
+    const { isOn } = this.state;
     return (
       <div className="index">
         <span className="index_bg"></span>
-        <span className="index_rankbtn"></span>
-        <span className="index_f"></span>
-        <span className="index_on"></span>
+        <span onClick={this.onclick_rank}  className="index_rankbtn"></span>
+        {
+          isOn ? (<span onClick={this.onClick_music_on} className="index_on"></span>)
+            :
+            (<span onClick={this.onClick_music_off} className="index_f"></span>)
+        }
         <span onClick={this.onclick_record} className="index_record"></span>
         <span onClick={this.onclick_rule} className="index_rule"></span>
         <span className="index_tips">今日剩余X次</span>
-        <span className="index_start_btn"></span>
+        <span onClick={this.onclick_start} className="index_start_btn"></span>
         <span className="index_title"></span>
       </div>
     );