静态页面

src/components/index/LanQiuDanGuanDaXiaoFen/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="components LanQiuDanGuanDaXiaoFen">
+
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-score`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-score`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuDanGuanDaXiaoFen',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuDanGuanDaXiaoFen/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuDanGuanDaXiaoFen {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuDanGuanRangFenShengFu/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="components LanQiuDanGuanRangFenShengFu">
+
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wls`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wls`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuDanGuanRangFenShengFu',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuDanGuanRangFenShengFu/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuDanGuanRangFenShengFu {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuDanGuanShengFenCha/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="components LanQiuGuoGuanShengFenCha">
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds['bst-points'] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.awayTeamId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item">
+              <div>
+                <a @click="CurrentTarget = item; ShowMore = true">点击选择投注选项</a>
+                <span>2:1</span>
+                <span>2:1</span>
+                <span>2:1</span>
+                <span>2:1</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <!-- 选项 -->
+    <div class="MoreTab" v-if="ShowMore && CurrentTarget !== null">
+      <div>
+        <div>
+          <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
+          <div class="Content">
+            <div>
+              <a v-for="(item, index) in CurrentTarget.playOdds['bst-points']" :key="index">
+                <span>{{item.name}}</span>
+                <span>{{item.odds}}</span>
+              </a>
+              <a><span>全选</span></a>
+              <a><span>清除</span></a>
+            </div>
+          </div>
+          <div class="flex-h">
+            <a class="flex-item" @click="ShowMore = false; NavActiveIndex = 0;">取消</a>
+            <a class="flex-item">确认</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuGuoGuanShengFenCha',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      CurrentTarget: null,
+      ShowMore: false,
+      NavActiveIndex: 0
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuDanGuanShengFenCha/page.scss

@@ -0,0 +1,193 @@
+.components.LanQiuGuoGuanShengFenCha {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        align-items: center;
+        margin-top: 0.1rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        > div.flex-item {
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > div {
+              font-size: 0;
+              text-align: center;
+              > * {
+                display: inline-block;
+                vertical-align: middle;
+                margin-left: 0.1rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+              }
+              > a {
+                font-size: 0.12rem;
+                line-height: 0.2rem;
+                padding: 0 0.1rem;
+                border: 0.01rem solid #ccc;
+              }
+              > span {
+                font-size: 0.12rem;
+                color: #ff5100;
+                line-height: 0.22rem;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreTab {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > nav {
+          align-items: center;
+          border-bottom: 0.01rem solid #f7f7f7;
+          > a {
+            text-align: center;
+            font-size: 0;
+            &.active {
+              > span {
+                color: #ff5100;
+                &::after {
+                  content: "";
+                  width: 100%;
+                  display: block;
+                  height: 0.02rem;
+                  background: #ff5100;
+                  position: absolute;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  -webkit-transform: translateX(-50%);
+                  bottom: 0;
+                }
+              }
+            }
+            > span {
+              display: inline-block;
+              font-size: 0.12rem;
+              line-height: 0.3rem;
+              position: relative;
+              color: #333;
+              min-width: 0.3rem;
+            }
+          }
+        }
+        > .Content {
+          padding: 0.15rem;
+          position: relative;
+          overflow: hidden;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            > a {
+              display: inline-block;
+              width: 0.7rem;
+              border: 0.01rem solid #ccc;
+              margin-top: 0.05rem;
+              margin-left: 0.05rem;
+              padding: 0.05rem 0;
+              > span {
+                display: block;
+                font-size: 0.12rem;
+                text-align: center;
+                line-height: 0.16rem;
+              }
+            }
+          }
+        }
+        > div.flex-h {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuDanGuanShengFu/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="components LanQiuDanGuanShengFu">
+
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wl`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuDanGuanShengFu',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuDanGuanShengFu/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuDanGuanShengFu {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuGuoGuanDaXiaoFen/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="components LanQiuGuoGuanDaXiaoFen">
+
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-score`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-score`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuGuoGuanDaXiaoFen',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuGuoGuanDaXiaoFen/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuGuoGuanDaXiaoFen {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuGuoGuanHunHeTouZhu/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="components LanQiuGuoGuanHunHeTouZhu">
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined && item.playOdds[`bst-wls`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wl`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+            <a @click="CurrentTarget = item; CalcShengFu(); ShowMore = true">更多<br />选项</a>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <!-- 更多选项 -->
+    <div class="MoreLayer" v-if="ShowMore">
+      <div>
+        <div>
+          <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
+          <ul>
+            <li>
+              <span>胜负/让分胜负</span>
+              <table>
+                <tr v-if="CurrentTarget.playOdds[`bst-wl`] !== undefined">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`bst-wl`]" :key="index">
+                    <span>{{item.name}}</span>
+                    <span>{{item.odds}}</span>
+                  </td>
+                </tr>
+              </table>
+            </li>
+
+            <li v-if="CurrentTarget.playOdds[`bst-score`] !== undefined">
+              <span><em>单</em>大小分</span>
+              <table>
+                <tr>
+                  <td>
+                    <span>大小</span>
+                  </td>
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`bst-score`]" :key="index">
+                    <span>{{item.name}}</span>
+                    <span>{{item.odds}}</span>
+                  </td>
+                </tr>
+              </table>
+            </li>
+
+            <li v-if="CurrentTarget.playOdds[`bst-points`] !== undefined">
+              <span><em>单</em>胜分差</span>
+              <table>
+                <tr v-for="(item, index) in ShengArr" :key="index">
+                  <td v-if="index === 0" :rowspan="ShengArr.length">
+                    <span>主胜</span>
+                  </td>
+                  <td v-for="(subItem, subIndex) in item" :key="`Zhu-${subIndex}`">
+                    <span>{{subItem.name}}</span>
+                    <span>{{subItem.odds}}</span>
+                  </td>
+                </tr>
+                <tr v-for="(item, index) in FuArr" :key="index">
+                  <td v-if="index === 0" :rowspan="FuArr.length">
+                    <span>客胜</span>
+                  </td>
+                  <td v-for="(subItem, subIndex) in item" :key="`Ke-${subIndex}`">
+                    <span>{{subItem.name}}</span>
+                    <span>{{subItem.odds}}</span>
+                  </td>
+                </tr>
+              </table>
+            </li>
+
+          </ul>
+          <div class="flex-h">
+            <a class="flex-item" @click="ShowMore = false">取消</a>
+            <a class="flex-item">确认</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuGuoGuanHunHeTouZhu',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      ShengNum: 0,
+      ShengArr: [],
+      FuArr: [],
+      ShowMore: false,
+      CurrentTarget: null
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.CalcShengFu()
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    CalcShengFu () { // 计算胜负数据
+      if (this.CurrentTarget !== null) {
+        let ShengArr = []
+        let FuArr = []
+        this.CurrentTarget.playOdds['bst-points'].map((item) => {
+          if (item.name.indexOf('胜') > -1) {
+            ShengArr.push(item)
+          } else {
+            FuArr.push(item)
+          }
+        })
+        this.ShengArr = this.Return3Arr(ShengArr)
+        this.FuArr = this.Return3Arr(FuArr)
+      }
+    },
+    Return3Arr (arr) { // 返回3个一组数组
+      let aArr = []
+      for (let n = 0; n < Math.ceil(arr.length / 3); n++) {
+        aArr.push([])
+      }
+      arr.map((item, index) => {
+        aArr[Math.floor(index / 3)].push(item)
+      })
+      return aArr || []
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuGuoGuanHunHeTouZhu/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuGuoGuanHunHeTouZhu {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuGuoGuanRangFenShengFu/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="components LanQiuGuoGuanRangFenShengFu">
+
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wls`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wls`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuGuoGuanRangFenShengFu',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuGuoGuanRangFenShengFu/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuGuoGuanRangFenShengFu {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuGuoGuanShengFenCha/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="components LanQiuGuoGuanShengFenCha">
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds['bst-points'] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.awayTeamId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item">
+              <div>
+                <a @click="CurrentTarget = item; ShowMore = true">点击选择投注选项</a>
+                <span>2:1</span>
+                <span>2:1</span>
+                <span>2:1</span>
+                <span>2:1</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <!-- 选项 -->
+    <div class="MoreTab" v-if="ShowMore && CurrentTarget !== null">
+      <div>
+        <div>
+          <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
+          <div class="Content">
+            <div>
+              <a v-for="(item, index) in CurrentTarget.playOdds['bst-points']" :key="index">
+                <span>{{item.name}}</span>
+                <span>{{item.odds}}</span>
+              </a>
+              <a><span>全选</span></a>
+              <a><span>清除</span></a>
+            </div>
+          </div>
+          <div class="flex-h">
+            <a class="flex-item" @click="ShowMore = false; NavActiveIndex = 0;">取消</a>
+            <a class="flex-item">确认</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuGuoGuanShengFenCha',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      CurrentTarget: null,
+      ShowMore: false,
+      NavActiveIndex: 0
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuGuoGuanShengFenCha/page.scss

@@ -0,0 +1,193 @@
+.components.LanQiuGuoGuanShengFenCha {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        align-items: center;
+        margin-top: 0.1rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        > div.flex-item {
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > div {
+              font-size: 0;
+              text-align: center;
+              > * {
+                display: inline-block;
+                vertical-align: middle;
+                margin-left: 0.1rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+              }
+              > a {
+                font-size: 0.12rem;
+                line-height: 0.2rem;
+                padding: 0 0.1rem;
+                border: 0.01rem solid #ccc;
+              }
+              > span {
+                font-size: 0.12rem;
+                color: #ff5100;
+                line-height: 0.22rem;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreTab {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > nav {
+          align-items: center;
+          border-bottom: 0.01rem solid #f7f7f7;
+          > a {
+            text-align: center;
+            font-size: 0;
+            &.active {
+              > span {
+                color: #ff5100;
+                &::after {
+                  content: "";
+                  width: 100%;
+                  display: block;
+                  height: 0.02rem;
+                  background: #ff5100;
+                  position: absolute;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  -webkit-transform: translateX(-50%);
+                  bottom: 0;
+                }
+              }
+            }
+            > span {
+              display: inline-block;
+              font-size: 0.12rem;
+              line-height: 0.3rem;
+              position: relative;
+              color: #333;
+              min-width: 0.3rem;
+            }
+          }
+        }
+        > .Content {
+          padding: 0.15rem;
+          position: relative;
+          overflow: hidden;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            > a {
+              display: inline-block;
+              width: 0.7rem;
+              border: 0.01rem solid #ccc;
+              margin-top: 0.05rem;
+              margin-left: 0.05rem;
+              padding: 0.05rem 0;
+              > span {
+                display: block;
+                font-size: 0.12rem;
+                text-align: center;
+                line-height: 0.16rem;
+              }
+            }
+          }
+        }
+        > div.flex-h {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/LanQiuGuoGuanShengFu/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="components LanQiuGuoGuanShengFu">
+
+    <ul>
+      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined">
+        <div class="Title flex-h">
+          <div class="flex-item">
+            <div>
+              <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            </div>
+          </div>
+          <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
+        </div>
+        <div class="Detail flex-h">
+          <span>{{item.matchId}}</span>
+          <div class="flex-item flex-h">
+            <div class="flex-item flex-h">
+              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wl`]" :key="subIndex">
+                <span>{{subItem.name}}</span>
+                <span>{{subItem.odds}}</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：足球-过关-混合投注
+*/
+export default {
+  name: 'LanQiuGuoGuanShengFu',
+  props: {
+    Data: {
+      default: []
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/LanQiuGuoGuanShengFu/page.scss

@@ -0,0 +1,176 @@
+.components.LanQiuGuoGuanShengFu {
+  padding: 0 0.15rem;
+  position: relative;
+  overflow: hidden;
+  > ul {
+    > li {
+      border-top: 0.01rem solid #f7f7f7;
+      padding: 0.15rem 0;
+      &:first-child {
+        border-top: none;
+      }
+      > .Title {
+        align-items: center;
+        > div {
+          position: relative;
+          overflow: hidden;
+          margin-left: 0.2rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              font-size: 0.12rem;
+              color: #333;
+              line-height: 0.2rem;
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-left: 0.1rem;
+          > em {
+            font-size: 0.1rem;
+            color: #3f63e5;
+          }
+        }
+      }
+      > .Detail {
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.1rem;
+          color: #999;
+          margin-right: 0.4rem;
+        }
+        align-items: center;
+        > div.flex-item {
+          align-items: center;
+          > div.flex-item {
+            position: relative;
+            overflow: hidden;
+            > a {
+              border: 0.01rem solid #999;
+              box-sizing: border-box;
+              margin-right: 0.05rem;
+              > span {
+                display: block;
+                font-size: 0.13rem;
+                line-height: 0.22rem;
+                text-align: center;
+              }
+            }
+          }
+          > a {
+            font-size: 0.1rem;
+            color: #ff5100;
+            line-height: 0.2rem;
+            border: 0.01rem solid #999;
+            margin-left: 0.05rem;
+            position: relative;
+            overflow: hidden;
+            padding: 0 0.02rem;
+            padding-top: 0.04rem;
+            margin-right: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .MoreLayer {
+    width: 100%;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0.7rem;
+    bottom: 0.4rem;
+    background: rgba(0, 0, 0, 0.7);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      padding: 0.15rem;
+      position: relative;
+      overflow: hidden;
+      > div {
+        background: #fff;
+        border-radius: 0.06rem;
+        position: relative;
+        overflow: hidden;
+        > span {
+          display: block;
+          font-size: 0.14rem;
+          text-align: center;
+          line-height: 0.4rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+        }
+        > ul {
+          padding-bottom: 0.15rem;
+          > li {
+            margin-top: 0.1rem;
+            padding: 0 0.15rem;
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #999;
+              display: block;
+              > em {
+                font-size: 0.12rem;
+                width: 0.16rem;
+                line-height: 0.16rem;
+                text-align: center;
+                background: #ff5100;
+                color: #fff;
+                margin-right: 0.05rem;
+                display: inline-block;
+              }
+            }
+            > table {
+              width: 100%;
+              box-sizing: border-box;
+              margin-top: 0.05rem;
+              border: 0.01rem solid #f7f7f7;
+              > tr {
+                > td {
+                  border: 0.01rem solid #f7f7f7;
+                  padding: 0.05rem 0;
+                  &.active {
+                    background: #ff5100;
+                    > span {
+                      color: #fff;
+                    }
+                  }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    line-height: 0.16rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+          }
+        }
+        > div {
+          border-top: 0.01rem solid #f7f7f7;
+          margin-top: 0.1rem;
+          > a {
+            font-size: 0.14rem;
+            text-align: center;
+            line-height: 0.4rem;
+            border-left: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border-left: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/demo copy 4/index.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="components demo">
-    <router-link tag="a" :to="{name: 'test1'}">to test1</router-link>
-  </div>
-</template>
-
-<script>
-/*
-  页面名称：
-*/
-export default {
-  name: 'demo',
-  props: ['data'],
-  data () {
-    return {
-    }
-  },
-  computed: {
-  },
-  components: {
-  },
-  created () {
-    // console.log(this.$route)
-  },
-  mounted () {
-    this.$nextTick(() => {
-    })
-  },
-  methods: {
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-@import 'page.scss';
-</style>

src/components/index/demo copy 4/page.scss

@@ -1,2 +0,0 @@
-.components {
-}

src/pages/index/LanQiu/index.vue

@@ -39,38 +39,47 @@
 
             <!-- 过关-混合投注 -->
             <div class="GuoGuanHunHeTouZhu" v-if="SelectType === 1">
+              <LanQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanHunHeTouZhu>
             </div>
 
             <!-- 过关-胜负 -->
             <div class="GuoGuanShengFu" v-if="SelectType === 2">
+              <LanQiuGuoGuanShengFu v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanShengFu>
             </div>
 
             <!-- 过关-让分胜负 -->
             <div class="GuoGuanRangFenShengFu" v-if="SelectType === 3">
+              <LanQiuGuoGuanRangFenShengFu v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanRangFenShengFu>
             </div>
 
             <!-- 过关-胜分差 -->
             <div class="GuoGuanShengFenCha" v-if="SelectType === 4">
+              <LanQiuGuoGuanShengFenCha v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanShengFenCha>
             </div>
 
             <!-- 过关-大小分 -->
             <div class="GuoGuanDaXiaoFen" v-if="SelectType === 5">
+              <LanQiuGuoGuanDaXiaoFen v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanDaXiaoFen>
             </div>
 
             <!-- 单关-胜负 -->
             <div class="DanGuanShengFu" v-if="SelectType === 6">
+              <LanQiuDanGuanShengFu v-if="MixData.length" :Data="MixData"></LanQiuDanGuanShengFu>
             </div>
 
             <!-- 单关-让分胜负 -->
             <div class="DanGuanRangFenShengFu" v-if="SelectType === 7">
+              <LanQiuDanGuanRangFenShengFu v-if="MixData.length" :Data="MixData"></LanQiuDanGuanRangFenShengFu>
             </div>
 
             <!-- 单关-胜分差 -->
             <div class="DanGuanShengFenCha" v-if="SelectType === 8">
+              <LanQiuDanGuanShengFenCha v-if="MixData.length" :Data="MixData"></LanQiuDanGuanShengFenCha>
             </div>
 
             <!-- 单关-大小分 -->
             <div class="DanGuanDaXiaoFen" v-if="SelectType === 9">
+              <LanQiuDanGuanDaXiaoFen v-if="MixData.length" :Data="MixData"></LanQiuDanGuanDaXiaoFen>
             </div>
 
           </div>
@@ -90,15 +99,15 @@
 </template>
 
 <script>
-import ZuQiuGuoGuanHunHeTouZhu from '../../../components/index/ZuQiuGuoGuanHunHeTouZhu'
-import ZuQiuGuoGuanShengPingFu from '../../../components/index/ZuQiuGuoGuanShengPingFu'
-import ZuQiuGuoGuanBanQuanChang from '../../../components/index/ZuQiuGuoGuanBanQuanChang'
-import ZuQiuGuoGuanBiFen from '../../../components/index/ZuQiuGuoGuanBiFen'
-import ZuQiuGuoGuanJinQiuShu from '../../../components/index/ZuQiuGuoGuanJinQiuShu'
-import ZuQiuDanGuanShengPingFu from '../../../components/index/ZuQiuDanGuanShengPingFu'
-import ZuQiuDanGuanBanQuanChang from '../../../components/index/ZuQiuDanGuanBanQuanChang'
-import ZuQiuDanGuanBiFen from '../../../components/index/ZuQiuDanGuanBiFen'
-import ZuQiuDanGuanJinQiuShu from '../../../components/index/ZuQiuDanGuanJinQiuShu'
+import LanQiuGuoGuanHunHeTouZhu from '../../../components/index/LanQiuGuoGuanHunHeTouZhu'
+import LanQiuGuoGuanShengFu from '../../../components/index/LanQiuGuoGuanShengFu'
+import LanQiuGuoGuanRangFenShengFu from '../../../components/index/LanQiuGuoGuanRangFenShengFu'
+import LanQiuGuoGuanDaXiaoFen from '../../../components/index/LanQiuGuoGuanDaXiaoFen'
+import LanQiuDanGuanShengFu from '../../../components/index/LanQiuDanGuanShengFu'
+import LanQiuDanGuanRangFenShengFu from '../../../components/index/LanQiuDanGuanRangFenShengFu'
+import LanQiuDanGuanDaXiaoFen from '../../../components/index/LanQiuDanGuanDaXiaoFen'
+import LanQiuGuoGuanShengFenCha from '../../../components/index/LanQiuGuoGuanShengFenCha'
+import LanQiuDanGuanShengFenCha from '../../../components/index/LanQiuDanGuanShengFenCha'
 import { mapMutations, createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
@@ -127,7 +136,7 @@ export default {
         }
       },
       MixData: [], // 混合数据
-      SelectType: 5, // 选法，对应SelectTypeData中id值
+      SelectType: 2, // 选法，对应SelectTypeData中id值
       ShowSelectTypeNav: false // 显隐选法列表
     }
   },
@@ -136,15 +145,15 @@ export default {
     })
   },
   components: {
-    ZuQiuGuoGuanHunHeTouZhu,
-    ZuQiuGuoGuanShengPingFu,
-    ZuQiuGuoGuanBanQuanChang,
-    ZuQiuGuoGuanBiFen,
-    ZuQiuGuoGuanJinQiuShu,
-    ZuQiuDanGuanShengPingFu,
-    ZuQiuDanGuanBanQuanChang,
-    ZuQiuDanGuanBiFen,
-    ZuQiuDanGuanJinQiuShu
+    LanQiuGuoGuanHunHeTouZhu,
+    LanQiuGuoGuanShengFu,
+    LanQiuGuoGuanRangFenShengFu,
+    LanQiuGuoGuanDaXiaoFen,
+    LanQiuDanGuanShengFu,
+    LanQiuDanGuanRangFenShengFu,
+    LanQiuDanGuanDaXiaoFen,
+    LanQiuGuoGuanShengFenCha,
+    LanQiuDanGuanShengFenCha
   },
   created () {
     this.EditMainData([ // 配置页面框架数据