xuchengxiang
/
niucai-user
ウォッチ 1
お気に入りに登録 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

静态页面

1002884655 4 年 前
親
92ae7b05c8
コミット
931432a803
共有8 個のファイルを変更した、415 個の追加 と 144 個の削除を含む
分割表示 差分情報を表示
  1. 0
    0
      src/components/demo/index.vue
  2. 0
    0
      src/components/demo/page.scss
  3. 107
    0
      src/components/index/ZqgghhtzBiFen/index.vue
  4. 45
    0
      src/components/index/ZqgghhtzBiFen/page.scss
  5. 77
    0
      src/components/index/ZqgghhtzShengPingFu/index.vue
  6. 66
    0
      src/components/index/ZqgghhtzShengPingFu/page.scss
  7. 76
    37
      src/components/index/ZuQiuGuoGuanHunHeTouZhu/index.vue
  8. 44
    107
      src/components/index/ZuQiuGuoGuanHunHeTouZhu/page.scss

src/components/demo copy 2/index.vue → src/components/demo/index.vue ファイルの表示


src/components/demo copy 2/page.scss → src/components/demo/page.scss ファイルの表示


+ 107
- 0
src/components/index/ZqgghhtzBiFen/index.vue ファイルの表示 

@@ -0,0 +1,107 @@
1 
+<template>
2 
+  <div class="components ZqgghhtzBiFen">
3 
+    <span><em>单</em>比分</span>
4 
+    <table>
5 
+      <tr>
6 
+        <td rowspan="3">
7 
+          <span>主胜</span>
8 
+        </td>
9 
+        <td v-for="(item, index) in PageScoreData.slice(0, 5)" :key="index" :data="`${item.Active}`" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
10 
+          <span>{{item.name}}</span>
11 
+          <span>{{item.odds}}</span>
12 
+        </td>
13 
+      </tr>
14 
+      <tr>
15 
+        <td v-for="(item, index) in PageScoreData.slice(5, 10)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
16 
+          <span>{{item.name}}</span>
17 
+          <span>{{item.odds}}</span>
18 
+        </td>
19 
+      </tr>
20 
+      <tr>
21 
+        <td v-for="(item, index) in PageScoreData.slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
22 
+          <span>{{item.name}}</span>
23 
+          <span>{{item.odds}}</span>
24 
+        </td>
25 
+      </tr>
26 
+      <tr>
27 
+        <td>
28 
+          <span>平</span>
29 
+        </td>
30 
+        <td v-for="(item, index) in PageScoreData.slice(13, 18)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
31 
+          <span>{{item.name}}</span>
32 
+          <span>{{item.odds}}</span>
33 
+        </td>
34 
+      </tr>
35 
+      <tr>
36 
+        <td rowspan="3">
37 
+          <span>主负</span>
38 
+        </td>
39 
+        <td v-for="(item, index) in PageScoreData.slice(18, 23)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
40 
+          <span>{{item.name}}</span>
41 
+          <span>{{item.odds}}</span>
42 
+        </td>
43 
+      </tr>
44 
+      <tr>
45 
+        <td v-for="(item, index) in PageScoreData.slice(23, 28)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
46 
+          <span>{{item.name}}</span>
47 
+          <span>{{item.odds}}</span>
48 
+        </td>
49 
+      </tr>
50 
+      <tr>
51 
+        <td v-for="(item, index) in PageScoreData.slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
52 
+          <span>{{item.name}}</span>
53 
+          <span>{{item.odds}}</span>
54 
+        </td>
55 
+      </tr>
56 
+    </table>
57 
+  </div>
58 
+</template>
59 
+
60 
+<script>
61 
+/*
62 
+  页面名称：
63 
+*/
64 
+export default {
65 
+  name: 'ZqgghhtzBiFen',
66 
+  props: {
67 
+    Id: {
68 
+      default: null
69 
+    },
70 
+    Index: {
71 
+      default: null
72 
+    },
73 
+    ScoreData: {
74 
+      default: []
75 
+    }
76 
+  },
77 
+  data () {
78 
+    return {
79 
+      PageScoreData: []
80 
+    }
81 
+  },
82 
+  computed: {
83 
+  },
84 
+  components: {
85 
+  },
86 
+  created () {
87 
+    this.ScoreData.map((item) => {
88 
+      this.PageScoreData.push({ ...item, Active: false })
89 
+    })
90 
+  },
91 
+  mounted () {
92 
+    this.$nextTick(() => {
93 
+    })
94 
+  },
95 
+  methods: {
96 
+    SelectItem (item, index, key) { // 选择投注
97 
+      item.Active = !item.Active
98 
+      this.$emit('SelectItem', { pIndex: this.Index, value: item.Active, key, cIndex: index, id: this.Id, target: item })
99 
+    }
100 
+  }
101 
+}
102 
+</script>
103 
+
104 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
105 
+<style lang="scss" scoped>
106 
+@import "page.scss";
107 
+</style>

+ 45
- 0
src/components/index/ZqgghhtzBiFen/page.scss ファイルの表示 

@@ -0,0 +1,45 @@
1 
+.components.ZqgghhtzBiFen {
2 
+  > span {
3 
+    font-size: 0.12rem;
4 
+    line-height: 0.2rem;
5 
+    color: #999;
6 
+    display: block;
7 
+    > em {
8 
+      font-size: 0.12rem;
9 
+      width: 0.16rem;
10 
+      line-height: 0.16rem;
11 
+      text-align: center;
12 
+      background: #ff5100;
13 
+      color: #fff;
14 
+      margin-right: 0.05rem;
15 
+      display: inline-block;
16 
+    }
17 
+  }
18 
+  > table {
19 
+    width: 100%;
20 
+    box-sizing: border-box;
21 
+    margin-top: 0.05rem;
22 
+    border: 0.01rem solid #f7f7f7;
23 
+    > tr {
24 
+      > td {
25 
+        border: 0.01rem solid #f7f7f7;
26 
+        padding: 0.05rem 0;
27 
+        &.active {
28 
+          background: #ff5100;
29 
+          > span {
30 
+            color: #fff;
31 
+          }
32 
+        }
33 
+        > span {
34 
+          display: block;
35 
+          text-align: center;
36 
+          font-size: 0.12rem;
37 
+          line-height: 0.16rem;
38 
+          white-space: nowrap;
39 
+          overflow: hidden;
40 
+          text-overflow: ellipsis;
41 
+        }
42 
+      }
43 
+    }
44 
+  }
45 
+}

+ 77
- 0
src/components/index/ZqgghhtzShengPingFu/index.vue ファイルの表示 

@@ -0,0 +1,77 @@
1 
+<template>
2 
+  <div class="components ZqgghhtzShengPingFu flex-h">
3 
+    <span>{{Id}}</span>
4 
+    <div class="flex-item flex-h">
5 
+      <div class="flex-item">
6 
+        <div class="flex-h">
7 
+          <span>0</span>
8 
+          <a class="flex-item" v-for="(item, index) in PageWdlData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-wdl')">{{`${item.name} ${item.odds}`}}</a>
9 
+        </div>
10 
+        <div class="flex-h">
11 
+          <span>{{SpreadPoints > 0 ? `+${SpreadPoints}` : SpreadPoints}}</span>
12 
+          <a class="flex-item" v-for="(item, index) in PageWdlsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-wdls')">{{`${item.name} ${item.odds}`}}</a>
13 
+        </div>
14 
+      </div>
15 
+      <a @click="$emit('ShowMore', Index)">更多<br />选项</a>
16 
+    </div>
17 
+  </div>
18 
+</template>
19 
+
20 
+<script>
21 
+/*
22 
+  页面名称：
23 
+*/
24 
+export default {
25 
+  name: 'ZqgghhtzShengPingFu',
26 
+  props: {
27 
+    SpreadPoints: {
28 
+      default: null
29 
+    },
30 
+    Id: {
31 
+      default: null
32 
+    },
33 
+    Index: {
34 
+      default: null
35 
+    },
36 
+    WdlData: {
37 
+      default: []
38 
+    },
39 
+    WdlsData: {
40 
+      default: []
41 
+    }
42 
+  },
43 
+  data () {
44 
+    return {
45 
+      PageWdlData: [],
46 
+      PageWdlsData: []
47 
+    }
48 
+  },
49 
+  computed: {
50 
+  },
51 
+  components: {
52 
+  },
53 
+  created () {
54 
+    this.WdlData.map((item) => {
55 
+      this.PageWdlData.push({ ...item, Active: false })
56 
+    })
57 
+    this.WdlsData.map((item) => {
58 
+      this.PageWdlsData.push({ ...item, Active: false })
59 
+    })
60 
+  },
61 
+  mounted () {
62 
+    this.$nextTick(() => {
63 
+    })
64 
+  },
65 
+  methods: {
66 
+    SelectItem (item, index, key) { // 选择投注
67 
+      item.Active = !item.Active
68 
+      this.$emit('SelectItem', { pIndex: this.Index, value: item.Active, key, cIndex: index, id: this.Id, target: item })
69 
+    }
70 
+  }
71 
+}
72 
+</script>
73 
+
74 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
75 
+<style lang="scss" scoped>
76 
+@import "page.scss";
77 
+</style>

+ 66
- 0
src/components/index/ZqgghhtzShengPingFu/page.scss ファイルの表示 

@@ -0,0 +1,66 @@
1 
+.components.ZqgghhtzShengPingFu {
2 
+  align-items: center;
3 
+  margin-top: 0.05rem;
4 
+  > span {
5 
+    font-size: 0.1rem;
6 
+    color: #999;
7 
+    margin-right: 0.4rem;
8 
+  }
9 
+  > div.flex-item {
10 
+    > div.flex-item {
11 
+      position: relative;
12 
+      overflow: hidden;
13 
+      > div.flex-h {
14 
+        margin-top: 0.05rem;
15 
+        align-items: center;
16 
+        &:first-child {
17 
+          margin-top: 0;
18 
+        }
19 
+        > span {
20 
+          font-size: 0.1rem;
21 
+          width: 0.16rem;
22 
+          line-height: 0.16rem;
23 
+          text-align: center;
24 
+          border: 0.01rem solid #999;
25 
+          color: #999;
26 
+          border-radius: 100%;
27 
+          margin-right: 0.1rem;
28 
+          &.Yellow {
29 
+            color: #fff;
30 
+            background: #ff5100;
31 
+            border-color: #ff5100;
32 
+          }
33 
+          &.Blue {
34 
+            color: #fff;
35 
+            background: #3f63e5;
36 
+            border-color: #3f63e5;
37 
+          }
38 
+        }
39 
+        > a {
40 
+          text-align: center;
41 
+          border: 0.01rem solid #999;
42 
+          margin-left: 0.05rem;
43 
+          font-size: 0.13rem;
44 
+          line-height: 0.22rem;
45 
+          &.active {
46 
+            color: #fff;
47 
+            background: #ff5100;
48 
+            border-color: #ff5100;
49 
+          }
50 
+        }
51 
+      }
52 
+    }
53 
+    > a {
54 
+      font-size: 0.1rem;
55 
+      color: #ff5100;
56 
+      line-height: 0.2rem;
57 
+      border: 0.01rem solid #999;
58 
+      margin-left: 0.05rem;
59 
+      position: relative;
60 
+      overflow: hidden;
61 
+      padding: 0 0.02rem;
62 
+      padding-top: 0.04rem;
63 
+      margin-right: 0.2rem;
64 
+    }
65 
+  }
66 
+}

+ 76
- 37
src/components/index/ZuQiuGuoGuanHunHeTouZhu/index.vue ファイルの表示 

@@ -1,7 +1,7 @@
1 1 
 <template>
2 2 
   <div class="components ZuQiuGuoGuanHunHeTouZhu">
3 3 
     <ul>
4 
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`ft-wdl`] !== undefined && item.playOdds[`ft-wdls`] !== undefined">
4 
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`ft-wdl`] !== undefined && item.playOdds[`ft-wdls`] !== undefined">
5 5 
         <div class="Title flex-h">
6 6 
           <div class="flex-item">
7 7 
             <div>
 
@@ -10,25 +10,8 @@
10 10 
           </div>
11 11 
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
12 12 
         </div>
13 
-        <div class="Detail flex-h">
14 
-          <span>{{item.matchId}}</span>
15 
-          <div class="flex-item flex-h">
16 
-            <div class="flex-item">
17 
-              <div class="flex-h">
18 
-                <span>0</span>
19 
-                <a class="flex-item">胜{{item.playOdds[`ft-wdl`][0].odds}}</a>
20 
-                <a class="flex-item">平{{item.playOdds[`ft-wdl`][1].odds}}</a>
21 
-                <a class="flex-item">负{{item.playOdds[`ft-wdl`][2].odds}}</a>
22 
-              </div>
23 
-              <div class="flex-h">
24 
-                <span>{{item.spreadPoints > 0 ? `+${item.spreadPoints}` : item.spreadPoints}}</span>
25 
-                <a class="flex-item">胜{{item.playOdds[`ft-wdls`][0].odds}}</a>
26 
-                <a class="flex-item">平{{item.playOdds[`ft-wdls`][1].odds}}</a>
27 
-                <a class="flex-item">负{{item.playOdds[`ft-wdls`][2].odds}}</a>
28 
-              </div>
29 
-            </div>
30 
-            <a @click="CurrentTarget = item; ShowMore = true">更多<br />选项</a>
31 
-          </div>
13 
+        <div class="Detail">
14 
+          <ZqgghhtzShengPingFu :Id="item.matchId" :Index="index" :SpreadPoints="item.spreadPoints" :WdlData="item.playOdds['ft-wdl']" :WdlsData="item.playOdds['ft-wdls']" @SelectItem="SelectItem" @ShowMore="ToShowMore"></ZqgghhtzShengPingFu>
32 15 
         </div>
33 16 
       </li>
34 17 
     </ul>
 
@@ -39,7 +22,7 @@
39 22 
         <div>
40 23 
           <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
41 24 
           <ul>
42 
-            <li>
25 
+            <!-- <li>
43 26 
               <span>胜平负/让球</span>
44 27 
               <table>
45 28 
                 <tr v-if="CurrentTarget.playOdds[`ft-wdl`] !== undefined">
 
@@ -57,28 +40,29 @@
57 40 
                   </td>
58 41 
                 </tr>
59 42 
               </table>
60 
-            </li>
43 
+            </li> -->
61 44
62 45 
             <li v-if="CurrentTarget.playOdds[`ft-score`] !== undefined">
63 
-              <span><em>单</em>比分</span>
46 
+              <ZqgghhtzBiFen :Id="CurrentTarget.matchId" :Index="CurrentIndex" :ScoreData="CurrentTarget.playOdds['ft-score']" @SelectItem="SelectItem"></ZqgghhtzBiFen>
47 
+              <!-- <span><em>单</em>比分</span>
64 48 
               <table>
65 49 
                 <tr>
66 50 
                   <td rowspan="3">
67 51 
                     <span>主胜</span>
68 52 
                   </td>
69 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(0, 5)" :key="index">
53 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(0, 5)" :key="index" :data="`${item.Active}`" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
70 54 
                     <span>{{item.name}}</span>
71 55 
                     <span>{{item.odds}}</span>
72 56 
                   </td>
73 57 
                 </tr>
74 58 
                 <tr>
75 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(5, 10)" :key="index">
59 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(5, 10)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
76 60 
                     <span>{{item.name}}</span>
77 61 
                     <span>{{item.odds}}</span>
78 62 
                   </td>
79 63 
                 </tr>
80 64 
                 <tr>
81 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index">
65 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
82 66 
                     <span>{{item.name}}</span>
83 67 
                     <span>{{item.odds}}</span>
84 68 
                   </td>
 
@@ -87,7 +71,7 @@
87 71 
                   <td>
88 72 
                     <span>平</span>
89 73 
                   </td>
90 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(13, 18)" :key="index">
74 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(13, 18)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
91 75 
                     <span>{{item.name}}</span>
92 76 
                     <span>{{item.odds}}</span>
93 77 
                   </td>
 
@@ -96,24 +80,24 @@
96 80 
                   <td rowspan="3">
97 81 
                     <span>主负</span>
98 82 
                   </td>
99 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(18, 23)" :key="index">
83 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(18, 23)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
100 84 
                     <span>{{item.name}}</span>
101 85 
                     <span>{{item.odds}}</span>
102 86 
                   </td>
103 87 
                 </tr>
104 88 
                 <tr>
105 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(23, 28)" :key="index">
89 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(23, 28)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
106 90 
                     <span>{{item.name}}</span>
107 91 
                     <span>{{item.odds}}</span>
108 92 
                   </td>
109 93 
                 </tr>
110 94 
                 <tr>
111 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index">
95 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
112 96 
                     <span>{{item.name}}</span>
113 97 
                     <span>{{item.odds}}</span>
114 98 
                   </td>
115 99 
                 </tr>
116 
-              </table>
100 
+              </table> -->
117 101 
             </li>
118 102
119 103 
             <li v-if="CurrentTarget.playOdds[`ft-points`] !== undefined">
 
@@ -123,13 +107,13 @@
123 107 
                   <td rowspan="2">
124 108 
                     <span>进球数</span>
125 109 
                   </td>
126 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(0, 4)" :key="index">
110 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(0, 4)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-points')">
127 111 
                     <span>{{item.name}}</span>
128 112 
                     <span>{{item.odds}}</span>
129 113 
                   </td>
130 114 
                 </tr>
131 115 
                 <tr>
132 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(4, 8)" :key="index">
116 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(4, 8)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-points')">
133 117 
                     <span>{{item.name}}</span>
134 118 
                     <span>{{item.odds}}</span>
135 119 
                   </td>
 
@@ -144,19 +128,19 @@
144 128 
                   <td rowspan="3">
145 129 
                     <span>半全场</span>
146 130 
                   </td>
147 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(0, 3)" :key="index">
131 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(0, 3)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
148 132 
                     <span>{{item.name}}</span>
149 133 
                     <span>{{item.odds}}</span>
150 134 
                   </td>
151 135 
                 </tr>
152 136 
                 <tr>
153 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(3, 6)" :key="index">
137 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(3, 6)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
154 138 
                     <span>{{item.name}}</span>
155 139 
                     <span>{{item.odds}}</span>
156 140 
                   </td>
157 141 
                 </tr>
158 142 
                 <tr>
159 
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(6, 9)" :key="index">
143 
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(6, 9)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
160 144 
                     <span>{{item.name}}</span>
161 145 
                     <span>{{item.odds}}</span>
162 146 
                   </td>
 
@@ -179,6 +163,8 @@
179 163 
 /*
180 164 
   页面名称：足球-过关-混合投注
181 165 
 */
166 
+import ZqgghhtzShengPingFu from '../ZqgghhtzShengPingFu'
167 
+import ZqgghhtzBiFen from '../ZqgghhtzBiFen'
182 168 
 export default {
183 169 
   name: 'ZuQiuGuoGuanHunHeTouZhu',
184 170 
   props: {
 
@@ -188,13 +174,18 @@ export default {
188 174 
   },
189 175 
   data () {
190 176 
     return {
177 
+      PageData: [...this.Data],
191 178 
       ShowMore: false,
192 
-      CurrentTarget: null
179 
+      CurrentTarget: null,
180 
+      CurrentIndex: null,
181 
+      ResList: []
193 182 
     }
194 183 
   },
195 184 
   computed: {
196 185 
   },
197 186 
   components: {
187 
+    ZqgghhtzShengPingFu,
188 
+    ZqgghhtzBiFen
198 189 
   },
199 190 
   created () {
200 191 
   },
 
@@ -203,6 +194,54 @@ export default {
203 194 
     })
204 195 
   },
205 196 
   methods: {
197 
+    ToShowMore (e) { // 显示更多
198 
+      this.CurrentIndex = e
199 
+      this.CurrentTarget = { ...this.PageData[e] }
200 
+      for (let key in this.CurrentTarget.playOdds) {
201 
+        this.CurrentTarget.playOdds[key].map((item) => {
202 
+          item.Active = false
203 
+        })
204 
+      }
205 
+      this.ShowMore = true
206 
+    },
207 
+    // SelectMoreItem (e) { // 更多选项-选择投注
208 
+    //   item.Active = !item.Active
209 
+    //   this.PageData[this.CurrentIndex].playOdds[key][index].Active = item.Active
210 
+    //   this.TriggerRes(this.CurrentIndex, index, key, item.Active, item, this.CurrentTarget.matchId)
211 
+    // },
212 
+    SelectItem (e) { // 选择投注
213 
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
214 
+    },
215 
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
216 
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
217 
+      if (value) { // 新增投注
218 
+        let Bool = false
219 
+        this.ResList.map((item) => {
220 
+          if (item.id === id) {
221 
+            Bool = true
222 
+            item.list.push({ ...target })
223 
+            return false
224 
+          }
225 
+        })
226 
+        if (!Bool) {
227 
+          this.ResList.push({ id: id, list: [] })
228 
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
229 
+        }
230 
+      } else { // 删除投注
231 
+        this.ResList.map((item, index) => {
232 
+          item.list.map((subItem, subIndex) => {
233 
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
234 
+              item.list.splice(subIndex, 1)
235 
+              if (!item.list.length) {
236 
+                this.ResList.splice(index, 1)
237 
+              }
238 
+              return false
239 
+            }
240 
+          })
241 
+        })
242 
+      }
243 
+      console.log(this.ResList)
244 
+    }
206 245 
   }
207 246 
 }
208 247 
 </script>

+ 44
- 107
src/components/index/ZuQiuGuoGuanHunHeTouZhu/page.scss ファイルの表示 

@@ -41,70 +41,7 @@
41 41 
         }
42 42 
       }
43 43 
       > .Detail {
44 
-        align-items: center;
45 
-        margin-top: 0.05rem;
46 
-        > span {
47 
-          font-size: 0.1rem;
48 
-          color: #999;
49 
-          margin-right: 0.4rem;
50 
-        }
51 
-        > div.flex-item {
52 
-          > div.flex-item {
53 
-            position: relative;
54 
-            overflow: hidden;
55 
-            > div.flex-h {
56 
-              margin-top: 0.05rem;
57 
-              align-items: center;
58 
-              &:first-child {
59 
-                margin-top: 0;
60 
-              }
61 
-              > span {
62 
-                font-size: 0.1rem;
63 
-                width: 0.16rem;
64 
-                line-height: 0.16rem;
65 
-                text-align: center;
66 
-                border: 0.01rem solid #999;
67 
-                color: #999;
68 
-                border-radius: 100%;
69 
-                margin-right: 0.1rem;
70 
-                &.Yellow {
71 
-                  color: #fff;
72 
-                  background: #ff5100;
73 
-                  border-color: #ff5100;
74 
-                }
75 
-                &.Blue {
76 
-                  color: #fff;
77 
-                  background: #3f63e5;
78 
-                  border-color: #3f63e5;
79 
-                }
80 
-              }
81 
-              > a {
82 
-                text-align: center;
83 
-                border: 0.01rem solid #999;
84 
-                margin-left: 0.05rem;
85 
-                font-size: 0.13rem;
86 
-                line-height: 0.22rem;
87 
-                &.active {
88 
-                  color: #fff;
89 
-                  background: #ff5100;
90 
-                  border-color: #ff5100;
91 
-                }
92 
-              }
93 
-            }
94 
-          }
95 
-          > a {
96 
-            font-size: 0.1rem;
97 
-            color: #ff5100;
98 
-            line-height: 0.2rem;
99 
-            border: 0.01rem solid #999;
100 
-            margin-left: 0.05rem;
101 
-            position: relative;
102 
-            overflow: hidden;
103 
-            padding: 0 0.02rem;
104 
-            padding-top: 0.04rem;
105 
-            margin-right: 0.2rem;
106 
-          }
107 
-        }
44 
+        position: relative;
108 45 
       }
109 46 
     }
110 47 
   }
 
@@ -139,49 +76,49 @@
139 76 
           > li {
140 77 
             margin-top: 0.1rem;
141 78 
             padding: 0 0.15rem;
142 
-            > span {
143 
-              font-size: 0.12rem;
144 
-              line-height: 0.2rem;
145 
-              color: #999;
146 
-              display: block;
147 
-              > em {
148 
-                font-size: 0.12rem;
149 
-                width: 0.16rem;
150 
-                line-height: 0.16rem;
151 
-                text-align: center;
152 
-                background: #ff5100;
153 
-                color: #fff;
154 
-                margin-right: 0.05rem;
155 
-                display: inline-block;
156 
-              }
157 
-            }
158 
-            > table {
159 
-              width: 100%;
160 
-              box-sizing: border-box;
161 
-              margin-top: 0.05rem;
162 
-              border: 0.01rem solid #f7f7f7;
163 
-              > tr {
164 
-                > td {
165 
-                  border: 0.01rem solid #f7f7f7;
166 
-                  padding: 0.05rem 0;
167 
-                  &.active {
168 
-                    background: #ff5100;
169 
-                    > span {
170 
-                      color: #fff;
171 
-                    }
172 
-                  }
173 
-                  > span {
174 
-                    display: block;
175 
-                    text-align: center;
176 
-                    font-size: 0.12rem;
177 
-                    line-height: 0.16rem;
178 
-                    white-space: nowrap;
179 
-                    overflow: hidden;
180 
-                    text-overflow: ellipsis;
181 
-                  }
182 
-                }
183 
-              }
184 
-            }
79 
+            // > span {
80 
+            //   font-size: 0.12rem;
81 
+            //   line-height: 0.2rem;
82 
+            //   color: #999;
83 
+            //   display: block;
84 
+            //   > em {
85 
+            //     font-size: 0.12rem;
86 
+            //     width: 0.16rem;
87 
+            //     line-height: 0.16rem;
88 
+            //     text-align: center;
89 
+            //     background: #ff5100;
90 
+            //     color: #fff;
91 
+            //     margin-right: 0.05rem;
92 
+            //     display: inline-block;
93 
+            //   }
94 
+            // }
95 
+            // > table {
96 
+            //   width: 100%;
97 
+            //   box-sizing: border-box;
98 
+            //   margin-top: 0.05rem;
99 
+            //   border: 0.01rem solid #f7f7f7;
100 
+            //   > tr {
101 
+            //     > td {
102 
+            //       border: 0.01rem solid #f7f7f7;
103 
+            //       padding: 0.05rem 0;
104 
+            //       &.active {
105 
+            //         background: #ff5100;
106 
+            //         > span {
107 
+            //           color: #fff;
108 
+            //         }
109 
+            //       }
110 
+            //       > span {
111 
+            //         display: block;
112 
+            //         text-align: center;
113 
+            //         font-size: 0.12rem;
114 
+            //         line-height: 0.16rem;
115 
+            //         white-space: nowrap;
116 
+            //         overflow: hidden;
117 
+            //         text-overflow: ellipsis;
118 
+            //       }
119 
+            //     }
120 
+            //   }
121 
+            // }
185 122 
           }
186 123 
         }
187 124 
         > div {