静态页面

index.html

@@ -5,7 +5,7 @@
   <meta charset='utf-8'>
   <meta content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' name='viewport'>
   <meta name="referrer" content="no-referrer">
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_2039339_2kpicynxaqf.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_2039339_qq1pjhtej2r.css">
   <title>牛彩</title>
   <script>
     let Width = document.documentElement.clientWidth / 375 * 100

src/components/index/Banner/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="components Banner">
-    <swiper :options="SwiperOptions" ref="MySwiper">
-      <swiper-slide v-for="(item, index) in Banner" :key="index">
-        <div class="SwiperItem">
-          <img :src="item.img" class="centerLabel cover" alt="">
-        </div>
-      </swiper-slide>
-    </swiper>
-  </div>
-</template>
-
-<script>
-/*
-  页面名称：
-*/
-import 'swiper/dist/css/swiper.css'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
-import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapIndexState } = createNamespacedHelpers('index')
-export default {
-  name: 'Banner',
-  props: {
-    List: { // 列表数据
-      default: () => {
-        return []
-      },
-      type: Array
-    }
-  },
-  data () {
-    return {
-      SwiperOptions: {
-        effect: 'coverflow',
-        autoplay: {
-          delay: 3000,
-          stopOnLastSlide: false,
-          disableOnInteraction: false
-        },
-        loop: true,
-        slidesPerView: 1.3,
-        centeredSlides: true,
-        coverflowEffect: {
-          rotate: 0,
-          stretch: -10,
-          depth: 0,
-          modifier: 2,
-          slideShadows: false
-        }
-      }
-    }
-  },
-  computed: {
-    ...mapIndexState({
-      Banner: x => x.Banner // banner列表
-    }),
-    MySwiper () {
-      return this.$refs.MySwiper.swiper
-    }
-  },
-  components: {
-    swiper,
-    swiperSlide
-  },
-  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/Banner/page.scss

@@ -1,20 +0,0 @@
-.components.Banner {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  > div {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    .SwiperItem {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      overflow: hidden;
-      background: #f7f7f7;
-      border-radius: 0.1rem;
-    }
-  }
-}

src/components/index/DingDanXiangQingDaLeTou/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="components DingDanXiangQingDaLeTou">
+
+    <div class="Top flex-h">
+      <div class="Icon">
+        <img src="" class="centerLabel contain" alt="">
+      </div>
+      <span class="flex-item">超级大乐透 <em>| 提供照片</em></span>
+      <span>第202076期</span>
+    </div>
+
+    <div class="Num">
+      <div class="Title flex-h">
+        <span class="flex-item">投注号码</span>
+        <span><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
+      </div>
+      <span>1 | 单式</span>
+      <ul>
+        <li>01</li>
+        <li>01</li>
+        <li>01</li>
+        <li>01</li>
+        <li>01</li>
+        <li class="active">01</li>
+        <li class="active">01</li>
+      </ul>
+    </div>
+
+    <div class="OrderInfo">
+      <div class="Title flex-h">
+        <span class="flex-item">订单信息</span>
+      </div>
+      <ul>
+        <li class="flex-h">
+          <span>用户手机：</span>
+          <div class="flex-item">
+            <div>
+              <span>136****9434</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>订单编号：</span>
+          <div class="flex-item">
+            <div>
+              <span>TE20200810000146179970</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>购买时间：</span>
+          <div class="flex-item">
+            <div>
+              <span>2020-08-10 15:10:10</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>接单人：</span>
+          <div class="flex-item">
+            <div>
+              <span>店主</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：订单详情-大乐透
+*/
+export default {
+  name: 'DingDanXiangQingDaLeTou',
+  props: ['data'],
+  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/DingDanXiangQingDaLeTou/page.scss

@@ -0,0 +1,128 @@
+.components {
+  position: relative;
+  overflow: hidden;
+  > div {
+    background: #fff;
+    padding: 0.1rem 0.15rem;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.1rem;
+    &:first-child {
+      margin-top: 0;
+    }
+    > .Title {
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > span {
+        &.flex-item {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+        &:last-child {
+          font-size: 0.12rem;
+          color: #333;
+          > em {
+            font-size: 0.12rem;
+            color: #d91e36;
+            font-weight: bold;
+          }
+        }
+        &:only-child {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+      }
+    }
+  }
+  > .Top {
+    align-items: center;
+    > .Icon {
+      width: 0.4rem;
+      height: 0.4rem;
+      position: relative;
+      overflow: hidden;
+      margin-right: 0.1rem;
+    }
+    > span {
+      &.flex-item {
+        font-size: 0.16rem;
+        color: #333;
+        font-weight: bold;
+        line-height: 0.2rem;
+        > em {
+          font-size: 0.12rem;
+          color: #666;
+          font-weight: normal;
+          display: inline-block;
+          line-height: 0.2rem;
+        }
+      }
+      &:last-child {
+        font-size: 0.12rem;
+        color: #9a9a9a;
+      }
+    }
+  }
+  > .Num {
+    padding-top: 0.05rem;
+    padding-bottom: 0.15rem;
+    > span {
+      display: block;
+      font-size: 0.12rem;
+      color: #333;
+      line-height: 0.4rem;
+    }
+    > ul {
+      font-size: 0;
+      white-space: nowrap;
+      > li {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 0.1rem;
+        width: 0.2rem;
+        line-height: 0.2rem;
+        border-radius: 100%;
+        text-align: center;
+        color: #fff;
+        background: #da1e36;
+        margin-right: 0.05rem;
+        &.active {
+          background: #1c40c5;
+        }
+      }
+    }
+  }
+  > .OrderInfo {
+    > ul {
+      margin-top: 0.15rem;
+      > li {
+        align-items: center;
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.12rem;
+          color: #666;
+          min-width: 0.6rem;
+          line-height: 0.2rem;
+        }
+        > div {
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              display: block;
+              white-space: nowrap;
+              font-size: 0.12rem;
+              color: #666;
+              line-height: 0.2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/DingDanXiangQingLanQiu/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="components DingDanXiangQingLanQiu">
+
+    <div class="Top flex-h">
+      <div class="Icon">
+        <img src="" class="centerLabel contain" alt="">
+      </div>
+      <span class="flex-item">竞篮让球胜平负</span>
+    </div>
+
+    <div class="Status">
+      <ul class="flex-h">
+        <li class="flex-item">
+          <span>0</span>
+          <span>预计奖金(元)</span>
+        </li>
+        <li class="flex-item">
+          <span>0</span>
+          <span>投资金额(元)</span>
+        </li>
+        <li class="flex-item">
+          <span>已出票</span>
+          <span>订单状态</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="Num">
+      <div class="Title flex-h">
+        <span class="flex-item">投注号码</span>
+        <span><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
+      </div>
+      <ul>
+        <li v-for="(item, index) in 5" :key="index">
+          <div class="Time">
+            <span>周四</span>
+            <span>001</span>
+            <span>巴甲</span>
+            <span>22:00截止</span>
+          </div>
+          <div class="flex-h">
+            <div class="flex-item">
+              <div>
+                <span>累体育<em>(+1)</em> VS 桑托斯</span>
+              </div>
+            </div>
+            <span>彩民投注：让球主胜(1.380)</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="OrderInfo">
+      <div class="Title flex-h">
+        <span class="flex-item">订单信息</span>
+      </div>
+      <ul>
+        <li class="flex-h">
+          <span>用户手机：</span>
+          <div class="flex-item">
+            <div>
+              <span>136****9434</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>订单编号：</span>
+          <div class="flex-item">
+            <div>
+              <span>TE20200810000146179970</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>购买时间：</span>
+          <div class="flex-item">
+            <div>
+              <span>2020-08-10 15:10:10</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>接单人：</span>
+          <div class="flex-item">
+            <div>
+              <span>店主</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>佣金：</span>
+          <div class="flex-item">
+            <div>
+              <span>7%</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：订单详情-大乐透
+*/
+export default {
+  name: 'DingDanXiangQingLanQiu',
+  props: ['data'],
+  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/DingDanXiangQingLanQiu/page.scss

@@ -0,0 +1,202 @@
+.components {
+  position: relative;
+  overflow: hidden;
+  > div {
+    background: #fff;
+    padding: 0.1rem 0.15rem;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.1rem;
+    &:first-child {
+      margin-top: 0;
+    }
+    > .Title {
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > span {
+        &.flex-item {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+        &:last-child {
+          font-size: 0.12rem;
+          color: #333;
+          > em {
+            font-size: 0.12rem;
+            color: #d91e36;
+            font-weight: bold;
+          }
+        }
+        &:only-child {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+      }
+    }
+  }
+  > .Top {
+    align-items: center;
+    > .Icon {
+      width: 0.4rem;
+      height: 0.4rem;
+      position: relative;
+      overflow: hidden;
+      margin-right: 0.1rem;
+    }
+    > span {
+      &.flex-item {
+        font-size: 0.16rem;
+        color: #333;
+        font-weight: bold;
+        line-height: 0.2rem;
+        > em {
+          font-size: 0.12rem;
+          color: #666;
+          font-weight: normal;
+          display: inline-block;
+          line-height: 0.2rem;
+        }
+      }
+    }
+  }
+  > .Status {
+    padding: 0.15rem;
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    margin-top: 0;
+    padding-top: 0;
+    > ul {
+      border-top: 0.01rem solid #f7f7f7;
+      padding-top: 0.15rem;
+      > li {
+        position: relative;
+        overflow: hidden;
+        &::after {
+          content: "";
+          width: 0.01rem;
+          height: 60%;
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 20%;
+          background: #e8e8e8;
+        }
+        &:first-child {
+          &::after {
+            display: none;
+          }
+        }
+        &:last-child {
+          > span {
+            &:first-child {
+              color: #333;
+            }
+          }
+        }
+        > span {
+          display: block;
+          text-align: center;
+          font-size: 0.12rem;
+          color: #9a9a9a;
+          line-height: 0.2rem;
+          &:first-child {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #d91e36;
+            margin-bottom: 0.05rem;
+          }
+        }
+      }
+    }
+  }
+  > .Num {
+    padding-top: 0.05rem;
+    padding-bottom: 0.15rem;
+    > ul {
+      > li {
+        border-top: 0.01rem solid #f7f7f7;
+        padding: 0.15rem 0;
+        &:first-child {
+          border-top: none;
+        }
+        > .Time {
+          font-size: 0;
+          white-space: nowrap;
+          > span {
+            display: inline-block;
+            font-size: 0.12rem;
+            color: #666;
+            line-height: 0.2rem;
+            vertical-align: middle;
+            margin-left: 0.1rem;
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+        }
+        > .flex-h {
+          align-items: center;
+          margin-top: 0.1rem;
+          > .flex-item {
+            position: relative;
+            margin-right: 0.1rem;
+            > div {
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              > span {
+                display: block;
+                white-space: nowrap;
+                font-size: 0.14rem;
+                color: #333;
+                line-height: 0.2rem;
+                > em {
+                  color: #d91e36;
+                  font-size: 0.14rem;
+                }
+              }
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            line-height: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .OrderInfo {
+    > ul {
+      margin-top: 0.15rem;
+      > li {
+        align-items: center;
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.12rem;
+          color: #666;
+          min-width: 0.6rem;
+          line-height: 0.2rem;
+        }
+        > div {
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              display: block;
+              white-space: nowrap;
+              font-size: 0.12rem;
+              color: #666;
+              line-height: 0.2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/DingDanXiangQingShuangSeQiu/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="components DingDanXiangQingShuangSeQiu">
+
+    <div class="Top flex-h">
+      <div class="Icon">
+        <img src="" class="centerLabel contain" alt="">
+      </div>
+      <span class="flex-item">双色球 <em>| 提供照片</em></span>
+      <span>第202076期</span>
+    </div>
+
+    <div class="Num">
+      <div class="Title flex-h">
+        <span class="flex-item">投注号码</span>
+        <span><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
+      </div>
+      <span>1 | 单式</span>
+      <ul>
+        <li>01</li>
+        <li>01</li>
+        <li>01</li>
+        <li>01</li>
+        <li>01</li>
+        <li class="active">01</li>
+      </ul>
+    </div>
+
+    <div class="OrderInfo">
+      <div class="Title flex-h">
+        <span class="flex-item">订单信息</span>
+      </div>
+      <ul>
+        <li class="flex-h">
+          <span>用户手机：</span>
+          <div class="flex-item">
+            <div>
+              <span>136****9434</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>订单编号：</span>
+          <div class="flex-item">
+            <div>
+              <span>TE20200810000146179970</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>购买时间：</span>
+          <div class="flex-item">
+            <div>
+              <span>2020-08-10 15:10:10</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>接单人：</span>
+          <div class="flex-item">
+            <div>
+              <span>店主</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：订单详情-大乐透
+*/
+export default {
+  name: 'DingDanXiangQingShuangSeQiu',
+  props: ['data'],
+  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/DingDanXiangQingShuangSeQiu/page.scss

@@ -0,0 +1,128 @@
+.components {
+  position: relative;
+  overflow: hidden;
+  > div {
+    background: #fff;
+    padding: 0.1rem 0.15rem;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.1rem;
+    &:first-child {
+      margin-top: 0;
+    }
+    > .Title {
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > span {
+        &.flex-item {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+        &:last-child {
+          font-size: 0.12rem;
+          color: #333;
+          > em {
+            font-size: 0.12rem;
+            color: #d91e36;
+            font-weight: bold;
+          }
+        }
+        &:only-child {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+      }
+    }
+  }
+  > .Top {
+    align-items: center;
+    > .Icon {
+      width: 0.4rem;
+      height: 0.4rem;
+      position: relative;
+      overflow: hidden;
+      margin-right: 0.1rem;
+    }
+    > span {
+      &.flex-item {
+        font-size: 0.16rem;
+        color: #333;
+        font-weight: bold;
+        line-height: 0.2rem;
+        > em {
+          font-size: 0.12rem;
+          color: #666;
+          font-weight: normal;
+          display: inline-block;
+          line-height: 0.2rem;
+        }
+      }
+      &:last-child {
+        font-size: 0.12rem;
+        color: #9a9a9a;
+      }
+    }
+  }
+  > .Num {
+    padding-top: 0.05rem;
+    padding-bottom: 0.15rem;
+    > span {
+      display: block;
+      font-size: 0.12rem;
+      color: #333;
+      line-height: 0.4rem;
+    }
+    > ul {
+      font-size: 0;
+      white-space: nowrap;
+      > li {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 0.1rem;
+        width: 0.2rem;
+        line-height: 0.2rem;
+        border-radius: 100%;
+        text-align: center;
+        color: #fff;
+        background: #da1e36;
+        margin-right: 0.05rem;
+        &.active {
+          background: #1c40c5;
+        }
+      }
+    }
+  }
+  > .OrderInfo {
+    > ul {
+      margin-top: 0.15rem;
+      > li {
+        align-items: center;
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.12rem;
+          color: #666;
+          min-width: 0.6rem;
+          line-height: 0.2rem;
+        }
+        > div {
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              display: block;
+              white-space: nowrap;
+              font-size: 0.12rem;
+              color: #666;
+              line-height: 0.2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/DingDanXiangQingZuQiu/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="components DingDanXiangQingZuQiu">
+
+    <div class="Top flex-h">
+      <div class="Icon">
+        <img src="" class="centerLabel contain" alt="">
+      </div>
+      <span class="flex-item">竞足让球胜平负</span>
+    </div>
+
+    <div class="Status">
+      <ul class="flex-h">
+        <li class="flex-item">
+          <span>0</span>
+          <span>预计奖金(元)</span>
+        </li>
+        <li class="flex-item">
+          <span>0</span>
+          <span>投资金额(元)</span>
+        </li>
+        <li class="flex-item">
+          <span>已出票</span>
+          <span>订单状态</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="Num">
+      <div class="Title flex-h">
+        <span class="flex-item">投注号码</span>
+        <span><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
+      </div>
+      <ul>
+        <li v-for="(item, index) in 5" :key="index">
+          <div class="Time">
+            <span>周四</span>
+            <span>001</span>
+            <span>巴甲</span>
+            <span>22:00截止</span>
+          </div>
+          <div class="flex-h">
+            <div class="flex-item">
+              <div>
+                <span>累体育<em>(+1)</em> VS 桑托斯</span>
+              </div>
+            </div>
+            <span>彩民投注：让球主胜(1.380)</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="OrderInfo">
+      <div class="Title flex-h">
+        <span class="flex-item">订单信息</span>
+      </div>
+      <ul>
+        <li class="flex-h">
+          <span>用户手机：</span>
+          <div class="flex-item">
+            <div>
+              <span>136****9434</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>订单编号：</span>
+          <div class="flex-item">
+            <div>
+              <span>TE20200810000146179970</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>购买时间：</span>
+          <div class="flex-item">
+            <div>
+              <span>2020-08-10 15:10:10</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>接单人：</span>
+          <div class="flex-item">
+            <div>
+              <span>店主</span>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>佣金：</span>
+          <div class="flex-item">
+            <div>
+              <span>7%</span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：订单详情-大乐透
+*/
+export default {
+  name: 'DingDanXiangQingZuQiu',
+  props: ['data'],
+  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/DingDanXiangQingZuQiu/page.scss

@@ -0,0 +1,202 @@
+.components {
+  position: relative;
+  overflow: hidden;
+  > div {
+    background: #fff;
+    padding: 0.1rem 0.15rem;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.1rem;
+    &:first-child {
+      margin-top: 0;
+    }
+    > .Title {
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > span {
+        &.flex-item {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+        &:last-child {
+          font-size: 0.12rem;
+          color: #333;
+          > em {
+            font-size: 0.12rem;
+            color: #d91e36;
+            font-weight: bold;
+          }
+        }
+        &:only-child {
+          font-size: 0.14rem;
+          color: #333;
+          line-height: 0.4rem;
+        }
+      }
+    }
+  }
+  > .Top {
+    align-items: center;
+    > .Icon {
+      width: 0.4rem;
+      height: 0.4rem;
+      position: relative;
+      overflow: hidden;
+      margin-right: 0.1rem;
+    }
+    > span {
+      &.flex-item {
+        font-size: 0.16rem;
+        color: #333;
+        font-weight: bold;
+        line-height: 0.2rem;
+        > em {
+          font-size: 0.12rem;
+          color: #666;
+          font-weight: normal;
+          display: inline-block;
+          line-height: 0.2rem;
+        }
+      }
+    }
+  }
+  > .Status {
+    padding: 0.15rem;
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    margin-top: 0;
+    padding-top: 0;
+    > ul {
+      border-top: 0.01rem solid #f7f7f7;
+      padding-top: 0.15rem;
+      > li {
+        position: relative;
+        overflow: hidden;
+        &::after {
+          content: "";
+          width: 0.01rem;
+          height: 60%;
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 20%;
+          background: #e8e8e8;
+        }
+        &:first-child {
+          &::after {
+            display: none;
+          }
+        }
+        &:last-child {
+          > span {
+            &:first-child {
+              color: #333;
+            }
+          }
+        }
+        > span {
+          display: block;
+          text-align: center;
+          font-size: 0.12rem;
+          color: #9a9a9a;
+          line-height: 0.2rem;
+          &:first-child {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #d91e36;
+            margin-bottom: 0.05rem;
+          }
+        }
+      }
+    }
+  }
+  > .Num {
+    padding-top: 0.05rem;
+    padding-bottom: 0.15rem;
+    > ul {
+      > li {
+        border-top: 0.01rem solid #f7f7f7;
+        padding: 0.15rem 0;
+        &:first-child {
+          border-top: none;
+        }
+        > .Time {
+          font-size: 0;
+          white-space: nowrap;
+          > span {
+            display: inline-block;
+            font-size: 0.12rem;
+            color: #666;
+            line-height: 0.2rem;
+            vertical-align: middle;
+            margin-left: 0.1rem;
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+        }
+        > .flex-h {
+          align-items: center;
+          margin-top: 0.1rem;
+          > .flex-item {
+            position: relative;
+            margin-right: 0.1rem;
+            > div {
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              > span {
+                display: block;
+                white-space: nowrap;
+                font-size: 0.14rem;
+                color: #333;
+                line-height: 0.2rem;
+                > em {
+                  color: #d91e36;
+                  font-size: 0.14rem;
+                }
+              }
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            line-height: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  > .OrderInfo {
+    > ul {
+      margin-top: 0.15rem;
+      > li {
+        align-items: center;
+        margin-top: 0.05rem;
+        > span {
+          font-size: 0.12rem;
+          color: #666;
+          min-width: 0.6rem;
+          line-height: 0.2rem;
+        }
+        > div {
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > span {
+              display: block;
+              white-space: nowrap;
+              font-size: 0.12rem;
+              color: #666;
+              line-height: 0.2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/index/ZuQiuGuoGuanBanQuanChang/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="components ZuQiuGuoGuanBanQuanChang">
-    <ul>
-      <li v-for="(item, index) in 5" :key="index">
-        <div class="Title flex-h">
-          <div class="flex-item">
-            <div>
-              <span>莫斯科火车头 VS 克拉斯诺达尔</span>
-            </div>
-          </div>
-          <span>瑞典超<em>21:58(截)</em></span>
-        </div>
-        <div class="Detail flex-h">
-          <span>001</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item">
-              <div class="flex-h">
-                <a class="flex-item">胜1.41</a>
-                <a class="flex-item">平1.41</a>
-                <a class="flex-item">负1.41</a>
-              </div>
-              <div class="flex-h">
-                <a class="flex-item">胜1.41</a>
-                <a class="flex-item">平1.41</a>
-                <a class="flex-item">负1.41</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-
-  </div>
-</template>
-
-<script>
-/*
-  页面名称：足球-过关-混合投注
-*/
-export default {
-  name: 'ZuQiuGuoGuanBanQuanChang',
-  props: ['data'],
-  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/ZuQiuGuoGuanBanQuanChang/page.scss

@@ -1,111 +0,0 @@
-.components.ZuQiuGuoGuanBanQuanChang {
-  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.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                &.active {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-              }
-            }
-          }
-          > 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;
-          }
-        }
-      }
-    }
-  }
-}

src/components/index/ZuQiuGuoGuanBiFen/index.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="components ZuQiuGuoGuanBiFen">
-    <ul>
-      <li v-for="(item, index) in 5" :key="index">
-        <div class="Title flex-h">
-          <div class="flex-item">
-            <div>
-              <span>莫斯科火车头 VS 克拉斯诺达尔</span>
-            </div>
-          </div>
-          <span>瑞典超<em>21:58(截)</em></span>
-        </div>
-        <div class="Detail flex-h">
-          <span>001</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item">
-              <div>
-                <a @click="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">
-      <div>
-        <div>
-          <span>莫斯科火车头 VS 克拉斯诺达尔</span>
-          <nav class="flex-h">
-            <a class="flex-item" :class="{'active': NavActiveIndex === 0}" @click="NavActiveIndex = 0"><span>主胜</span></a>
-            <a class="flex-item" :class="{'active': NavActiveIndex === 1}" @click="NavActiveIndex = 1"><span>平</span></a>
-            <a class="flex-item" :class="{'active': NavActiveIndex === 2}" @click="NavActiveIndex = 2"><span>负</span></a>
-          </nav>
-          <div class="Content">
-            <div v-show="NavActiveIndex === 0">
-              <a v-for="(item, index) in 20" :key="index">2:1</a>
-              <a>全选</a>
-              <a>清除</a>
-            </div>
-            <div v-show="NavActiveIndex === 1">
-              <a v-for="(item, index) in 20" :key="index">2:1</a>
-              <a>全选</a>
-              <a>清除</a>
-            </div>
-            <div v-show="NavActiveIndex === 2">
-              <a v-for="(item, index) in 20" :key="index">2:1</a>
-              <a>全选</a>
-              <a>清除</a>
-            </div>
-          </div>
-          <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: 'ZuQiuGuoGuanBiFen',
-  props: ['data'],
-  data () {
-    return {
-      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/ZuQiuGuoGuanBiFen/page.scss

@@ -1,189 +0,0 @@
-.components.ZuQiuGuoGuanBiFen {
-  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;
-              font-size: 0.12rem;
-              width: 0.7rem;
-              text-align: center;
-              border: 0.01rem solid #ccc;
-              margin-top: 0.05rem;
-              margin-left: 0.05rem;
-              line-height: 0.24rem;
-            }
-          }
-        }
-        > 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/ZuQiuGuoGuanHunHeTouZhu/index.vue

@@ -1,369 +0,0 @@
-<template>
-  <div class="components ZuQiuGuoGuanHunHeTouZhu">
-    <ul>
-      <li v-for="(item, index) in 5" :key="index">
-        <div class="Title flex-h">
-          <div class="flex-item">
-            <div>
-              <span>莫斯科火车头 VS 克拉斯诺达尔</span>
-            </div>
-          </div>
-          <span>瑞典超<em>21:58(截)</em></span>
-        </div>
-        <div class="Detail flex-h">
-          <span>001</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item">
-              <div class="flex-h">
-                <span>0</span>
-                <a class="flex-item">胜1.41</a>
-                <a class="flex-item">平1.41</a>
-                <a class="flex-item">负1.41</a>
-              </div>
-              <div class="flex-h">
-                <span>+1</span>
-                <a class="flex-item">胜1.41</a>
-                <a class="flex-item">平1.41</a>
-                <a class="flex-item">负1.41</a>
-              </div>
-            </div>
-            <a @click="ShowMore = true">更多<br />选项</a>
-          </div>
-        </div>
-      </li>
-    </ul>
-
-    <!-- 更多选项 -->
-    <div class="MoreLayer" v-if="ShowMore">
-      <div>
-        <div>
-          <span>莫斯科火车头 VS 克拉斯诺达尔</span>
-          <ul>
-            <li>
-              <span>胜平负/让球</span>
-              <table>
-                <tr>
-                  <td><span>0</span></td>
-                  <td>
-                    <span>胜</span>
-                    <span>2.65</span>
-                  </td>
-                  <td>
-                    <span>平</span>
-                    <span>3.68</span>
-                  </td>
-                  <td>
-                    <span>负</span>
-                    <span>2.06</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td><span>+1</span></td>
-                  <td>
-                    <span>胜</span>
-                    <span>1.56</span>
-                  </td>
-                  <td>
-                    <span>平</span>
-                    <span>4.10</span>
-                  </td>
-                  <td>
-                    <span>负</span>
-                    <span>3.95</span>
-                  </td>
-                </tr>
-              </table>
-            </li>
-
-            <li>
-              <span><em>单</em>比分</span>
-              <table>
-                <tr>
-                  <td rowspan="3">
-                    <span>主胜</span>
-                  </td>
-                  <td>
-                    <span>1:0</span>
-                    <span>13.00</span>
-                  </td>
-                  <td>
-                    <span>2:0</span>
-                    <span>17.00</span>
-                  </td>
-                  <td>
-                    <span>2:1</span>
-                    <span>8.75</span>
-                  </td>
-                  <td>
-                    <span>3:0</span>
-                    <span>30.00</span>
-                  </td>
-                  <td>
-                    <span>3:1</span>
-                    <span>19.00</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>3:2</span>
-                    <span>20.00</span>
-                  </td>
-                  <td>
-                    <span>4:0</span>
-                    <span>80.00</span>
-                  </td>
-                  <td>
-                    <span>4:1</span>
-                    <span>42.00</span>
-                  </td>
-                  <td>
-                    <span>4:2</span>
-                    <span>50.00</span>
-                  </td>
-                  <td>
-                    <span>5:0</span>
-                    <span>200.00</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>5:1</span>
-                    <span>125.00</span>
-                  </td>
-                  <td>
-                    <span>5:2</span>
-                    <span>150.00</span>
-                  </td>
-                  <td colspan="3">
-                    <span>胜其他</span>
-                    <span>42.00</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>平</span>
-                  </td>
-                  <td>
-                    <span>0:0</span>
-                    <span>20.00</span>
-                  </td>
-                  <td>
-                    <span>1:1</span>
-                    <span>7.25</span>
-                  </td>
-                  <td>
-                    <span>2:2</span>
-                    <span>10.50</span>
-                  </td>
-                  <td>
-                    <span>3:3</span>
-                    <span>30.00</span>
-                  </td>
-                  <td>
-                    <span>平其他</span>
-                    <span>120.0</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td rowspan="3">
-                    <span>主负</span>
-                  </td>
-                  <td>
-                    <span>0:1</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>0:2</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>0:3</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>0:4</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>0:5</span>
-                    <span>120.0</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>1:2</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>1:3</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>1:4</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>1:5</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>2:3</span>
-                    <span>120.0</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>2:4</span>
-                    <span>120.0</span>
-                  </td>
-                  <td>
-                    <span>2:5</span>
-                    <span>120.0</span>
-                  </td>
-                  <td colspan="3">
-                    <span>负其他</span>
-                    <span>120.0</span>
-                  </td>
-                </tr>
-              </table>
-            </li>
-
-            <li>
-              <span><em>单</em>进球数</span>
-              <table>
-                <tr>
-                  <td rowspan="2">
-                    <span>进球数</span>
-                  </td>
-                  <td>
-                    <span>0</span>
-                    <span>13.00</span>
-                  </td>
-                  <td>
-                    <span>1</span>
-                    <span>17.00</span>
-                  </td>
-                  <td>
-                    <span>2</span>
-                    <span>8.75</span>
-                  </td>
-                  <td>
-                    <span>3</span>
-                    <span>30.00</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>4</span>
-                    <span>20.00</span>
-                  </td>
-                  <td>
-                    <span>5</span>
-                    <span>80.00</span>
-                  </td>
-                  <td>
-                    <span>6</span>
-                    <span>42.00</span>
-                  </td>
-                  <td>
-                    <span>7+</span>
-                    <span>50.00</span>
-                  </td>
-                </tr>
-              </table>
-            </li>
-
-            <li>
-              <span><em>单</em>半全场</span>
-              <table>
-                <tr>
-                  <td rowspan="3">
-                    <span>半全场</span>
-                  </td>
-                  <td>
-                    <span>胜-胜</span>
-                    <span>13.00</span>
-                  </td>
-                  <td>
-                    <span>胜-平</span>
-                    <span>17.00</span>
-                  </td>
-                  <td>
-                    <span>胜-负</span>
-                    <span>8.75</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>平-胜</span>
-                    <span>20.00</span>
-                  </td>
-                  <td>
-                    <span>平-平</span>
-                    <span>80.00</span>
-                  </td>
-                  <td>
-                    <span>平-负</span>
-                    <span>42.00</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>负-胜</span>
-                    <span>20.00</span>
-                  </td>
-                  <td>
-                    <span>负-平</span>
-                    <span>80.00</span>
-                  </td>
-                  <td>
-                    <span>负-负</span>
-                    <span>42.00</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: 'ZuQiuGuoGuanHunHeTouZhu',
-  props: ['data'],
-  data () {
-    return {
-      ShowMore: false
-    }
-  },
-  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/ZuQiuGuoGuanHunHeTouZhu/page.scss

@@ -1,203 +0,0 @@
-.components.ZuQiuGuoGuanHunHeTouZhu {
-  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.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                &.active {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-              }
-            }
-          }
-          > 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/ZuQiuGuoGuanShengPingFu/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="components ZuQiuGuoGuanShengPingFu">
-    <ul>
-      <li v-for="(item, index) in 5" :key="index">
-        <div class="Title flex-h">
-          <div class="flex-item">
-            <div>
-              <span>莫斯科火车头 VS 克拉斯诺达尔</span>
-            </div>
-          </div>
-          <span>瑞典超<em>21:58(截)</em></span>
-        </div>
-        <div class="Detail flex-h">
-          <span>001</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item">
-              <div class="flex-h">
-                <a class="flex-item">胜1.41</a>
-                <a class="flex-item">平1.41</a>
-                <a class="flex-item">负1.41</a>
-              </div>
-              <div class="flex-h">
-                <a class="flex-item">胜1.41</a>
-                <a class="flex-item">平1.41</a>
-                <a class="flex-item">负1.41</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-
-  </div>
-</template>
-
-<script>
-/*
-  页面名称：足球-过关-混合投注
-*/
-export default {
-  name: 'ZuQiuGuoGuanShengPingFu',
-  props: ['data'],
-  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/ZuQiuGuoGuanShengPingFu/page.scss

@@ -1,111 +0,0 @@
-.components.ZuQiuGuoGuanShengPingFu {
-  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.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                &.active {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-              }
-            }
-          }
-          > 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;
-          }
-        }
-      }
-    }
-  }
-}

src/pages/CaiMinGuanLi/CaiMinLieBiao/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="Page flex-v">
+
+    <!-- 内容 -->
+    <div class="flex-item">
+      <div>
+        <div class="Content">
+          <scroller :on-refresh="Refresh">
+            <div class="Container">
+              <ul>
+                <li v-for="(item, index) in 15" :key="index" class="flex-h">
+                  <div class="Icon">
+                    <img src="" class="centerLabel cover" alt="">
+                  </div>
+                  <div class="flex-item">
+                    <div>
+                      <span>叭叭叭</span>
+                      <span>2天前，下单2元未出票</span>
+                    </div>
+                  </div>
+                  <span>2.00</span>
+                </li>
+              </ul>
+            </div>
+          </scroller>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+export default {
+  name: 'index',
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreText', value: '' },
+      { name: 'ShowMainHeaderMore', value: false },
+      { name: 'MainHeaderMoreClick', value: () => { } },
+      { name: 'MainTitleClick', value: () => { } },
+      { name: 'MainHeaderTextColor', value: '#fff' },
+      { name: 'ShowMainTitleIcon', value: false },
+      { name: 'ShowMainHeader', value: true },
+      { name: 'ShowMainTabBar', value: false },
+      { name: 'MainHeaderTitle', value: '全部彩民' },
+      { name: 'MainTabBarActiveId', value: null },
+      { name: 'ShowMainHeaderBack', value: true }
+    ])
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'EditMainData' // 配置页面框架数据
+    ]),
+    Refresh (done) { // 页面下拉刷新
+      window.setTimeout(() => {
+        done()
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/CaiMinGuanLi/CaiMinLieBiao/page.scss

@@ -0,0 +1,90 @@
+.Page {
+  background: #f2f2f2;
+  > a.flex-h {
+    align-items: center;
+    background: #fff;
+    padding: 0.1rem 0.15rem;
+    > i {
+      font-size: 0.2rem;
+      color: #999;
+      &:first-child {
+        width: 0.3rem;
+        line-height: 0.3rem;
+        text-align: center;
+        color: #fff;
+        background: #ff9c01;
+        border-radius: 0.02rem;
+      }
+    }
+    > span {
+      font-size: 0.15rem;
+      line-height: 0.3rem;
+      color: #333;
+      margin-left: 0.1rem;
+    }
+  }
+  > span {
+    display: block;
+    font-size: 0.15rem;
+    line-height: 0.4rem;
+    text-indent: 0.15rem;
+  }
+  > .flex-item {
+    position: relative;
+    > div {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      > .Content {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        z-index: 2;
+        .Container {
+          position: relative;
+          > ul {
+            position: relative;
+            overflow: visible;
+            > li {
+              position: relative;
+              padding: 0.1rem 0.15rem;
+              background: #fff;
+              margin-bottom: 0.1rem;
+              align-items: center;
+              > .Icon {
+                width: 0.35rem;
+                height: 0.35rem;
+                position: relative;
+                overflow: hidden;
+                margin-right: 0.1rem;
+              }
+              > .flex-item {
+                position: relative;
+                > div {
+                  width: 100%;
+                  > span {
+                    display: block;
+                    font-size: 0.12rem;
+                    color: #999;
+                    line-height: 0.2rem;
+                    white-space: nowrap;
+                    &:first-child {
+                      font-size: 0.14rem;
+                      color: #333;
+                    }
+                  }
+                }
+              }
+              > span {
+                font-size: 0.16rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/CaiMinGuanLi/ShouYe/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="Page flex-v">
 
-    <a class="flex-h">
+    <router-link :to="{ name: 'CaiMinLieBiao' }" class="flex-h">
       <i class="iconfont iconyonghuguanli"></i>
       <span class="flex-item">全部彩民</span>
       <i class="iconfont iconjiantouright"></i>
-    </a>
+    </router-link>
 
     <span>下单客户</span>
 

src/pages/WoDe/DianPuRenZheng/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="Page">
+    <div class="Content">
+
+      <div>
+        <div class="Line flex-h">
+          <em>*</em>
+          <span>店铺名称</span>
+          <div class="flex-item">
+            <div>
+              <input type="text" placeholder="请输入您的店铺名称">
+            </div>
+          </div>
+        </div>
+        <div class="Line flex-h">
+          <em>*</em>
+          <span>店主联系人</span>
+          <div class="flex-item">
+            <div>
+              <input type="text" placeholder="请输入您的真实姓名">
+            </div>
+          </div>
+        </div>
+        <div class="Line flex-h">
+          <em>*</em>
+          <span>手机号码</span>
+          <div class="flex-item">
+            <div>
+              <input type="text" placeholder="请填写正确的手机号码">
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+export default {
+  name: 'index',
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreText', value: '保存' },
+      { name: 'ShowMainHeaderMore', value: true },
+      { name: 'MainHeaderMoreClick', value: () => { } },
+      { name: 'MainTitleClick', value: () => { } },
+      { name: 'MainHeaderTextColor', value: '#fff' },
+      { name: 'ShowMainTitleIcon', value: false },
+      { name: 'ShowMainHeader', value: true },
+      { name: 'ShowMainTabBar', value: false },
+      { name: 'MainHeaderTitle', value: '店铺认证' },
+      { name: 'MainTabBarActiveId', value: null },
+      { name: 'ShowMainHeaderBack', value: true }
+    ])
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'EditMainData' // 配置页面框架数据
+    ]),
+    Refresh (done) { // 页面下拉刷新
+      window.setTimeout(() => {
+        done()
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/WoDe/DianPuRenZheng/page.scss

@@ -0,0 +1,51 @@
+.Page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  background: #f2f2f2;
+  > .Content {
+    position: relative;
+    overflow: hidden;
+    > div {
+      padding: 0 0.15rem;
+      background: #fff;
+      margin-top: 0.1rem;
+      position: relative;
+      overflow: hidden;
+      &:first-child {
+        margin-top: 0;
+      }
+      > .Line {
+        align-items: center;
+        padding: 0.1rem 0;
+        border-top: 0.01rem solid #f7f7f7;
+        &:first-child {
+          border-top: none;
+        }
+        > em {
+          font-size: 0.12rem;
+          color: #d91e36;
+        }
+        > span {
+          font-size: 0.15rem;
+          line-height: 0.3rem;
+          min-width: 0.9rem;
+        }
+        > div.flex-item {
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            > input {
+              width: 100%;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/WoDe/ShouYe/index.vue

@@ -15,7 +15,7 @@
           <div class="flex-item flex-h">
             <div class="flex-item">
               <div>
-                <span>牛彩店铺 <em>（已认证）</em></span>
+                <router-link tag="span" :to="{ name: 'DianPuRenZheng' }">牛彩店铺 <em>（已认证）</em></router-link>
               </div>
             </div>
             <span>营业额</span>

src/pages/index.vue

@@ -11,7 +11,7 @@
       </span>
       <a class="MainHeaderMore" v-if="ShowMainHeaderMore" @click="MainHeaderMoreClick">
         <span>{{MainHeaderMoreText}}</span>
-        <i class="iconfont" :class="MainHeaderMoreIcon"></i>
+        <i class="iconfont" v-if="MainHeaderMoreIcon !== ''" :class="MainHeaderMoreIcon"></i>
       </a>
     </div>
 

src/pages/index/DingDanChaXun/index.vue

@@ -7,7 +7,17 @@
         <div class="Container">
           <ul>
             <li v-for="(item, index) in 15" :key="index">
-
+              <div class="flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>竞足让球胜平负 <em>| 跟单</em></span>
+                  </div>
+                </div>
+                <span class="Grey">奖金：<em>5.20</em>元</span>
+                <span>已出票</span>
+              </div>
+              <span>订单编号：TE20200810000146179970</span>
+              <span><em>2.00元</em>下单时间：2020-08-20 15:30:22</span>
             </li>
           </ul>
         </div>
@@ -31,9 +41,9 @@ export default {
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
-      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreIcon', value: 'icondaojishi' },
       { name: 'MainHeaderMoreText', value: '' },
-      { name: 'ShowMainHeaderMore', value: false },
+      { name: 'ShowMainHeaderMore', value: true },
       { name: 'MainHeaderMoreClick', value: () => { } },
       { name: 'MainTitleClick', value: () => { } },
       { name: 'MainHeaderTextColor', value: '#fff' },

src/pages/index/DingDanChaXun/page.scss

@@ -1,138 +1,88 @@
 .Page {
-  > a.flex-h {
-    align-items: center;
-    border-bottom: 0.01rem solid #f7f7f7;
-    padding: 0 0.15rem;
-    > i {
-      font-size: 0.15rem;
-      color: #999;
-      &:first-child {
-        color: #d91d36;
-      }
-    }
-    > span {
-      font-size: 0.1rem;
-      line-height: 0.28rem;
-      color: #d91d36;
-      margin-left: 0.05rem;
-    }
-  }
-  > .flex-item {
+  background: #f2f2f2;
+  > .Content {
+    width: 100%;
+    height: 100%;
     position: relative;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      > .Content {
-        width: 100%;
-        height: 100%;
+    overflow: hidden;
+    z-index: 2;
+    .Container {
+      position: relative;
+      padding: 0 0.15rem;
+      > ul {
         position: relative;
-        overflow: hidden;
-        z-index: 2;
-        .Container {
+        overflow: visible;
+        > li {
+          background: #fff;
+          border-radius: 0.06rem;
           position: relative;
-          padding: 0 0.15rem;
-          > ul {
-            position: relative;
-            overflow: visible;
-            > li {
-              background: #fff;
-              border-radius: 0.06rem;
-              position: relative;
-              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-              margin-bottom: 0.15rem;
-              &:first-child {
-                margin-top: 0.15rem;
-              }
-              > .Res {
+          box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+          margin-bottom: 0.15rem;
+          padding: 0.15rem;
+          &:first-child {
+            margin-top: 0.15rem;
+          }
+          > .flex-h {
+            align-items: center;
+            margin-bottom: 0.12rem;
+            > div.flex-item {
+              margin-right: 0.1rem;
+              > div {
+                width: 100%;
                 position: relative;
-                border-bottom: 0.01rem solid #f7f7f7;
-                padding: 0.15rem;
-                > div.Num {
-                  align-items: center;
-                  > .Icon {
-                    width: 0.4rem;
-                    height: 0.4rem;
-                    position: relative;
-                    overflow: hidden;
-                    margin-right: 0.1rem;
-                  }
-                  > span {
-                    width: 0.55rem;
-                    font-size: 0.16rem;
-                    font-weight: bold;
-                    line-height: 0.2rem;
-                    margin-right: 0.1rem;
-                  }
-                  > .flex-item {
-                    > ul {
-                      width: 100%;
-                      font-size: 0;
-                      white-space: nowrap;
-                      > li {
-                        display: inline-block;
-                        vertical-align: middle;
-                        font-size: 0.1rem;
-                        color: #fff;
-                        width: 0.2rem;
-                        height: 0.2rem;
-                        line-height: 0.2rem;
-                        border-radius: 100%;
-                        text-align: center;
-                        background: #d91d36;
-                        margin-right: 0.05rem;
-                        &.active {
-                          background: #1b40c5;
-                        }
-                      }
-                    }
-                  }
-                }
-                > div.Count {
-                  align-items: center;
-                  margin-top: 0.05rem;
-                  > span {
-                    font-size: 0.1rem;
-                    color: #999;
+                overflow: hidden;
+                > span {
+                  font-size: 0.16rem;
+                  font-weight: bold;
+                  line-height: 0.2rem;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: block;
+                  > em {
+                    font-size: 0.12rem;
+                    color: #666;
                     line-height: 0.2rem;
-                    white-space: nowrap;
-                    > em {
-                      color: #d91d36;
-                      font-size: 0.12rem;
-                      font-weight: bold;
-                    }
-                    &:first-child {
-                      margin-left: 0.5rem;
-                      font-size: 0.12rem;
-                      color: #333;
-                      font-weight: bold;
-                    }
-                    &:last-child {
-                      margin-left: 0.25rem;
-                    }
+                    display: inline-block;
+                    margin-left: 0.05rem;
+                    font-weight: normal;
                   }
                 }
               }
-              > .Time {
-                align-items: center;
-                padding: 0.1rem 0.15rem;
-                > span {
-                  font-size: 0.12rem;
-                  color: #666;
-                  line-height: 0.2rem;
-                }
-                > a {
-                  font-size: 0.12rem;
-                  width: 0.8rem;
-                  border: 0.01rem solid #d91d36;
-                  border-radius: 0.04rem;
-                  line-height: 0.28rem;
-                  text-align: center;
-                  color: #d91d36;
-                }
+            }
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #333;
+              &.Red {
+                color: #d91e36;
               }
+              &.Grey {
+                color: #666;
+              }
+              &:last-child {
+                margin-left: 0.1rem;
+              }
+              > em {
+                color: #d91e36;
+                font-weight: bold;
+              }
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            color: #666;
+            line-height: 0.2rem;
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin-top: 0.02rem;
+            > em {
+              font-size: 0.12rem;
+              color: #666;
+              display: inline-block;
+              margin-right: 0.2rem;
             }
           }
         }

src/pages/index/DingDanXiangQing/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="Page">
+
+    <div class="Info">
+
+      <!-- 大乐透 -->
+      <div v-if="Type === 'DaLeTou'">
+        <DingDanXiangQingDaLeTou></DingDanXiangQingDaLeTou>
+      </div>
+
+      <!-- 双色球 -->
+      <div v-if="Type === 'ShuangSeQiu'">
+        <DingDanXiangQingShuangSeQiu></DingDanXiangQingShuangSeQiu>
+      </div>
+
+      <!-- 足球 -->
+      <div v-if="Type === 'ZuQiu'">
+        <DingDanXiangQingZuQiu></DingDanXiangQingZuQiu>
+      </div>
+
+      <!-- 篮球 -->
+      <div v-if="Type === 'LanQiu'">
+        <DingDanXiangQingLanQiu></DingDanXiangQingLanQiu>
+      </div>
+
+      <!-- 排列三 -->
+      <div v-if="Type === 'PaiLieSan'">
+
+      </div>
+
+      <!-- 排列五 -->
+      <div v-if="Type === 'PaiLieWu'">
+
+      </div>
+
+    </div>
+
+    <div class="PhotoInfo">
+      <span>彩票照片</span>
+      <div>
+        <a class="Add">
+          <i class="iconfont iconjia centerLabel"></i>
+        </a>
+        <div>
+          <img src="" class="centerLabel contain" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="Bottom">
+      <a>出票</a>
+      <a>撤单</a>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import DingDanXiangQingDaLeTou from '../../../components/index/DingDanXiangQingDaLeTou'
+import DingDanXiangQingShuangSeQiu from '../../../components/index/DingDanXiangQingShuangSeQiu'
+import DingDanXiangQingZuQiu from '../../../components/index/DingDanXiangQingZuQiu'
+import DingDanXiangQingLanQiu from '../../../components/index/DingDanXiangQingLanQiu'
+export default {
+  name: 'index',
+  data () {
+    return {
+      Type: 'LanQiu', // 订单类型
+      DataLock: false // 数据锁
+    }
+  },
+  computed: {
+  },
+  components: {
+    DingDanXiangQingDaLeTou,
+    DingDanXiangQingShuangSeQiu,
+    DingDanXiangQingZuQiu,
+    DingDanXiangQingLanQiu
+  },
+  created () {
+    this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: 'icongengduo' },
+      { name: 'MainHeaderMoreText', value: '' },
+      { name: 'ShowMainHeaderMore', value: true },
+      { name: 'MainHeaderMoreClick', value: () => { } },
+      { name: 'MainTitleClick', value: () => { } },
+      { name: 'MainHeaderTextColor', value: '#fff' },
+      { name: 'ShowMainTitleIcon', value: false },
+      { name: 'ShowMainHeader', value: true },
+      { name: 'ShowMainTabBar', value: false },
+      { name: 'MainHeaderTitle', value: '订单详情' },
+      { name: 'MainTabBarActiveId', value: null },
+      { name: 'ShowMainHeaderBack', value: true }
+    ])
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'EditMainData' // 配置页面框架数据
+    ])
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/index/DingDanXiangQing/page.scss

@@ -0,0 +1,72 @@
+.Page {
+  background: #f2f2f2;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  > .PhotoInfo {
+    background: #fff;
+    padding: 0.1rem 0.15rem;
+    padding-bottom: 0.15rem;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.1rem;
+    > span {
+      font-size: 0.14rem;
+      color: #333;
+      line-height: 0.4rem;
+      border-bottom: 0.01rem solid #f7f7f7;
+      display: block;
+    }
+    > div {
+      font-size: 0;
+      margin-top: 0.15rem;
+      > a.Add {
+        display: inline-block;
+        vertical-align: middle;
+        width: 0.6rem;
+        height: 0.6rem;
+        border: 0.01rem dashed #ccc;
+        position: relative;
+        overflow: hidden;
+        > i {
+          font-size: 0.22rem;
+          color: #ccc;
+        }
+      }
+      > div {
+        display: inline-block;
+        vertical-align: middle;
+        width: 0.62rem;
+        height: 0.62rem;
+        position: relative;
+        overflow: hidden;
+        background: #ccc;
+        margin-left: 0.1rem;
+      }
+    }
+  }
+  > .Bottom {
+    background: #fff;
+    padding: 0.25rem 0.15rem;
+    position: relative;
+    overflow: hidden;
+    margin-top: 0.1rem;
+    > a {
+      display: block;
+      text-align: center;
+      font-size: 0.16rem;
+      line-height: 0.42rem;
+      border-radius: 0.04rem;
+      border: 0.01rem solid #da1e36;
+      color: #da1e36;
+      box-sizing: border-box;
+      margin-top: 0.15rem;
+      &:first-child {
+        margin-top: 0;
+        background: #da1e36;
+        color: #fff;
+      }
+    }
+  }
+}

src/pages/index/ShouYe/index.vue

@@ -41,7 +41,7 @@
                   </div>
                   <div class="Time flex-h">
                     <span class="flex-item">截止时间：04:49:26</span>
-                    <a>查看详情</a>
+                    <router-link :to="{ name: 'DingDanXiangQing' }">查看详情</router-link>
                   </div>
                 </li>
               </ul>

src/pages/page.scss

@@ -47,6 +47,7 @@
         > span {
           font-size: 0.12rem;
           line-height: 0.4rem;
+          height: 0.4rem;
           display: inline-block;
           vertical-align: middle;
           color: #fff;

src/router/index.js

@@ -26,6 +26,11 @@ let router = new Router({
             path: '/index/DingDanChaXun', // 订单查询
             name: 'DingDanChaXun',
             component: resolve => (require(['@/pages/index/DingDanChaXun'], resolve))
+          },
+          {
+            path: '/index/DingDanXiangQing', // 订单详情
+            name: 'DingDanXiangQing',
+            component: resolve => (require(['@/pages/index/DingDanXiangQing'], resolve))
           }
         ]
       },
@@ -39,6 +44,11 @@ let router = new Router({
             path: '/CaiMinGuanLi/ShouYe', // 彩民管理-首页
             name: 'CaiMinGuanLiShouYe',
             component: resolve => (require(['@/pages/CaiMinGuanLi/ShouYe'], resolve))
+          },
+          {
+            path: '/CaiMinGuanLi/CaiMinLieBiao', // 彩民管理-全部彩民
+            name: 'CaiMinLieBiao',
+            component: resolve => (require(['@/pages/CaiMinGuanLi/CaiMinLieBiao'], resolve))
           }
         ]
       },
@@ -52,6 +62,11 @@ let router = new Router({
             path: '/WoDe/ShouYe', // 个人中心
             name: 'WoDeShouYe',
             component: resolve => (require(['@/pages/WoDe/ShouYe'], resolve))
+          },
+          {
+            path: '/WoDe/DianPuRenZheng', // 个人中心-店铺认证
+            name: 'DianPuRenZheng',
+            component: resolve => (require(['@/pages/WoDe/DianPuRenZheng'], resolve))
           }
         ]
       },